Widget follower atau shoutmix/cbox tersorok

Membuat widget follower atau shoutmix/cbox tersorok dengan mode show/hide di bawah templet.

Copy code di bawah dan letak di dalam Gadget Html/Java Script.

<style type="text/css"> #fl{ position:fixed;left:250px; z-index:+1000; } * html #fl{position:relative;} .flcontent{ float:left; border:2px solid #ff0000;

background:url()#ff00ff 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">

<div style="text-align: right;"><a href="javascript:showHideFL()"> <img src="http://images.cooltext.com/1848023.png"/> </a></div><font size="2">

<div style="border: 3px solid rgb(153, 255, 255); overflow: auto; width: 600px; height: 400px; text-align:; "> --Letak wight di sini
--
</div></font></div>

<script type="text/javascript"> var fl = document.getElementById("fl"); fl.style.bottom = (-100-fl.offsetWidth).toString() + "px"; </script></div>

Untuk memasang tombol Navigasinya, silahkan masuk ke :

Perancangan>>Edit HTML.

Cari code </body> dan paste code berikut tepat diatas kode</body>.


<a href='javascript:showHideFL()' style='display:scroll;position: fixed; top:50px;left:1px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfaO_RYfr3k6PqmUmowCQkjJF7z0VJVdoDu7dgq1lFdBwExUdIeqNGH3XfcjvnA2KpjkIuYmi5wWduxrIQoiI8MQxq6p_E9trd1rMQU0NNZFTsoQYGqHqIzz812XADVko5ZkjUC8HXyLX/s1600/Follow.png'/></a>

Kalau untuk membuat style di atas pula
salin code di bawah ini dan letak di dalam Gadget Html/Java Script.

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:50px;
float:left;
cursor:pointer;

}
.atcontent{
float:left;
border:border-top:10px double #747474;border-bottom:10px double #333;border-left:10px double #000;border-right:10px double #000;
background:url() #333 repeat-y center;
-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 showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}

</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">

<div style="border: 1px solid rgb(153, 255, 255); overflow: auto; width: 400px; height: 500px; text-align:; ">
(Letak code di sini)

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()">TUTUP</a></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></div></div></div></div>

Untuk memasang tombol Navigasinya
Salin code di bawah ini dan letak di dalam
Gadget Html/Java Script juga.Letaklah di mana yang sesuai.

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqC3AkOLg_dYx8YQFxnvzFMnPogorH4Qpe5BBSqp5vxKBTvlKLfEYcXwzigswfII9olkgN4zGHbX9jDAOYQrXjzRUSLszft7l6yj6Fz61EkI46Ba4PXEmKDt_ZWPAGJYOuGLS6KP87AQja/s1600/joyiman.jpg" alt="cbox" title="Click here to open Guest Book" /></a></center>

Semoga berjaya.