Rabu, 14 Desember 2011

Filled Under:

Membuat Lencana Facebook Tersembunyi

Tutorial Blog
Bagi blogger pemula (seperti saya), pastinya masih suka coba-coba memasang berbagai perlengkapan dan asesoris, semua agar blognya terlihat lebih OK tentunya. Bagi yang ingin memasang Lencana Facebook atau gadget lain secara tersembunyi di pojok kanan atas seperti gambar di samping.
Berikut kode Scriptnya.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i586.photobucket.com/albums/ss303/adhit_ku/tabscopy-1.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-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">

Letakkan sript Lencana Facebook mu disini

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>



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

Keterangan :
1. http://i586.photobucket.com/albums/ss303/adhit_ku/tabscopy-1.png (url gambar untuk judul, ganti dengan url lain sesuai dengan gadget yang dibuat)
2. Letakkan sript Lencana Facebook mu disini (ganti dengan script yang akan dibuat)

Unknown

Author & Editor

Hal sederhana yang wajib diketahui. 1 catatan lebih baik dari 1000 ingatan

0 komentar :

Posting Komentar

 

Copyright © Website Arek Pamekasan ™ is a registered trademark.
Blogger Templates Designed by Templateism . Hosted on Blogger Platform.