Floating Menu Plus

• asaaKe Atas
• Print artikel ini
• Email

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9gyR5LM3MA2NSfYOF62TVb4pzGvBr_XPiK2aYCV6wZ00M65Gfm0MporDhEnFoykOJTN0xnVsuGWWZA7JWMRjmJn8HoN4CLjw398MJJ2y3bPMIukllkC8m4Fq4tuJqzSJPZhJaRjgmhkwF/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! ☺