Cara Membuat Related Post Box Thumbnail Image Responsive di Blog - SeriesWans

Cara Membuat Related Post Box Thumbnail Image Responsive di Blog - Assalamualaikum, hallo sahabat blogger. pada kesempatan kali ini saya akan membagikan tutorial mengenai cara membuat related post box responsive dengan thumbnail keren di blogger. related post  box ini memiliki tampilan yang menarik dan keren.

Baca Juga : Cara Mempercepat Loading Gambar di Blog atau Website dengan mudah

Related Post Box ini merupakan sebuah pilihan atau opsi yang dapat memudahkan para pengunjung blog anda untuk menemukan artikel terkait dengan artikel atau postingan yang sedang anda baca. artikel yang muncul biasanya yang sama dengan kategori dengan artikel yang sedang anda baca. 

Cara Membuat Related Post Box Thumbnail Image Responsive di Blog

Related Post Box ini juga memiliki tampilan yang sungguh menarik dan keren. selain itu juga memiliki tampilan yang simple dan material design. related post ini juga sangat responsive di semua device atau perangkat anda. bagi anda yang tertarik untuk memasangnya, silahkan ituti langkah-langkah di bawah ini.

Berikut adalah Cara Membuat Related Post Box Thumbnail Image Responsive di Blog

• Masuk terlebih dahulu ke akun Blogger anda, lalu masuk ke Dashboard
• Kemudian pilih Tema atau Template > Edit HTML
• Copy script CSS di bawah ini dan letakan di atas kode ]]></b:skin> atau </style>

/* Related Post CSS Material Design*/
.related-post-item-tooltip{height:54px;overflow:hidden;width:50%;float:left;text-overflow:ellipsis;padding:10px;}
#related-post .material-icons{font-size:200%;right:20px;color:#747d8c;top:-1px;position:absolute;}
#related-post{background:#fff;margin:10px;}
.related-post{margin:30px 0 0;position:relative;padding:0 0 10px;}
.lol h4 i,.related-post h4 i{margin-right:14px;}
.lol h4,.related-post h4{border-radius:4px;color:#747d8c;font-size:100%;font-family:'Roboto',Arial;text-transform:uppercase;text-align:left;font-weight:700;border:1px solid #ecf0f1;position:relative;padding:15px 20px 12px;margin:0 0 20px;}
.related-post-style-3,.related-post-style-3 li{margin:0 auto;padding:0!important;list-style:none;word-wrap:break-word;}
.related-post-style-3 li a{font-family:'Roboto',sans-serif;color:#666;font-weight:700!important;font-size:14px;line-height:1.4em;}
.related-post-style-3 li a:hover{color:#111;}
.related-post-style-3 .related-post-item{display:inline-block;float:left;border-radius:3px;border:1px solid #ecf0f1;width:47%;margin-right:15px;height:auto;padding:0;margin-bottom:20px!important;position:relative;overflow:hidden;}
.related-post-style-3 .related-post-item:focus{outline:none;border:none;}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:40%;height:100px;float:left;}
.related-post-style-3 .related-post-item-thumbnail img{width:100%;height:auto!important;transition:all 1s ease-out;}
.related-post-item:hover .related-post-item-tooltip a{opacity:1;}
.related-post-item-tooltip a{color:#666!important;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s;text-align:center;font-size:12px!important;position:relative;}
@media screen and (max-width:480px){.related-post-style-3 .related-post-item{width:100%!important;}.related-post-style-3 .related-post-item-thumbnail{height:100px!important;}}

• Selanjutnya copy script Javascript di bawah ini dan letakan di bawah kode </article> atau <div class='post-footer-line post-footer-line-3' atau yang mirip dengan kode tersebut.

<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;&lt;i class=&#39;fa fa-bookmark&#39;&gt;&lt;/i&gt; Related Post&lt;/h4&gt;&quot;,
numPosts: 6,
summaryLength: 370,
titleLength: &quot;auto&quot;,
thumbnailSize: 300,
noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
moreText: &quot;Read More&quot;,
widgetStyle: 3,
callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dny.com",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+""):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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"></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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><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="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><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 Save atau Simpan Template. lalu cek apakah related post box nya sudah muncul atau belum.

Baca Juga : 5 Tips dan Cara Mudah Mendapatkan Sitelink Blog dari Google Terbaru

Demo

Nah, mungkin itu saja tutorial kali ini mengenai Cara Membuat Related Post Box Thumbnail Image Responsive di Blog. jika anda memiliki pertanyaan terkait postingan di atas, silahkan berkomentar di bawah ini. jangan lupa share ke teman-teman anda juga. semoga bermanfaat.

Related Posts