Cara Membuat Related Post Thumbail Sederhana Pada Blogger

Halo sahabat dimanapun anda berapa pada kesempatan kali ini saya akan membahas bagaimana cara membuat Related Postingan Blog Thumbail seperti pada contoh blog ini.

Sebenarnya banyak sekali artikel yang sudah di posting oleh para blogger tentang cara membuat related post pada blog namun dari sekian banyak artikel yang telah di posting mungkin ada yang tidak cocok dengan maksud atau selera anda.

Baiklah kita langsung saja jika anda suka atau ingin mencoba membuat Related Post sama seperti pada blog ini berikut ini saya akan membagai CSS cara membuat Related Post.

CARA MEMBUAT RELATED POST SEDERHANA PADA BLOG

Untuk langkah pertama login kedalam Blogger
Selanjutnya pilih Tema - Edit HTML
Kemudian cari kode ]]></b:skin>

Jika sudah dapat Letakkan atau copy kode di bawah ini pas di atas kode ]]></b:skin>


/* Related Post CSS */
.related-post-item-webmuna{height:auto;overflow:hidden;width:65%;float:left;text-overflow:ellipsis;padding: 0 0 0 10px;}#related-post .material-icons{font-size:200%;right:20px;color:#607D8B;top:-1px;position:absolute}#related-post{background:#fff;margin:10px 0}.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{color:#555;font-size:100%;font-family:'Roboto',Arial;text-transform:uppercase;text-align:left;font-weight:700;position:relative;padding:10px 0;}.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:#ff9900;}.related-post-style-3 .related-post-item{display:inline-block;float:left;width:48.2%;margin-right:10px;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:25%;height:60px;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-webmuna a{opacity:1}.related-post-item-webmuna a{color:#666!important;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s;text-align:center;font-size:14px!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{}

Jika sudah selesai, selanjutnya letakkan atau copy kode dibawah ini tepat di atas </article> atau anda boleh meletakkan di tempat lain. Kalau dalam blog ini saya meletakkan dibawah div share artikel blog.


    <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.idblanter.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-webmuna"><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-webmuna">'+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-webmuna"><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 klik SIMPAN TEMPLATE dan lihat hasilnya.

Keterangan :
Saat menyimpan template muncul peringatan tulisan warna merah berarti ada kesalahan saat meletakkan kode CSS nya. Pastikan cara meletakknya kode CSS dengan benar.

Demikianlah sedikit penjelasan dari saya tentang Bagaimana Membuat Related Postingan Blog sama seperti pada blog ini.

"Selamat Mencoba Semoga bermanfaat"

Cara Membuat Related Post Thumbail Sederhana Pada Blogger

Tidak ada komentar

Popular

Labels