1. Login ke Blogger -> Masuk ke Rancangan -> Edit HTML
2. Cari kode berikut
</head>
3. Copy dan paste kode di bawah ini tepat di atas kode no 2
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script src='http://purnamalabs.googlecode.com/files/menu.js' type='text/javascript'/>
4. Cari kode berikut
]]></b:skin>
5. Copy dan paste kode di bawah ini tepat di atas kode no 4
/**
* Mini floating Navigation by Taufik Nurrohman
* Visit: http://hompimpaalaihumgambreng.blogspot.com
*/
#sidenav {
position:fixed !important;
position:absolute; /* IE6 Fallback */
top:60px;
left:0px;
z-index:999;
background-color:#eee;
border:1px solid #ccc;
width:auto;
height:auto;
text-indent:-99999px;
font:normal 12px Arial,Sans-Serif !important;
-webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
}
#sidenav ul {
margin:0px 0px;
padding:0px 0px;
}
#sidenav li {
margin:0px 0px;
padding:0px 0px;
list-style:none;
display:block;
position:relative;
}
#sidenav a {
display:block;
width:20px;
border-bottom:1px solid #ccc;
color:#666;
text-decoration:none;
-webkit-box-shadow:inset 0px 0px 0px 1px white;
-moz-box-shadow:inset 0px 0px 0px 1px white;
box-shadow:inset 0px 0px 0px 1px white;
}
#sidenav li:last-child a {
border-bottom:none;
}
#sidenav span.ttp {
display:block;
position:absolute;
top:0px;
font:normal 94% Arial,Sans-Serif;
background-color:#39f;
color:white;
padding:0px 10px;
line-height:22px;
height:22px;
width:auto;
left:100%;
z-index:77;
margin-left:17px;
text-indent:0px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
display:none;
}
#sidenav span.ttp em {
display:block;
width:0px;
height:0px;
border:4px solid transparent;
border-right-color:#39f;
position:absolute;
top:7px;
right:100%;
}
#sidenav li ul {
width:150px;
height:auto;
background:transparent;
border:none;
position:absolute;
top:-1px;
left:100%;
-webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
display:none;
}
#sidenav li ul a {
border:1px solid #ccc;
border-bottom:none;
background-color:#eee;
display:block;
width:auto;
padding:0px 10px;
line-height:25px;
text-indent:0px;
-webkit-box-shadow:inset 0px 0px 0px 1px white;
-moz-box-shadow:inset 0px 0px 0px 1px white;
box-shadow:inset 0px 0px 0px 1px white;
}
#sidenav li a:hover {background-color:#ddd;}
#sidenav li ul li:last-child a {
border-bottom:1px solid #ccc;
}
/* CSS Sprites */
#sidenav a.main {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiSIj6UnNKFXu1kntrIi74Ntf4VMfT0h499UuPT5tgspm_TRjsswx8MKcJKrPvQNjXHAZDt3Hp9kld-8fMXtx6qZ1vvEcCsBY3Go4Hp6vGtWF_8XkEDtDNK49ihnU6DQyyJvAs4XZJssJ0/s1600/main-sprites.png');
background-repeat:no-repeat;
width:26px;
height:25px;
}
#sidenav a.home {background-position:5px 4px; }
#sidenav a.about {background-position:5px -22px; }
#sidenav a.archive {background-position:5px -48px; }
#sidenav a.share {background-position:5px -73px; }
#sidenav a.photos {background-position:5px -100px;}
#sidenav a.contact {background-position:5px -126px;}
#sidenav li ul a.social {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf-GzV02dUY50sraPhzKqSc0wGWIRa5_ZayoGR5RmhLDgvhzpqBcHwl0TLK_-RhfOZdm-E2HGH4N6BeZ8cTqLYLNPXkHY1hu50P5tvLbYed8Od6h_Yto970S94MqvVVuUoLDbe54mTwiWO/s1600/social-sprites.png');
background-repeat:no-repeat;
padding-left:30px !important;
}
#sidenav li ul a.blogger {background-position:5px 4px; }
#sidenav li ul a.facebook {background-position:5px -21px; }
#sidenav li ul a.twitter {background-position:5px -47px; }
#sidenav li ul a.googleplus {background-position:5px -73px; }
#sidenav li ul a.flickr {background-position:5px -99px; }
#sidenav li ul a.rss {background-position:5px -125px;}
#sidenav li ul a.mail {background-position:5px -151px;}
/* CSS Fallback */
#sidenav li:hover .fallback {display:block;}
6. Cari lagi kode ini
</body>
7. Paste kode di bawah ini tepat di atas kode no 6
<nav id='sidenav'> <ul> <li><a class='main home' href='/'>Home</a></li> <li><a class='main about' href='#'>About</a> <ul class='fallback'> <li><a class='social blogger' href='#'>Me on Blogger</a></li> <li><a class='social facebook' href='#'>Me on Facebook</a></li> <li><a class='social twitter' href='#'>Me on Twitter</a></li> <li><a class='social googleplus' href='#'>Me on Google+</a></li> </ul> </li> <li><a class='main archive' href='#'>Archives</a> <ul class='fallback'> <li><a href='#'>Table of Contents</a></li> <li><a href='#'>Recent Articles</a></li> <li><a href='#'>Recent Comments</a></li> </ul> </li> <li><a class='main share' href='#'>Share</a> <ul class='fallback'> <li><a class='social blogger' href='#'>Blogger</a></li> <li><a class='social facebook' href='#'>Facebook</a></li> <li><a class='social twitter' href='#'>Twitter</a></li> <li><a class='social googleplus' href='#'>Google+</a></li> <li><a class='social flickr' href='#'>Flickr</a></li> <li><a class='social rss' href='#'>RSS</a></li> <li><a class='social mail' href='#'>Mail</a></li> </ul> </li> <li><a class='main photos' href='#'>Screencast</a></li> <li><a class='main contact' href='#'>Contact</a> <ul class='fallback' style='font-weight:bold;'> <li><a class='social facebook' href='#'>Facebook</a></li> <li><a class='social twitter' href='#'>Twitter</a></li> <li><a class='social mail' href='#'>Mail</a></li> </ul> </li> </ul> </nav>
8. Ganti tanda "#" dengan url tujuan kamu
9. Selesai
Semoga Bermanfaat
4 comments
kok gak berfungsi yah gan? gak muncul iconnya pula..
cuma muncul tulisan Home about dll. T_T
JQuerynya udah dipasang belum gan ? ^:D
:)
Slot Machine Free Play in Demo Mode - Dec 2021
A guide to Play Free Slot Machine Free Play in Demo deccasino Mode on Dec. 2021! It's all about the slot septcasino machines to 바카라 사이트 get you started with! Demo mode
Post a Comment
Untuk menyisipkan kode gunakan tag [pre]kode anda[/pre]