Selasa, 26 Juni 2018

Cara Membuat Related Post di Bawah Artikel Blog

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 :
Screenshot Related Post


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


  1. Pertama, letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>.

    /* Related Post by Panduan Kompi*/
    .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.
  2. 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'>
              &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; Related Post &lt;/h4&gt;&quot;,
          numPosts: 6,
          summaryLength: 120,
          titleLength: &quot;auto&quot;,
          thumbnailSize: 100,
          noImage: &quot;http://1.bp.blogspot.com/-Xakmg4CGXnA/Uw_8uqsGlwI/AAAAAAAALjg/AdRZNmOJpIA/s1600/no-img.png&quot;,
          containerId: &quot;bpostrelated-post&quot;,
          newTabLink: false,
          moreText: &quot;Read More&quot;,
          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)+"&hellip;":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)+"&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="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><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="" 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="'+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="" 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="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" 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="'+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>

  3. Jika sudah klik Simpan Template.
Nahh itu dia Cara Membuat Related Post Di Bawah Artikel Blog, Semoga Bermanfaat.

Artikel Terkait

Blogger, PHP Programmer, Web Clonner :v