Floating Menu Plus


Widget Baru Lagi Nih!!! Fresh From The Oven


menu ++
Contohnya Ada Disamping


Mau Membuatnya? Ikuti Langkah Di Bawah

Langkah 1

Copy Javascript Dibawah

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
 $(document).ready(function() {
 // hides the comments elements as soon as the DOM is ready
 $('#comments-block,.avatar-stock img').hide();

 // view the comments on clicking the noted link
 $('.readCom').click(function() {
 $('#comments-block').show('slow');
 return false;
 });

 // scroll body to 0px on click
 $('#back-top a').click(function () {
 $('body,html').animate({
 scrollTop: 0
 }, 800);
 return false;
 });
 });

</script>

Paste Di HTML/Javascript

Langkah 2

Copy CSSnya

<style type='text/css'>
.kanan a img {
    border-left: medium none;
}
#kanan {
    height: 100%;
    margin: 12px auto;
    position: fixed;
    right: 0;
    top: 200px;
    width: 48px;
    z-index: 10;
}
#menu-kanan {
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: left;
    z-index: 10;
}
#menu-kanan ul {
    list-style: none outside none;
}
#menu-kanan ul li a {
    display: block;
    height: 40px;
    text-decoration: none;
    text-indent: -99999px;
    width: 35px;
}
#menu-kanan .slide-totop a {
    background-image: url("https://lh6.googleusercontent.com/-bVURgXrfcCE/TjV1pmQeZZI/AAAAAAAABXs/tUYTi2LLL-o/s800/home.png");
    background-position: 0 50%;
    background-repeat: no-repeat;
}
#menu-kanan .slide-totop a:hover {
    background-image: url("https://lh4.googleusercontent.com/-4XaGijH7tL0/TjV1r-ijj6I/AAAAAAAABXw/QaI8SQc37v0/s800/home_hover.png");
    background-position: 0 50%;
    background-repeat: no-repeat;
}
#menu-kanan .slide-mail a {
    background-image: url("https://lh6.googleusercontent.com/-DFMZhvaW3Ww/TjV1tFSYKZI/AAAAAAAABX0/WMtWG1LfDWg/s800/mail.png");
    background-position: 0 50%;
    background-repeat: no-repeat;
}
#menu-kanan .slide-mail a:hover {
    background-image: url("https://lh4.googleusercontent.com/-tKVRIC1onBs/TjV1uRalFYI/AAAAAAAABX4/sv3ubRme1gk/s800/mail_hover.png");
    background-position: 0 50%;
    background-repeat: no-repeat;
}
#menu-kanan .slide-print a {
    background-image: url("https://lh4.googleusercontent.com/-L_HtFGcMneE/TjV13_-X3KI/AAAAAAAABYE/YbA1v59tzrw/s800/print.png");
    background-position: 0 50%;
    background-repeat: no-repeat;
}
#menu-kanan .slide-print a:hover {
    background-image: url("https://lh6.googleusercontent.com/-PzddvnqLGE4/TjV15BxcifI/AAAAAAAABYI/qOUb57VuzE0/s800/print_hover.png");
    background-position: 0 50%;
    background-repeat: no-repeat;
}

#kanan .latar-kanan {
    background-attachment: fixed;
    background-image: url("https://lh5.googleusercontent.com/-wj62FWq42kA/TiRWojQ28oI/AAAAAAAABRE/WpuMsasieIs/s800/bg_dark2.jpg");
    border: 1px solid #3F3F3F;
    height: 180px;
    position: fixed;
    right: -64px;
    top: 200px;
    width: 64px;
    z-index: 1;
}

</style>

Paste Di HTML/Javascript Tadi

Langkah 3

Copy HTMLnya

<div id="kanan">
<div id="menu-kanan">
<ul>
<li id="back-top" class="slide-totop"><a title="Kembali ke atas" href="#Ke-Atas">Ke Atas</a></li>

<li class="slide-print"><a title="Cetak artikel ini" onclick="javascript:print(); return false;" href="#">Print artikel ini</a></li>
<li class="slide-mail"><a title="Kirim email" href="mailto:tentangduniadanweb@yahoo.co.id">Email</a></li>
</ul>
</div>
<span class="latar-kanan" style="right: -64px;"></span>
</div>

Paste Juga Di HTML/Javascript Tadi

Langkah 4

Komment Jika Suka! ☺
Follow Jika Benci! ☺

8 Orang Yang Cerewet:

tx mengatakan...

raiso

Fajri Alhadi mengatakan...

keren..
nanti ane coba

Torayasurabaya mengatakan...

Mantaps Sob...

Share Our Knowledge mengatakan...

mantab deh,, sukses sllu.. hehe
mau ane coba ahh, tapi nanti. :)

Unknown mengatakan...

waduh hebat,ternyata share css dari hasil yang tidak saya ketahui hehe

on mengatakan...

apa ini

ewrewr mengatakan...

Ane langsung praktekin gan.. Jangan lupa ane tunggu koment backx..!

Unknown mengatakan...

cerita seks terbaru 2014 <a href="http://fudoteka.blogspot.com> http://www.Fudoteka.blogspot.com <a> !

Posting Komentar