Berdasarkan hasil searching saya, akhirnya saya menemukan tips untuk mengHide Widget Follow blog kita. Supaya lebih menarik, kita akan mengHidenya. ya kan?
Oke langsung saja. Sebenarnya tips ini hampir sama dengan tips untuk meng-hide Buku tamu. Cuman Bedanya, penempatan kode dari jenis aplikasinya. Pada tips ini anda harus bisa menciptakan kode HTML dari widget Follower blog anda.
Kalau tidak bisa anda akan saya bawa ke Situs Ini.
Biar tidak banyak ceritanya, langsung saja kita ke langkah-langkah untuk membuat show/hide follow....
Langkah I
1. Login ke Blogger.com dengan akun anda
2. Pilih Rancangan
3. Pilih Elemen Laman
4. Kemudian Add Gadget--Terus HTML/JavaScript
5. CoPas kode berikut ini
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqHBzZ2TMRak65h1LPXifaAxzFN2pCnTKNMtqtPoWIzKl3mOfSZjUomDBdmqHEdlNXGtLJt8IGLrKQE_qofOFQqt1VE7g3u1DGe7MgocmjDaQ1RPN9zkO9L0Do3rZ1hMOkDMoV4E_NOLcg/)#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://www.berbagidisini.com/2010/10/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqHBzZ2TMRak65h1LPXifaAxzFN2pCnTKNMtqtPoWIzKl3mOfSZjUomDBdmqHEdlNXGtLJt8IGLrKQE_qofOFQqt1VE7g3u1DGe7MgocmjDaQ1RPN9zkO9L0Do3rZ1hMOkDMoV4E_NOLcg/)#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://www.berbagidisini.com/2010/10/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
Jangan disave dulu, mari lanjut ke langkah selanjutnya.
6. Untuk mendapatkan kode widget follownya silahkan masuk ke link ini [http://www.google.com/friendconnect]
7. Lihat Gambar dibawah
- Pilih Judul Blog Sobat.
- Klik "Tambahkan gadget anggota"
- Silahkan diatur ukuran, warna dll nya
- Klik "Buat Kode"
- Silahkan Copy kodenya, dan ikuti langkah selanjutnya
9. Selanjutnya Save.
Langkah II
1. Pilih Edit HTML
2. Cari kode ini <body>
3. Letakkan kode berikut ini di atas <body>
4. Kemudian Simpan Template.<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1XEHxCj_ZlSROISjkHqf8BE-b2maT0EYfjKArZqsDQPxHpbet18x3NLO4582nuu2ZQnlweM_wjmVLaHv9LECJEsVSReY79Pux_lPB2v5qYdAw2gTRWcviENXvmFHkinOHueRdxf4MlWf/'/></a>
Akhirnya pembuatan auto show/hide gadget followers blog sudah selesai, semoga trik ini bermanfaat demi keindahan blog sobat blogger.
+ komentar + 3 komentar
SALAM KENA SATU JIWA GAN!!!
SAYA SANGAT BERTERIMA KASIH SEKALI ATAS SEMUA TUTORIALNYA...TERUTAMA MEMBUAT FOLLOW HIDE/SHOW INI,,,BENAR2 LUAR BIASA GAN!!!!
berhasil gan terimakasih....
@Bagi bagio: Sama-sama bos. Semoga bermanfaat
@Duplikat: sama-sama bos...berkunjung lagi yah..
Posting Komentar