Nofantz
Widget Recent Post merupakan widget untuk menampilkan daftar Artikel terbaru yang di publish pada blog. Widget ini sangat berguna bagi para pengunjung setia blog kita, bila mana mereka sedang membuka halaman artikel lama, mereka akan langsung tau daftar artikel yang baru saja di publish oleh pemilik blog tanpa harus membuka halaman depan atau hoomepage blog kita.
Disisi lain, widget Recent Post disamping untuk menampilkan daftar artikel terbaru, fungsi lain juga untuk mempercantik tampilan blog kita. Tentu saja bila sebuah blog memiliki penampilan yang menarik, manu navigasi yang lengkap, para pengunjung pastinya akan betah berlama-lama di blog kita.
Terkadang kita hanya ingin membaca artikel sesuai kebutuhan, tetapi ketika melihat pada widget recent post ada judul artikel yang menarik, biasanya kita atau para pengunjung akan membukanya meskipun sebenarnya tidak membutuhkan artikel tersebut.
Langkah-langkah memasang Widget Recent Post Pada Blogspot
Untuk memasang widget recent post, kita hanya perlu menyimpan CSS atau Skin ke Template dan menambahkan Gadget baru di Tata Letak. Silahkan ikuti langkah-langkah berikut.Recent Post ala Mostheme
#1. Langkah Pertama
Copy kode berikut dan paste kan tepat di atas kode ]]></b:skin> atau ]]></b:template-skin>.
/* Recent Posts */
#sidebar .widget-content{background:#32325d;padding:15px 0 0}
#sidebar a:link, #sidebar a:visited{font-weight:normal}#sidebar ul{width:100%;padding:0 0 10px;margin:0}#sidebar3 ul li {margin:0 !important;padding:8px 8px 8px 42px !important;position:relative;counter-increment:num;border-bottom:1px dotted #232346 !important}#sidebar ul li a {font-weight:400 !important;color:#fff !important;text-decoration:none;transition: all 0.3s ease-out 0s !important;line-height:1.2em !important;padding-right:8px !important;display:block}#sidebar3 ul li a:hover {color:#ffce41 !important;}#sidebar3 ul li:before,#sidebar ul li .item-title a{font-weight:300;font-size:12px;color:inherit;text-decoration:none}#sidebar3 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}
#sidebar{margin:0 auto}#sidebar ul li:last-child{border-bottom:none !important}
.widget-content{background:#32325d;padding:15px 0 0}
#2. Langkah Kedua
Tambahkan Widget / Gadget baru, pilih HTML / Javascript pada menu Tata Letak. Kemudian masukkan kode berikut dan Simpan. Tempatkan pada lokasi yang diinginkan. Biasanya Widget Recent Post ini di taruh pada Sidebar.Tata Letak - Tambahkan Gadget - Gatget HTML/Javascript.
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
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+'">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>
Recent Post Warna Warni
#1. Langkah Pertama
Copy kode berikut dan paste kan tepat di atas kode ]]></b:skin> atau ]]></b:template-skin>.
/* Recent Post Wrapper */
#recent-wrapper{display:block;position:relative;overflow:hidden;font-size:15px}
#recent-wrapper ul{margin:0;padding:0;list-style-type:none;}
#recent-wrapper ul li{position:relative;padding:10px 35px 10px 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#recent-wrapper ul li:first-child {background:#E11E28;width:100%}
#recent-wrapper ul li:first-child:after{content:"01";}
#recent-wrapper ul li:first-child + li{background:#FD3C03;width:97%}
#recent-wrapper ul li:first-child + li:after{content:"02";}
#recent-wrapper ul li:first-child + li + li{background:#FECB09;width:94%}
#recent-wrapper ul li:first-child + li + li:after{content:"03";}
#recent-wrapper ul li:first-child + li + li + li{background:#6EBE27;width:91%;}
#recent-wrapper ul li:first-child + li + li + li:after{content:"04";}
#recent-wrapper ul li:first-child + li + li + li + li{background:#149A48;width:88%;}
#recent-wrapper ul li:first-child + li + li + li + li:after{content:"05";}
#recent-wrapper ul li:first-child + li + li + li + li +li{background:#15d3c3;width:85%}
#recent-wrapper ul li:first-child + li + li + li + li +li:after{content:"06";}
#recent-wrapper ul li:first-child + li + li + li + li + li +li{background:#288abb;width:82%}
#recent-wrapper ul li:first-child + li + li + li + li +li +li:after{content:"07";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li +li{background:#863e86;width:79%}
#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li{background:#71264b;width:76%}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li + li +li{background:#502234;width:73%}
#recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}
#recent-wrapper ul li:first-child:after,
#recent-wrapper ul li:first-child + li:after,
#recent-wrapper ul li:first-child + li + li:after,
#recent-wrapper ul li:first-child + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li +li:after
{position:absolute;top:5px;right:5px;line-height:1em;text-align:center;color:rgba(0,0,0,0.2); font-size:23px !important; font-weight:700}
#recent-wrapper ul li a{color:white;text-decoration:none}
#2. Langkah Kedua
Tambahkan Widget / Gadget baru, pilih HTML / Javascript pada menu Tata Letak. Kemudian masukkan kode berikut dan Simpan. Tempatkan pada lokasi yang diinginkan. Biasanya Widget Recent Post ini di taruh pada Sidebar.Tata Letak - Tambahkan Gadget - Gatget HTML/Javascript.
<div id='recent-wrapper' class='recent-wrapper'>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
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='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>
</div>
0 Comments