Cara Membuat Related Post Seperti Matched Content Google Adsense

Related Post adalah biasa disebut Artikel Terkait. Jadi yang disebut related post itu menampilkan artikel yang terkait dengan yang kita baca. Sesuai judul, kali ini related post yang saya bagikan mirip sekali seperti Matched Content unit iklan Google AdSense. Yang mana Related Post ini menampilkan 4 kolom artikel menyamping mirip sekali dengan Matched Content unit iklan Google AdSense.

Baca Juga :

• Cara Membuat Related Post Hanya Menampilkan Judul Saja di Blogger
• Cara Membuat Related Post Thumbnail&Snippet Responsive

Related Post ini bisa dibilang User Freandly karena memudahkan pengunjung untuk membaca artikel-artikel yang masih dalam satu topik yang sama. Related post juga menuntun pengunjung blog kita menuju postingan atau artikel yang lain dan yang berkaitan dengan postingan yang mereka lihat. Ok, dengan memasang related post di blogger kemungkinan dapat meningkatkan pageview anda meningkat. Ok, langsung saja ke proses pembuatan.

Screenshoot :

Cara Membuat Related Post Seperti Matched Content Google Adsense

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema/Template.
3. Pilih Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

.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:0 7px;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:13px;font-weight:700;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}
}

2. Temukan lagi kode </body>
3. Copy & Paste kode berikut ini, dan letakkan diatas kode </body>

<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://maycyber-download.blogspot.com",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>

4. Terakhir, Temukan kode <data:post.body/> atau <div class='sharepost'>

Catatan : -

Anda bisa meletakkan kode berikut ini tepat dibawah Button Share yang ada di blog anda, atau meletakkan kode berikut ini tepat dibawah Page Number Navigasi.

<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>

Demikian, bila anda mengalami kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Related Post Seperti Matched Content Google Adsense

Share this post

Related Post