Cara Membuat Widget Follower,Twitter dan Fan Page Facebook Melayang di Blog

Cara Membuat Widget Follower,Twitter dan Fan Page Facebook Melayang di Blog - Setelah kemarin saya membahas tentang Cara Memasang Widget Buku Tamu dari ShoutCamp, Dan sekarang saya akan membahas tentang widget blog yaitu  Cara Membuat Widget Follower,Twitter dan Fan Page Facebook Melayang di Blog . Widget ini merupakan widget yang sangat menarik karena widget ini bisa melayang sekaligus 3 lo ... lihat gambar di bawah ini .

 

Nah Bagi sobat yang ingin mempunyai widget tersebut, sobat tinggal langkah - langkah  Berikut ini:

 

1. Login ke Blogger sobat . 

2. Pilih Rancangan > Tata Letak > Tambah Gadget 

3. HTML/JavaScript

4. Letakkan kode berikut didalamnya.

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDaTGNL_96nHWfDFfPkIApgMqwY49wUrVOcr98IIFzIeGFNbV0YrkiV1urDcVNdUigUnoeqJXmY1SGMTLakUAq0PSczNrbbtCOBcE9NegiNfCYbmsnx8EauWWJz6HU03a1VjjtRkZVzZ1_/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7RoU6O1yOcgd96dW6TgtiF6tdkjl7QQGE4M_0a7OrCdY_ihYe_Rjliptz-2hsMOXtUayA66WgEZ-4p_sRySaKkmGLKaGKjMNNXw7Mc0OSSQA2A3WIJR-3VNOjcO5r1hFLsr_Vq4Wbjxgb/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQh3FGwTDoYth2O-jCU3lTIsh60BWWQQPeF1KYHpE6SggdkEiYQZaCCuA_8g5Nl8zzIF_gyFJalrwanJdFRHDiIpl15iAmKWEB-zXVxg4W2qY3n9yHYVYxaxdQ6BF7XnxA69V0NRyW5wr/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjBt3rL1Y1R6C08ka-bJ7ltlHOpa2tYrvKYQGMc6BsYWnUzWNP54E82d7qc4ET7PDXY3W3xRmZtUDZIiR_86Iy0tNnRde-0EB9brAZqzklUAND-IxRJvhJfkmJkXUx85epKE6lDyp2d-UY/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNPMOo7aujVqT_HC6vHp2c8FVyFu6caeb4cqLZEGcP7CRy6i6roZAL1x7srkDcyMKMCQUv28u_2Ut_hL-7BAoD20ibuIK0-mZ62SSb_WcaPFZMgReCWrMnJ5SNIsX-NiGWcWMWZxAogJ_S/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDAvX65fbirId3-CunGAwtpwawXBMSK31Nw_hOTdrWk3FKVO0MB79EY2Z_QoRAdCoIc9LPIgZ284J_0aloXyd7f3M21xxuMh6TYuUwNNA-SF_O1rrEQaaun5FpO2sXcMYIQkBTj_9Yn8cu/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
Disini Letakkan Kode Follower Blog
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
Disini Letakkan Kode Twitter
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
Disini Letakkan Kode Facebook
</div>
</div>

Keterangan : Ganti yang berwarna merah dengan kode Follower, Twitter, dan Facebook Fan page

5. Terakhir klik Simpan

Untuk Demo nya  KLIK DISINI

Share this post