Cara Membuat Box Related Post Di Blogger Blue Style

Cara Membuat Box Related Post Di Blogger Blue Style|Hallo sehabat blogging semua? jika sebelumnya saya membagikan tutorial cara membuat Recent post Light style di blogger, Nah Kali ini BulshitMan akan mencoba membagikan Tutorial Cara Membuat Box Related Post Di Blogger Blue Style.
Kamu akan mendapatkan tampilan yang menarik, kamu j dapat Memasang Related post ini di bagian bawah postingan kamu, untuk tutorialnya silahkan kamu liat di bawah ini.

Cara Membuat Box Related Post Di Blogger Blue Style

DEMO SHOW

Langkah-Langkah Cara Membuat Box Related Post Di Blogger Blue Style

1. Buka terlebih dahulu blog kamu
2. Pada menu blog kamu silahkan kamu pilih menu template
3. Jika sudah silahkan kamu pilih mode Edit Html | Pada area Html silahkan kamu cari code ]]></b:skin> atau bisa juga </style> untuk mempercepat pencarian silahkan kamu klik tombol

Ctrl

pada keyboard, jika kode di atas sudah ketemu silahkan anda pasang kode di bawah ini tepat sebelum kode yang mirip seperti kode yang di sarankan di atas.

/* ==== Related Post Widget Start ==== */
.related-post {
margin:15px 0 0;
border-top:1px solid #f0f0f0;
padding:15px 0 0;
}
.related-post h4 {
font-size:16px;
margin:0 0 .5em;
text-transform:uppercase;
background:#07ACEC;
padding:10px;
color:#fff;
}
.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:65px;
height:65px;
max-width:none;
max-height:none;
background-color:transparent;
border:5px solid #07ACEC;
padding:0;
float:right;
margin:5px 5px 0px 50px;
}
.related-post-style-2 .related-post-item-title {
font:normal normal 16px Fjalla One, Helvetica, Arial, sans-serif;
}
.related-post-style-2 .related-post-item-summary {
display:block;
overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}

4. Masuk ke tahap berikutnya.
5. Masih pada area Html tadi silahkan kamu cari kode <div class='post-footer-line post-footer-line-1'> lalu pastekan code berikut tepat di atas kode <div class='post-footer-line post-footer-line-1'>

<script type="text/javascript">
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          "<data:label.name/>"<b:if cond='data:label.random != "true"'>,</b:if>
      </b:loop></b:if>];
        var relatedPostConfig = {
            homePage: "<data:blog.homepageUrl/>",
            widgetTitle: "<h4>Baca Juga :</h4>",
                numPosts: 5,
                summaryLength: 300,
                titleLength: "auto",
                thumbnailSize: 60,
                noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjufZb16BC8aDnoIewVEZynKhZqsFO4TfBXuxs8FBBxwhEUCkk84jO34GxrcVPgZA6XWnXTKpLeAbh1mcVGKS43DYvvW04a7f2wNlj1LS-IQG8wv6vExxUors_DaRao25WHbIMqDPD_eB8/s1600/nyamukkurus-no-image.png",
                containerId: "related-post",
                newTabLink: false,
                moreText: "Read More",
                widgetStyle: 2,
                callBack: function() {}
            };
            </script>

6. Jika sudah selanjutnya silahkan kamu cari code </body> pastekan javascript di bawah ini tepat sebelum code </body>

<script type="text/javascript">
//<![CDATA[
/*! Related Post Widget for Blogger by bulshitman.blogspot.com => Dikhen Mikhen */
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)+"…":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)+"…":"";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 silahkan kamu save/simpan template kamu, buka salah satu postingan kamu untuk melihat hasilnya
Nah bagai mana shobat qu semua cukup mudah bukan. Oky sampai ketemu lagi di Frequenzi yang sama ya

SELAMAT MENCOBA