√ Tutorial Memasang Widget Recent Post / Artikel Terbaru Pada Blogspot

Nofantz at 5/16/2019

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}

Untuk mengubah warna background, ganti kode yang ini #32325d.
.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>

Untuk mengubah jumlah Post yang ditampilkan, ubah bagian ini numPosts = 10;

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>

Untuk mengubah jumlah Post yang ditampilkan, ubah bagian ini numPosts = 10;

Related Posts