Blogspot ile oluşturmuş olduğumuz blogumuzu gün geçerek tanınırlığını arttırdığımızda ise ziyaretçilerimiz bizlerden hep daha iyi bir kullanıcı deneyimi oluşturmamızı isterler. Bu yüzden blogger son yayınlananlar widget oluşturma işlemi sayesinde birazda olsa göze hoş gelen ve kullanıcıya hitap etmiş olacağız.
Blogger son yazılar eklentisi sayesinde ziyaretçilerimiz arama motoru sayesinde dahi ulaşmış olsa bile sitenize sağ tarafta yer alacak olan blogspot son yazılar widget‘ı sayesinde diğer yazılarınıza ziyaretçiyi çekebilir ve blogunuzda daha çok zaman harcamasını sağlayabilirsiniz.
Blogger Son Yazılar Widget’ı Nasıl Oluşturulur ?
Oluşturmuş olduğumuz diğer widgetlar gibi bu işlemde aslında blogun temasına bir kaç kod eklemekten ibaret olacaktır. Bir kaç kod eklendikten sonrasında ise gerekli olan widget’ı oluşturup blogunuzda yayına alabilirsiniz. Temanıza ekleyeceğiniz kodlardan dolayı bozukluklar meydana gelmesini istemiyor iseniz bir yedeğini bilgisayarınıza indirebilirsiniz. Blogspot son yazılar widget oluşturma için ise yapacağımız bir kaç basit işlem aşağıda ki gibidir :
- Blogger son yazılar widget’ı ekleyeceğeğiniz blogun yönetim paneline girin.
- Yönetim panelinin sol tarafında bulunana “Tema” butonuna tıklayınız.
- Tema butonuna tıkladıktan sonrasında ise “HTML’i Düzenle” butonuna tıklayın.
- Ekte vermiş olacağım kodları “</head>” kodunun üzerine ekleyin.
<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>- Bir altta ki ekte vermiş olduğum kodları ise “</body>” kodunun üzerine ekleyin.
<script type='text/javascript'> //<![CDATA[ var homePage = window.location.origin,numPosts = 10; 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>- Üst tarafta vermiş olduğum kodda eğer başka bir sitenin son yazılarını göstermek istiyor iseniz “window.location.origin” i istediğiniz sitenin adresi ile değiştirebilirsiniz. Örnek olarak; “homePage = “//blogadı.blogspot.com/”,numPosts = 10;” şeklinde değiştirebilirsiniz. Yazı sayısını değiştirmek istiyor iseniz “10” sayısını dilediğiniz bir değer ile değiştirebilirsiniz.
Artık başarılı bir şekilde gerekli olan kodları kaydettikten sonrasında ise sıra geldi widget olarak eklemeye. Widget olarak eklemek için ise yapmamız gereken çok basit bir işlem kalacaktır. Blogspot son yazılar widget ekleme işlemi için ise :
- Yönetim panelinin sol tarafında yer alan “Yerleşim” butonuna tıklayınız.
- Her hangi bir sidebar’a gelerek “Gadget Ekle” butonuna basınız.
- Ardından karşınıza gelecek olan yerden “HTML/JavaScript” seçeneğini seçiniz.
- Ekte vermiş olduğum kodu buraya yapıştırınız.
<ul id="rcnt-pts"></ul>
- Bu işlemi yaptıktan sonrasında ise “Kaydet” butonuna basınız.
Artık başarı ile Blogspot son yayınlananlar eklentisini yapmayı başarmış bulunuyoruz. Bundan sonrasında ise eğer blogumuzu görüntülediğimiz de başarı ile kodu eklemiş isek çalıştığını göreceğiz. Eğer her hangi bir sorun ile karşılaşıyor iseniz almış olduğunuz yedekten eski tema kodlarına geri dönerek bu işlemi yeniden yapmayı deneyebilirsiniz.