Terkadang dalam sebuah artikel kita melihat sebuah kata-kata yang berada
dalam tanda kutip baik itu di awal paragraf maupun di akhir paragraf.
Isi dari kutipan tersebut bisa berupa catatan penting, kata-kata
inspiratif atau kata-kata lain yang menggambarkan isi sebuah artikel.
oke mari kita langsung ke bagian tutorialnya saja.
1. Buat dulu postingan nya sob, agar tidak berantakan... jika sudah, masukan kode nya di bagian HTML
<link href="https://googledrive.com/host/0Bxyf5AC_ilPwRFpfcHhFSXEzXzg" rel="stylesheet"></link>2. Taro kode tersebut di bawah postingan, di atas postingan, atau di tengah postingan juga bisa...
<script src="https://googledrive.com/host/0Bxyf5AC_ilPwYUlfNHRkbjh6ekk" type="text/javascript"></script>
<script>
jQuery(document).ready(function($) {
$('#words').quoteRotator();
});
</script>
<!-- Ani Quote -->
<div id="words">
<ul class="word-container">
<li data-author="--- Jose Mujica " data-easeout="lightSpeedOut">Saya disebut presiden termiskin di dunia, tetapi saya tak merasa miskin. Orang miskin adalah mereka yang bekerja hanya untuk menjaga gaya hidup mewahnya dan selalu menginginkan lebih.</li>
<li data-author="--- Thomas Alva Edison " data-easeout="fadeOutDown"> Banyak kegagalan dalam hidup ini dikarenakan orang-orang tidak menyadari betapa dekatnya mereka dengan keberhasilan saat mereka menyerah.</li>
<li data-author="--- Mohandas Gandhi " data-easein="fadeInDown">Mereka yang berjiwa lemah tak akan mampu memberi maaf yang tulus. Pemaaf sejati hanya melekat bagi mereka yang berjiwa tangguh.</li>
<li data-author="--- Voltaire " data-easeout="bounceOut"> Pendidikan mengembangkan kemampuan, tetapi tidak menciptakannya.</li>
<li data-author="--- Soekarno " data-easein="bounceIn"> Laki-laki dan perempuan adalah sebagai dua sayapnya seekor burung. Jika dua sayap sama kuatnya, maka terbanglah burung itu sampai ke puncak yang setinggi-tingginya; jika patah satu dari pada dua sayap itu, maka tak dapatlah terbang burung itu sama sekali.</li>
<li data-author="--- La Fontaine " data-easein="lightSpeedIn"> Kemenangan yang paling indah adalah bisa menaklukkan hati sendiri.</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
</div>
</div>
WARNA :
Hijau : Adalah nama author
Merah : Kata-kata
Kuning : Jenis animasi
silahkan di utak atik sesuai kreasi anda, hehehe
Source : http://www.probloggertricks.com/2014/02/how-to-add-a-animated-quote-to-blogger-blog.html
Spoiler of DEMO :
widih keren banget demonya beberapa efeknya cool :D kirain cuma ada efek marquee doang ternyata efek lainnya banyak juga ... mau nyoba tapi pahami codingnya dulu deh :D ...
BalasHapuskalo marquee text nya cuma jalan doang bro kaya ini nih ~> :8: :ngakak:
Hapuswow, keren gan kalimatnya, ijin nyobak ya gan. , .
BalasHapusokeh :D
HapusKeren Gan :D
BalasHapusManteb Bisa Gerak Pula , Coba Dulu Nih :D
keren gan, jarang nih tutor. ane bisanya kalo di powerpoint wkwkwk
BalasHapusapanya yang di powerpoint gan ? :malu:
HapusKayaknya Keren tuh..... Ijin Coba ya gan....
BalasHapuskayaknya keren nih, wah ijin nyoba ya? :-) thanks for share it
BalasHapusyoi, sama sama gan :malu:
Hapusnyoba'in dulu gan
BalasHapuswah kren nih langsung dicoba
BalasHapusthanks for share
iya gan, silahkan mencoba...
Hapussama sama :)
Keren Efeknya :ngakak: , Textnya Bisa Gerak-Gerak Kaya Gitu.
BalasHapus:ngakak: iya gan, efek marquee mah udah jadul gan :p
Hapus:top: Keren Abis...... :piss: Izin Coba, Buat Nanti Post Kata - Kata :malu: Bijak :wow:
BalasHapussilahkan gan, yaelah gan sampe kata kata bijak segala :p
Hapusinfonya keren bro :)
BalasHapuswah kayaknya matep nih buat blog ane , ijin coba gan :D
BalasHapusbuat buat ane jelek gitu ? :shutup: oke oke silahkan :D
Hapuswah keren sob , langsung ane coba dah
BalasHapusKeren nih gan kalau bisa di modifikasi lagi :D Ane simpan scriptnya ya :)
BalasHapusdi modif gimana lagi gan ? :malu:
Hapusoke silahkan, awas jatoh scriptnya.. simpen di lemari gan :ngakak:
Keren nih bro, bisa di implementasi di beberapa element lagi..
BalasHapusmantap...
sip, silahkan di modif aja sist kalo bisa sih :malu:
HapusWOW, keren sob animasinya,
BalasHapuspernah ane coba di salah satu post.........tapi karena mengganggu ya ane hapus :3
BalasHapusmaka nya pasang seperlu nya aja :ngakak:
Hapuswah mantaap tutorialnya gan
BalasHapuswah gila , keren nih baru lihat .
BalasHapusijin praktekin di blog saya ya gan , terimakasih sudah sharing .
silahkan di praktekin gan, sama sama..
Hapusmakasih juga ya udah mampir :D
kasih demonya gan biar lebih tau lagi...
BalasHapusnih pasti ga baca / ga liat isi artikel sampe habis :cd:
Hapuslangsung scrool ke bawah terus comment :think: :mad: