Blogger Küçük Resimli Son Yayınlanan Yayınlar Widget'i - Blog sitelerinde kullanılan Widget'ların en önemli özelliği ziyaretçilerin sayfalar arasında daha fazla gezinmesini sağlayarak blog sitelerinin hemen çıkma oranını düşürmesidir.
Hemen çıkma oranı, web trafik analizlerinde kullanılan bir terim ve tek sayfalık oturumlara denir. Bir ziyaretçinin blog sitenizi ziyaret ettiği andan itibaren blog sitenizden çıkış yapana kadar sitede geçirdiği süreye denir. Ziyaretçiler blog sitenizde ne kadar fazla zaman geçirirse arama motorları çok ziyaret edilen ve fazla zaman geçirilen bu sayfaları arama sonuçlarında ön sıraya taşır.
Blog sitenize ziyaretçilerin ilgisini çekerek sayfalarınızın tıklanmasına teşvik edebilecek Widget'lar eklemeniz gerekir. Blog sitenizi gereksiz Widget'lar ile meşgul etmeyin.
Bu yazımızda blog ziyaretçilerinin ilgisini çekebilecek Son Yayınlanan Yayınlar Widget'inin blog sitesine nasıl ekleneceği hakkında bilgiler paylaşacağım.
Blog Sitesine Son Yayınlanan Yayınlar Widget'i Nasıl Eklenir?
Blogger hesabınıza giriş yapın blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın ve Widget'i blog sitenize eklemek için aşağıdaki adımları takip edin. Açılan sayfada aranan kodlara daha hızlı erişmek için klavyenizin CTRL+F tuşlarını kullanın.
1- Aşağıdaki CSS kodlarını blogunuzda bulunan </head> kodunun bir satır üzerine ekleyin. Widget'i, kullandığınız tema ile daha uyumlu hale getirmek için CSS kodlarında biraz değişiklik yapabilirsiniz.
<style type='text/css'>
/*<![CDATA[*/
ul#rcnt-pts{width:100%;max-width:300px;margin:0 auto;padding:0!important;list-style-type:none}
ul#rcnt-pts li{background:#fff;padding:0!important;margin-bottom:10px;overflow:hidden;width:100%;height:auto;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-box-shadow:2px 2px 3px rgba(0,0,0,.05);-ms-box-shadow:2px 2px 3px rgba(0,0,0,.05);box-shadow:2px 2px 3px rgba(0,0,0,.05);}
ul#rcnt-pts li img{width:100px;height:60px;margin:0 10px 0 0;float:left;}
ul#rcnt-pts li .title_post{padding:10px!important;line-height: 1;position:relative;margin-left:90px;}
ul#rcnt-pts li a{color:#444;font-family:inherit;line-height: 20px;font-size:14px;font-weight:500;text-decoration:none}
ul#rcnt-pts li a:hover{color:#FF1744;}
ul#rcnt-pts:after{content:"";display:block;clear:both}
/*]]>*/
</style>2- Aşağıdaki javaScript kodunu blogunuzun </body> kodunun bir satır üzerine ekleyin.
<script type='text/javascript'>
//<![CDATA[
var homePage = window.location.origin,numPosts = 5;
function recentPosts(e){if(document.getElementById("rcnt-pts")){for(var t,s,r=e.feed.entry,n="",a=document.getElementById("rcnt-pts"),l=0;l<numPosts;l++){for(var c=0;c<numPosts;c++)if("alternate"==r[l].link[c].rel){s=r[l].link[c].href;break}"media$thumbnail"in r[l]?u=r[l].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+(\-c)?\//,"/w100-h60-c/"):u="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAA8CAAAAAC1VEASAAABJklEQVRYw+3XsY7DIAwG4L7/21gGhkyRMmRhZOnGxJKBiYWBHCVVS6LqEh34pEr+x0Tik8CxyU39Q26MMMIII4ww8oiEZwQhMoS1JM6CDIGnkTNIAqRslHkZaYEPwTZEzktOWivlQ1wbUm3UL0lGNCHRWWvdmWKwDZkAYaRGZqnkVK0XnHuf0T3HdkesKuWkt6NKAhGmzkgcYftMBNiCPOqvM5KGdxEVhQLReCjuhAAwdkUC1G+Ezo+894vvihxWgkRRwtO+N+JCgRwaMLivRQ4DCzwBkux+JUnSu+KuhNHQNMh7pUiViLqwfikSPVmrN9udSMIQCOdJ0AoBR0s8tNYYKcYv0I/fGHKIEX/lSrTqpiuRUuZCToxzRFwJ/wQxwggjjPwtP5tBZaygmJzgAAAAAElFTkSuQmCC";var t=r[l].title.$t;n+='<li class="rcnt-pts"><img src="'+u+'" alt="'+t+'"><div class="title_post"><a href="'+s+'" title="'+t+'" target="_blank">'+t+"</a></div></li>"}a.innerHTML=n}}var rcp=document.createElement("script");rcp.src=homePage+"/feeds/posts/summary?alt=json-in-script&orderby=published&max-results="+numPosts+"&callback=recentPosts",document.getElementsByTagName("head")[0].appendChild(rcp);
//]]>
</script>Widget'te görünün yayın sayısını ayarlamak için kod içerisinde (5) belirtilen yayın sayısını değiştirebilirsiniz.
Eğer blogunuzda başka blogunuzun yayınlarını yani sonyayınlarını görüntülemek istiyorsanız, javaScript kodu içerisinde bulunan window.location.origin bu kodun yerine diğer blogunuzun URL'sini "http://saglikveguzellikonerileri.blogspot.com/" bu şekilde eklemelisiniz.
Düzenlemeniz bitince şablonu kaydedin.
3- Blogunuzun kumanda panelinden Yerleşim > Sideber'a (Kenar çubuğuna) > Gatget ekle > HTML/JavaScript içerisine aşağıdaki kodu ekleyin ve kaydedin.
<ul id="rcnt-pts"></ul>Faydalı Bilgiler;
Bu Widget'e benzer bir çok Widget tasarımı var. Fakat bu Widget'in diğerlerinden bir farklı özelliği javaScript kodunu
</body> kodunun üzerinde kullanılabilmesidir. Eğer blogunuzun </head> kodunun üzerinde jQuery ve javaScript kodları bulunuyorsa, bu kodları </body> kodunun üzerine ekleyerek çalışıp çalışmadığını kontrol edin. Çünkü blogunuzun daha hızlı yüklenebilmesi için bu kodları </body> kodunun üzerine eklemeniz fayda sağlayacaktır.Google PageSpeed Tools ile blogunuzu kontrol ettiğinizde muhtemelen size "Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın" gibi bir uyarı verecek.
jQuery ve javaScript kodlarının
</body> kodunun üzerine eklenmesi çözüm mü? Elbette tam bir çözüm değil, fakat sayfanız ilk yüklendiği zaman süresinde gecikmeleri biraz olsun engellemek için fayda sağlar. Bir de şunu bilmenizi isterim, CSS kodlarının her zaman jQuery ve javaScript kodlarından önce yüklenmesi gerekir, bu sıralamaya uymak için de jQuery ve javaScript kodlarının </body> kodunun üzerine eklenmesi daha uygun olacaktır.jQuery ve javaScript kodları ile ilgili önemli olan diğer özellik de HTTPS uyumlu/destekli olup olmadığı. Eğer blogunuzda kullandığınız bu kodlar HTTPS destekli değilse ve blogunuz için çok da önem arz etmiyorsa bu tür kodların kaldırılması blogunuzun "Uncaught TypeError" hatası almasını engellemiş olur.
Bu yazımız ile ilgili daha fazla bilgi ve sorularınız için yorum bırakabilirsiniz.
0 komentar: