Yang jelas saya tidak akan melupakan hasil jerih payahnya membuat widget related post yang keren ini.
sumber :
http://www.bloggerwidgetgenerators.com
Walaupun aslinya tidak seperti ini, tapi widget ini cukup seperti apa yang saya inginkan selain karena thumbnail nya berupa galery, widget ini pun punya kelebihan yang tak saya temukan pada widget sebelumnya yang sudah saya terapkan namun saya copot kembali karena sangat banyak kekurangan seperti gambar banyak yang tidak tampil,gambar buram, gambar yang muncul kecili-kecil bahkan tidak tampil sama sekali dan lain sebagainya.
Mungkin karena tidak cocok dengan template yang saya gunakan atau hal lainya seperti scipt Js internal yang sudah kadaluarsa.Yang mebuat saya memutuskan bahwa Widget Related Post inilah yang cocok buat blog saya setelah saya edit beberapa syntak dari cssnya.Dan lagi widget ini sebelumnya menggunakan Javascript eksternal tapi kini setelah saya edit menjadi internal langsung menyatu dengan html yang tidak akan berat saat loading karena berebutan dengan pengguna lain.
Bahkan tidak akan mati jikalau server hosting down karena memang sudah menjadi inernal script. Seperti kebanyakan tutorial lain ,'cara memasang related post' yang berjubel banyak diinternet. Kebanyakan dari mereka menggunakan javascript secara eksternal, namun alamat url dari script java mereka sudah tidak aktif karena berbagai macam faktor. Lalu jumlah postnya, yang tadinya maksimal hanya 20 saja, kini setelah saya edit bisa unlimited, terserah sobat mau menampilkan berapa post, seratus, seribu atau bahkan sejuta kalau tak menggangu saat load di blog sobat.WEEEW...
Lalu ketika cursor mouse berada pada posisi diata atau hover, postnya gambar berubah menjadi besar.
Widget ini sudah saya coba ke beberapa temaplate bawaan blogger seperti Emporio,Contempo,Soho dan bisa lihat di demo untuk membuktikannya
Demo Soho
Demo Emporio
Demo Contempo
Demo Tersederhanakan/Notable
Baiklah saya akan langsung saja bagikan kode syntaknya berikut.
Buka blooger sobat lalu msuk tema , kemudian Edit Html. Lalu cari kode </head>. Untuk memudahkan
pencarian Klik di tengah kode dlu kursor mousenya lalu teka ctrl+f , lalu ketikan kode </head> kemudiantekan tombol cari [biasanya sobat sudah apal kalau sering edit]
Setelah ketemu paste kode berikut diatas kode </head>.
<!-- Related Posts MusikHade Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;border-bottom:2px groove #ddd;width:100%;margin-bottom:3
0px;margin-top:20px;;margin-left:0px;padding:0px 15px 15px 0px;}
#related-posts a{background:#; #90a8b3 ;border-bottom:2px solid #ddd;margin:20px 10px 20px 10px;border-radius: 7px;width:180px;
-webkit-box-shadow: -1px 9px 10px -5px rgba(0,0,0,0.29);
box-shadow: -1px 9px 10px -5px rgba(0,0,0,0.29);
font-family:helvetica;size:16px;font-weight:700;padding:0px;}
#related-posts a:hover { background:;
opacity:.8;filter:alpha(opacity=80);-webkit-box-shadow: 1px 2px 3px 1px rgba(0,0,1,0.41);
box-shadow: 1px 2px 3px 1px rgba(0,0,1,0.41); -moz-transform: scale(1.2) translate(3px, 0px);
-webkit-transform: scale(1.2) translate(3px, 0px);
-o-transform: scale(1.2) translate(3px, 0px);
-ms-transform: scale(1.2) translate(3px, 0px);
transform: scale(1.2) translate(3px, 0px); }
#related-posts img {border-bottom:7px groove #879c53;border-radius: 4px;float:center; background:#dddddd;#879c53; ;margin-bottom:0px ;margin-top:0px;margin-right:0px;margin-left:0px;padding:0px ;width:180px;height:180px; }
#related-title {text-align:center;margin:0px;padding:10px ;font-family:helvetica;font-size:14px;color:#222; line-height:14px;text-shadow:0 2px 2px #fff;height:65px;;background:;border-radius: 3px; }
#related-title a:hover { color: #c36c00;
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj9yLDFl1JceB3lJWQaJFTc77W5RyC4S8Meth4mcPGvcGde3ANFFtP00ac0mKLUTq4clArVvco-Npe6Km5fAw9kObfhybfi2B6ECRCcr6yZbHuVkuHiaW_Ku4EX_vXoaTfHJFaANt-vrOv/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj9yLDFl1JceB3lJWQaJFTc77W5RyC4S8Meth4mcPGvcGde3ANFFtP00ac0mKLUTq4clArVvco-Npe6Km5fAw9kObfhybfi2B6ECRCcr6yZbHuVkuHiaW_Ku4EX_vXoaTfHJFaANt-vrOv/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>65)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,65)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<70&&i<maxresults){document.write('<a style="text-decoration:none;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!-- Related Posts MusikHade End-->
0px;margin-top:20px;;margin-left:0px;padding:0px 15px 15px 0px;}
#related-posts a{background:#; #90a8b3 ;border-bottom:2px solid #ddd;margin:20px 10px 20px 10px;border-radius: 7px;width:180px;
-webkit-box-shadow: -1px 9px 10px -5px rgba(0,0,0,0.29);
box-shadow: -1px 9px 10px -5px rgba(0,0,0,0.29);
font-family:helvetica;size:16px;font-weight:700;padding:0px;}
#related-posts a:hover { background:;
opacity:.8;filter:alpha(opacity=80);-webkit-box-shadow: 1px 2px 3px 1px rgba(0,0,1,0.41);
box-shadow: 1px 2px 3px 1px rgba(0,0,1,0.41); -moz-transform: scale(1.2) translate(3px, 0px);
-webkit-transform: scale(1.2) translate(3px, 0px);
-o-transform: scale(1.2) translate(3px, 0px);
-ms-transform: scale(1.2) translate(3px, 0px);
transform: scale(1.2) translate(3px, 0px); }
#related-posts img {border-bottom:7px groove #879c53;border-radius: 4px;float:center; background:#dddddd;#879c53; ;margin-bottom:0px ;margin-top:0px;margin-right:0px;margin-left:0px;padding:0px ;width:180px;height:180px; }
#related-title {text-align:center;margin:0px;padding:10px ;font-family:helvetica;font-size:14px;color:#222; line-height:14px;text-shadow:0 2px 2px #fff;height:65px;;background:;border-radius: 3px; }
#related-title a:hover { color: #c36c00;
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj9yLDFl1JceB3lJWQaJFTc77W5RyC4S8Meth4mcPGvcGde3ANFFtP00ac0mKLUTq4clArVvco-Npe6Km5fAw9kObfhybfi2B6ECRCcr6yZbHuVkuHiaW_Ku4EX_vXoaTfHJFaANt-vrOv/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj9yLDFl1JceB3lJWQaJFTc77W5RyC4S8Meth4mcPGvcGde3ANFFtP00ac0mKLUTq4clArVvco-Npe6Km5fAw9kObfhybfi2B6ECRCcr6yZbHuVkuHiaW_Ku4EX_vXoaTfHJFaANt-vrOv/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>65)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,65)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<70&&i<maxresults){document.write('<a style="text-decoration:none;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!-- Related Posts MusikHade End-->
<!-- Related Posts MusikHade Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font style='-webkit-box-shadow: -1px 9px 10px -5px rgba(0,0,0,0.29); box-shadow: -1px 9px 10px -5px rgba(0,0,0,0.29);font-family:"oswald",sans serif ;font-size:20px;color:#EDEDED;background:#4C4C4C;margin-right:0px;margin-top:20px;margin-bottom:90px;Padding:8px;border-left:15px solid #879c53; border-left:15px solid #879c53;-webkit-border-radius: 0px 0px 0px 22px; -moz-border-radius: 0px 0px 0px 22px;border-radius: 0px 0px 0px 22px;width:100%;'><b>Album Selengkapnya :</b></font><font style='-webkit-box-shadow: -1px 9px 10px -5px rgba(0,0,0,0.29); box-shadow: -1px 9px 10px -5px rgba(0,0,0,0.29);font-family:"oswald",sans serif;font-size:20px;color: #EDEDED;font-style:italic;background:#4C4C4C;line-height:16px;width:100%;margin-top:20px;margin-bottom:90px;padding:8px;border-right:1px solid #879c53;-webkit-border-radius: 0px 22px 0px 0px; -moz-border-radius: 0px 22px 0px 0px;border-radius: 0px 22px 0px 0px; '><b:loop values='data:post.labels' var='label'><data:label.name/>,<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=100"' type='text/javascript'/></b:if></b:loop></font>
<script type='text/javascript'>
var currentposturl="";
var maxresults=70;
var relatedpoststitle="";
var relatedpostchar=70;
var relatedlabelname="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
<div id='clear'/></b:if>
<font style='float:right;text-align:right;padding:10px;margin-bottom:20px;font-family:helvetica;font-size:16px;color:#EDEDED;font-style:italic;background: #879c53;'><b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop></font>
<a href='https://musikhade.blogspot.com/'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRmzJx1rvsV-k3bwETQaOIs0oqddlY8AHxfreJA0-oZJz6n0wutC5s1vLVrqJ3FL_-RYnkInCLYH8HffVKwPvVl5JNPgA-5stGbIKIEraXuKojypaK4upppA3D3Xciyd2fW_NRkdPcjeKh/s1600/best+blogger+tips.png'/></a>
<!-- Related Posts MusikHade End -->
Setelah itu sobat save. Dan lihat bagaimana hasilnya.
Untuk jumlah post ganti nilai/value pada kode yang soabat paste di atas </heaad>
var maxresults=10; ganti angka sesuai kebutuhan sobat.
Untuk lebarnya, sobat juga bisa rubah pada cssnya yaitu cari : '#related-posts .related_img' pada kode css, kemudian temukan kode berikut "width:120px;height:120px;" lalu ganti value atau angkya tapi jangan terlalu lebar karena grid horizontal jika terlalu lebar akan turun ke bawah, yang tadinya empat menjadi tiga. Tapi itu terserah sobat saja sesuaikan dengan kebutuhan sobat saja. Karena beda template akan berbeda pula hasilnya.
Baiklah cukup segitu dulu dari saya buat sobat semua. Semoga artikel ini bisa membantu sobat mendandani blognya sobat semua. mohon maaf atas kekurangan nya karena saya bukanlah penulis atau pun programer yang ahli dalam mengoatak atik kata dalam menulis maupun otak atik kode dalam hal program ataupun kode syntak seperti ini. saya masih jauh dari kata bisa. Dalam hal ini saya hanya share/berbagi, menyimpan apa yang saya alami layaknya memo agar dikemudian hari bila terjadi apa apa pada blog saya, saya tidak sulit mencari dan lupa dan dimana saya bisa menggunakan lagi widget yang saya butuhkan sepwrti yang saya sudah uraikan diatas.
Wassalam.
Komentar
Posting Komentar