Cara Pasang Related Post dan Iklan di Tengah Postingan Blog Responsive

Cara Pasang Related Post dan Iklan di Tengah Postingan Blog Responsive



Cara Memasang Iklan dan Related Post di Tengah Postingan - Memasang Related Post atau iklan di tengah postingan selain untuk menambah jumlah CTR dari iklan atau menambah jumlah pengunjung pada setiap artikel yang dituliskan pada blog.
Baca juga: Pengaruh Penggunaan Nama Domain Terhadap Pencarian 

Memasang Related Post dan Iklan di Tengah Postingan

Untuk membuatnya sebenarnya mudah, hanya saja kamu butuh ketelitian untuk meletakkan widget ini didalam HTMLnya nanti. Ikuti saja panduannya dibawah ini:
Cari dan temukan kode  </head> lalu letakkan kode berikut ini tepat diatas kode tadi..
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* 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;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%;}}
</style>

<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>
</b:if> 

Langkah Selanjutnya, cari kode berikut ini atau temukan kode yang mirip mirip dengan kode ini..
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='artbody' itemprop='articleBody'><data:post.body/></div>
</b:if> 

Lalu ganti dengan kode dibawah ini..
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>
</b:if> 

Lalu tambahkan kode dibawah ini tepat dibawah kode yang barusan kamu ganti..
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 != &quot;true&quot;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' 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 -->
  <span>Advertisement</span>
// 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(&quot;inline_wrapper&quot;);var target = document.getElementById(&quot;widget-middle&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if> 

Yang aku tandain dengan mark berwarna biru itu adalah lebar dari Related Post nya, ubah sesuai dengan lebar dari template kamu.

atur jumlah artikel yang akan muncul nantinya pada " Related Post " yang sudah aku tandain warna merah dengan mark kuning. Lalu kalau sudah yakin penempatan kode nya sudah benar. 'Simpan Template'. 

Buka salah satu artikel kamu untuk mencoba apakah widget yang barusan kamu pasang berfungsi atau tidak. Peletakan related post dan iklan ini terkadang bisa berada di bawah atau diatas postingan namun masih di tengah.

Demikianlah Cara Memasang Related Post dan Iklan berada di Tengah Postingan Blog, Semoga bermanfaat :D

Baca Juga :
Cara Menghasilkan Uang dari Sosial Media dalam Sehari 
- Cara Mudah Menghasilkan Uang dari Membuat Blog
- Faktor yang Mempengaruhi Kecepatan Loading Blog Agar Pengunjung Betah 

49 komentar

Ini nih yang saya cari.. Bisa untuk meningkatkan pageviews blog, karena bisa bikin pengunjung mampir ke artikel lain kita :D ditambah sudah responsive.. Makasih Mas Andrie..

Balas dong :(

Penempatan slot iklan dan related post ditengah memang sangat strategis dan layak untuk dicoba.

Balas dong :(

Cara ini suatu hari aku butuhkan
Jika sudah punya iklan

Balas dong :(

Secara peribadi sebenarnya saya tidak begitu suka dan tertarik dengan artikel terkati dan iklan yang ditengah body. Karena mengganggu kenyamanan pengunjung saat membaca artikel. Tapi kalau niatnya hanya mengejar pendapatan dari iklan ,cara seperti diatas memanglan mujarab sekali.

Balas dong :(

Dan bisa menambah dolar cepat naik dan pastinya cepat cair juga.

Balas dong :(

Boleh nih dicoba, udah lama juga nyari bentuk ginian tapi gak pernah nemu. makasih banyak bro

Balas dong :(

sukeren banget nih tutorial soal related post ditengah dan iklan dalam artikelnya, patut dicobain nih...iya ah

Balas dong :(

sebenernya dilema ya, kalau taro related post ditengah bisa naikin PV, tapi bisa malah ganggu kenyamanan membaca.. but thanks infonya, jadi ikut belajar ngutak ngatik template :-)

Balas dong :(

Hahaha, betul mas. Meningkatkan CTR blog :D

Balas dong :(

Huaaa... jadi pengen daftar AdSense. :(

Balas dong :(

kalu saya belum pernah nyoba,, tapi apa salahnya dicoba,,, heheh dan emang banyak juga sih yang iklan ditengah artikel... :D

Balas dong :(

Pendapat saya sama kayak Mas Djangkaru. Tapi banyak yang butuh tutorial kayak gini. Kalau ada yang nanya bisa disarankan Googling atau cari artikel Mas Andrie.

Balas dong :(
Komentar ini telah dihapus oleh pengarang.

Boleh banget dicoba neh. Tfs mas

Balas dong :(

adsense saya ga di approve2
tp tips ini memang sangat bermanfaat. suatu saat pasti akan dibutuhkan

Balas dong :(

sangat menggiurkan untuk dipasang

Balas dong :(

ini harus di coba kayanya. di tilik tilik dulu ah

Balas dong :(

Baaang, ampuuuun. coding-coding aku belum begitu ngerti ._. wkwkwk

Anyway, bang. Flannel di header blogmu bagus. Boleh dimintak?

*INI KOMENTAR MACAM APA ANJER wkwkw

Salam kenal, Bang :D

Balas dong :(

related post udah ada di bawaan templateku
tinggal iklannya nih, belum ada yang amsang -_-

Balas dong :(

biasa widget seperti ini, agak sulit di pasang di blog dengan temnplate responsif, insya Allah nanti saya coba terapkan di blog saya

Balas dong :(

sangat bagus sekali untuk perkembangan iklan yaa, bagus nih buat iklan

Balas dong :(

semoga membantu ya mas :D

Balas dong :(

wahhh buruan punya iklan mba hhe

Balas dong :(

memang sih terlalu mengganggu ya mas, mungkin lebih dimodifikasi lagi supaya tidak terlalu mengganggu pengunjung seperti menyatuka dengan tulisan begitu ya mas

Balas dong :(

samama sama brooo, smeoga membantu :D

Balas dong :(

iyaa mba nanti saya modifikasi lagi supaya bisa enak dibaca pengunjung dan tidak terlalu mengganggu hhe

Balas dong :(

iya saya juga banyak menemukan iklan iklan di tengah postingan,

Balas dong :(

sama sama mba, semoga membantu :v

Balas dong :(

ditunggu saja pasti di approve kok :D

Balas dong :(

di bookmark dulu mas hhe

Balas dong :(

nannti saya bagikan tutorial nya ya mas hhe ;D

Balas dong :(

mungkin kalo tidak ada adsense dari google bisa mencoba adsense dari pihak luar juga banyak kok mas hhe

Balas dong :(

responsif abis nih widget mba, tenang aja :D

Balas dong :(

Sbnernya tutorial macam bgini nih yg kmaren2 saya cari dan saya butuhkan, tapi sekarang sudah diurungkan. Bookmark aja dulu deh, mantap artikelnya...

Balas dong :(

Kalo udah kode-kode begini harus teliti dan jeli deh.

Balas dong :(

Mantap jiwa...
Bolehlah nanti dicoba...

Balas dong :(

benar sekali mas, semoga bisa membantu ya :D

Balas dong :(

iya dong, kalo gak nanti error hheh, atau peletakkannya tidak sesuai dengan yang diinginkan hhe :D

Balas dong :(

yeayyyy, bagikan dong mba hhe :D

Balas dong :(

Tutorial bermanfaat banget ini!

Balas dong :(

mantap ide, dan kalau bisa dibuatin halam demonya kang. Untuk kaum pemula seperti saya bisa saja tidak mengerti ngelihat gambarnya saja kang...

Balas dong :(

belum berhasil... ada kode yang terlewatkan kali ya... hiks...
thanks om... saya coba lagi dulu... :D

Balas dong :(

Berhasil kok om, mungkin peletakkannya yang salah :d

Balas dong :(

Wahhhh sebenarnya halaman demonya kemarin ada, cuma saya hapus lagi... oke nanti saya buatkan lagi halaman demonya ya mas, terima kasih sarannya

Balas dong :(

Posting Komentar

Catatan 'Penting' Sebelum Berkomentar:
  • 1. Harap berkomentar sesuai dengan judul artikel.
  • 2. Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • 3. Tidak perlu tulis link di komentar, yang sudah komentar pasti akan saya kunjungi balik lewat profil kamu.
  • 4. Terima Kasih sudah berkunjung, untuk hubungi saya bisa melalui 'Halaman Kontak'
  • *Berkomentarlah dengan baik, Kepribadian kamu tercemin saat berkomentar.