Cara Menciptakan Related Posts Ibarat Matched Content Adsense

Related Post merupakan script embel-embel bagi sebuah blog yang sanggup menampilkan judul post dan biasanya juga menampilkan gambar, dan beberapa isinya yang terkait dengan apa yang sedang dibaca oleh pengunjung.

Dan niscaya nya setiap template memiliki Related Post dengan tampilan yang berbeda - beda. Seperti hal nya tampilan related post yang ada di blog ini dengan tampilan ibarat Matched Content Adsense. Yaa meskipun tidak terlalu ibarat mirip orisinil nya. Tapi tidak terlalu jelek untuk di lihat.

Mungkin bagi teman yang belum mendapat Fitur Matched Content dari Google Adsense tidak ada salah nya untuk mencoba mencicipi merubah Related Posts yang ada di blog kalian menjadi Seperti tampilan Matched Content Adsense.

Related Post ini sudah termasuk sanggup kalian pasang iklan di dalam nya. Makara terlihat ibarat Matched Content Adsense sungguhan. Bila teman ingin mencoba nya silahkan teman ikuti langkah - langkah di bawah ini.

Cara Membuat Related Posts Seperti Matched Content Adsense

1. Silahkan copy arahan CSS di bawah ini dan simpan di atas arahan </head>

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .related-post h4{margin:0 10px 10px 4px!important;font-size:30px;font-weight:500;padding:0;color:#141924} .related-post{margin:0 0 0 -4px;padding:0;font-size:13px;text-align:left;box-sizing:border-box} .related-post,.related-post-style-3 .related-post-item{-moz-box-sizing:border-box;-webkit-box-sizing:border-box} .related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0!important;list-style:none;word-wrap:break-word;overflow:hidden} .related-post-style-3 .related-post-item{display:block;float:left;width:25%;height:155px;padding-left:4px!important;margin:0 0 4px!important;box-sizing:border-box} .related-post-style-3 .related-post-item-thumbnail{display:block;margin:0 0 10px;width:100%;height:90px;max-width:none;max-height:none;background-color:transparent;padding:0;} .related-post-style-3 .related-post-item-tooltip{padding:0 7px;overflow:hidden;text-overflow:ellipsis;display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .related-post-style-3 .related-post-item-tooltip a.related-post-item-title{font-size:13px;font-weight:700;color:#666666!important;} .related-post-style-3 .related-post-item-tooltip a.related-post-item-title:hover{text-decoration:underline} @media screen and (max-width:1024px){.related-post{margin:0 0 0 -2px;} .related-post-style-3 .related-post-item{height:123px;padding-left:2px!important;margin:0 0 2px!important;} .related-post-style-3 .related-post-item-thumbnail{height:67px;} .related-post-style-3 .related-post-item-tooltip a.related-post-item-title{font-size:12px;} } @media screen and (max-width:880px){.related-post-style-3 .related-post-item{float:none;width:100%;height:103px;margin:0 0 12px!important;} .related-post-style-3 .related-post-item>a.related-post-item-title{display:inline!important;float:left;width:50%;} .related-post-style-3 .related-post-item-thumbnail{height:103px;} .related-post-style-3 .related-post-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} .related-post-style-3 .related-post-item-tooltip a.related-post-item-title{font-size:14px;font-weight:700;color:#666666!important;} } @media screen and (max-width:800px){.related-post-style-3 .related-post-item{display:block;float:left;width:25%;height:160px;padding-left:4px!important;margin:0 0 4px!important;box-sizing:border-box} .related-post-style-3 .related-post-item>a.related-post-item-title{display:block!important;float:none;width:100%;} .related-post-style-3 .related-post-item-thumbnail{height:93px;} .related-post-style-3 .related-post-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;} .related-post-style-3 .related-post-item-tooltip a.related-post-item-title{font-size:13px;} } @media screen and (max-width:603px){.related-post{margin:0 0 0 -2px;} .related-post-style-3 .related-post-item{height:123px;padding-left:2px!important;margin:0 0 2px!important;} .related-post-style-3 .related-post-item-thumbnail{height:67px;} .related-post-style-3 .related-post-item-tooltip a.related-post-item-title{font-size:12px;} } @media screen and (max-width:533px){.related-post-style-3 .related-post-item{float:none;width:100%;height:108px;margin:0 0 12px!important;} .related-post-style-3 .related-post-item>a.related-post-item-title{display:inline!important;float:left;width:50%;} .related-post-style-3 .related-post-item-thumbnail{height:108px;} .related-post-style-3 .related-post-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} .related-post-style-3 .related-post-item-tooltip a.related-post-item-title{font-size:14px;font-weight:700;color:#666666!important;} } @media screen and (max-width:414px){.related-post-style-3 .related-post-item,.related-post-style-3 .related-post-item-thumbnail{height:87px;} } @media screen and (max-width:375px){.related-post-style-3 .related-post-item,.related-post-style-3 .related-post-item-thumbnail{height:77px;} .related-post-style-3 .related-post-item-tooltip{-webkit-line-clamp:3;} } @media screen and (max-width:320px){.related-post-style-3 .related-post-item,.related-post-style-3 .related-post-item-thumbnail{height:63px;} .related-post h4{font-size:24px;} } </style> </b:if> 

2. Lalu teman cari arahan ibarat ini atau ibarat arahan di bawah ini.

 <b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>   <data:post.body/> </b:if>       <div class='clear'/> <!-- clear for photos floats -->     </div> 

Lalu silahkan simpan arahan di bawah ini di bawah arahan di atas.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class='related-post'> <h4>You Might Also Like:</h4>   </div> <div> UNIT MATCHED CONTENT DI SINI </div> <div class='clear'/> <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;&quot;,numPosts:8,summaryLength:0,titleLength:&quot;auto&quot;,thumbnailSize:172,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> <div class='clear'/> </b:if> 

3. Silahkan simpan arahan javascript di bawah ini di atas arahan </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:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:200,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(/.*?:\/\//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=" Related Post merupakan script embel-embel bagi sebuah blog yang sanggup menampilkan judul post Cara Membuat Related Posts Seperti Matched Content Adsense" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="Cara Membuat Related Posts Seperti Matched Content Adsense" 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=" Related Post merupakan script embel-embel bagi sebuah blog yang sanggup menampilkan judul post Cara Membuat Related Posts Seperti Matched Content Adsense" 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 Posts Seperti Matched Content Adsense" 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 Posts Seperti Matched Content Adsense"'+b+'><img alt=" Related Post merupakan script embel-embel bagi sebuah blog yang sanggup menampilkan judul post Cara Membuat Related Posts Seperti Matched Content Adsense" 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 Posts Seperti Matched Content Adsense" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt=" Related Post merupakan script embel-embel bagi sebuah blog yang sanggup menampilkan judul post Cara Membuat Related Posts Seperti Matched Content Adsense" 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 Posts Seperti Matched Content Adsense" 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> 

Silahkan ganti goresan pena UNIT MATCHED CONTENT DI SINI dengan arahan iklan adsense sobat.

Biar iklan terlihat ibarat Matched Content Adsense, teman sanggup memakai arahan iklan In-Feed Ads. Dan tinggal di setting dari segi tampilan warna, ukuran gambar dan lain nya yang ada di arahan iklan In-Feed ads.



Mungkin itu saja yang sanggup aku bagikan pada kesempatan kali ini. Semoga artikel ini sanggup bermanfaat buat teman yang sedang mencari Cara Membuat Related Posts Seperti Matched Content Adsense. Selamat mencoba!