cara membuat iklan mengikuti layar di Sidebar blog (Widget Sticky)

cara membuat iklan mengikuti layar di Sidebar blog (Widget Sticky) - Disini saya akan menjelaskan cara membuat Widget Sticky atau membuat Widget yang berisi Iklan yang berada dibagian Sidebar dan bawah layar mengikuti Layar atau Iklan tersebut Tertahan diposisinya meskipun kita menScroll ke bawah dan ke atas.

Tujuan dari Penerapan Iklan dibawah ini ialah untuk Meningkatkan CTR Iklan anda Seperti Iklan Adsense, Iklan Adnew dan Jenis Iklan PPC lainnya, tapi yang lebih penting tetap Trafik dari Pengunjung yang menentukan. Jadi meskipun CTR iklan di blog anda tinggi tetapi masih sedikit pengunjung / Trafik ke blog anda tetap saja penghasilan anda tidak terlalu meningkat siknifikan. Walaupun begitu ini sangat Efektif untuk meningkatkan CTR iklan Blog yang memiliki Trafik yang tingga Apalagi Trafik tersebut natural berasal dari Google.

Disini ada Beberapa Tampilan Widget Sticky nya yang bisa Anda Praktekkan :

Tampilan Widget Sticky Model Pertama menggunakan JQuery, Caranya:
1. Login Ke Akun Blogger
2. Pili Tata Letak >> Tambahkan Widget >> kemudian masukkan Script dibawah ini


<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'
type='text/javascript'>

</script><br />

<script type='text/javascript'>

$(document).ready(function() {

$('img#closed').click(function(){

$('#btm_banner').hide(90);

});

});

</script>

<style type='text/css'>

div#btm_banner {

bottom: 0;

position: fixed;

width: 100%;

opacity: 0.9;

left: 0;

}

div#btm_banner img{

border:0;

cursor:pointer;

}                                                                                                                                                                 

</style>

<div style='height: 0px;'></div>

<div align='center' id='btm_banner' style='height: 90px;
z-index: 9999;'>

<div style='text-align: right; width: 1600px; height:
10px;'>

<img id='closed'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHB3mjujcOvNlE7-GkI81-TIUUXllzUsXq5UcRDzSd2gupsfC1D-YPAbiTkEmm60cM-o3OiWSjmo4SgV6fbgRJHBVN2G5cOagFlrYd8hLDplEmqpiXyfYn2WDLeh8_i-wH51unMHfHhJNM/s1600/close3.png'/></div>

<div style='clear: both;'></div>

<p>

<p><center> 

<!-- Start Kode -->


<!-- End Kode --></center></p>

</p>

</div>

Ganti Kode warna merah dengan angka yang anda inginkan untuk menyesuaikan lebar dan tinggi Iklan.

Klik Save, Dan lihat Hasilnya
Berikut Gambar tampilan SS iklan Widget Sticky

Baca Juga

Tampilan Widget Sticky Model Kedua Tanpa menggunakan JQuery tetapi menggunakan Script lain, Caranya:
1. Login Ke Akun Blogger
2. Pili Tata Letak >> Tambahkan Widget >> kemudian masukkan Script dibawah ini


<style type="text/css">

#topbar {

position:absolute;

z-index: 100;

padding: 8px;

background: #eee;

background: -moz-linear-gradient(top, rgba(255, 255, 255,
.9), rgba(211, 211, 211, .9));

background: -webkit-gradient(linear,left top,left
bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));

border: 1px solid #fff;

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-webkit-box-shadow: #600 0 2px 15px;

-moz-box-shadow: #600 0 2px 10px;

margin:0 auto 10px;

float:left;

color:rgba(0, 0, 0, 0.75);

font-size: 12px;

font-family: Verdana, serif;

text-shadow:0 1px 0 #FFFFFF;

}

#topbar img {

border:none;

}

#topbar .tombol {

margin:0;

padding-bottom:5px;

text-align:right;

}

#topbar .tombol button {

color:#FFFFFF;

border: solid 1px #494949;

margin:0;

padding:2px 15px;

cursor: pointer;

text-shadow: 0 1px 1px rgba(0,0,0,.6);

background: #5f5f5f;

background: -webkit-gradient(linear, left top, left bottom,
from(red), to(#454545));

background: -moz-linear-gradient(top, red, #454545);

}

#topbar .isi_iklan {

background-color:#FFFFFF;

margin:0;

padding:4px;

width: 468px;

border: 1px solid #999;

}

</style>

<script
src="http://wwdq.googlecode.com/files/js_pop_up.js"
type="text/javascript"></script>

<script type="text/javascript">

var persistclose=1

var startX = 20

var startY = 20

var verticalpos="fromtop"

</script>

<div id="topbar">

<div class="tombol"><a href=""
onclick="closebar(); return false" style="text-decoration:
none;"><button>Tutup</button></a></div>

<div class="isi_iklan">

<!-- Kode Iklan Taruh Disini-->


<!-- END -->

</div></div>

Ganti Kode warna merah dengan angka yang anda inginkan untuk menyesuaikan lebar dan tinggi Iklan.

Klik Save, Dan lihat Hasilnya
Berikut Gambar tampilan SS iklan Widget Sticky

Tampilan Widget Sticky Model Ketiga tanpa Menggunakan JQuery dan Script dari host lainnya. dan Ini Widget Sticky untuk Iklan yang Paling banyak diminati karena Ringan dan tampilannya Simple dan Responsive, Caranya:
1. Login Ke Akun Blogger
2. Pili Tata Letak >> Tambahkan Widget >> kemudian masukkan Script dibawah ini


<!-- css Widget sticky -->

.sticky {

  position:fixed;

  top:10px;

  z-index: 100;

}

<!-- Script sticky -->

<script type='text/javascript'>

$(document).ready(function() {

var stickyWidgetTop = $('#HTML2').offset().top;

var stickyWidget = function(){

var scrollTop = $(window).scrollTop();   

if (scrollTop > stickyWidgetTop) {

$('#HTML2').addClass('sticky');

} else {   

$('#HTML2').removeClass('sticky');

}

};

stickyWidget();

$(window).scroll(function() {

    stickyWidget();

});

});

</script>

<!-- Script Iklan letak dibawah -->

<!-- And -->

Perhatian :
Pada Kode bewarna merah anda harus menyesuaikannya, yaitu bila anda membuat Widget tersebut pada urutan HTML /JavaScipt urutan 2 atau 1 atau angka yang lainnya seperti contoh di atas yaitu Widget tersebut berada pada Urutan 2 / HTML2.

Klik Save, Dan lihat Hasilnya
Berikut Gambar tampilan SS iklan Widget Sticky

Sekian Informasi yang mungkin penjelasannya lumayan panjang hanya untuk menjelaskan cara membuat iklan mengikuti layar di Sidebar blog (Widget Sticky), dan tentunya bermanfaat dan bisa anda praktekkan. hehe

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

cara membuat iklan mengikuti layar di Sidebar blog (Widget Sticky)

Share:

Previous

Next

Related Post: