CARA MEMBUAT ANIMASI PESAN DENGAN JQUERY ROTATOR DI BLOGGER

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). 

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 dibawahnya.

<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="---  Nabi Muhammad SAW" data-easeout="lightSpeedOut">Allah tidak melihat bentuk rupa dan harta benda kalian, tapi Dia melihat hati dan amal kalian</li>
<li data-author="---  Nabi Muhammad SAW" data-easeout="fadeOutDown">Pahlawan bukanlah orang yang berani menetakkan pedangnya ke pundak lawan, tetapi pahlawan sebenarnya ialah orang yang sanggup menguasai dirinya dikala ia marah</li>
<li data-author="---  Malik bin Dinar/Hilyatul Auliyaa’" data-easeout="fadeInDown">Sesungguhnya apabila badan sakit maka makan dan minum sulit untuk tertelan, istirahat dan tidur juga tidak nyaman. Demikian pula hati apabila telah terbelenggu dengan cinta dunia maka nasehat susah untuk memasukinya</li>
<li data-author="---  Ibnu Mas’ud" data-easeout="bounceOut">Setiap orang di dunia ini adalah seorang tamu, dan uangnya adalah pinjaman. Tamu itu pastilah akan pergi, cepat atau lambat, dan pinjaman itu haruslah dikembalikan</li>
<li data-author="---  Ibnu Mas’ud" data-easeout="bounceIn">Sabar memiliki dua sisi, sisi yang satu adalah sabar, sisi yang lain adalah bersyukur kepada Allah</li>
<li data-author="---  Khalifah ‘Umar" data-easeout="lightSpeedIn">Raihlah ilmu, dan untuk meraih ilmu belajarlah untuk tenang dan sabar</li>
<li data-author="---  Ar Rabi’ bin Anas/ Jami’ al ulum wal Hikam, Ibnu Rajab" data-easeout="lightSpeedIn">Tanda cinta kepada Allah adalah banyak mengingat (menyebut)-Nya, karena tidaklah engkau menyukai sesuatu kecuali engkau akan banyak mengingatnya</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. 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.

Sumber: http://ujangyoyo.blogspot.com/2013/06/cara-membuat-animasi-pesan-dengan.html.