Slide Out Serelek Geleser <small>jQuery plugin</small>

Membuat konten muncul ketika melakukan scroll ke bawah begini caranya membuatnya end of page slide out box. Yup'z slide out merupakan salah satu trick jQuery plugin agar tercipta itu semua :D Kalau kepingin lebih full stylish dengan fitur yg begituan bisa sobat cek disini looking for slide features jquery plugin.
Sekarang kita bahas lagi fitur tersebut namun dengan kode yang lebih sedikit minimalis ;)) Tapi tetap masih memakai jQuery script bos! Okelah kalo begitu mas bero, kita langsung saja pada acara merangkai slide out serelek geleser. Walau sudah basi nih tutorial, apa boleh buat developer pada sepi updatean :))

Pada template kalian sudah harus terpasang jQuery script & dont forget to DOWNLOAD FULL TEMPLATE

<script type="text/javascript">
//<![CDATA[
$(window).scroll(function () {
    if ($(document).scrollTop() >= $(document).height() / 4) $("#slideSerelek").show("slow");
    else $("#slideSerelek").hide("slow");
});

function closeslideSerelek() {
    $('#slideSerelek').remove();
 // Optional code
}
//]]>
</script>

KODE CSS

#slideSerelek {
background: #f5f5f5;
border-radius: 9px;
box-shadow: inset 0 0 3px #333;
padding: 12px 14px;
width: 300px;
position: fixed;
bottom: 10px;
right: 2px;
z-index: 3;
height: 65px;
display: none;
}
#close {
position: absolute;
top: 14px;
right: 10px;
color: #f00;
font-size: 10px;
}

MARKPUP HTML

<div id="slideSerelek">
<a id="close" href="javascript:void(0);" onclick="return closeslideSerelek();">(X)</a> <span style="font-size: 20px;margin: 10px 0;">Blah Bleh Bloh!</span><br />
<div style="float: left; margin:10px;">
aw aw 1
</div>
<div style="float: left; margin:10px;">
aw aw 2
</div>
</div>

Lihat hasil kerja, good luck :)

Resource by: www.infozguide.com/2012/09/wordpress-adapted-social-subscription.html