Jika anda ingin membuat isi dari postingan blognya selalu dibaca oleh pengunjung atau membuat mereka merasa betah dengan blog anda. Saya akan membagikan salah satu wdiget yang akan menampilkan sebagian dari artikel atau postingan yang terkait atau juga lebih dikenal dengan Related Post untuk anda yang ingin mencobanya.
Perbedaan dari widget saya yang satu ini adalah dilengkapi animasi dengan menggunakan CSS3. Bagi saya dengan tambahan animasi seperti ini akan mudah menarik perhatian si pengunjung, atau mungkin penasaran untuk mencoba memilih salah satu link dari artikel anda.
Berikut contoh dari widget Related Postnya.
Langkah Pemasangan Related Post
Pertama kali anda copy paste link CSS nya di dalam tag <head><link href='https://sites.google.com/site/adityameilaz/file-adityas-blog/snap.css' rel='stylesheet' type='text/css'/><div class='post-footer-line post-footer-line-3'>
<!------------ Paste Kode di Area ini ------------>
</div><b:if cond='data:blog.pageType == "item"'>
<h3>Related Post</h3>
<div class='adityasBlogRelated' style='background:#fff'>
<script type='text/javascript'>
var defaultnoimage='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh88N62nAbQlE92f_neV-FJ5OrSXmtc6I0Qj-2z7OmcocvbKLERuhSUeBj2InaRBQa_NmdgyHh-AdG6ZhIfwuK4U6F5nyU03HbqKi95xxP83wjvLlDk5mGpQEOHFTUSkSDdz4Ews24V4SuQ/';
var maxresults=4;
</script>
<script type='text/javascript'>
//<![CDATA[
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.media$thumbnail.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 {
if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage;
else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbIJs0HR7DU9K_dmbUvimGzBsi-yIaWX9khCHkk5bVEOMh_OQnVbkZFSE4-NPCKnhNXtEcMTMK1xsJLT41ToK-8m2Cw0SUnWi0hscImCysszuyiMdEzdC6sOo5o6GEF3xo-C3gAEGhE0Y/s400/noimage.png";
}
}
if(relatedTitles[relatedTitlesNum].length>44) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
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(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2";
for(var i = 0; i < relatedUrls.length; i++){
if((relatedUrls[i]==current)||(!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;
[hg] var adityasBlogRlt = 25;[/hg]
if(relatedTitles.length>0)
document.write('<div id="content" class="items hfeed" style="margin-top: 12px;">');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
if (thumburl[r].indexOf("/s72-c/") != -1) {
thumburl[r] = thumburl[r].replace("/s72-c/", "/s200-c/")
}
document.write('<a href="'+ relatedUrls[r] +'" title="Baca : '+relatedTitles[r]+'"><div class="item hentry" style="left: '+adityasBlogRlt+'px; top: 0px; width: 125px; height: 118px; "><div class="card "><div class="front" style="background-image: url('+thumburl[r]+');"><div class="overlay"></div></div><div class="back"><div class="overlay"><div class="title entry-title">'+relatedTitles[r]+'</div><span class="bubble comments-count "><span class="bubble-content">Baca</span><span class="bubble-tail"></span></span></div></div></div></div></a>');
[hg] adityasBlogRlt = adityasBlogRlt + 150;[/hg]
i++;
if (r < relatedTitles.length - 1) {
r++;
}
else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'></script>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
</b:if>Angka 25 dan 150 merupakan angka pengatur rata kiri setiap item.
Jadi anda bisa menyesuaikannya untuk jenis template anda.
Jika anda merubah nilai 25 menjadi 30, anda juga wajib merubah nilai 150 menjadi 155 (masing-masing ditambah dengan nilai 5)
Sekian dan enjoy it.!!
6 Respon Komentar
ijn post gan,, :e:
@angga.jacxx Ok gan, g maslah yang penting ada link sumbernya ya gan..:x:
:15:
mantab ni infonya....
@aspar69susanto Iyo ae gan..
Mumpung gratis :e:
Kalo Masang Related Postnya 3 gmn??
Soalnya kalo 4 gx Pas Ukurannya..
@Arief Maulana di jadikan 3 juga bisa gan... tp ntar di dalam javascriptnya ada perubahan lagi... :):e:
Tinggalkan Komentar Anda?
1. SPAM atau meninggalkan komentar mengandung unsur SARA
2. Berkata kasar atau kata-kata negatif lainnya
3. Meninggalkan komentar dengan link hidup
4. Komentar tidak berhubungan dengan tema
5. Jika anda ingin berlangganan "komentar" dari artikel ini, pilih link "Subscribe by email" pada bagian bawah form komentar
Emotion lainnya?