Cara Membuat Animasi Quoted di Blog



Cara Membuat Animasi Quoted di Blog
Di artikel sebelumnya Saya sudah membahas tentang bagaimana Cara Membuat Google Search Box. Pada artikel kali ini Saya akan memberikan tutorial tentang Cara Membuat Animasi Quoted di Blog. Quoted biasanya merupakan sebuah kutipan kalimat yang baik untuk memotivasi orang banyak. Nah kali ini Saya akan memberikan cara untuk mendesign quote tersebut dalam bentuk animasi. Jadi kita akan satukan beberapa quote menjadi satu animasi bernuansa flash.


Untuk Membuatnya tergantung temen-temen. Mau dibuat di postingnya atau dibuat sebagai widget untuk mempermanis blog temen-temen. Misal temen-temen ingin menambahkan di posting temen-temen maka silahkan temen-temen pilih Entry New Post dan kemudian pilih Tab HTML. Temen-temen silahkan tambahkan kode berikut ini : 

<link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link>
<script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script>
 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>


Setelah kode diatas terus letakkan kode di bawah ini tepat di bawah kode di atas.


<!-- Probloggertricks Quote Rotator -->
<div id="words">
<ul class="word-container">
<li data-author="--- Motivator" data-easeout="lightSpeedOut">ISI QUOTE PERTAMA<li>
</li>
<li data-author="--- Motivator " data-easeout="fadeOutDown">ISI QUOTE PERTAMA</li>
<li data-author="---  Motivator " data-easein="fadeInDown">ISI QUOTE KEDUA</li>
<li data-author="---  Motivator " data-easeout="bounceOut">ISI QUOTE KETIGA</li>
<li data-author="---  Motivator " data-easein="bounceIn">ISI QUOTE KEEMPAT </li>
<li data-author="---  Motivator " data-easein="lightSpeedIn">ISI QUOTE KELIMA</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>


Jika Benar maka kira-kira akan menjadi seperti di bawah ini : 


<link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link>
<script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script>
 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>



<!-- Probloggertricks Quote Rotator -->
<div id="words">
<ul class="word-container">
<li data-author="--- Motivator" data-easeout="lightSpeedOut">ISI QUOTE PERTAMA<li>
</li>
<li data-author="--- Motivator " data-easeout="fadeOutDown">ISI QUOTE PERTAMA</li>
<li data-author="---  Motivator " data-easein="fadeInDown">ISI QUOTE KEDUA</li>
<li data-author="---  Motivator " data-easeout="bounceOut">ISI QUOTE KETIGA</li>
<li data-author="---  Motivator " data-easein="bounceIn">ISI QUOTE KEEMPAT </li>
<li data-author="---  Motivator " data-easein="lightSpeedIn">ISI QUOTE KELIMA</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>


Kemudian silahkan Save dan Publikasikan.

Silahkan ubah kata motivator dengan Nama Orang yang mengeluarkan quote tersebut
Silahkan ubah kalimat isi quote dengan Quote yang disampaikan oleh orang yang bersangkutan Jika ada pertanyaan silahkan melalui kolom komentar di bawah artikel ini :)

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Disqus Comments