JUDUL : MEMBUAT WIDGET FOLLOW MELAYANG
Artikel Terkait
- Postingan dengan DROPDOWN menu
- Mengubah background judul postingan
- Widget Kembali Ke atas
- Menampilkan file PDF/WORD/EXCEL pada blog
- Cara mengganti tampilan kursor
- Cara membuat background pelangi
- Cara membuat tombol pengganti backround image
- Cara Membuat Tombol Facebook Like di Blogger
- Cara membuat link bintang berkedip
----------------------------------------------------------------------------------
Salam persahabatan, kali ini trik blogger share bagaimana membuat widget follower Google Friend Connect melayang dengan mode show/hide.Trik ini hampir sama dengan membuat buku tamu tersembunyi dan hanya sedikit modifikasi script, bagaimana penasaran ingin membuatnya?
Sahabat pencinta bloger tentunya pengen membuat blognya semenarik mungkin.. salah satunya dengan asesoris dan tampilan yang berbeda dari yang lainnya...sahabat bloger saya mengajak sahabat untuk menerapkan tutorial yang satu ini, karna bang udin pengen sahabat pencinta bloger, mengembangkan blognya dan mempercantik tampilannnya...
jika mau silahkan ikutin caranya sahabat tanks...
Ok, mari kita ikuti langkah-langkah membuat widget Follower melayang sebagai berikut :
1. Sobat login dahulu ke Blogger
2. Pilih Design >> Page Elemens >> Add Gadget Html/Java Script
3. Copy dan pastekan kode berikut ke dalam Gadget sobat
<style type="text/css">4. Ganti tulisan Kode Widget Follow Disini yang berwarna dengan kode Widget Follow sobat
#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/AVvXsEiODGZkvD6DzoLPEkF_4tsDm7fN_2lZ2AWMmdktB4TlrMjeQPFrPX2DmUMAi8TtDl37yevTGPZ3RcKMESJ7TfmDgLUACedjNaoE4cA3VdcC5_HS0gnVKjFkuRExWSmkqIBEhkvvVqhGwIq_/)#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://trik-blogger-andreas.blogspot.com/2011/03/membuat-widget-follow-melayang.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By Trik 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>
5. Setelah itu simpan gadget sobat
6. kemudian sobat pilih tab Edit HTML
7. Cari kode <body> dan paste code di bawah ini tepat diatas kode <body>
<a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnrl0En14C5RomSui8n-jUF5h3DZV1bgWESJiHE1b1i4uNaR9lG-N9SDXkVCamdbEvEALEWnr5F7pMebDFi7H0thu1wmmYYFqdxhVDh9td5PX6AftOH0xfx1aKdByJaIdWR1bvWXwmyepR/" alt="Fivers" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:35px;left:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&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>8. Simpan template sobat dan lihat hasilnya
Semoga mencoba dan semoga berhaasil
Sumber http://exeloph.blogspot.com/
By : Bang Udin
Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel
----------------------------------------------------------------------------------
Postingan Baru :
- Cara membuat link berkedip ketika cursor melintas
- Cara Membuat Effect Snow Atau Tabur Salju Di Blog
- Cara Intalasi Windows Seven ( 7 ) Lengkap
- Code Rahasia Semua Type Handphone Lengkap
- Cara Daftar Dan Merubah Domain Blogspot Ke .CO.TV
- Cara Membuat Cursor Bertabur Bintang
- Cara Pasang Meta Tag Di Blogger SEO Friendly
- Cara Memasang Share Pack (Share Post To Social Boo...
- Cara memasang sharing is sexy di blogspot
- Cara Membuat Taskbar Ato Toolbar Melayang Di Blog
- Cara Membuat Shoutmix Tersembunyi
- Cara Membuat Link Warna - Warni Pelangi Di Blog
- Cara pasang video di blog
- Cara Membuat Link Berkedip Warna Warni
- Tempat Ganti Code Warna
- Cara Menu Tab View di Samping
- Cara Membuat Tulisan / text Berkedip
- Cara Membuat Menu Melayang
- Efek Marquee untuk Banner Berjalan
- Salam Pembuka Sesuai Dengan Settingan Waktu
- Mengganti Icon Blogger
- Cara membuat addres bar berjalan
11 Comments
