Cara Menciptakan Material Design Related Post Di Blog

Baiklah kali ini aku akan coba membagikan sedikit tutorial blog yaitu Cara Membuat Material Design Related Post Di Blog ini cukup sederhana, di balik tutorial ini shobat blogger ku niscaya ada cita-cita mempercantik tampilan blognya guna mempermudah pengunjung untuk mengakses keterkaitan post yang sedang di baca.

Result

bagaiman berminat untuk memasangnya di blog mu?? jikalau iya silahkan ikuti tutorialnya di bawah ini.

Cara Membuat Material Design Related Post Di Blog

Sebelum melanjutkannya.

Apasih arti dari related post??

Lebih lengkapnya Related Post: ialah aplikasi script html yang di pasang pada blog atau website. Related post biasanya menampilkan gambar, Judul Post, dan beberapa content yang terkait dengan postingan/artikel yang sedang di baca.

Nah Tersu untuk alasan yang wajib untuk di pasang pada web atau blog bagaimana tuh??

Kegunaannya ialah biar pengunjung (pembaca) sanggup meneruskan bacaan yang terkait dan mengakibatkan pengunjung lebih betah (dalam mengunjungi situsnya).
Dari namanya saja Related Post "(Artikel Terkait)" Maka kategory artikel/postinganya yang sama di tampilkan dengan goresan pena di sebuah judul artikel (Post). Misalkan kategory yang sedang di baca ialah Tips Blog, maka yang akan di tampilkan oleh Related Post ini iyalah postinga/artikel yang serupa (terhubung) Kategory yang sama.
Yapsss sudah tau dengan pengertiannya, mari ikuti pemasangnya di bawah ini

Cara Memasang Material Design Related Post Di Blog

1. Buka terlebih dahulu Blogger>Tema>Edit Html. Lalu pastekan instruksi di bawah ini sempurna di atas instruksi ]]></b:skin> atau</style>, Untuk mempercepat pencarian silahkan kau klik tombol

CTRL

Pada Keyboard kamu.

/* Related Post CSS */ .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:#607D8B;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:#555;font-size:100%;font-family:'Roboto',Arial;text-transform:uppercase;text-align:left;font-weight:700;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);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;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);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}}

2. Nah jikalau sudah silahkan selanjutnya kau cari instruksi berikut<div class='post-footer-line post-footer-line-3> atau </article>, Silahkan shobat cari satu-persatu dengan instruksi yang sama, karna setiap template mempunyai markup instruksi yang berbeda-beda. kemudian pastekan instruksi berikut sempurna di bawahnya.

<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="Cara Membuat Material Design Related Post Di Blog Cara Membuat Material Design Related Post Di Blog" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Material Design Related Post Di Blog"><a class="related-post-item-title" title="Cara Membuat Material Design Related Post Di Blog" 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="Cara Membuat Material Design Related Post Di Blog Cara Membuat Material Design Related Post Di Blog" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Material Design Related Post Di Blog"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="Cara Membuat Material Design Related Post Di Blog" 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="Cara Membuat Material Design Related Post Di Blog"'+b+'><img alt="Cara Membuat Material Design Related Post Di Blog Cara Membuat Material Design Related Post Di Blog" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Material Design Related Post Di Blog"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="Cara Membuat Material Design Related Post Di Blog" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="Cara Membuat Material Design Related Post Di Blog Cara Membuat Material Design Related Post Di Blog" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="Cara Membuat Material Design Related Post Di Blog"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="Cara Membuat Material Design Related Post Di Blog" 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>