» » Menu kanan plus+

Menu kanan plus+

oke kayak itu aja pake plus+ segala langsung aja deh.. tuh demonya di sebelah kanan, gak mungkin sebelah kiri judulnya aja Menu kanan plus+ oke oke..cara buatnya di bawah...Cekidot



  • Loggin blogger
  • Rancangan,Tambahkan Gadget,HTML/Javascript
  • Copas kode berikut



<style>
#kanan{margin:0 auto; height:148px; width:42px; top:250px; right:0px; z-index:10; position:fixed;}
#menu-kanan{overflow:hidden; position:relative; text-align:left; z-index:10;}
#menu-kanan ul{margin:10px 0;padding:0;list-style: none;}
#menu-kanan ul li a{display:block;text-decoration:none;text-indent:-99999px;width:32px; height:32px;}
#menu-kanan .slide-totop a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzRz_bTyHu9_blsN2rSD_TGDAgtrul0EG3xU2msFt4VO6YzbpU6OrnEoCh9f-L63RlOUVViiECeqk_-VlNkqPpa0q6EAVL923zStdfHdCqI3N5aSCEONpyAZAh_KCUveZmTWHbBpBS3zMS/s800/sprite_right.png); background-position:0 0; background-repeat: no-repeat;}
#menu-kanan .slide-totop a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzRz_bTyHu9_blsN2rSD_TGDAgtrul0EG3xU2msFt4VO6YzbpU6OrnEoCh9f-L63RlOUVViiECeqk_-VlNkqPpa0q6EAVL923zStdfHdCqI3N5aSCEONpyAZAh_KCUveZmTWHbBpBS3zMS/s800/sprite_right.png); background-position:-32px 0; background-repeat: no-repeat;}
#menu-kanan .slide-mail a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzRz_bTyHu9_blsN2rSD_TGDAgtrul0EG3xU2msFt4VO6YzbpU6OrnEoCh9f-L63RlOUVViiECeqk_-VlNkqPpa0q6EAVL923zStdfHdCqI3N5aSCEONpyAZAh_KCUveZmTWHbBpBS3zMS/s800/sprite_right.png); background-position:0 -96px; background-repeat: no-repeat;}
#menu-kanan .slide-mail a:hover {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzRz_bTyHu9_blsN2rSD_TGDAgtrul0EG3xU2msFt4VO6YzbpU6OrnEoCh9f-L63RlOUVViiECeqk_-VlNkqPpa0q6EAVL923zStdfHdCqI3N5aSCEONpyAZAh_KCUveZmTWHbBpBS3zMS/s800/sprite_right.png); background-position:-32px -96px; background-repeat: no-repeat;}
#menu-kanan .slide-print a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzRz_bTyHu9_blsN2rSD_TGDAgtrul0EG3xU2msFt4VO6YzbpU6OrnEoCh9f-L63RlOUVViiECeqk_-VlNkqPpa0q6EAVL923zStdfHdCqI3N5aSCEONpyAZAh_KCUveZmTWHbBpBS3zMS/s800/sprite_right.png); background-position:0 -64px; background-repeat: no-repeat;}
#menu-kanan .slide-print a:hover{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzRz_bTyHu9_blsN2rSD_TGDAgtrul0EG3xU2msFt4VO6YzbpU6OrnEoCh9f-L63RlOUVViiECeqk_-VlNkqPpa0q6EAVL923zStdfHdCqI3N5aSCEONpyAZAh_KCUveZmTWHbBpBS3zMS/s800/sprite_right.png); background-position:-32px -64px;  background-repeat: no-repeat;}
#menu-kanan .switchview a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzRz_bTyHu9_blsN2rSD_TGDAgtrul0EG3xU2msFt4VO6YzbpU6OrnEoCh9f-L63RlOUVViiECeqk_-VlNkqPpa0q6EAVL923zStdfHdCqI3N5aSCEONpyAZAh_KCUveZmTWHbBpBS3zMS/s800/sprite_right.png); background-position:0 -32px; background-repeat: no-repeat;}
#menu-kanan .switchview a:hover, #menu-kanan a.on{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzRz_bTyHu9_blsN2rSD_TGDAgtrul0EG3xU2msFt4VO6YzbpU6OrnEoCh9f-L63RlOUVViiECeqk_-VlNkqPpa0q6EAVL923zStdfHdCqI3N5aSCEONpyAZAh_KCUveZmTWHbBpBS3zMS/s800/sprite_right.png); background-position:-32px -32px; background-repeat: no-repeat;}
#kanan .latar-kanan{background-color : #000;border: 1px solid #282828;width:52px;height:148px;top: 250px;right: -52px;position: fixed;z-index:1;}
</style>
<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>
<br />
<div id="kanan">
<div id="menu-kanan">
<ul>
<li id="back-top" class="slide-totop"><a href="#top" title="Kembali ke atas">Ke Atas</a></li>
<li class="switchview"><a href="#" title="Dokument">Dokument</a></li>
<li class="slide-print"><a title="Cetak artikel ini" onclick="javascript:print(); return false;" href="javascript:print(document)">Print artikel ini</a></li>
<li class="slide-mail"><a href="mailto:email_kamu@mahoo.com" title="Kirim email">Email</a></li>
</ul>
</div>
</div>


Simpan lalu hapus lagi...
hahahahha
(yang ngikut GILA)


Source : SIMPLE SAMPLE







Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Unknown, Published at 06.22 and have 3 komentar

3 komentar: