Widget Tukaran link melayang

Widget tukaran link melayang ini gak jauh beda dengan widget buku tamu yang sempat populer beberapa tahun lalu, widget ini gak makan ruangan kok.

Untuk yang hobi bertukar back link widget ini berguna selain sebagai tempat menaru code HTML link kamu, widget ini juga bisa menjadi alternarif  untuk tampilan blog yang sudah mulai kekurangan ruangan.

Lihat contoh hasil jadi nya (live demo)

INI Script Code widget nya :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:60px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hi5LEpm8t4w6hpHC8B0hrLA8FDbVooxovBorBtJW_qT5CbwyLabrArgw6-t0LSwyrl8xrlBkDiNkPnDKP4Jr2P3P-PPRX_4ocE453YwZkvMUMp3TmhE-BROcam7y2oiBpY7ZtxxqJUG0/s1600/tombol+melayang+putih.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #BBBBBB;
background: #fff;
padding:15px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 60-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent"> <==========Isi dengan pesan kamu sendiri=========>
<textarea cols="25" onclick="this.focus(); this.select();" rows="5">&nbsp;&lt;a href="http://nanmablog.com/" rel="dofollow" target="_tab" title="Seo tools12"&gt;&lt;img alt="Seo tools12" border="0" src="http://3.bp.blogspot.com/-wX4rlDNCSuk/TvWjTeBJ1uI/AAAAAAAAADk/uUTf2C5NwUw/s1600/seo+tools12+blogspot.gif" /&gt;&lt;/a&gt;</textarea>
<br/>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Close]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (60-gb.offsetWidth).toString() + "px";
</script>

Cara nya tinggan rubah sedikit code diatas ini dengan link url kamu
Warna mereah : url gambar tombol melayang nya
Warna biru : Url blog kamu
Warna ungu : Nama blog kamu atau acnhor teks
Warna hijau : banner blog kamu

Untuk mengubah warna merah atau tombol melayang nya saya akan bagikan banyak variasi pilihan warna tombol nya :

Pilihan lain nya, silakan cek 1-1 link gambar nya
Biru : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXYosdYmSeOLqirH11EEvFZpjy-H2MaUXOWvuYGXXcZyLWNVpqxHVVH6dQSBR5odAbfyqXyhK_sJGH7QQOXlo5C2Ng4NygdpdaSTjWW32-garLxOURHGx4a7Z6kMfjeTrDyUcbLWQfqCm_/s1600/tombol+melayang+Biru.png

Hijau : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXMoraMlM1MexiRymre3LlVC2mQ50cOVI6oR50gcver2vGkWFycKFRRCZV4Mx9rrJVZH66Ux8SP62xKtDYzuHCNOOKfMi8tdinLo00sOE-x-u0YyapinoqgqXnMr5oRx0dMxZ62jIq_uJS/s1600/tombol+melayang+hijau+2.png

Hijau 2 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoSHeKFSJYStml5-s3fivURUwMBArTRV89MLBi0BaEkZgDL8mxsoUV6VySBzl6JN9uijzvltrEX9sC1ZuB0mHS7D35HHHvL3szHplaBZZQ2VnqqT8hKkfUHI1iVop5zjDzv8IlDsIutPHN/s1600/tombol+melayang+hijau.png

Merah : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5LJmgaGNeKuPdFkONOlucMcHsirLgZc8d2UMIDpHEl6vSv-Pq_YTE4U84LiCOHFzATDbya-OnnWsEfv9VIPNwNWSRv373cQbxVkbMob1ZWFVgSPDBDjgJw5SqpYoOC0Vj0M-Rze1v2gv5/s1600/tombol+melayang+merah.png

Orange : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTHpsB9gFoYt53hP6d3bLFgKkkaDij8Naof3slNWEEVFp8OgkCcxCmQar2O9wwLHMQr2NlCpsB5IItfIT8Y5Y57Mj-6HlCrcvgrXT9LKJbrEjiMZD-vxFFGQ-b6Gq3PKSwPlzXi5mvMaT-/s1600/tombol+melayang+orange.png

Putih : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hi5LEpm8t4w6hpHC8B0hrLA8FDbVooxovBorBtJW_qT5CbwyLabrArgw6-t0LSwyrl8xrlBkDiNkPnDKP4Jr2P3P-PPRX_4ocE453YwZkvMUMp3TmhE-BROcam7y2oiBpY7ZtxxqJUG0/s1600/tombol+melayang+putih.png

Rumus blogger versi : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigdCq3HRA_SXtZp5Wv63j2aaaM-8pdGTnM2HBg5NmMcc1e0bLGPNmnMJGpg3elKSTiAnotcGQjIYgXHAG4j2gAIYxcKnYAMWhf7ESrA84cnTqwQDAjmsG7tKwrb5C1Z0EiDIpXMPwk6mEs/s1600/tombol+melayang+Rumus+blogger.png

Sekian dan trimakasih

Posted by Nabil

Tweet