Pada kesempatan kali ini, saya akan membagikan lagi tentang kode HMTL yang berguna untuk keperluan blog yang kita kelola. kegunaan dari kode HMTL ini adalah. untuk membuat unit iklan berada di bagian tengah dalam artikel blog dan di tambah dengan fiktur artikel terkait, yang berguna untuk memudahkan para visitor untuk melihat isi halaman blog anda.
Untuk menerapkan tehnik tersebut, sobat tidak perlu untuk ahli dalam hal masalah coding. sebab disini saya akan langsung membagikan kode HMTL dan CSS yang siap anda terapkan langsung melalui edit tema HMTL blogspot nantinya, sebelum anda menerapkan cara ini, alangkah baik nya anda backup dulu template yang anda gunakan, untuk menjaga terjadi nya eror atau kerusakan dalam tampilan template anda.
Baca juga : 112 Artikel blog diperbaiki untuk bisa di terima google ads
Kode unit iklan anda sebelum di pasang ke dalam artikel blog. anda harus melakukan parse kode unit iklan, jika tidak di lakukan parse template anda tidak akan bisa memasang kode unit iklan, disaat anda melakukan simpan pada edit HMTL, maka akan ada informasi tentang kesalahan pada kode, untuk itu terlebih dulu anda lakukan parse kode unit iklan supaya template bisa di simpan dan tidak ada laporan kesalahan dalam template.
Tutorial Memasang Kode Iklan Berada di Tengah Postingan Tambah Artikel Terkait
Langkah pertama: Salin kode CSS yang tertera di bawah ini
/* related and ads on middle postpage */
#inline_wrapper{display:block;padding:0;margin:0 auto}
.related_inline_wrapper{width:100%;display:block;overflow:hidden}
.related-post-by-title{width:70%;margin:15px auto;display:block;float:left;position:relative}
.related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0}
.related-post-by-title h4{display:inline-block;background:#fff;z-index: 99;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700}
.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}
.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}
.ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;}
@media screen and (max-width:600px){.related-post-by-title{width:100%;}}Langkah kedua: Paste kode CSS di atas dibagian kode sebelum ]]></b:skin> atau </style>
Langkah ketiga: Copy lagi kode HMTL yang ada dibawah ini, dengan menekan tombol CRTL+C
<b:if cond='data:blog.pageType == "item"'>
<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='related_inline_wrapper' id='related_inline_wrapper'>
<!-- Related posts inline -->
<div class='related-post-by-title' id='related-post-by-title'>
<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=3"' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
<div>
<!-- Related posts inline -->
<div>
<div class='ads_middle'> <!-- ADS MIDDLE POST -->
Advertisement
// kode Iklan yang sudah diparse, letakkan disini
</div>
</div>
<script type='text/javascript'>
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>
Langkah ketiga: Cari kode berikut yang ada pada template sobat, di bagian <b:includable id='post' var='post'> dan cari kode <data:post.body/> disini kode terletak ada banyak jenis nya, jadi silahkan sobat coba satu-persatu untuk mengantinya. Untuk template dari Arlina Design anda bisa cari kode <p><data:post.body/></p></b:if> dan ganti kode yang ada dibawah nya dengan kode yang anda copy tadi sebelumnya.
Langkah keempat: Copy lagi kode Jquery yang ada pada kotak dibawah ini
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<3){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write();};
//]]>
</script>
Langkah kelima: Paste kode di atas tersebut tepat dibagian sebelum kode </head>.
Terakhir simpan template
Jika cara yang anda lakukan dengan teliti dan benar, maka hasil nya bisa anda lihat pada setiap artikel blog yang tertanam unit iklan dan artikel terkait di bagian tengah. Dan perlu di ingat, kode iklan anda harus di parse dulu sebelum memasang kode unit iklan pada bagian kode di atas.
Terakhir simpan template
Jika cara yang anda lakukan dengan teliti dan benar, maka hasil nya bisa anda lihat pada setiap artikel blog yang tertanam unit iklan dan artikel terkait di bagian tengah. Dan perlu di ingat, kode iklan anda harus di parse dulu sebelum memasang kode unit iklan pada bagian kode di atas.