Saturday, March 28, 2015

Tips Cara Membuat Related Post di Blog

Hembs ... sahabat blogger yang senang utak - atik template blog pasti kenal dengan mas sugeng ganteng banget kan ? , nah kali ini saya akan menjawab request dari teman saya yang ingin dibuatkan tutorial untuk membuat artikel terkait yang keren seperti template premium evo magz

  Tahukah anda , jika kita memasang artikel terkait di blog kita , dapat meningkatkan jumlah page view pada blog kita , karena dengan adanya related post , pengunjung akan tertarik dengan artikel yang berkaitan dengan artikel yang sedang dibaca.

  Widget artikel terkait ini merupakan sebuah widget blogger dari kang taufiq pemilik blog dte , kemudian di modifikasi oleh mas sugeng menjadi lebih cool , wisget related post tersebut di lengkapi dengan gambar berukuran 72 pixel dan di lengkapi dengan post snippet . Nah bagi yang penasaran seperti apakah related post ala mas sugeng , sobat bisa lihat gambar dibawah ini :

Cara Membuat Related Post Ala Evo Magz Mas Sugeng

Cara Membuat Artikel Terkait di Blog Ala Evo Magz

  1. Pertama silahkan sobat masuk ke halaman edit template
  2. Kemudian Pasang kode css berikut , tepat diatas kode  ]]></b:skin> atau</style>
    /* ==== Related Post Widget Start ==== */
    .related-post{margin:15px 0 0;border-top:1px solid #f0f0f0;padding:15px 0 0}
    .related-post h4{font-size:14px;margin:0 0 .5em;text-transform:uppercase}
    .related-post-style-2{margin:0 0 0 0!important;padding:0 0 0 0!important;list-style:none}
    .related-post-style-2 li{margin:0 0 0 0;padding:0 0 0 0}
    .related-post-style-2 li{padding:5px 0!important;border-top:1px solid #eee;overflow:hidden}
    .related-post-style-2 li:first-child{border-top:none}
    .related-post-style-2 .related-post-item-thumbnail{width:60px;height:60px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 8px 0 0}
    .related-post-style-2 .related-post-item-title{font:normal normal 16px Fjalla One,Helvetica,Arial,sans-serif} www.masyadi.com
    .related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}
    .related-post-style-2 .related-post-item-more{}
  3. Cari kode </body> , dan pasang kode dibawah ini diatas kode </body> tersebut
    <div class='related-post' id='related-post'></div>
    <script type='text/javascript'>
         var labelArray = [
           "Smartphone"
    ];
         var relatedPostConfig = {
          homePage: "http://evomagzblog.blogspot.com/",
          widgetTitle: "<h4>Related Posts :</h4>",
          numPosts: 5,
          summaryLength: 140,
          titleLength: "auto",
          thumbnailSize: 60,
          noImage: "http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w60-h60-c/no-image.png",
          containerId: "related-post",
          newTabLink: false,
          moreText: "Read More...",
          widgetStyle: 2,
          callBack: function() {}
         };
         </script><script type='text/javascript'>
    //<![CDATA[     
    /*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
    var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
    //]]>
    </script>
  4. Klik save dan lihat hasilnya
Sebetulnya cara memasang related post di blog seperti memasang tombol share , nah jika sobat ingin meletakan related post tersebut diatas tombol berbagi , maka peletakanya juga diatas coding share , oke sekian cara membuat artikel terkait ala evo magz , semoga bermanfaat bagi anda , jika ada yang ingin ditanyakan silahkan komentar dibawah

1 comment:

  1. nah ini yang ane cari gan, biar tampilannya berbeda dengan defaultnya. izin copi ya gan.

    mampir ke blog ane gan http://www.itbriscorhorizon.com/

    ReplyDelete

Official Virgozta