Membuat End Page Slide Out Dengan jQuery Di Blog

Maaf, Karena Semua Posting Yang Ada Di Blog ini Saya Hapus. Saya Ingin Membuka Lembaran Blog Yang Baru.
Sebagai Gantinya Saya Akan Memberitahu Kalian Bagaimana Cara Membuat End Page Slide Out Dengan jQuery Di Blog.

end page slide out
DEMO

karena template dari http://teduweb2.blogspot.com/ kurang bagus maka end page slide outnya juga kurang maksimal (discroll ke bawah untuk melihat demonya)

Apa Itu End Page Slide Out? Untuk Mencari Tahu Apa Itu End Page Slide Out Lebih Baik Ikuti Tutorial Di Bawah.

TUTORIAL

1.HTML

Untuk Membuat End Page Slide Out Kita Memerlukan Struktur HTML Sebagai Berikut :

<p id="last">
    Tentangduniadanweb.blogspot.com
</p>

Dan

<div id="slidebox">
    <a class="close"></a>
    <p>More in Technology & Science (4 of 23 articles)</p>
    <h2>
Tentangduniadanweb.blogspot.com
</h2>
    <a class="more">Read More »</a>
</div>

Copy Script Diatas Dan Paste Di HTML/Javascript (Rancangan-Edit HTML-Tambah Gadget-HTML/Javascript)

2.CSS

Kita Memerlukan CSS Seperti Dibawah :

#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;
}
#slidebox p, a.more{
    font-size:11px;
    text-transform:uppercase;
    font-family: Arial,Helvetica,sans-serif;
    letter-spacing:1px;
    color:#555;
}
a.more{
    cursor:pointer;
    color:#E28409;
}
a.more:hover{
    text-decoration:underline;
}
#slidebox h2{
    color:#E28409;
    font-size:18px;
    margin:10px 20px 10px 0px;
}
a.close{
    background:transparent url(http://tympanus.net/Tutorials/EndPageSlideOutBox/images/close.gif) no-repeat top left;
    width:13px;
    height:13px;
    position:absolute;
    cursor:pointer;
    top:10px;
    right:10px;
}
a.close:hover{
    background-position:0px -13px;
}

Copy CSS Diatas Dan Paste Diatas Kode ]]></b:skin&gt; (Rancangan-Edit HTML)

3.Javascript

Sebelum Memasang Javascript Ada Baiknya Memasang jQuery Dibawah

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Lalu Javascriptnya

<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        var distanceTop = $('#last').offset().top - $(window).height();

        if  ($(window).scrollTop() > distanceTop)
            $('#slidebox').animate({'right':'0px'},300);
        else
            $('#slidebox').stop(true).animate({'right':'-430px'},100);
    });

    $('#slidebox .close').bind('click',function(){
        $(this).parent().remove();
    });
});
</script>

Copy jQuery Tersebut Dan Paste Dibawah Kode <head>
Untuk Javascriptnya Pastekan Diatas Kode </head>



Tinggalkan Komentar 

8 Orang Yang Cerewet:

kiddrockstrange mengatakan...

ada demonya g kk....

Back To Top Jquery mengatakan...

Belum ada demonya ya kk ?? jadi takut mencoba,, disarankan supaya ada demo, agar lebih yakin

Shinobi Blog mengatakan...

iya lbh bagus emang kalo pake demo sob ... :)

CyberGoBlog mengatakan...

Bisa dicoba nih, tp utk demonya kok gk nongol ya?

Uda cucanto mengatakan...

discrool ke bawah

http://tentangduniadanweb.blogspot.com

Share Our Knowledge mengatakan...

mantab bro. :D
bisa di praktekkin jga nih. sipp. lanjutkan blogging mu.

Uda cucanto mengatakan...

http://tentangduniadanweb.blogspot.com/

+Miftah Afina mengatakan...

sama sekali engga berhasil. .
bahhhh . . .

Posting Komentar