Memasang Iklan Adsense di Tengah Postingan

Memasang Iklan Adsense di Tengah Postingan

Tutorial

Unknown 5

Untuk meletakan unit iklan adsense terserah keingan kita  tidaklah  sulit. Ada dua cara untuk memasang  kode unit iklan adsense pada blog.

Pertama memasangnya melalui menu widget, dan kedua yaitu memasangnya lansung pada template blog seperti biasa sebelum kita memasangkan kode unit iklan lansung pada template blog maka harus di prase terlebih dahulu agar kode unit iklan tersebut bisa di baca secara sempurna oleh template blog dan tidak terjadinya error kode.

Nah bagaimana cara pasang unitk iklan adsense ditengah postingan?. Mari ikuti langkah-langkah berikut ini

Cara Memasang Iklan Adsense di tengah artikel postingan.
Langkah-langkahnya adalah sebagai berikut :

1. Seperti biasa login ke  akun google adsense anda, lanjutkan dengan  memilih kode unit iklan adsense yang akan anda pasangkan di blog nantinya. Copy kode unit iklan tersebut.
2. Lakukan parse pada situs parse terserah di mana akan anda prasekan banyak situs parse tersedia dengan gratis, Copy hasil parse tadi untuk kita letakan di template blog.
3. Login ke blog anda. Pilih menu template >>> Edit HTML
4. Gunakan CTRL + F, untuk mempermudah pencarian anda di edit HTML >> Cari kode berikut ini  “<data:post.body/> “  biasanya terdapat beberapa kode yang sama, pilih Kode nomer dua untuk menampilkan postingan artikel anda.
5. Lalu Anda Ganti kode “<data:post.body/>“ dengan kode berikut ini :

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='googlepublisherads' style='margin:20px 0'>

<center>
Pastekan Disini letak kode unit iklan yang sudah anda parse tadi
</center>

</div>
<div expr:id='&quot;post2&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script> 

6. Lakukan penyimpanan atau Save template.

Ditahapan ini anda telah berhasil memasang kode unit iklan adsense di tengah postingan.

Memasang Iklan Adsense di Postingan Dengan Desain Responsive

Memasang Iklan Adsense di Postingan Dengan Desain Responsive

Tutorial

Unknown 1

Jika anda sembarangan memasang unit iklan adsense for content di area postingan yang menggunakan desain web responsive, maka akan muncul pop up atau jendela munculan, dan terkadang muncul jendela baru yang berasal dari iklan tersebut.
Hal ini bisa mengakibatkan akun adsense kita dibanned.

Agar tidak beresiko dibanned, maka unit iklan yang kita pasang di area postingan jangan sampai memunculkan pop up alias jendela munculan maupun jendela baru / new tab.

Sebenarnya Kita boleh merubah unit iklan adsense responsive agar sesuai dengan tampilan terbaik di semua layar perangkat. Namun, merubah unit iklan responsive ini harus mengikuti batasan-batasan yang diijinkan oleh google. Misalnya, kita boleh merubah ad format dari auto ke horizontal, vertical dan rectangle (kotak).

Namun, menurut saya format iklan yang pantas untuk ditempatkan di area postingan adalah horisontal dan kotak. Sedangkan format vertical hanya pantas untuk ditempatkan di sidebar saja.

Saran:
1. Untuk unit iklan di atas judul postingan, sebaiknya gunakan format “auto” yang merupakan default responsive yang disarankan google, agar google menentukan format iklan yang tepat. Karena iklan yang terlalu besar tidak boleh ditempatkan di atas judul postingan di blog yang dioptimalkan untuk ponsel cerdas.
 Dimana penempatan iklan di desain web responsive ini nantinya berlaku di layar ponsel cerdas.

2. Untuk unit iklan di bawah postingan, anda boleh menggunakan default responsive (auto), atau anda juga boleh merubahnya ke format kotak (rectangle). Saya sendiri menggunakan format kotak untuk iklan di bawah postingan.

( ? ) Contoh merubah kode iklan responsive yang diijinkan google seperti dibawah ini:

<ins class=”adsbygoogle”
    style=”display:block;”
    data-ad-client=”ca-pub-1234″
    data-ad-slot=”5678″
    data-ad-format=”auto“></ins>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Note:
auto bisa anda ganti dengan rectangle, horizontal atau vertical. Anda juga bisa menggabungkan dua format dengan dibatasi tanda koma. Misalnya: “retangle, horizontal”, atau “retangle, vertical”.

Namun, jika anda memasang iklan responsive di bawah postingan dengan format kotak atau rectangle, maka warna judul iklan jangan sama dengan link di area postingan.

Saran saya gunakan warna default google. Tujuannya agar pembaca bisa membedakan link iklan dan link postingan, sehingga tidak sampai terjadi klik tidak sengaja.

Memasang Iklan dibawah Judul dan Akhir Postingan

Memasang Iklan dibawah Judul dan Akhir Postingan

Tutorial

Unknown Add

Untuk memasang iklan di akhir postingan, diterapkannya sangat mudah. Silahkan login ke dasboard blogspot Anda, lalu pilih Template dan Edit HTML. Pada laman editor HTML, cari Kode berikut dengan bantuan Ctrl F.

<!-- IKLAN DIBAWAH JUDUL POSTING (Start)-->

Terlihat digambar diatas, pada template Sang ADS ini sudah diatur penempatan iklan yang akan ditampilkan dibawah Judul postingan, dan di Akhir Postingan.

Perhatikan Kode :

  <!-- IKLAN DIBAWAH JUDUL POSTING (Start)-->

  <!-- IKLAN DIBAWAH JUDUL POSTING (End)-->

<data:post.body/> <!-- IKLAN DITENGAH POSTING, Silahkan Baca Tutorial di Blog ini -->

  <!-- IKLAN DIBAWAH POSTINGAN (Start)-->

  <!-- IKLAN DIBAWAH POSTINGAN (End)-->

Untuk cara memasukan Kode iklan Anda, cukup mengisikan Kode iklan tepat dibawah kode (Start), seperti berikut ini :

  <!-- IKLAN DIBAWAH JUDUL POSTING (Start)-->
   KODE IKLAN DISINI
  <!-- IKLAN DIBAWAH JUDUL POSTING (End)-->

Silahkan melakukan modifikasi, namun jangan merubah kaidah iklannya.
Selamat mencoba. Jika masih ada yang belum jelas, mari mendiskusikannya di kolom komentar.

Happy Blogging..

Cara Memasang Widget Komentar Terbaru dari Disqus

Cara Memasang Widget Komentar Terbaru dari Disqus

Tutorial

Unknown Add

Seperti yang kita tahu, Disqus merupakan salah satu platform sistem komentar terpopuler saat ini. Selain dengan tampilan yang profesional.

Disqus juga menawarkan fitur-fitur yang menarik diantaranya adalah sistem moderasi dan edit komentar yang dimana komentar dapat kita edit jika ada salah satu pengunjung yang berkomentar dengan menyisipkan link atau menyebutkan salah satu kata yang sudah disaring di pengaturan Disqus.

Masih banyak keunggulan lain yang ditawarkan Disqus, namun di sini saya akan berbagi bagaimana Cara Memasang Widget Komentar Terbaru dari Disqus di blog Anda.

Fungsi widget komentar terbaru dari Disqus ini adalah untuk menampilkan komentar terbaru baik dari pengunjung maupun admin yang mengomentari artikel di blognya. Bagi yang tertarik, Silakan disimak langkah berikut :

Pastikan di blog Anda sudah menggunakan sistem komentar Disqus

1. Login ke Blogger > Tata letak > Buat widget baru HTML/Javascript > Kemudian tambahkan script komentar Disqus di bawah ini di dalam widget :

<style scoped="scoped" type="text/css">
#RecentComments{display:block;width:100%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;}
#RecentComments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto;}
#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#444}
#RecentComments p.dsq-widget-meta a:hover{color:#ff675c}
#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#736fb8;font-weight:600}
#RecentComments li.dsq-widget-item:last-child{border-bottom:none}
#RecentComments a.dsq-widget-user {display:table;color:#736fb8;font-weight:600;}
#RecentComments a.dsq-widget-user:hover{color:#999;}
#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
#RecentComments .dsq-widget-comment p{display:inline-block;font-size:88%;margin:0;font-weight:400;color:#444}
#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}
#RecentComments .dsq-widget-item pre:hover {opacity:1}
#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}
#RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}
#RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}
</style>
<div id="RecentComments" class="dsq-widget">
<script defer="defer" type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://sangADS.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</div>

Ganti kode yang ditandai dengan nama user blog Disqus Anda.


2. Simpan widget dan lihat hasilnya.

Demikian tutorial Cara Memasang Widget Komentar Terbaru dari Disqus, semoga bermanfaat. Salam Blogger.

Memasang Kotak Widget Sosial Media di Blog

Memasang Kotak Widget Sosial Media di Blog

Tutorial

Unknown Add

Hari ini saya akan berbagi sebuah widget sosial media untuk menghiasi blog sobat yang berfungsi untuk menyimpan link dari akun sosial media sobat dengan tampilan yang menarik.

Baiklah, bagi yang ingin mencobanya silakan ikuti langkah berikut ini :

Memasang Kotak Widget Sosial Media di Blog
Widget ini menggunakan font Awesome, silakan tambahkan link CSS berikut di atas </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Login ke Blogger > Buka Template Editor > Salin kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Sosial Media Widget */
#HTML68 .sosmedarl-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.sosmedarl-img{position:relative;max-height:140px;overflow:hidden}
.sosmedarl-img img {max-width:100%;width:100%;transition:all .6s;}
.sosmedarl-img:hover img{transform:scale(1.2) rotate(-10deg)}
.sosmedarl-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.sosmedarl-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.sosmedarl-float{text-align:center;display:table;width:100%;height:100%}
.sosmedarl-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}
.sosmedarl-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}
.sosmedarl-float a i{font-weight:normal;margin:0 5px 0 0}
.sosmedarl-wrpicon{display:block;margin:15px auto;position:relative;}
.sosmedarl-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .sosmedarl-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .sosmedarl-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .sosmedarl-icon i{font-family:fontawesome;margin:0 3px 0 0}
.sosmedarl-icon.fbl a{background:#3b5998}
.sosmedarl-icon.twitt a{background:#19bfe5}
.sosmedarl-icon.crcl a{background:#d64136}
.sosmedarl-icon.fbl a:hover,.sosmedarl-icon.twitt a:hover,.sosmedarl-icon.crcl a:hover{background:#404040}
.extender .sosmedarl-icon:hover a,.extender .sosmedarl-icon a:hover{color:#fff;}
.sosmedarl-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.sosmedarl-info p{margin:5px 0}
.sosmedarl-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.sosmedarl-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.sosmedarl-info h4:before,.sosmedarl-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.sosmedarl-info h4:before {margin-left:-50%;text-align:right;}

Tambahkan juga kode di bawah ini agar widget lebih rapi

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

2. Kemudian tambahkan kode widget di bawah ini bebas diantara tag pembuka <body> dan tag penutup </body>

<b:widget id='HTML68' locked='false' title='Sosial Media' type='HTML' visible='true'>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='sosmedarl-img'>
<img alt='Judul Blog' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL3DYlpA3SEt7ZXTAYyXgNHaIV7OgbRoNYlLz5w4sAxJFdk6HqUDCQKH0xD9bk8Jt7pVvA-mAGuKhgagpfQQgsLix2kZ9DO10wUfg7bKuQccnO3HXxYf-Do_Me3M5-_tINuxC_nr2_j54C/s1600/x-theme.png' title='Judul Blog' width='300'/>
<div class='aboutfloat-img'><span class='sosmedarl-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
<div class='sosmedarl-info'>
  <h4><span>Judul Blog</span></h4>
<p>Deskripsi blog tulis di sini</p>
</div>
<div class='sosmedarl-wrpicon'>
<ul class='extender'>
<li class='sosmedarl-icon fbl'><a href='#' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></li>
<li class='sosmedarl-icon twitt'><a href='#' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</a></li>
<li class='sosmedarl-icon crcl'><a href='#' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/> Circle</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
</b:widget>

Selanjutnya ganti kode yang ditandai dengan gambar, judul blog, deskripsi, dan link akun sosial media sobat.
Demikian tutorial Memasang Kotak Widget Sosial Media di Blog, semoga bermanfaat.

Cara Menambahkan Pesan untuk Mendeteksi Adblock di Blogger

Cara Menambahkan Pesan untuk Mendeteksi Adblock di Blogger

Tutorial

Unknown Add

Jika sobat ingin mengetahui apakah pengunjung di blog sobat memblokir iklan Google AdSense atau tidak, sobat bisa melakukannya dengan cara menambahkan kode JavaScript.

Cara kerja dari kode JavaScript yang akan Saya bagikan ini adalah mendeteksi ekstensi Adblock secara otomatis jika pengunjung mengaktifkan Adblock di browser yang mereka gunakan ketika membuka blog sobat dengan memunculkan sebuah pesan khusus.

Kode JavaScript ini sudah mendukung format baru dari data iklan Responsive Asynchronous Google Adsense dan memanfaatkan selektor ins.adsbygoogle kemudian menggantinya dengan sebuah pesan ketika Adblock di browser aktif.

Kode ini pun cukup ringan, jadi sobat tidak perlu khawatir jika kode ini akan membebani kecepatan loading blog sobat. Bagi yang ingin mencobanya silakan ikuti langkah berikut :

1. Login ke Blogger > Buka Template Editor > Kemudian tambahkan kode di bawah ini sebelum tag </body>

<script type='text/javascript'>
//<![CDATA[
// Adblock Detected
window.onload=function(){setTimeout(function(){var e=document.querySelector("ins.adsbygoogle");e&&0==e.innerHTML.replace(/\s/g,"").length&&(e.style.cssText="color:rgba(0,0,0,0.5);font-weight:700;font-size:110%;padding:20px;margin:auto;text-align:center;text-decoration:none;display:block!important;background:rgba(0,0,0,0.02);border:1px solid rgba(0,0,0,0.08)",e.innerHTML="Tampaknya Anda memblokir iklan Google AdSense di browser Anda")},2e3)};
//]]>
</script>

Keterangan :
e.style.cssText="color:rgba(0,0,0,0.5);font-weight:700;font-size:110%;padding:20px;margin:auto;text-align:center;text-decoration:none;display:block!important;background:rgba(0,0,0,0.02);border:1px solid rgba(0,0,0,0.08)"

Kode yang ditandai merupakan CSS tampilan pesan, silakan modifikasi sesuai selera.

e.innerHTML="Tampaknya Anda memblokir iklan Google AdSense di browser Anda"

Ganti kode yang ditandai dengan tulisan sobat.

2. Jika sudah ditambahkan, simpan template kemudian cek blog dan aktifkan Adblock untuk memastikan kode berjalan dengan baik.

Demikian tutorial tentang Cara Menambahkan Pesan untuk Mendeteksi Adblock di Blogger, semoga bermanfaat.