Cara Membuat/Memasang Widget You Might Also Like atau Related Posts

Sunday, September 30, 2012 | Posted by AnzCyber |
Kali ini saya akan membahas tentang Bloger, yaitu Membuat/Memasang Widget Related Posts dengan Tampilan Thumnail atau dikenal juga dengan istilah You Might Also Like. Berikut adalah gambar Widget yang telah terpasang

Jika kita memasang widget ini pada blog maka blog tersebut akan kelihatan menarik dan menurut pengalaman saya widget ini dapat membuat pengunjung blog anda betah berlama-lama berada di blog anda. Apakah anda tertarik? Silahkan ikuti Langka-langkah berikut:
  1. Login ke Blog anda
  2. Buka Template → Edit HTML → Proceed
  3. Centang Expand Widget Templates 
  4. Copy dan Paste kan kode berikut di atas </head>

    5. <!--Related Posts with thumbnails Scripts and Styles Start --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{text-transform:none; height:100%; min-height:100%; padding-top:0; padding-left:0; text-align:center} #related-posts h3{font-size:1.6em; font-weight:bold; color:#555; font-family:arial,Georgia,Times New Roman,Times,serif; margin-bottom:0; margin-top:0; padding-top:0} #related-posts a{color:#333} #related-posts a:hover{background-color:#f0f0f0} </style> <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(h){for(var g=0;g<h.feed.entry.length;g++){var j=h.feed.entry[g];relatedTitles[relatedTitlesNum]=j.title.$t;try{thumburl[relatedTitlesNum]=j.media$thumbnail.url}catch(f){s=j.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/AVvXsEhoAIckelmgtm7bsxtdl4PscUWaujaMsNutJ09cbWGe6fFdm3IeLh75SJnl1rKilkCHPHKX6FDHnoANJoH-l9DdvKK19oGrUb4aMJn4nBM5p8KTpLDn8ydKQs5E6MvDp9ROmY9bWRR55-es/s300/Noimageavailable.jpg"}}if(relatedTitles[relatedTitlesNum].length>35){relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,50)+"..."}  for(var e=0;e<j.link.length;e++){if(j.link[e].rel=="alternate"){relatedUrls[relatedTitlesNum]=j.link[e].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var g=new Array(0);var h=new Array(0);var f=new Array(0);for(var e=0;e<relatedUrls.length;e++){if(!contains_thumbs(g,relatedUrls[e])){g.length+=1;g[g.length-1]=relatedUrls[e];h.length+=1;f.length+=1;h[h.length-1]=relatedTitles[e];f[f.length-1]=thumburl[e]}}relatedTitles=h;relatedUrls=g;thumburl=f}function contains_thumbs(f,h){for(var g=0;g<f.length;g++){if(f[g]==h){return true}}return false}function printRelatedLabels_thumbs(){for(var e=0;e<relatedUrls.length;e++){if((relatedUrls[e]==currentposturl)||(!(relatedTitles[e]))){relatedUrls.splice(e,1);relatedTitles.splice(e,1);thumburl.splice(e,1);e--}}var f=Math.floor((relatedTitles.length-1)*Math.random());var e=0;if(relatedTitles.length>0){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write('<div style="clear: both;"/>');while(e<relatedTitles.length&&e<20&&e<maxresults){document.write('<a style="text-decoration:none;padding:5px;float:left;');if(e!=0){document.write('border-left:solid 1px #ddd"')}else{document.write('"')}document.write(' href="'+relatedUrls[f]+'"><img style="width:120px;height:120px;border:0px; margin:0" src="'+thumburl[f]+'"/><br/><div style="width:120px;padding-left:3px;height:80px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[f]+"</div></a>");if(f<relatedTitles.length-1){f++}else{f=0}e++}document.write("</div>");relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}; //]]> </script> </b:if> <!--End Related Posts with thumbnails Scripts and Styles -->

  5. Cari kode
    </b:includable>
    <b:includable id="comment_picker" var="post"></b:includable>

    6. kemudian Copy dan Paste kan kode berikut ini di atasnya
    <div style='clear: both;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <br/> <font color='#FFFFFF'><div style='font-size:17pt; font-weight:bold; padding-bottom:4px; line-height:32px; color: #40403b;'>YOU MIGHT ALSO LIKE</div></font> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=4; var relatedpoststitle=&quot;&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> <div style='clear:both'/> </b:if>

  6. Kemudian Save template
Bagi anda yang merasa sulit dengan cara di atas maka anda dapat menggunakan Widget yang praktis dan mudah dengan www.linkwithin.com.
Berikut Langkah-langkahnya:
  1. Buka situs www.linkwithin.com
  2. Isi data-data sesuai dengan form yang ada

  3.  Klik Get Widget dan ikuti petunjuk selanjutnya
Labels: ,

YOU MIGHT ALSO LIKE

2 comments:

GO BLOG said...

new blogger ...numpang tanya , saya coba baik cara yang pertama maupun kedua kok belum berhasil ....kenapa ya ? trim's

Friday, December 21, 2012 9:05:00 AM
Gigih Wahyu K said...

thanks infonya ;)

Thursday, November 14, 2013 8:45:00 PM
:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( =))

Post a Comment

siLahkan berkomentar & jangan pake user Anonymous ya!
!!!Pengunjung yang baik pasti seLaLu meninggaLkan komentar!!!
Komentar anda adalah semangat bagi saya :D

Subscribe to: Post Comments (Atom)

Blogger Template | Design Template by AnzCyber