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'. 

Baca Juga Lainnya:
- Cara Memasang Multifungsi Komentar di Blog ( Disqus, Facebook, dan Blog )
- Tips Rahasia Dibalik Daftar Google Adsense Agar Cepat Disetujui Sepenuhnya.
- Cara Mudah Menghasilkan Uang di Blog Dalam Sekejap

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 
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.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

50 comments

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

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

Balas

Cara ini suatu hari aku butuhkan
Jika sudah punya iklan

Balas

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

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

Balas

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

Balas

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

Balas

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

Hahaha, betul mas. Meningkatkan CTR blog :D

Balas

Huaaa... jadi pengen daftar AdSense. :(

Balas

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

Balas

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
This comment has been removed by the author.

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

Balas

sangat menggiurkan untuk dipasang

Balas

ini harus di coba kayanya. di tilik tilik dulu ah

Balas

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

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

Balas

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

Balas

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

Balas

wahhh buruan punya iklan mba hhe

Balas

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

Balas

samama sama brooo, smeoga membantu :D

Balas

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

Balas

iya saya juga banyak menemukan iklan iklan di tengah postingan,

Balas

sama sama mba, semoga membantu :v

Balas

ditunggu saja pasti di approve kok :D

Balas

nannti saya bagikan tutorial nya ya mas hhe ;D

Balas

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

Balas

responsif abis nih widget mba, tenang aja :D

Balas

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

Balas

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

Balas

Mantap jiwa...
Bolehlah nanti dicoba...

Balas

benar sekali mas, semoga bisa membantu ya :D

Balas

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

Balas

yeayyyy, bagikan dong mba hhe :D

Balas

Tutorial bermanfaat banget ini!

Balas

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

Balas

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

Balas

Berhasil kok om, mungkin peletakkannya yang salah :d

Balas

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

Balas

Bagus sekali tutorialnya membantu sekali tapi saya ingin related-nya saja yang mau di pasang bisa tidak dan tidak untuk setiap artikel.

Balas

Notification
Yuk Gabung menjadi member Diskusi Komunitas Blogger Indonesia yang tersebar di seluruh wilayah Indonesia, silahkan dipilih

- Forum Diskusi Blogger Indonesia
- Diskusi Komunitas Adsense Indonesia
- Komunitas Tutorial Blogger Indonesia

Terima kasih
Done