Powered by Blogger.

Cara Membuat Kutipan Animasi di Postingan Blog

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.
Bingung buat PayPal klik aja link berikut >> >> -->>Rahasia Membuat Paypal Dalam 3 Hari Untuk FB Ads

Merpati Putih Tak Bersayap - Cara Membuat Kutipan Animasi di Postingan Blog

thumbnail Title: Cara Membuat Kutipan Animasi di Postingan Blog
Published :2014-06-22T20:52:00+07:00
Rating: 5
Reviewer: 3592 Reviews
Cara Membuat Kutipan Animasi di Postingan Blog
Tag : Blogging
6 Komentar untuk "Cara Membuat Kutipan Animasi di Postingan Blog"

wow ternyata gampang banget triknya :D
izin praktek sob :D

keren nih,..bisa di jadiin buat catatan penting dari artikel,.... thanks gan,... mau nyoba nih,...

wah keren nih gan, saya setuju sama bang magel, ini juga bisa dijadikan catatan penting dari artikel.
ntar dicoba deh

Ijin Coba gan.. maskh tutorial nya gan..
By syahril

Bingung ingin belanja online karena takut ditipu-tipu.. Nggak Jaman lagi tuh kaya begituan.. Langsung saja ke www.galeripos.com, tempat belanja on-line mudah dan aman. :)

Back To Top