-->

Cara Membuat Related Post Box Thumbnail Image Responsive di Blog

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
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.

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.
Next
Previous

Related Posts

Show comments
Hide comments

0 Komen

Posting Komentar

  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

x
Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!