Software dan Game free
Menu Situs
Bagian kategori
Game [16]
Software [30]
Tips - trik [11]
Anti Virus [11]
Uang Gratis [9]
Hacking [11]
Berikan Pendapat anda
Rate my site
Total of answers: 11
Statistics

Total online: 1
Guests: 1
Users: 0
Main » 2011 » December » 31 » Cara Membuat Kotak Follow Show/Hide
6:30 AM
Cara Membuat Kotak Follow Show/Hide
Follow......follow mungkin kata-kata ini sudah tidak asing lagi bagi para sobat blogger. Nah tips kali ini adalah cara membuat kotak followers sobat melayang dengan mode show/hide. Jika sobat mau membuat kotak follow yang lebih keren, ikuti saja langkah berikut :

1. Login ke blogger sobat
2. Klik Rancangan, kemudian sobat klik Tambah Gadget
3. Jika sudah sobat pilih HTML/Javascript
4. Kemudai copy kode berikut kemudian paste pada HTML/Javascript tadi
<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(http://i51.tinypic.com/rcq4b7.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">



Kode Widget Follow Disini


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://umampratama.ucoz.com/news/cara_membuat_kotak_follow_show_hide/2011-12-31-89"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">:: Get This Widget! ::</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
Eitts tapi jangan di save dulu yah kita lanjutkan ke langkah berikut nya

5. Ambil kode widget follow nya di http://www.google.com/friendconnect/
  • Pilih Blog Sobat yang akan di pasang widget follow
  • Klik Tambah Gadget Anggota
  • Nah sobat atur warna, ukuran, dll sesuai selera sobat
  • Jika sudah di atur sobat klik Buat Kode
  • Silahkan copy kode nya dan kita lanjut ke langkah selanjut nya
6. Paste kode widget follow yang tadi sobat copy dan gantikan pada tulisan Kode Widget Follow Disini

7. Simpan
ups masih ada 2 langkah lagi nih sob

8. Untuk memunculkan kotak follow nya kita harus membuat tombol untuk membuka nya. Sobat masuk pada Rancangan >> Edit HTML

9. Cari kode <body> menggunakan CTRL + F dan paste kode berikut tepat diatas kode <body>
<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='http://lh4.ggpht.com/_yF0--u7KSSI/TKWWpZF5MKI/AAAAAAAAAu4/E18Axu8eACI/Follow.png'/></a>
10. Simpan template dan lihat hasil nya

Akhirnya selesai juga :D
Silahkan bertanya jika kurang jelas :D

Category: Tips - trik | Views: 1248 | Added by: Umampratama | Rating: 0.0/0
Total comments: 0
Name *:
Email *:
Code *:
Pencarian
Kalendar
«  December 2011  »
SuMoTuWeThFrSa
    123
45678910
11121314151617
18192021222324
25262728293031
Entries archive
Lain-lain
  • Create a free website
  • Online Desktop
  • Free Online Games
  • Video Tutorials
  • All HTML Tags
  • Browser Kits
  • Situs Teman
  • The Devil
  • Gelora Sriwijaya
  • Blog Anak Gaptek
  • HuSinZ Download
  • T4 Belajar Blogger
  • Dunia Driver


  • Free Web Site Counter
    Pengunjung
    :: Get This Widget! ::
    Copyright MyCorp © 2017Website builderuCoz