Cara Membuat Related Post Seperti Matched Content Google

adscblog

Related Post atau bisa juga dengan Artikel terkait adalah salah satu Label atau kelompok yang menampilkan artikel yang berkaitan dengan postingan blog yang sedang terbuka atau yang sedang di baca

Related Post ini biasa nya berada di bagian bawah Postingan dan menampilkan postingan postingan yang berkaitan dengan artikel yang sedang di baca oleh para pengujung blog dan sesuai dengan judul artikel lain nya

Dengan ada nya Realted Post atau Artikel terkait yang berada di bagian bawah postingan blog sangat berguna bagi para pengujung blog untuk terus bisa tetap berada di blog kita dan membuka postingan lain nya yang berkaitan dengan artikel yang sedang di baca nya

Dan Kali ini saya akan berbagi sebuah Related Post yang dimana related post ini mirip dengan Matched Content atau Konten yang sesuai yang di keluarkan Oleh Google Adsense,dengan tampilan 4 kolom Thumbnail

Cara Membuat Related Post atau Artikel terkait mirip Matched Content Mbah Google Adsense

Related Post atau Artikel terkait ini sangat keren dan Sobat pun bisa mencoba nya,dan untuk contoh nya lebih jelas sobat blogger bisa lihat di bawah postingan ini,related postingan mirip dengan yang saya pakai di blog ini

Untuk membuat Related post atau artikel terkait mirip Matched Content ini bisa sobat ikuti langkah-langkah penerapan nya sebagai berikut

• Silahkan masuk ke bagian Akun Blogger sobat
• Setelah itu silahkan sobat Klik blog yang sobat ingin pasang related Post tersebut
• Kemudian Klik Tema > Edit Html
• Seelah berada di bagian edit html silahkan sobat letakan kode css berikut

/* Matched Content gblog.id*/
.matched-content h4{margin:5px;font-size:20px;font-weight:600;text-align:center;border-radius:4px;padding:0;color:#fff;background:#455a64;border:8px solid #455a64}
.matched-content{margin:0 0 0 -4px;padding:0;font-size:13px;text-align:left;box-sizing:border-box}
.matched-content,.matched-content-style-3 .matched-content-item{-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.matched-content-style-3,.matched-content-style-3 li{margin:0!important;padding:0!important;list-style:none;word-wrap:break-word;overflow:hidden}
.matched-content-style-3 .matched-content-item{display:block;float:left;width:25%;height:155px;padding-left:4px!important;margin:0 0 4px!important;box-sizing:border-box}
.matched-content-style-3 .matched-content-item-thumbnail{display:block;margin:0 0 10px;width:100%;height:90px;max-width:none;max-height:none;background-color:transparent;padding:0}
.matched-content-style-3 .matched-content-item-tooltip{padding:0px;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.matched-content-style-3 .matched-content-item-tooltip a.matched-content-item-title{font-size:16px;font-weight:500;color:#666666!important}
.matched-content-style-3 .matched-content-item-tooltip a.matched-content-item-title:hover{text-decoration:underline}
@media screen and (max-width:1024px){
  .matched-content{margin:0 0 0 -2px;border:1px solid #455A63;border-radius:4px}
.matched-content-style-3 .matched-content-item{height:123px;padding-left:2px!important;margin:0 0 2px!important}
.matched-content-style-3 .matched-content-item-thumbnail{height:67px}
.matched-content-style-3 .matched-content-item-tooltip a.matched-content-item-title{font-size:12px}
}
@media screen and (max-width:880px){
  .matched-content-style-3 .matched-content-item{float:none;width:100%;height:103px;margin:0 0 12px!important}
.matched-content-style-3 .matched-content-item>a.matched-content-item-title{display:inline!important;float:left;width:50%}
.matched-content-style-3 .matched-content-item-thumbnail{height:103px}
.matched-content-style-3 .matched-content-item-tooltip{padding:0 7px;overflow:hidden;width:50%;float:left;display:inline;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.matched-content-style-3 .matched-content-item-tooltip a.matched-content-item-title{font-size:14px;font-weight:700;color:#666666!important}
}
@media screen and (max-width:800px){
  .matched-content-style-3 .matched-content-item{display:block;float:left;width:25%;height:160px;padding-left:4px!important;margin:0 0 4px!important;box-sizing:border-box}
.matched-content-style-3 .matched-content-item>a.matched-content-item-title{display:block!important;float:none;width:100%}
.matched-content-style-3 .matched-content-item-thumbnail{height:93px}
.matched-content-style-3 .matched-content-item-tooltip{padding:0 7px;overflow:hidden;text-overflow:ellipsis;width:100%;float:none;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.matched-content-style-3 .matched-content-item-tooltip a.matched-content-item-title{font-size:13px}
}
@media screen and (max-width:603px){
  .matched-content{margin:0 0 0 -2px}
.matched-content-style-3 .matched-content-item{height:123px;padding-left:2px!important;margin:0 0 2px!important}
.matched-content-style-3 .matched-content-item-thumbnail{height:67px}
.matched-content-style-3 .matched-content-item-tooltip a.matched-content-item-title{font-size:12px}
}
@media screen and (max-width:533px){
  .matched-content-style-3 .matched-content-item{float:none;width:100%;height:108px;margin:0 0 12px!important}
.matched-content-style-3 .matched-content-item>a.matched-content-item-title{display:inline!important;float:left;width:50%}
.matched-content-style-3 .matched-content-item-thumbnail{height:108px}
.matched-content-style-3 .matched-content-item-tooltip{padding:0 7px;overflow:hidden;width:50%;float:left;display:inline;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.matched-content-style-3 .matched-content-item-tooltip a.matched-content-item-title{font-size:14px;font-weight:700;color:#666666!important}
}
@media screen and (max-width:414px){
  .matched-content-style-3 .matched-content-item,.matched-content-style-3 .matched-content-item-thumbnail{height:87px}
}
@media screen and (max-width:375px){
  .matched-content-style-3 .matched-content-item,.matched-content-style-3 .matched-content-item-thumbnail{height:77px}
.matched-content-style-3 .matched-content-item-tooltip{-webkit-line-clamp:3}
}
@media screen and (max-width:320px){
  .matched-content-style-3 .matched-content-item,.matched-content-style-3 .matched-content-item-thumbnail{height:63px}
.matched-content h4{font-size:24px}


}

• Setelah itu silahkan sobat leakan kode HTML berikut di bawah Postingan Blog

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='matched-content' id='matched-content'/>
<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:8,summaryLength:0,titleLength:&quot;auto&quot;,thumbnailSize:172,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;matched-content&quot;,newTabLink:false,moreText:&quot;Read More&quot;,widgetStyle:3,callBack:function(){}}
</script>
</b:if>

• Kemudian silahkan sobat cari kode </body> dan letakan kode berikut sebelum kode </body> tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"https://www.gblog.id",numPosts:8,summaryLength:370,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"matched-content",newTabLink:false,moreText:"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="matched-content-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(/.*?:\/\//g , "//").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="" class="matched-content-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="matched-content-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="matched-content-item-summary"><span class="matched-content-item-summary-text">'+u+'</span> <a href="'+v+'" class="matched-content-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="matched-content-item" tabindex="0"><a class="matched-content-item-title" href="'+v+'"'+b+'><img alt="" class="matched-content-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="matched-content-item-tooltip"><a class="matched-content-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="matched-content-item" tabindex="0"><a class="matched-content-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="matched-content-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="matched-content-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="matched-content-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="matched-content-item-tooltip"><img alt="" class="matched-content-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="matched-content-item-summary"><span class="matched-content-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>
</b:if>

• Kemudian Save dan lihat hasil nya

Nah itulah cara membuat Related Post atau artikel terkait yang mirip dengan Matched Content miliki Mbah Google Adsense
Semoga artikel ini bisa membantu sobat blogger semua,selamat mencoba.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 24 Agustus and have 0 komentar