Beranda  ›  Blogger  ›  Tutorial Blog  ›  Widget

Cara Membuat Animasi Pesan dengan JQuery Rotator Di Blogger

by -
Animasi-Pesan
Halo ? ada yang baru nih ! apa ? ini nih yang keren dan amazing :D haha.. Kadang-kadang orang selalu memasukan kutipan kutipan atau kata-kata bijak didalam blog atau postnya, terutama blog yang bertema / mempunyai niche motivasi. Walaupun seseorang datang dengan niat ingin belajar motivasi, mungkin karena dia sedang galau dan/atau sebagainya, saat dia mulai jenuh dengan artikel anda yang memuat semua kutipan bagus tetapi tidak rapi dan memberi kesan bosan. Pengunjung mungkin hanya sesaat datang dan langsung pergi. Anda pasti tau bagaimana sifat anda saat sedang down / galau, kebanyakan sih menjadi pemalas. Maksudnya malas membaca, malas apapun itu. Jadi saat mereka mencari sebuah motivasi di internet, kita sebagai webmaster harus memberikan kenyaman dan gaya yang berbeda (keren dan enak dipandang) yang membuat si pengunjung galau ini betah berada di blog kita dan hilanglah kegalauannya, haha..

Sekarang, yang akan saya bagikan adalah tentang bagaimana cara membuat animasi pesan yang keren. Inilah yang saya sebut tadi dapat membuat si pengunjung tertakjub, nyaman dan yang penting betah berada di blog kita. Seakan akan itu pesan/kutipan dari Tuhan bukan dari webmaster. Widget ini berguna menghemat halaman post (post berisi kutipan panjang). Lihat aja preview widgetnya dibawah ini:
  • Jangan belajar memasak saat lagi Puasa, ntar malah dicobaiin lagi makanannya, batal nantinya.
  • Menolaklah kalo diajar berenang saat anda sedang mules, ntar kentut lagi di kolamnya :D
  • Jangan lupa membaca Basmallah saat anda ingin mengerjakan sesuatu
  • Hidup di dunia itu lama, jika anda mempunyai umur seribu tahun :D
  • Progress is the product of human agency. Things get better because we make them better. Things go wrong when we get too comfortable, when we fail to take risks or seize opportunities.
  • You can't have a light without a dark to stick it in.
  • You must not lose faith in humanity. Humanity is an ocean; if a few drops of the ocean are dirty, the ocean does not become dirty.
  • When I do good, I feel good; when I do bad, I feel bad, and that is my religion.
  • Half the money I spend on advertising is wasted; the trouble is I don't know which half.

Gimana ? Sae (bagus) teu ? Lamun sae, sok pasang atuh :D. Untuk pemasangan pertama-tama masuk ke akun blogger anda. Untuk pemasangan itu terserah anda, dapat anda pasang di atas postingan atau dibawah postingan atau bisa juga di sidebar blogger. Kalo ingin memasang di atas atau dibawah postingan anda tinggal masuk ke Template --> edit HTML --> cari kode <data:post.body/>. Simpan kode dibawah ini, jika ingin diatas postingan maka simpan diatas <data:post.body/>, tetapi jika anda ingin menyimpannya dibawah postingan maka simpan dibawah
<link href="https://googledrive.com/host/0B9aCNMbcS5Bld2FhVHNlM0lnUXc" rel="stylesheet"></link><script src="https://googledrive.com/host/0B9aCNMbcS5BlaFJWN284Z2JfWGc" type="text/javascript"></script> <script> jQuery(document).ready(function($) {  $('#words').quoteRotator(); }); </script>
<div id="words">

<ul class="word-container">
<li data-author="---  Nama pengarang" data-easeout="lightSpeedOut">Isi tulisan</li>
<li data-author="---  Nama pengarang" data-easeout="fadeOutDown">Isi tulisan</li>
<li data-author="---  Nama pengarang" data-easeout="fadeInDown">Isi tulisan</li>
<li data-author="---  Nama pengarang" data-easeout="bounceOut">Isi tulisan</li>
<li data-author="---  Nama pengarang" data-easeout="bounceIn">Isi tulisan</li> 
<li data-author="---  Nama pengarang" data-easeout="lightSpeedIn">Isi tulisan</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
</div>
</div>
Tetapi kalo mau pasang disidebar atau diheader, anda cukup masuk ke Layout --> add gadget --> add HTML/Java script --> masukan kode diatas. Keterangan :
- Kode berwarna orange adalah nama pengarang / penulis dari isi tulisannya.
- Kode berlatar kuning adalah efek yang akan terjadi pada baris tulisan.
- Kode berwarna merah adalah Isi tulisan anda.


Syarat untuk menjalankan animasi pesan Rotator diatas adalah memasang jquery terbaru, saya cek menggunakan jquery 1.3.2 itu tidak jalan (tidak support). Jadi gunakan jquery versi terbaru. Baca DISINI untuk lebih lengkapnya lagi. Atau anda dapat memasang jquery yang saya pakai saat ini:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js' type='text/javascript'/>
Hapus jquery yang ada ditemplate anda yang versi sebelumnya. Cari menggunakan CTRL+F  dengan kode jquery.

Kata penutup

Bagaimana? sangat mudah sekali bukan? Jadi kesimpulannya, Saya mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Cara Membuat Animasi Pesan dengan JQuery Rotator Di Blogger. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan. 


Sekian post tentang Cara Membuat Animasi Pesan dengan JQuery Rotator Di Blogger. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!

 credits  : mybloggerlab | Syed Faizan Ali


Share this

Related Posts

About Contact Disclaimer Privacy Policy Sitemap
close