Cara Menciptakan Related Post Ibarat Matched Content Google Adsense

Related Post yaitu biasa disebut Artikel Terkait. Kaprikornus yang disebut related post itu menampilkan artikel yang terkait dengan yang kita baca. Sesuai judul, kali ini related post yang aku bagikan menyerupai sekali menyerupai Matched Content unit iklan Google AdSense. Yang mana Related Post ini menampilkan 4 kolom artikel menyamping menyerupai sekali dengan Matched Content unit iklan Google AdSense.

Baca Juga :

Related Post ini sanggup dibilang User Freandly alasannya 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 sanggup meningkatkan pageview anda meningkat. Ok, pribadi 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 arahan berikut ini, dan letakkan diatas arahan ]]></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 arahan </body>
3. Copy & Paste arahan 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=" Kaprikornus yang disebut related post itu menampilkan artikel yang terkait dengan yang kita baca Cara Membuat Related Post Seperti Matched Content Google Adsense" class="matched-content-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="matched-content-item-title" title="Cara Membuat Related Post Seperti Matched Content Google Adsense" 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=" Kaprikornus yang disebut related post itu menampilkan artikel yang terkait dengan yang kita baca Cara Membuat Related Post Seperti Matched Content Google Adsense" 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="Cara Membuat Related Post Seperti Matched Content Google Adsense" 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="Cara Membuat Related Post Seperti Matched Content Google Adsense"'+b+'><img alt=" Kaprikornus yang disebut related post itu menampilkan artikel yang terkait dengan yang kita baca Cara Membuat Related Post Seperti Matched Content Google Adsense" 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="Cara Membuat Related Post Seperti Matched Content Google Adsense" href="'+v+'"'+b+">"+w+'</a><div class="matched-content-item-tooltip"><img alt=" Kaprikornus yang disebut related post itu menampilkan artikel yang terkait dengan yang kita baca Cara Membuat Related Post Seperti Matched Content Google Adsense" 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="Cara Membuat Related Post Seperti Matched Content Google 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>

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

Catatan : -

Anda sanggup meletakkan arahan berikut ini sempurna dibawah Button Share yang ada di blog anda, atau meletakkan arahan berikut ini sempurna 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, kalau anda mengalami kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Related Post Seperti Matched Content Google Adsense

Cara Menciptakan Related Post Ibarat Matched Content Google Adsense

Baca Juga

Populer Minggu ini Mamank Dzgn