1. Home
  2. SEO
  3. Teknologi Internet
  4. Cara Membuat Related Post Mirip Matched Content Adsense

Cara Membuat Related Post Mirip Matched Content Adsense

October 05, 2017
matched content adsense


Kali ini saya akan membahas Artikel Cara Membuat Related Post Mirip Matched Content Adsense menyerupai tampilan Matched Conten Google Adsense pada umumnya, cara ini bersama-sama cukup mudah tinggal menambahkan kode-kode pada templated blog.

Seperti yang sudah kita ketahui bersama, selain membuat dan menyajikan Konten yang berkualitas pada Blog atau website perlu diperhatikan juga penyajian tampilan pada Website atau Blog biar menambah banyak pengunjung atau visitor dan juga pastinya secara otomatis kalau pengunjung merasa nyaman pasti akan betah berlama-lama, nah kalau sudah menyerupai ini sudah pasti Blog atau website kita akan dianggap baik predikatnya di mata searc engine alasannya ialah rasio pentalan Bounce ratenya semakin kecil semakin bagus.

Terkait postingan kali ini akan membahas bagaimana membuat tampilan Blog atau website kita ada banyak variasi dan tampilannya tentunya tetap fokus utamanya ialah penyajian Konten artikelnya yang berkuaitas juga, alasannya ialah sepanjang pengamatan saya berbagai blog atau website yang hanya fokus pada SEOnya namun tidak memperhatikan konten yang disajikan bagi pembaca justru hal ini tidak baik dimata search engine.
Semenjak diluncurkannya oleh Google Adsense mengenai cara menampilkan iklan Matched Konten yang disediakan khusus bagi Publishernya banyak yang sudah menggunakannya untuk lebih mentargetkan iklan dengan postingan yang berada di dalam blog atau websitenya, tampilan matched conten ini semenjak pertama kali diluncurkan belum banyak perubahannya yang dilakukan oleh team Google adsense dan sepertinya mungkin tampilan ini belum ada perubahan lebih lanjut.

Nah bagaimana caranya kalau kita ingin membuat tampilan Related Post menyerupai layaknya tampilan Matched Content pada Google Adsense, apakah mampu menampilkannya di blogger ? jawabnya tentu bisa, bagi sahabat yang ingin mencoba membuatnya berikut simak cara penerapannya. 

1. Copy Paste instruksi CSS dibawah ini lalu simpan sempurna diatas kode </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. Jika sudah langkah pertama diatas lanjut sahabat cari instruksi menyerupai mirip dibawah 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>

Setelah ketemu instruksi diatas, tambahkan instruksi dibawah ini sempurna dibawahnya instruksi diatas

<b:if cond='data:blog.pageType == &quot;item&quot;'> <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;&lt;h4&gt;You Might Also Like:&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;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,widgetStyle:3,callBack:function(){}} </script> </b:if>

3. Berikutnya, sahabat copy instruksi Javascript bawah ini 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:"http://www.dbalik.com",numPosts:8,summaryLength:370,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",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="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="" 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> </b:if>

Lalu simpan dan SELESAI.

Silahkan terapkan cara diatas hal perlu diperhatikan penting ialah backup terlebih dahulu tempaled sahabat hal ini perlu dilakukan kalau nanti pada penerapan cara diatas terjadi error pada blog sobat, jadi mampu dikembalikan lagi menyerupai semula, alasannya ialah tipe struktur instruksi tiap templated blog berbeda-beda.

Demikian sahabat Pastingan saya ini Cara Membuat Related Post Mirip Matched Content Adsense, kalau ada yang ingin ditanyakan atau didiskusikan dapat mengisi kolom komentar dibawah ini dan sesuaikan yang ingin sahabat gunakan model komentarnya, SEMOGA BERMANFAAT.

Comments

Subscribe to: Post Comments ( Atom )