Cara Membuat Kutipan Animasi di Postingan Blog

Cara Membuat Kutipan Animasi di Postingan Blog - 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.

atau gunakan kutipan animasi ini di postingan blog untuk memperindah suatu kutipan, contoh nya di isi dengan kata2 yang bijak, kata2 mutiara, hehehe... silahkan di modifikasi saja.

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

2. Taro kode tersebut di bawah postingan, di atas postingan, atau di  tengah postingan juga bisa...
 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 :

• 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.
• Banyak kegagalan dalam hidup ini dikarenakan orang-orang tidak menyadari betapa dekatnya mereka dengan keberhasilan saat mereka menyerah.
• Mereka yang berjiwa lemah tak akan mampu memberi maaf yang tulus. Pemaaf sejati hanya melekat bagi mereka yang berjiwa tangguh.
• Pendidikan mengembangkan kemampuan, tetapi tidak menciptakannya.
• 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.
• Kemenangan yang paling indah adalah bisa menaklukkan hati sendiri.