Selain megamenu yang direquest oleh beberapa sahabat Kompi, fitur dari Kompi Magazine lainnya yang juga direquest tutorialnya yaitu iklan dan related post berdampingan di tengah artikel.Nah postingan kali ini akan membahas tentang cara memasang iklan dan related post berdampingan di tengah artikel tersebut.
Sebenarnya memasang iklan dan related post di tengah artikel sudah di bahas oleh Bung Frangki. Di sini saya hanya sedikit memodifikasinya agar letak iklan dan related post berdampingan di tengah artikel seperti pada artikel Kompi Magazine berikut ini.
Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.
Silahkan simpan style CSS berikut di atas
</head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.post-body .inline_wrapper{width:100%;height:auto;text-align:center;margin:10px 0;padding:0}
.post-body .inline_wrapper .middle_post{width:calc(100% - 220px);display:block;float:right;}
.post-body .inline_wrapper .middle_post span{color:#999;font-size:10px;margin:0 auto 5px;display:block}
.related-post-by-title{width:200px;margin:15px 0;display:block;float:left;position:relative}
.related-post-by-title ul{padding:10px 17px 17px 30px;border:1px solid #ddd;margin:0;text-align:left;}
.related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:15px;font-size:15px;font-weight:700}
.related-post-by-title li {margin-top:10px;line-height:1.2}
.related-post-by-title li a{font-size:14px;font-weight:700;}
.clear{display:block;clear:both}
@media screen and (max-width:640px){.post-body .inline_wrapper .middle_post,.related-post-by-title{width:100%;float:none}
.post-body .inline_wrapper .middle_post{height:300px;}
}
/*]]>*/
</style>
</b:if>Kemudian silahkan cari kode
<b:includable id='post' var='post'> lalu gulir ke bawah dan temukan kode berikut atau yang seperti berikut:
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>Kemudian silahkan ganti kode tersebut dengan kode di bawah ini
<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>
<div class='widget-middle' id='widget-middle'>
<data:post.body/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='middle_post'>
<span>Advertisement</span>
<!-- kode Iklan letakkan di bawah ini -->
</div>
<div class='related-post-by-title' id='related-post-by-title'>
<script type='text/javascript'>
//<![CDATA[
function related_results_labels(e){for(var t=0;t<e.feed.entry.length;t++){var l=e.feed.entry[t];relatedTitles[relatedTitlesNum]=l.title.$t;for(var r=0;r<l.link.length;r++)if("alternate"==l.link[r].rel){relatedUrls[relatedTitlesNum]=l.link[r].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),t=new Array(0),l=0;l<relatedUrls.length;l++)contains(e,relatedUrls[l])||(e.length+=1,e[e.length-1]=relatedUrls[l],t.length+=1,t[t.length-1]=relatedTitles[l]);relatedTitles=t,relatedUrls=e}function contains(e,t){for(var l=0;l<e.length;l++)if(e[l]==t)return!0;return!1}function printRelatedLabels(){var e=Math.floor((relatedTitles.length-1)*Math.random()),t=0;for(document.write("<ul>");t<relatedTitles.length&&4>t;)document.write('<li><a href="'+relatedUrls[e]+'">'+relatedTitles[e]+"</a></li>"),e<relatedTitles.length-1?e++:e=0,t++;document.write("</ul>"),document.write()}var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script>
<h4>Baca juga:</h4>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'/>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=4"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
//<![CDATA[
removeRelatedDuplicates(); printRelatedLabels();
//]]>
</script>
</div>
<div class='clear'/>
</div>
</b:if>Silahkan simpan kode iklan sesuai petunjuk pada kode di atas. Angka 4 untuk mengatur jumlah related post yang tampil.
Kemudian silahkan simpan kode javascript ini di atas kode
</body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}}
var middleads = document.getElementById("inline_wrapper");var target = document.getElementById("widget-middle");
var opsi1 = target.getElementsByTagName("br");if (opsi1.length > 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName("blockquote");if (opsi2.length > 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName("h2");if (opsi3.length > 0){insertAfter(middleads,opsi3[0]);}
//]]>
</script>
</b:if>