27 December 2014

Cara membuat artikel terkait mirip evo Magz

Blogspot secara defauld artikel terkait atau related post tidak di sediakan tanpa kita memasangnya sendiri terlebih dahulu ,bagi para Blogger mania yang suka otak atik edit Html tentu masalah ini akan menimbulkan tanda tanya , jika anda bertanya bisakah pos terkait atau related post di tampilkan di Blog serta di modif sesuai selera...,? jawabanya Oooh...sannnngat bisa dong yaitu dengan cara mengatur beberapa opsi dan tambahan kode script tertentu ke dalam template yang digunakan. Namun yang perlu diperhatikan di sini adalah di bagian mana script tersebut harus diletakkan, dan yang satu lagi related post ini nantinya akan tampil mirip template premium Evo Magz , sudah pada penasaran kan seperti apa bentuk dan raut muka related post tersebut...?. Untuk lebih jelasnya,ikuti langkah-langkah sebagai berikut ;

  • Pertama silahkan sobat masuk ke halaman blog anda
  • edit template
  • Kemudian Pasang kode css berikut tepat diatas kode  ]]></b:skin>
/* ==== Related Post Widget Start ==== */
.related-post {
margin:15px 0 0;
border-top:1px solid #f0f0f0;
padding:15px 0 0;
}
.related-post h4 {
font:normal 16px Oswald;
color:#000000;
border-bottom:3px solid #0A8D94;
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 Oswald;
color:#086D72;
}
.related-post-style-2 .related-post-item-summary {
font:normal normal 12px Arial;
display:block;
overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}

3. silahkan cari code <data:post.body/> dan letakkan kode berikut di bawah kode<data:post.body/>
<!-- Related Post Widget Start -->
     <div class='related-post' id='related-post'/>
<script type='text/javascript'>
     var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
       &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
     var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Artikel menarik lainya :&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 140,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 60,
      noImage: &quot;http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w60-h60-c/no-image.png&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More...&quot;,
      widgetStyle: 2,
      callBack: function() {}
     };
     </script>
   <!-- Related Post Widget End -->

4. scrol maos anda arah ke paling bawah temukan kode </body> dan pasang kode berikut ini diatas kode </body>
<script type='text/javascript'>
//<![CDATA[     
/*! Related Post Widget for Blogger by syarif hidayat => 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>
terakhir simpan ;
dan silahkan lihat hasil jerih payah anda ....he ..he..he..
Sebetulnya cara memasang related post di blog ini sama seperti memasang tombol share , nah jika sobat ingin meletakan related post tersebut persis di bawahnya tombol share, maka pemasangan kode ini harus tepat di bawahnya code share , oke sekian cara membuat artikel terkait mirip evo magz , semoga bermanfaat bagi anda , jika ada yang ingin ditanyakan silahkan sampaikan di kolom komentar dibawah,,,, dengan senang hati saya Admin akan berusaha membantu dan memberi solusi oky,,,,,


EmoticonEmoticon