01 November 2013

Membuat Widget Recent Posts Thumbnail Dari Maskolis

Widget Recent Posts
Membuat Widget Recent Posts Thumbnail memiliki banyak ragam dan tampilan, tergantung modifikasi dan lay out serta keinginan dari pengguna atau pemilik blog.


Beberapa waktu yang lalu blog Dinamika telah mengulas beberapa widget yang sebaiknya di pasang di blog, antara lain widget blog popular posts dan recent posts. Masing-masing widget sebenarnya memiliki beragam tampilan. Twitter widget atau youtube widget saja bisa dimodifikasi baik dengan menggunakan iframe atau hanya menggunakan kode script tanpa iframe. 

Sebelumnya juga telah dikupas tentang cara membuat blog tampilan menarik dengan menambahkan widget blog. Termasuk juga dengan widget recent posts. Ada recent posts yang menggunakan slider gambar, ada yang menggunakan thumbnail (ikon gambar kecil dari artikel), ada yang hanya berupa snippet (cuplikan), dan masih banyak lagi.


Kali ini blog Dinamika akan mengulas tentang membuat widget Recent Posts dengan thumbnail yang diciptakan (dalam konteks blog berarti dimodifikasi) oleh Maskolis, seorang template creator atau template designer lokal (asli Indonesia) yang karya-karya desain templatenya telah diulas oleh sejumlah web designer dunia. 

Salah satu kelebihan dari widget blog recent posts dengan thumbnail hasil modifikasi Maskolis ini adalah menampilkan gambar icon/thumbnail postingan artikel, bisa diatur jumlah postingan yang akan ditampilkan, dan terdapat tombol/button previous - home - next sebagai navigasi postingan artikel berdasarkan urutan waktu posting terbaru.

Ingin tahu cara membuat atau memasangnya di blog sobat blogger sekalian ? Ini cara nya :
  • Masuk ke dashboard blogger (blogspot) sobat
  • Pilih template
  • Masuk ke Edit Template/template editor (halaman edit template), namun sebelum memodifikasi sebaiknya disimpan dulu tampilan template blog sobat yang sekarang dengan klik Cadangkan/Pulihkan, lalu klik Unduh Template Lengkap.
  • Centang tanda Expand Template Widget
  • Untuk kode CSS, cari kode ]]></b:skin> (dapat dilakukan dengan menekan tombol F3 pada PC / laptop sobat untuk memudahkan pencarian)
  • Di atas kode tersebut, masukkan kode CSS berikut ini :

#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 h6 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-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#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}

>>> Perhatikan warna biru height : 70px dan width:70px adalah ukuran gambar/thumbnail

  • Selanjutnya, cari kode </head>
  • Diatas kode tersebut masukkan/copy paste kode berikut :
<script type='text/javascript'>

//<![CDATA[

var numfeed = 5;
var startfeed = 0;
var urlblog = "http://portaldinamis.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 = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
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> 


>>> Perhatikan kode warna merah, ganti http://portaldinamis.blogspot.com/  dengan alamat blog sobat.
>>> Perhatikan kode warna biruvar numfeed = 5 adalah jumlah artikel, ganti sesuai keinginan.
>>> Perhatikan kode warna pinkvar charac = 100 adalah jumlah karakter cuplikan, ganti sesuai keinginan. 
Setelah itu simpan dengan klik save template,

  • Setelah klik save template, sobat blogger masuk ke halaman lay out pada opsi sebelah kiri dashboard blogspot sobat.
  • Setelah di halaman lay out, pada halaman elemen (silakan mau di elemen mana, apakah sidebar, atau footer) klik Add Gadget > HTML/Javascript
  • Pada window/jendela dari widget HTML/Javascript tersebut, masukkan kode berikut :
<div id="terbaru"></div>

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


Setelah itu klik save dan lihat hasilnya. Tentunya lebar dan tinggi widget recent posts dengan thumbnail dari Maskolis ini harus disesuaikan dengan lebar halaman blogspot sobat, dan lebar sidebar sobat. Selain itu juga perlu mempertimbangkan berat dan kecepatan loading blog sobat. 

Selamat mencoba.


Like This Article:
Share This Article : Facebook Twitter Google+

Artikel Terkait:

3 comments:

  1. terima kasih banyak untuk infromasinya sukses selalu !!!

    ReplyDelete
    Replies
    1. saya sangat berterima kasih banyak MBAH RAWA GUMPALA atas bantuan pesugihan dana ghaib nya kini kehidupan kami sekeluarga sudah jauh lebih baik dari sebelumnya,ternyata apa yang tertulis didalam blok MBAH RAWA GUMPALA itu semuanya benar benar terbukti dan saya adalah salah satunya orang yang sudah membuktikannya sendiri,usaha yang dulunya bangkrut kini alhamdulillah sekaran sudah mulai bangkit lagi itu semua berkat bantuan beliau,saya tidak pernah menyangka kalau saya sudah bisa sesukses ini dan kami sekeluarga tidak akan pernah melupakan kebaikan MBAH,,bagi anda yang ingin dibantu sama MBAH RAWA GUMPALA silahkan hubungi MBAH di 085 316 106 111 insya allah beliau akan membantu anda dengan senang hati,pesugihan ini tanpa resiko apapun dan untuk lebih jelasnya buka saja blok mbah
      BUKA PESUGIHAN PUTIH TAMPA TUMBAL

      Delete
  2. Thanks Atas Infonya
    Kunbal Gan Http://leonsoftware.blogspot.com/

    ReplyDelete

TATA CARA BERKOMENTAR :
-------------------------------------
* Silahkan berkomentar dengan sopan, komentar dapat berupa kritik, saran dan masukan, dan menggunakan tata bahasa baku tanpa menyingkat tulisan.
** Tidak menggunakan kata atau kalimat yang mengandung sex dan SARA.
*** Tidak menggunakan link aktif/hidup dan spamming, dan untuk indentitas komentator sebaiknya menggunakan name/URL atau OpenID, bukan anonymous.

Terima Kasih karena telah berkunjung dan berkomentar di halaman ini.
Silahkan ketik komentar anda di comment box >>>

Mau? Rahasia sukses tanpa MODAL.. 0% RESIKO.. 100% GRATIS.. 1000% PROFIT.. Join now!! IndoBOclub <<<||>>> Terima Kasih Telah Berkunjung Ke Blog DINAMIKA