Cara Menambahkan Kutipan Animasi

Cara Menambahkan Kutipan Animasi

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.

DEMO

Disini saya akan berbagi cara menambahkan kutipan dengan animasi yang menarik ke dalam postingan blog, caranya sebagai berikut :

1. Buat postingan terlebih dahulu > Buka tab HTML dan tambahkan kode di bawah ini :

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

2. Setelah menambahkan kode diatas, tambahkan juga kode di bawah ini setelah kode diatas

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

3. Simpan postingan dan lihat hasilnya.


Sobat bisa mengganti kata-kata pada langkah kedua diatas dengan kata-kata sendiri.


Selamat mencoba.

Source : http://www.probloggertricks.com/2014/02/how-to-add-a-animated-quote-to-blogger-blog.html