Membuat Kolom Widget Recent Post

Membuat Kolom Widget Recent Post adalah artikel lanjutan dari memasang recent post di Blogger yang sudah tidak berfungsi lagi. Jadi, kita akan membuat kolom widget recent post sendiri dan tentunya menggunakan kode script dan memasang di didalam template blog kita. Kolom widget recent post ini merupakan buatan mas Kolis karena saya sendiri sampai saat ini belum bisa membuat kode recent post yang bisa tampil diseluruh bagian blog dan tidak melulu tampil di sidebar. Sampai saat ini saya mencoba membuat sendiri, bagaimana recent post bisa tampil didalam artikel blog!

Untuk membuat kolom widget recent post agar ada dibagian sidebar, silahkan anda ikuti langkah-langkah berikut ini

1. Silahkan masuk dulu ke akun Blogger anda
2. Masuk ke Template >> Edit HTML >> centang Expand Widget Templates >> tekan tombol Ctrl+F di keyboard
3. Cari kode ]]></b:skin>
   Dan tambahkan kode berikut diatas kode ]]></b:skin>
   

   #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
   #terbaru{margin:0px}
   .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
   .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
   .mas-elemen h6,.mas-elemen h5 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
   .mas-elemen:hover{background-color:#c3c3c3}
   .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
   #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
   #mas-navigasifeed:hover{background-color:#c3c3c3}
   #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
   #mas-navigasifeed span{padding:5px 10px}
   #mas-navigasifeed .next{float:right}
   #mas-navigasifeed .previous{float:left}
   #mas-navigasifeed .home{text-align:center}
   #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

4. Selanjutnya cari kode </head> dan letakkan kode berikut tepat diatas </head>
   

   <script type='text/javascript'>
   //<![CDATA[
   var numfeed = 5;
   var startfeed = 0;
   var urlblog = "http://panduantemplateblog.blogspot.com/";
   var charac = 100;
   var urlprevious, urlnext;
   
   function maskolisfeed(johny,banget){
   var showfeed = johny.split("<");
   for(var i=0;i<showfeed.length;i++){
   if(showfeed[i].indexOf(">")!=-1){
   showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
   }
   }
   showfeed = showfeed.join("");
   showfeed = showfeed.substring(0,banget-1);
   return showfeed;
   }
   function showterbaru(json) {
   var entry, posttitle, posturl, postimg, postcontent;
   var showblogfeed = "";
   urlprevious = "";
   urlnext = "";
   for (var k = 0; k < json.feed.link.length; k++) {
   if (json.feed.link[k].rel == 'previous') {
   urlprevious = json.feed.link[k].href;
   }
   if (json.feed.link[k].rel == 'next') {
   urlnext = json.feed.link[k].href;
   }
   }
   for (var i = 0; i < numfeed; i++) {
   if (i == json.feed.entry.length) { break; }
   entry = json.feed.entry[i];
   posttitle = entry.title.$t;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   posturl = entry.link[k].href;
   break;
   }
   }
   if ("content" in entry) {
   postcontent = entry.content.$t;
   } else if ("summary" in entry) {
   postcontent = entry.summary.$t;
   } else {
   postcontent = "";
   }
   if ("media$thumbnail" in entry) {
   postimg = entry.media$thumbnail.url;
   } else {
   postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgerZUo0Txv02WNQ9RarRt9GGJe5RZeMey6o7Ums4L78i9cyv8ME9vxkTRvFFOpmuTHX6DUrYtmmO7LeO8J44U9e9eI3hxgT9Sjs5iNo1iZtwAPknHKFTDrLLDZXZnoBMUzeEM9x_fCBt4/s1600/no+image.jpg";
   }
   showblogfeed += "<div class='mas-elemen'>";
   showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
   showblogfeed += "<h5><a href='" + posturl + "'>" + posttitle + "</a></h5>";
   showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "</p>";
   showblogfeed += "</div>";
   }
   document.getElementById("terbaru").innerHTML = showblogfeed;
   showblogfeed = "";
   if(urlprevious) {
   showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
   } else {
   showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
   }
   if(urlnext) {
   showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
   } else {
   showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
   }
   showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
   document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
   }
   
   function navigasifeed(url){
   var p, parameter;
   if(url==-1) {
   p = urlprevious.indexOf("?");
   parameter = urlprevious.substring(p);
   } else if (url==1) {
   p = urlnext.indexOf("?");
   parameter = urlnext.substring(p);
   } else {
   parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
   }
   parameter += "&callback=showterbaru";
   incluirscript(parameter);
   }
   function incluirscript(parameter) {
   if(startfeed==1) {removerscript();}
   document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
   document.getElementById("mas-navigasifeed").innerHTML = "";
   var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
   var terbaru = document.createElement('script');
   terbaru.setAttribute('type', 'text/javascript');
   terbaru.setAttribute('src', archievefeed);
   terbaru.setAttribute('id', 'MASLABEL');
   document.getElementsByTagName('head')[0].appendChild(terbaru);
   startfeed = 1;
   }
   function removerscript() {
   var elemen = document.getElementById("MASLABEL");
   var parent = elemen.parentNode;
   parent.removeChild(elemen);
   }
   onload=function() { navigasifeed(0); }
   //]]>
   </script>

5. Silahkan simpan Template blog anda terlebih dahulu
6. Sekarang tutup menu Template dan buka menu Tata Letak
7. Setelah berada di menu Tata Letak, silahkan anda klik Tambahkan Gadget yang ada dibagian sidebar kanan blog seperti yang terlihat pada gambar berikut ini
   
   
   
8. Selanjutnya scroll/gulir kebawah dan cari widget HTML/Javascript dan salin kode berikut kedalam kolom HTML/Javascript
   

   <div id="terbaru"></div>
   <div id="mas-navigasifeed"></div>

9. Simpan widget anda dan lihat hasilnya di homepage blog anda

Keterangan :
var numfeed = 5; adalah jumlah artikel yang tampil
var urlblog = "http://stzuriah.blogspot.com/"; silahkan ganti url ini dengan url blog anda, JANGAN SAMPAI LUPA!
var charac = 100; adalah jumlah ringkasan dari setiap artikel yang tampil

Okey, itulah cara membuat kolom widget recent post yang bisa anda pasang didalam blog anda dan anda tidak perlu kwatir untuk loading blog setelah terpasang script ini, karena tidak akan mempengaruhi loading blog anda. Jika ada pertanyaan, silahkan tinggalkan komentar anda untuk artikel ini Membuat Kolom Widget Recent Post

Thursday, May 09, 2013