Judul : Pasang menu navigasi slide out di blog
link : Pasang menu navigasi slide out di blog
Pasang menu navigasi slide out di blog
- login dulu ke blogger.com
- masuk rancangan lalu Edit HTML jangan lupa download lengkap dulu template untuk menjaga kemungkinan salah.
- Cari kode ]]></b:skin>
- Lalu pasang kode Css berikut tepat di atas nya :
- Lalu cari kode </head> lalu masuk kan kode Script di bawah ini tepat di atas kode </head>
- eitttt....mau kemana bos masih belum selesai ....cari dulu kode </body> lalu masukkan kode di bawah ini tepat di atas kode </body>
/*----------------Beautiful Slide Out Navigation-------------------------------*/.headerfixed{width:600px;height:56px;position:absolute;top:50%;left:10px;background:#fff url(title.png) no-repeat top left;}ul#navixed {position: fixed;margin: 0px;padding: 0px;top: 0px;right: 10px;list-style: none;z-index:999999;width:721px;}ul#navixed li {width: 103px;display:inline;float:left;}ul#navixed li a {display: block;float:left;margin-top: -2px;width: 100px;height: 25px;background-color:brown;background-repeat:no-repeat;background-position:50% 10px;border:1px solid #BDDCEF;-moz-border-radius:0px 0px 10px 10px;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;-khtml-border-bottom-right-radius: 10px;-khtml-border-bottom-left-radius: 10px;text-decoration:none;text-align:center;padding-top:80px;opacity: 0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}ul#navixed li a:hover{background-color:#000;}ul#navixed li a span{letter-spacing:2px;font-size:11px;color:#FFF;}ul#navixed .home a{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqKYJqRcejkXlbIEcERbBPwv7ao8vpF8F53rAklaAvtWQ-5s4EjihWwD8Lzi5JdIl-EXaov6IPgtOAITICH4Tl9Fi6Kdi4GKGqspgpA0CTTss1kkE_S9992WbsIOW14O-dh_I9wUt_QdA/s1600/home.png);}ul#navixed .about a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhisYHtSaL1bYvxN1biQuZ1gcTdHyUeOsoQqrFBRpEOfkE8E8G_zA1xOjYebkrmArfsN010qVPZSdqcdDXRQr_DGHS08BaE6ycU-VivE9X0LkjfGjlMLLRzlW-ongFYz8eVjkBjv7M15p4/s1600/id_card.png);}ul#navixed .search a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4lwkjlHXO_wJY02Jwt9-TY_ODqchB1F-LsvXHD9kwB4Pzt5qQOrpNniIguyo2A0_F2CGYPmPBm3amNxQa5VRtrmIwEihC_gNAFl6ZAc8dy33yo68u6tLakaQ-NYnVE5OrA334dzPC_Q/s1600/search.png);}ul#navixed .podcasts a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4hg7qqTWI4BpAiQaVP3O_Hjjbk_47W9xpnnK5XrLIYUTRTG_AfV7UVSCP_GcyBQV_CVYB0i_aMtjn7NCq-F2QGv8bSaoVOgJVEJbwgJfd2_b3jJ7sR5F3DEfYbt2BXb_9k0v69uccaE/s1600/ipod.png);}ul#navixed .rssfeed a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7h1B8zpwlTpPFS4H1a6RNEQsEOpG78PGkw1KAa17EOzSAol2RrKyJLuS8k6rOLfDTKrVnAp3WL3w0J4VV6ex_3yCVdh-12S4vlLWtFdHeExf8AqKKIm1pmVoPDQDRvDenwPQSTP27duU/s1600/rss.png);}ul#navixed .photos a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwwImB-hsmrpxU89_XhTFf9lanPKczahCQGeqStbqqs_4oFuR6bYArHuziHF-pMAIMIT0D81ZaL4id0cQEd2_FBVpmRNeJnPGmcSwS6gapYeAgNAoFdK7wzU4Vs_Whg8N5vKf5ZfYfhDo/s1600/camera.png);}ul#navixed .contact a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgeRxG63H-fOIsEpexh4hsXwHVz7Y55yGwtSnQYDwK9OZyupp1ZhrSeake52NCDi9JmuVgGvym7XVaG-k3WSKCDgtmJa96RPFXq_9tFqnE3xboL1HjxElcjBEbbp8yDuOywianAWm8TDo/s1600/mail.png);}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/><script src='http://kangmahfid.googlecode.com/files/jcolor.js'/><script type='text/javascript'>$(function() {var d=300;$('#navixed a').each(function(){$(this).stop().animate({'marginTop':'-80px'},d+=150);});$('#navixed > li').hover(function () {$('a',$(this)).stop().animate({'marginTop':'-2px'},200);},function () {$('a',$(this)).stop().animate({'marginTop':'-80px'},200);});});</script>
<ul id='navixed'><li class='home'><a href='#'><span>Home</span></a></li><li class='about'><a href='#'><span>About</span></a></li><li class='search'><a href='#'><span>Search</span></a></li><li class='photos'><a href='#'><span>Photos</span></a></li><li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li><li class='podcasts'><a href='#'><span>Podcasts</span></a></li><li class='contact'><a href='#'><span>Contact</span></a></li></ul>
- Nah baru yang ini dah selesai jangan lupa Save Template
Demikianlah Artikel Pasang menu navigasi slide out di blog
Sekian Pasang menu navigasi slide out di blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.