Memasang Widget Tersembunyi pada Blog | Tips and Trik Blog

Jika anda ingin lebih mempercantik tampilan blog anda dengan widget-widget tersembunyi, misalnya shoutbox, dan lain-lain. Ini adalah salah satu cara yang patut dicoba.

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan
3. Klik Add Gadget and Tambahkan Gadget Html/Java Script
4. Letakkan kode dibawah ini kedalam Html/Java Script


<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #000;
background:#fff;
-moz-border-radius-topleft:20px; -moz-border-radius-bottomright:20px;
box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493;
padding:10px;
}
.flcontent:hover{
border:2px solid #fff;
background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
}
</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()">
<img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Click here to Close" /></a></div>
<font size="2"><a href="http://gotriogo.blogspot.com/"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">Widget By Go Trio Go</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

NB: Tulisan MERAH BERKELIP-KELIP di antara kode-kode di atas harus anda ganti dengan kode widget HTML/Javascript anda. Silahkan edit-edit ukurannya sendiri.
5. SAVE Gadget.
6. Masih belum selesai, pindah ke Menu EDIT HTML.
7. Kode di bawah ini adalah kode untuk tombol navigasi. Silahkan masukkan kode di bawah ini di atas kode <body> atau bisa juga ditempatkan di bawah kode </head>
<a href='javascript:showHideFL()' style='display:scroll;position: fixed; top:60px;left:1px;' title='MASUKKAN URL GAMBAR ANDA'/></a>
Kode berwarna merah gantilah dengan URL GAMBAR anda. Anda bisa ambil alamat gambar berupa png di GOOGLE (tidak disarankan) atau lebih kreatif lagi jika membuat gambar sendiri lewat photoshop, terus diupload ke photobucket.

8. Setelah semuanya selesai, SAVE template, lalu lihat hasilnya.




GOODLUCK

TERIMA KASIH SUDAH MEMBACA POSTING DI ATAS. JANGAN LUPA TINGGALIN JEJAK DI KOMENTAR YA? ^_^

Post a Comment

Mohon Untuk Tidak Mencantumkan Nama Anonim Anda. Terima Kasih.