Cara Membuat Kutipan Animasi

Ardi21_ansyah

Blogger, Widget

Selasa, 15 Juli 2014

Belum ada komentar

Cara Membuat 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.

Contoh Kutipan Animasinya

• Aku tak peduli kalaupun harus mati ketika meraih mimpiku, ku tak akan menyesalinya.
• Cinta adalah badai.
• Impian manusia tak akan pernah berakhir.
• Mengetahui apa itu kemenangan dan kekalahan, berlari dan menangis, itu adalah cara menjadi laki laki sejati.
• Seorang manusia akan menjadi lebih kuat seiring halangan dan ombak yang menerpa menghadangnya.
• kekuatan yang melampaui pikiran manusia.. kekuatan yang mampu membuat segalanya tidak mungkin menjadi mungkin.. badai yang menghancurkann segalanya.. itu lah Cinta.. !!
• Franky "Tidak ada kejahatan dalam eksistensi seseorang."
• Aku tidak masalah ditertawakan atau diperlakukan seperti apapun, tetapi orang yang menyakiti teman atau saudara, tidak bisa kumaafkan.
• Jimbei "Jangan hanya menghitung apa yang telah menghilang!! Pikirkan apa saja milikmu yg masih tersisa!!"
• Keajaiban hanya akan datang pada mereka yang memiliki keinginan untuk mendapatkannya.

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.