Tutorial Membuat Kolom Iklan Bersebelahan Dengan Related Post

Tutorial Membuat Kolom Iklan Bersebelahan Dengan Related Post Responsive - Halo pembaca setia blog seala kadarnya ini. Ini postingan pertama saya setelah vacum beberapa tahun wkwk. Maklum sibuk di dunia nyata :p kali ini saya akan membagikan tutorial/cara Tutorial Membuat Kolom Iklan Bersebelahan Dengan Related Post yang responsive. Widget ini saya adopsi dari wigdet iklan yang bersebelahan dengan widget subscribe. Jadi tertarik untuk memasangnya? Simak tutorial berikut ini wkwk

Kopi CSS berikut dan Letakan dia atas </style>  atau ]]></b:skin>
/* Related */ #post-bawah { position: relative; } #post-bawah { overflow:hidden; margin-top: 20px; } .ads-bawah { float:left; margin: 0; font:normal normal 11px/1.4 Roboto; padding : 0 0 0 7px; width:50%; box-sizing: border-box; } .ads-bawah .widget-content {float:center} .ads-bawah h4 { font-size:13px; padding: 3px 8px 5px; background-color: whitesmoke; margin-bottom: 10px; margin:0 -7px; } .related-post { float:right; margin: 0; font:normal normal 11px/1.4 Roboto; padding : 0 0 0 7px; width:50%; box-sizing: border-box; } .related-post h4 { font-size:13px; padding: 3px 8px 5px; background-color: whitesmoke; margin-bottom: 10px; margin:0 -7px; } .related-post-style-2, .related-post-style-2 li { padding:0; list-style:none; margin-top: 5px; padding: 0; list-style: none; min-height: 65px; } .related-post-style-2 { padding:0; margin:0 } .related-post-style-2 li { padding:0; border-bottom:1px solid #eee; overflow:hidden; } .related-post-style-2 li:last-child {border-bottom:none} .related-post-style-2 .related-post-item-thumbnail { width:52px; height:52px; max-width:none; max-height:none; background-color:transparent; border:none; padding:2px; float:left; margin:2px 10px 0 0; border: 1px solid #C4C4C4; } .related-post-style-2 .related-post-item-title { font-weight:bold; font-size:110%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: inherit; } .related-post-style-2 .related-post-item-summary { display:block; overflow:hidden; } .related-post-style-2 .related-post-item-more {display:none} @media only screen and (max-width:480px) { .ads-bawah { width:100%; float:none; border-right:none; border-top:1px solid #E4E4E4 } .related-post { width:100%; float:none; } }
Kemudian letakan kode dibawah ini tepat di atas kode <b:includable id='breadcrumb' var='posts'>
<b:includable id='bawah-post'> <div class='post-bawah' id='post-bawah'> <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;Artikel Terkait&lt;/h4&gt;&quot;, numPosts: 5, summaryLength: 100, titleLength: &quot;auto&quot;, thumbnailSize: 50, containerId: &quot;related-post&quot;, newTabLink: false, widgetStyle: 2, callBack: function() {} }; </script> <script type='text/javascript'> //<![CDATA[ /*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */ var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://ngudang.blogspot.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,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(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):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 title="'+t+'" alt="'+t+'" 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="'+t+'" 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="'+t+'" 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="'+t+'" 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> <div class='ads-bawah'> <h4>Ads</h4><center> ((((((((((Kode Iklan Sebelah Sini)))))))))))) </center></div> </div> <div class='cl'/> </b:includable>

Dan, jadi deh Kolom Iklan Bersebelahan Dengan Related Post. Oh iya, kode itu masih bisa dikembangkan, mungkin iklan sebelah iklan atau iklan dengan subscribe atau subscribe dengan artikel terkait. itu semua tergantung selera dan keinginan kalian. Akhir kata, selamat mencoba dan semoga berhasil.

Tutorial Membuat Kolom Iklan Bersebelahan Dengan Related Post 2016-10-01T13:34:00+07:00 Rating: 4.5 Diposkan Oleh: Anonymous