19 Haziran 2013 Çarşamba

Blog Yazılarınızı Jquery İle Hareketlendirin!..

Sayfanızda yazdığınız makalelerin okunması Google'ın arama sonuçlarında sayfalarımızın daha üst sıralarda Çıkmasına yardımcı olur. Sayfamıza gelen okuyucularımız yazılarımızı tam olarak okumadan hemen başka bir sayfaya geçiyorsa yada sitemizden çıkıyorsa makalemiz ne kadar iyi olursa olsun Google Analytics sonuçlarında sayfamızın hemen çıkma oranını yükseltir. Google reklamlarını almak istiyorsak bu hemen çıkma oranının olabildiğince düşük olması gerekmektedir.
Ziyaretçilerimizin sayfamızın sayfamızda zaman geçirmelerini istiyorsak onların dikkatini çekecek yazılar yazmalıyız. Yada makalelerimiz içene onların dikkatini çekecek resimler, videolar gibi bazı şeyler eklemeliyiz. 
Aşağıdaki gibi Jquery ile yazılarımıza animasyonlar ekleyebilir ve okuyucularımızın dikkatini çekerek onların sayfamızda daha çok vakit geçirmelerini sağlayabiliriz.


  • Animasyonlu Yazı Örneği 1
  • Animasyonlu Yazı Örneği 2
  • Animasyonlu Yazı Örneği 3

Yazı içeriklerimizi Jquery ile hareketlendirmeyi nasıl yapacağımıza gelirsek; 
Blogger Kontrol Panelimizden yeni yayın ekle dedikten sonra İçerik eklediğimiz alandan HTML sekmesine aşağıdaki kodları yapıştırıyoruz.

<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>


Daha sonra bu kodların hemen ardına ekleyeceğimiz kodlar;

<hr />
<div id="words">
<ul class="word-container">
<li data-author="" data-easeout="lightSpeedOut">Animasyonlu Yazı Örneği 1</li>
<li data-author="" data-easeout="lightSpeedOut">Animasyonlu Yazı Örneği 2</li>
<li data-author="" data-easeout="lightSpeedOut">Animasyonlu Yazı Örneği 3</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>

<hr />

Burada değiştirmemiz gereken bazı noktalar;
data-author="" kısmında çift tırnak arasına yazar ismimiz yazabiliriz.
Animasyonlu yazı örneği yazan yerlere yazmak istediğimiz yazıları ekliyoruz.
Sonucunda ise yazımızı yayınlıyoruz.

Hiç yorum yok:

Yorum Gönder