Jadi urusannya tinggal daya kreasi kita untuk mau apa, lalu masukin deh ke blog sobat tercinta :x Memang tidak semudah membalikan telapak tangan kalo mau ini mau itu. Butuh kerja keras daya upaya 199% :))
Trik ini jQuery plugin yah, jadi jika mau memasang End of Page Slide Out Box ini di template sobat sudah harus tertanam script jQuery.
Kode CSS
#slidebox{
width: 400px;
height: 100px;
padding: 10px;
background-color: #fff;
border-top:3px solid #E28409;
position: fixed;
bottom: 0px;
right: -430px;
-moz-box-shadow: -2px 0px 5px #aaa;
-webkit-box-shadow: -2px 0px 5px #aaa;
box-shadow: -2px 0px 5px #aaa;
}
a.close{
background: #fff url(http://blogger.com/img/close.png) no-repeat top left;
width: 15px;
height: 15px;
position: absolute;
cursor: pointer;
top: 5px;
right: 5px;
}
a.close:hover{
background: #FF0000;
}
Secara kasar inti kode CSS yg dipakai seperti itu. Kalau mau menambahkan silahkan saja. Masukin deh diatas kode ]]></b:skin> CSS-nya. Perhatikan kode yg diberi warna merah itu. Kalau width itu dirubah, maka rubah juga kode right: -XXXpx (nilainya harus lebih besar dari coded width)width: 400px;
height: 100px;
padding: 10px;
background-color: #fff;
border-top:3px solid #E28409;
position: fixed;
bottom: 0px;
right: -430px;
-moz-box-shadow: -2px 0px 5px #aaa;
-webkit-box-shadow: -2px 0px 5px #aaa;
box-shadow: -2px 0px 5px #aaa;
}
a.close{
background: #fff url(http://blogger.com/img/close.png) no-repeat top left;
width: 15px;
height: 15px;
position: absolute;
cursor: pointer;
top: 5px;
right: 5px;
}
a.close:hover{
background: #FF0000;
}
jQuery Plugin
<script type="text/javascript">
//<![CDATA[
$(function() {
$(window).scroll(function(){
/* when reaching the element with id "last" we want to show the slidebox. Let's get the distance from the top to the element */
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
/* remove the slidebox when clicking the cross */
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
//]]>
</script>
Letakkan diatas tag </body>//<![CDATA[
$(function() {
$(window).scroll(function(){
/* when reaching the element with id "last" we want to show the slidebox. Let's get the distance from the top to the element */
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
/* remove the slidebox when clicking the cross */
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
//]]>
</script>
HTML kode
<div id="slidebox">
<a class="close"></a>
YOUR CONTENT HERE
</div>Menanamkan kode ini diantara tag <body> ... </body> Kalo gak mau ribet, Add a Gadget ► HTML/Javascript.Ini yg sedikit rumitnya sob. Carilah unique ID pada template sobat yg mengarah ke bawah. Biasanya mah bertitlekan footer. Kalo sudah ketemu sisipkan code HTML ini sesudahnya. Ex:
<div id="footer">
<div id="last">
bla bla bla
</div>
</div>Kalau tidak ada kegagalan dalam menyisipkan tag tersebut, maka sobat sukses :) Good luck...Happy blogging \m/
Tidak ada komentar:
Posting Komentar