Blogger'a Animasyonlu Alıntı Yazısı Eklemek

13:36 | 0 yorum

Blogunuza ister konu içerisine ister ana sayfanızın bir köşesine animasyonlu alıntı yazısı ekleyebilirsiniz. Bu sevdiğiniz bir yazarın sözü olabilir, şiirin mısrası olur ya da konu içerisinde konuya örnek amaçlı gösterebileceğiniz bir cümle olabilir. jQuery ile hazırlanmış sade ve kullanımı kolay bir eklenti.

Şimdi gelelim Animasyonlu Alıntı nasıl kullanılır onu anlatmaya.

1.Adım: Aşağıdaki Javascript kodlarını temanızın şablon bölümünde ]]></b:skin> kodunun altına ekleyin.
<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>

2.Adım: Kodu ekledikten sonra şablonu kaydedip çıkabilirsiniz. Animasyonlu yazıları etkin hale getirebilmek için bir makale oluşturmamız gerekiyor. Bunun için blogunuzdan 'yeni yayın oluştur'arak aşağıdaki kodu HTML bölümüne ekleyin.

<div id="words">

<ul class="word-container">

<li data-author="---  Türkiye Ajans" data-easeout="lightSpeedOut">Animasyonlu Alıntı Eklentisi 1</li>

<li data-author="---  Türkiye Ajans">Animasyonlu Alıntı Eklentisi 2</li>

<li data-author="---  Türkiye Ajans" data-easeout="fadeOutDown">Animasyonlu Alıntı Eklentisi 3</li>

<li data-author="---  Türkiye Ajans" data-easein="fadeInDown">Animasyonlu Alıntı Eklentisi 4 </li>

<li data-author="---  Türkiye Ajans" data-easeout="bounceOut">Animasyonlu Alıntı Eklentisi 5</li>
<li data-author="---  Türkiye Ajans" data-easein="bounceIn">Animasyonlu Alıntı Eklentisi 6</li>

<li data-author="---  Türkiye Ajans" data-easein="lightSpeedIn">Animasyonlu Alıntı Eklentisi 7</li>

</ul>

<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
Yukarıdaki metinde değiştirebileceğiniz alanlar;
  • Türkiye Ajans yazan yere, alıntı yaptığınız kişi, yazar vs ne ise onun adını 
  • Animasyonlu Alıntı Eklentisi yerine de alıntı yaptığınız konu ne ise onu yazabilirsiniz.
NOT | Kodun önizlemesini resme aktardım. Nasıl göründüğüne bakabilirsiniz.

Şimdilik bu kadar. Herkese kolay gelsin, iyi bloglamalar...

Kategori: , , , ,

0 yorum