Ekim 27, 2013

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


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

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. Daha önce bu konuya benzer paylaştığım makeleyi Blogger İçin "Bu Mesaj Alıntıdır" Kutusu'nu ziyaret edebilirsiniz.

Ş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="---  Bloglama Zamanı" data-easeout="lightSpeedOut">Animasyonlu Alıntı Eklentisi 1</li>

<li data-author="---  Bloglama Zamanı">Animasyonlu Alıntı Eklentisi 2</li>

<li data-author="---  Bloglama Zamanı" data-easeout="fadeOutDown">Animasyonlu Alıntı Eklentisi 3</li>

<li data-author="---  Bloglama Zamanı" data-easein="fadeInDown">Animasyonlu Alıntı Eklentisi 4 </li>

<li data-author="---  Bloglama Zamanı" data-easeout="bounceOut">Animasyonlu Alıntı Eklentisi 5</li>
<li data-author="---  Bloglama Zamanı" data-easein="bounceIn">Animasyonlu Alıntı Eklentisi 6</li>

<li data-author="---  Bloglama Zamanı" 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;
  • Bloglama Zamanı 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...

0 yorum :

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.