Cara Membuat Related Post di Bawah Artikel Blog
Kali ini saya akan membagikan tutorial Cara Membuat Related Post Di Bawah Artikel Blog dengan mudah.
Screenshot :
Related Post ini salah satu komponen penting pada blog atau website untuk memanjakan pengunjung oleh artikel-artikel terkait yang menarik. Untuk design tidak terlalu buruk dan nyaman dipandang mata, dan tentu saja sudah responsive.
Langsung saja jika ingin memasangnya pada blog sobat, ikuti langkah berikut ini.
Cara Membuat Related Post
- Pertama, letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>.
/* Related Post by */ .related-postbwrap{position:relative;margin:0 auto 30px auto;padding:0 0 20px 0;} .related-postbwrap h4{background:#1976d2;display:table;margin:0 0 15px 0;font-size:14px;color:#fff;font-weight:500;padding:4px 10px;border-radius:3px;font-family: Roboto, sans-serif;color: #fff;} .related-postbwrap h4:before{content:"\f045";font-family:fontawesome;margin-right:8px;font-weight:normal} .related-post-style-2,.related-post-style-2 li{list-style:none;margin:0;padding:0} .related-post-style-2 li{min-height:102px;background:#fff;overflow:hidden;position:relative;width:48.2%;float:left;margin:10px 20px 10px 0;padding:0;transition:all .1s} .related-post-style-2 li:nth-child(even){margin:10px 0} .related-post-style-2 li:hover{background:#fff;cursor:pointer}.related-post-style-2 li:hover .related-post-item-title{color:#1976d2} .related-post-style-2 .related-post-item-thumbnail{display:inline-block;width:100px;height:auto;max-width:none;max-height:none;background-color:transparent;border:none;float:left;margin:2px 10px 0 0;padding:0} .related-post-style-2 .related-post-item-title{display:block;font-size:14px;color:#455a64;overflow:hidden;padding:15px 10px 10px 5px;transition:all .3s;font-wight: 500;font-family: Roboto, sans-serif} .related-post-style-2 .related-post-item-title:hover{color:#1976d2} .related-post-style-2 .related-post-item-summary{display:none;} @media screen and (max-width:768px){.related-post-style-2 li,.related-post-style-2 li:nth-child(even){width:100%;float:none;margin:5px 0}}
Sobat bisa edit lagi kode tersebut sesuai selera.
- Kemudian, letakkan kode berikut ini tepat dibawah kode <div class='post-footer-line post-footer-line-3' atau </article>.
<div class='related-postbwrap' id='bpostrelated-post'/> <div class='clear'/> <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.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h4> Related Post </h4>", numPosts: 6, summaryLength: 120, titleLength: "auto", thumbnailSize: 100, noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ2ZfIpq6tm_FHIGxMEVrw44qUf84mXNgqTRymOw-Nn9MNqibzSq63dGr3Re_BldLx59hoE8jSii7nIKXxSY1fAEgU0L1_yGcxq4tNT2hmYDZuCvOdmocwYeQD_yjNaT-Lrhg86f_oES0J/s1600/no-img.png", containerId: "bpostrelated-post", newTabLink: false, moreText: "Read More", widgetStyle: 2, callBack: function() {} }; </script> <script type='text/javascript'> //<![CDATA[ /*! Related Post Widget */ var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"https://www.kabarsehatku.com",numPosts:4,summaryLength:370,titleLength:"auto",thumbnailSize:100,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="Cara Membuat Related Post Di Bawah Artikel Blog Cara Membuat Related Post di Bawah Artikel Blog" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="Cara Membuat Related Post di Bawah Artikel 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 Related Post Di Bawah Artikel Blog Cara Membuat Related Post di Bawah Artikel Blog" 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="Cara Membuat Related Post di Bawah Artikel 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 Related Post di Bawah Artikel Blog"'+b+'><img alt="Cara Membuat Related Post Di Bawah Artikel Blog Cara Membuat Related Post di Bawah Artikel Blog" 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="Cara Membuat Related Post di Bawah Artikel Blog" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="Cara Membuat Related Post Di Bawah Artikel Blog Cara Membuat Related Post di Bawah Artikel Blog" 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="Cara Membuat Related Post di Bawah Artikel 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>
- Jika sudah klik Simpan Template.