Cara memasang widget recent posts di sidebar seperti bungfrangki

Bagikan :

Facebook

Tweet

Linkedin

Pinterest

Halo sobat  ,  beberapa hari yang lalu saya berkunjung ke blog bungfrangki , dan saya melihat-lihat beberapa widget pada blog tersebut . Lalu saya tertarik dengan widget recen post pada sidebarnya dan mencoba mengutak – atik mencari script template tersebut dan akhirnya saya menemukan script widget recent post itu yang kini akan saya bagikan kepada sobat semua .

Oke langsung saja kita masuk ke cara pemasangannya :

1.       Buka Blogger lalu masuk ke template > edit HTML

2.       Copy kode berikut dan letakkan tepat di atas </style> atau ]]></b:skin>

{margin:0 auto 20px;padding:0}

}{background:#3ec980;border-radius:5px}#h3{border-radius:5px 5px 0 0}# a:link,# a:visited{font-weight:normal}# ul{width:100%;padding:0 0 10px}#ul li{margin:0!important;padding:8px 8px 8px 42px!important;position:relative;counter-increment:num;border-bottom:1px dotted #31c067!important}#ul li a{font-weight:normal!important;color:#fff!important;letter-spacing:0.5px;text-decoration:none;transition:all 0.3s ease-out 0s!important;line-height:1.4em!important;padding-right:8px!important}# ul li a:hover{color:#ffce41!important;}# ul li:before,#ul li .item-title a{font-weight:300;font-size:12px;color:inherit;text-decoration:none}# ul li:before{content:counter(num);display:block;position:absolute;font-size:20px!important;top:9px;left:10px;font-weight:bold!important;font-style:italic;color:#ffce41!important}#{margin:0 auto}# ul li:last-child{border-bottom:none!important}

3.  Simpan Template Sobat .

4.  Masuk ke tata letak dan copy kode berikut lalu letakkan pada widget sidebar blog sobat

<h3 class="title">Most Recent Post</h3>

<div class="widget-content">

<ul id="recent-posts"><li class="recent-posts"></li></ul>

<script>

//<![CDATA[

var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){

var homePage = "//www.bungfrangki.com/",

numPosts = 10;

function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}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>

</div>

5.  Silahkan ganti url bungfrangki.com dengan url blog sobat sendiri .

Keterangan : ganti angka 10 pada numPosts = 10; dengan jumlah posting yang ingin sobat tampilan pada widget recent post sobat .

Jika widget tidak berjalan sempurna ,silahkan sobat ganti id dengan id blog sobat atau sobat silahkan optimasi selebihnya , terimakasih ..

Tag : Adsense, Blog, SEO