Halo Sobat! | Members Area : Register | Sign In
Profil | Contact | Sitemap | Guest Book

MEMBUAT KOTAK FOLLOW TERSEMBUNYI

Sabtu, 28 Januari 2012

Share this history on :


Kali ini saya akan memberitahukan cara membuat kotak follow tersembunyi seperti di blog saya (dibawah buku tamu)


Pertama login ke akun blogger kalian
Masuk ke "Rancangan/Design"
Klik "Tata Letak/Layout"
Tambah Gadget, Pilih HTML/JS

Lalu copy paste kode HTML 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/AVvXsEhpXx2irFNvKFk_qwV5wV0ZNivuwMeFRrhUg2y89BYJMXqSPsgC00scsfK0wlTkWkY4w1OP-jQl5ZJy4kSapvxMb9BRvwgtpq12guvaNSdvkEcVAIv96G34Ft2d1f7BB-VgdyxL65ds_BwQ/)#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">


Widget Follow


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://kode-blogger.blogspot.com/2011/04/membuat-show-hide-widget-followers.html"target=_blank"><div style="color: #444444;">
<span >By kode-blogger</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>



Untuk mendapatkan kode widget blog kalian masuk kesini
Lalu pilih "Tambahkan gadget  anggota"
Edit sesuai selera kalian
Jika sudah selesai mengedit klik "Buat Kode"
Copy kode itu, dan ganti teks warna biru diatas dengan kode tersebut
Save

Lalu copy kode dibawah dan masukkan seperti diatas
(Rancangan-Elemen Laman-Tambah Gadget-HTML/JS)

<a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Obp0C6mpHcpJgYHch8d0rzpUWHd5WrkdCVpxnpGSuKpZQ5g8P2J1n6LuX_TLQB-R7wXBgIgc7J6icKTxMegXYPDHfumupUkoC3oUcqxyL4-gu-mB61y1UykvzfyvQ0k3doeMqghLY00n/" alt="kode" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:150px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>


Ganti teks warna biru dengan link gambar ataupun logo kalian untuk mengganti gambar follow.
Kalau tidak punya pakai itu saja tidak masalah.
Terakhir Save,, dan lihat hasilnya. Berhasil atau tidak?
Thank you for visited me, Have a question ? Contact on : youremail@gmail.com.
Please leave your comment below. Thank you and hope you enjoyed...

0 komentar:

Posting Komentar

"Tinggalkanlah pesan anda sejenah di blog kami ini"
"bila ada salah atau eror di Postingan kami tollong komentar di bawah ini "

"terimakasih dari kami"

Related Posts Plugin for WordPress, Blogger...