Cara membuat menu navigasi melayang di blogger

Cara membuat menu navigasi melayang di blogger - halo sobat DINDIN ROSIDIN dalam kesempatan ini saya akan share nih Cara membuat menu navigasi melayang di blogger. Sebenarnya sih Cara membuat menu navigasi melayang di blogger itu sangat mudah buat para Hakcer atau yang udah ahli :) hehe.

Demo
Nah ok jika kalian ingin benar benar ingin Cara membuat menu navigasi melayang di blogger :) mudah kok asalkan ikuti tutorial dibawah ini dengan benar ok :) :
  • Pertama tama klik "Edit Template"
  • Cari kode ]]></b:skin> atau </b:skin>
  • Letakan kode dibawah ini diatas ]]></b:skin> :
/* Modifikasi widget By : Dindin Rosidin */
::-|webkit-scrollbar {height:12px;width: 12px;background: #000;}
::-|webkit-scrollbar-thumb {background-color: #ff0000;}
::selection {background:#fff; color:#fff}
::-moz-selection {background:#fff; color:#fff}
::-|webkit-selection {background:#fff; color:#fff}
.sidebar ul li { background:transparent url(http://3.bp.blogspot.com/-k6_8TWlD4Hw/Tzt-ABkEYsI/AAAAAAAABE0/MStiezjcvfM/s1600/icon-new-window.png) no-repeat left center; list-style-type:none; margin:0 0 5px; padding-left:20px; transition:|padding 0.26s ease; -moz-transition:|padding 0.26s ease; -webkit-transition:|padding 0.26s ease;}.sidebar ul li:hover { padding-left:23px;}.sidebar ul li:hover span.label-count { opacity:0.5; margin-left:10px;}span.label-count { background:#000; border-radius:0 10px 10px 0; -moz-border-radius:0 10px 10px 0; -webkit-border-radius:0 10px 10px 0; color:#FFF; height:auto; margin-left:50px; opacity:0; position:relative; text-align:center; width:auto; padding:2px 8px; transition:all 0.3s cubic-bezier(1,2,0,0) 0s; -moz-transition:all 0.3s cubic-bezier(1,2,0,0) 0s; -webkit-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;}span.label-count:before { content:""; width:0; height:0; position:absolute; right:100%; top:0; border-width:10px; border-style:solid; border-color:transparent black transparent transparent;}
.comments .comments-content .icon.blog-author{position:absolute;top:-8px;right:-12px;margin:0;background-image: url(http://3.bp.blogspot.com/-nCnxF2PjRto/UeLd1SemGaI/AAAAAAAABiE/IdqFZabBVUI/s1600/Merah-autor.png);width:56px;height:56px}
.bdrsimage-box {
width:580px;height:63px;overflow:hidden;background-color:white;
float:left;margin:1px 0 5px;
font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
}
.bdrsimage-cont,
.bdrsimage-details {height:63px;background-color:#FFFFFF;
transition:margin-top .4s ease-out .4s;
}
.bdrsimage-cont img {
width:580px;height:63px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
max-height:none;
background-color:black;
}
.bdrsimage-details .bdrsdetails {
padding:10px 12px;
overflow:hidden;
background-color: #666666;
}
.bdrsimage-details .more {
color:white;text-decoration:none;display:block;
text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}
.bdrsimage-box:hover {border-color:#bbb; width:580px;
height:63px;}
.bdrsimage-box:hover .bdrsimage-cont {margin-top:-55px}
.bdrsimage-details .more:hover {background-color:black}
#bdrs-sos {
overflow : auto;
width : auto;
height : 60px;
padding : 5px;
font-family : arial;
font-size : 15px;
background-color : #666666;
}
.bdrs-facebook {
line-height : 20px;
color : #fff !important;
text-decoration : none !important;
border : #111 solid 1px;
padding : 3px 10px;
font-family : arial, verdana, sans-serif;
font-size : 12px;
border-radius : 2px;
background : #3b5998;
cursor: default;
box-shadow: 0 0 2px 2px #3b5998 inset;
}
.bdrs-facebook:hover {
color : #fff !important;
text-decoration : none !important;
border : #111 solid 1px;
border-radius : 2px;
box-shadow: 0 0 2px 1px #333;
background-color: #333333;
}
.bdrs-twitter {
color : #fff !important ;
text-decoration : none !important ;
border : #111 solid 1px;
padding : 3px 10px;
font-family : arial, verdana, sans-serif;
font-size : 12px;
line-height : 20px;
border-radius : 2px;
background : #4099FF;
cursor: default;
box-shadow: 0 0 2px 2px #4099FF inset;
}
.bdrs-twitter:hover {
color : #FFFFFF!important;
text-decoration : none !important;
box-shadow: 0 0 2px 1px #333;
border : #111 solid 1px;
border-radius : 2px;
background-color: #333333;
}
.bdrs-gplus {
color : #fff !important ;
background : #c0361a;
text-decoration : none !important ;
border : #111 solid 1px;
padding : 3px 10px;
font-family : arial, verdana, sans-serif;
font-size : 12px;
border-radius : 2px;
cursor: default;
}
.bdrs-gplus:hover {
color : #fff !important ;
background : #333;
text-decoration : none !important ;
border : #111 solid 1px;
border-radius : 2px;
box-shadow: 0 0 2px 1px #333;
}
.bdrs-linkedin {
color : #fff !important ;
background : #005a87;
text-decoration : none !important ;
font-family : arial, verdana, sans-serif;
font-size : 12px;
border : #111 solid 1px;
border-radius : 2px;
cursor: default;
padding : 3px 10px;
}
.bdrs-linkedin:hover {
color : #fff !important ;
background : #333;
text-decoration : none !important ;
border : #111 solid 1px;
border-radius : 2px;
border : #111 solid 1px;
box-shadow: 0 0 2px 1px #333;}
.bdrs-Technorati {
color : #fff !important ;
background : #157501;
text-decoration : none !important ;
border : #105901 solid 1px;
padding : 3px;
font-family : arial, verdana, sans-serif;
font-size : 12px;
line-height : 20px;
border-radius : 2px;
border : #111 solid 1px;
padding : 3px 10px;
cursor: default;
}
.bdrs-Technorati:hover {
color : #fff !important ;
background : #333;
text-decoration : none !important ;
border : #105901 solid 1px;
border-radius : 2px;
border : #111 solid 1px;
box-shadow: 0 0 2px 1px #333;
}/* CSS code End */
.BD-box{
margin-bottom:10px;
padding:10px;
text-align:left;
}
.BD-box h1{margin-top:5px; color:#990000;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
.BD-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;font-size:14px;padding:5px;text-shadow:1px 1px 0 #FFF;width:100%; color:#990000; font-family:georgia; margin-bottom:5px;border: 1px solid rgb(9, 149, 223);
border-color: #A21009;}
.BD-box .submit{background:#09f;
border: 2px solid rgb(9, 149, 223);
color:#fff;
cursor:|pointer;
font-family:verdana;
font-size:12px;
padding:0 0 3px 0;;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:100px;
height:25px;
background-color: #990000;
border-color: #FF0000;
}
.BD-box .submit:hover{background-color: #DD0000;
color: #FFFFFF;
border-color: #550000;}
.BD-box .submit:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}
.BD-label ul li {list-style:none;padding: 8px 0;}
.BD-label {margin-left:-10px;
width:100%;
color:#666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
text-align: left;
text-decoration: none;
line-height: 0.5em;
}
.BD-label a{
color:#666666;
text-transform: uppercase;
text-align: left;
text-decoration: none;
}
.BD-label a:hover {color:#FFFFFF;}
.awal {
float : left;
color : #000000;
line-height : 35px;
font-family : 'Times New Roman', Times, serif;
font-weight : bold;
font-size : 50px;
}
#BD_random_title td {
list-style-type: none;
width: 100%;
padding: 3px;
}
#BD_random_title a {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #333;
line-height:15px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 0 5px 0;
}
#BD_random_title a:hover {
color:#000099;
text-transform: none;
}
.BD_random_list {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:10px;
letter-spacing:0.1em;
text-decoration: none;
}
#BD-MENU-NAVI {
width : 960px;
margin : 0 auto;
padding : 0;
text-align : left;
}
#BD-MENU #BD-MENU-NAVI p {
width : 90px;
float : left;
padding : 23px 0;
}
#top-BDR ul {
margin : 0 auto;
width : auto;
list-style-type : none;
}
#top-BDR ul li {
float : right;
margin : 8px 0;
}
#top-BDR ul li a {
border : #494949 solid 1px;
position : relative;
margin : 10px 4px;
padding :0px 20px;
color : #aaa;
font-size : 10px;
text-shadow : 0 -1px 0 #000;
display : block;
text-decoration : none;
text-transform : uppercase;
margin-right : 3px;
font-family : Arial, Helvetica, sans-serif;
background-color: #1A1A1A;
border-color: #373737;
}
#top-BDR ul li a:hover {
color : #00CCFF;
border : #00CCFF solid 1px;
box-shadow : 0 0 2px #666;
background-color : #000000;
}
#BDrs-MENU {
width : 100%;
height : 70px;
margin : 0 auto;
box-shadow : 1px 3px 6px #000;
position : fixed;
z-index : 9999;
overflow : hidden;
top : 0;
left : 0;
background-color : #f0f0f0;
border-bottom : 3px solid #999;
color: #990000;
}
#BDrs-MENU #BDrs-MENU-NAV {
width : 960px;
height : 63px;
margin : 0 auto;
padding : 0;
font-size : 14px;
text-align : left;
}
#BDrs-MENU #BDrs-MENU-NAV p {
width : 90px;
float : left;
padding : 23px 0;
}
#BDrs-MENU #top-BD ul {
margin : 0 auto;
width : auto;
list-style-type : none;
}
#BDrs-MENU #top-BD ul li {
float : right;
margin : 8px 0;
}
#BDrs-MENU #top-BD ul li a {
border : #494949 solid 1px;
position : relative;
line-height : 28px;
margin-top : -1px;
padding : 3px 10px;
color : #990000;
font-size : 13px;
text-shadow : 0 -1px 0 #000;
display : block;
text-decoration : none;
font-weight : 500;
text-transform : none;
margin-right : 3px;
font-family : Georgia, "Times New Roman", Times, serif;
border-radius:10px 10px 0 0;
box-shadow:0 0 2px 1px #FF0000 inset;
font-style: italic;
}
#BDrs-MENU #top-BD ul li a:hover {
color : #666666;
border : #494949 solid 1px;
box-shadow : 0 0 2px #666;
}
#BDrs-MENU #top-BD .text {
width: 100px;
height:60px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
line-height: normal;
}
#BDrs-MENU #top-BD .pic {
margin:0 15px 0 15px;
text-decoration: none;
color: #0000FF;
}
#BDrs-MENU #top-BD .pic:hover {
opacity:.3;
color: #333333;
}
  •  Setalah itu selesai kalian cari kode </head>
  • Letakan kode dibawah ini dibawah kode </head>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
</span>
<div id='BDrs-MENU'>
<div id='BDrs-MENU-NAV'>
<div id='top-BD'>
<p>
<img alt='gambar admin' height='50' src='https://m.ak.fbcdn.net/sphotos-d.ak/hphotos-ak-ash4/1376605_524791834273417_1017025850_n.jpg' style='margin-top:-20px;margin-left:23px;border:solid #999 1px; border-radius:5px;' title='Dindin Rosidin' width='50'/>
</p><p class='text' style='width: 300px;margin-top:-21px;'><span style='color:#990000; margin-left:-15px'><a class='pic' href='http://dindinrosidin.blogspot.com' target='_blank' title='My Profil'><b>DINDIN ROSIDIN | ORANG GANTENG</b></a></span><br/>Tunduk bukannya saya takut tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.</p>
<div style='margin:3px 0px 0 570px; width:400px; text-align: right;'>
<a class='pic' href='https://plus.google.com/#' target='_blank' title='invite google plus'><img alt='gplus' height='28' src='http://3.bp.blogspot.com/-ByzOfPrQLpc/UjCkKGJGF8I/AAAAAAAABxE/6kcQFFfdFMc/s1600/GP.png' title='invite google plus' width='100'/></a>
<a class='pic' href='https://www.facebook.com/#' target='_blank' title='like on facebook'><img alt='facebook' height='28' src='http://3.bp.blogspot.com/-yRUxDt11GnE/UjCkLgaEmdI/AAAAAAAABxU/-3VeWp6a8o4/s1600/fbk.png' title='like on facebook' width='100'/></a>
<a class='pic' href='https://twitter.com/#' target='_blank' title='follow on twitter'><img alt='twitter' height='28' src='http://4.bp.blogspot.com/-xq_h8wkL0jM/UjCkLPHhREI/AAAAAAAABxM/q-eSJoZmE_I/s1600/twk.png' title='follow on twitter' width='100'/></a></div>
<div>
<ul>
<li>
<a href='#' rel='nofollow' target='_blank' title='Menu5'>
Manu5
</a>
</li>
<li>
<a href='#' rel='nofollow' target='_blank' title='Menu4'>
Menu4
</a>
</li>
<li>
<a href='#' rel='nofollow' target='_blank' title='Menu3'>
Menu3
</a>
</li>
<li>
<a href='#' rel='nofollow' target='_blank' title='Menu2'>
Menu2
</a>
</li>
<li>
<a href='#' rel='nofollow' target='_blank' title='Menu1'>
Menu1
</a>
</li></ul></div>
</div></div>
</div>
<div class='clearer'></div>
<br/>
<br/>
<br/><br/>
  • Klik Save Template dan liat hasilnya :)
Note :
  • Warna Kuning : Ganti dengan URL anda
  • Warna Biru Muda : Ganti Tampilan Menu1,2 dll menjadi kata kata anda
  • Warna Biru : Ganti dengan url gambar anda
  • Warna Hijau : Ganti dengan kata kata sobat 
  • HAPUS TANDA " | " yang berwarna PING
Ok sekian Cara membuat menu navigasi melayang di blogger dari saya, semoga bermamfaat bagi yang membutuhkan :) Sampai ketemu di Postingan selanjutnya :) - Cara membuat menu navigasi melayang di blogger :-w

4 Responses to Cara membuat menu navigasi melayang di blogger

Hallo :) Please don't span and share link in comment.