Cara Membuat Widget 3 In 1 Melayang Di Blog

 Beberapa waktu lalu blog saya juga pasang gadget ini di blog. Mungkin agan sudah pernah melihatnya. Ya kelebihan dari widget ini adalah ringan dan tidak memakan tempat banyak, dan tentunya bisa berguna untuk hiasan blogger.

Demonya belum ada gan, ya ngebayangin aja dulu!

Cara Membuat Widget 3 In 1 Melayang Di Blog

1. Log in ke Blogger
2. Pilih Tata Letak
3. Pilih Tambahkan Gadget > HTML/JavaScript

4. Copy kode berikut dan paste ke gadget agan

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-s_CHJcHr1JSNbw5IvDw7GFffEirebgEf5Yc6MpZl67SXQlEIlXpnEC4H9NE4crqaEfrcW9L-UpTfdD-i4XqdfRxd-BO8JcuT9uR2-6Hohc7qoFMeFnqWKCkxRd7tAWrhWAJ2ch-WesRJ/');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/AVvXsEgnHKLg1sh9BU5OWwV2QMMPKhLa1dCck2YM-_tXLse6gQNTBdpImd6_C_atYSoG7VVyvkbAzRnGux0vtTu_Tj_iPKE1tbF8FBfXwCxeYxj0MHEWFcrMoioVSbUuaWXFSZm0eN2EuiL2jFTv/');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/AVvXsEhKBK-TITYayng6Gtbm4Iim071eb6Xx89r5vgMIqZvtWxKzMSM5ar7pq4IjUs1upGJzPGOU4ny7Iv8KuBhyL6Sd_0Y8g7Bp21uwLUW2APEAPPE5UFMQzUu1TqMihVYf1_AucKxVEGLgAa5a/');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/AVvXsEg0RhGEPK2hpOIuBUp_FcGlSWlPa2M-Zyq5-fpy-7i6SykqkWx6HqX7dxFOlJigVNIdZsIr6Ue47x-_AmGtDxq7pvooKujP5sTCLxbwJzbz78m-0RlSt3MSHYjt8e_hMiu2I3wAzMbTJFLK/');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/AVvXsEiG8Q96K3F7aj-PGC4wzpMQ9dI-gUqJy9VYG-cK999SYhpktkjZS9LVA-TAshpVxDvA9dT74KVEjbik83b766aF0E-xWL2Moq3RMW_ufUuynh4bulhnUmqsWlKhHBJMhkBb-8mzTlUNY8Rn/');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/AVvXsEjQYHTJLZlIUy9_sXe_mnKxFATrEw446LOsxZJfsjSRAJZ1QM7yhCPp9cO6nYPBKgHf-0B6hd05edA1wDZJowyPi892gK7jZ-HZeuHVdDZkmTRJyHchZuJBPOFlkVGAH8Do4OqSEnMYezwT/');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">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div>

Keterangan:

• ganti Content Facebook, Blogger, Twitter Here dengan script yang agan inginkan, misal Content Facebook Here agan ganti dengan script Like Box
• Alamat URL Gambar yang berwarna dan bercetak miring bisa agan ganti sesuai keinginan
• Sisanya agan bisa kostumasi sendiri dan klik simpan.

sumber