Hallo Sobat Wahid Emalution , Pada hari ini saya akan membagikan tutorial cara membuat Navigasi Slide yang seperti di blog saya.
Saya Share ini Karena ada yang meminta saya untuk share,jadi saya share saja.
Sekilas : Navigasi ini Menghemat tempat Karena di hide , dan Bisa di buka kembali, dan jika terbuka Tampilan template menggeser Dengan ukuran yang telah di tentukan.
Tetapi tenang saja , tampilan template akan kembali seperti semula lagi setelah sobat mengHide navigasinya.
Untuk lebih jelasnya sobat bisa Mencobanya , tombolnya berada di pojok kanan atas.
Langsung saja kita ke cara penerapannya.
Login ke Blogger.com
Lalu pilih template dan Pilih EDIT HTML
Posisi Navigasi Di Kanan
Letakkan CSS Dibawa tepat di atas ]]></b:skin> atau </style>
/* CSS Push Menu */
.pushmenu {border-left:8px solid #f0f0f0;background:#fff;font-family:'Nova Square',sans-serif;width:230px;
height:100%;top:0;z-index:1000;position:fixed;}
.pushmenu h3 {text-align:center;color:#333;font-size:20px;font-weight:400;padding:15px 20px;
margin:0;background:#f0f0f0;height:16px;}
.pushmenu a {transition:all 0.20 ease-out;display:block;color:#333;font-size:16px;font-weight:400;text-decoration:none;padding:14px;}
.pushmenu a:hover {background:#f0f0f0;}
.pushmenu a:active {background:#444;color:#333;}
.pushmenu a:link {color:#333;}
.pushmenu a:visited {color:#333;}
.pushmenu-left {right:-240px;}
.pushmenu-left.pushmenu-open {right:0;}
.pushmenu-push {overflow-x:hidden;position:relative;right:0;}
.pushmenu-push-toright {right:240px;}
.pushmenu, .pushmenu-push {transition:all 0.3s ease;}
#nav_list {right:0;background:url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;cursor:pointer;right:10px;top:8px;position:absolute;height:27px;width:33px;text-indent:-99999em;margin-top:5px;}
nav-list.active {background-position:-33px top;}
.buttonset {background:#00A287;height:16px;padding:10px 20px 20px;}
/* CSS ACCORDION */
#accordian {background:#f0f0f0;width:240px;margin:0 auto;color:#333;}
#accordian h2 {transition:all 0.20 ease-out;display:block;color:#333;font-size:16px;font-weight:400;text-decoration:none;padding:14px;cursor:pointer;background:#fff;}
#accordian :hover {background:#f0f0f0;color:#111;}
#accordian li {list-style:none;}
#accordian ul ul li a {display:block;color:#333;font-size:14px;font-weight:400;text-decoration:none;padding:14px;transition:all 0.15s ease;background:#fff;}
#accordian ul li li a:hover {background:#f0f0f0;}
#accordian ul ul {display:none;}
#accordian h2 span {font-size:16px;}
Setelah itu Ganti <body> menjadi <body class='pushmenu-push'>
Lalu letakkan Kode Dibawah tepat di bawah <div id='wrapper'>
Karena Setiap Blog berbeda-beda Mungkin <div id='wrapper'> Berbeda , bisa jadi menjadi main-wrapper dan sebagainya.
<nav class='pushmenu pushmenu-left'>
<h3>Menu</h3>
<a href='/'><i class='icon-home icon-large'/> Home </a>
<a href='/search/label/tutorial' target='_blank'><i class='fa fa-code'/> Tutorial Blog </a>
<a href='/search/label/template' target='_blank'><i class='fa fa-desktop'/> Template Blog </a>
<a href='/p/daftar-isi.html' target='_blank'><i class='fa fa-sitemap'/> Daftar Isi </a>
<a href='https://www.facebook.com/messages/wahid.ayam.a' target='_blank'><i class='icon-envelope-alt icon-large'/> Kontak </a>
<a href='http://www.blogger.com/follow-blog.g?blogID=2286263429232182783' target='_blank' title='Follow'><i class='fa fa-users'></i> Follow</a>
<div id='search'> <div class='content-wrapper'> <form action='/search' id='searchform' method='get'> <input id='search-form' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here ...'/><button class='search-button' title='Search' type='submit'><img alt='search button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhICQliwRbh5OVK_UmBcQv1q5YcHbYeBjib9owZnbSskYTF2S4UvH8bWyMvECwVXPVytO-JNgfiBnT0_V3mVFLcCVRliRRRqN-NOyxjYy1Dwqg1xQn2cpKzRvXVOzTd8etBYYSdbHcyWm/s1600/search.png' title='Search'/> </button> </form> </div> </div>
</nav>
Untuk Css Searchnya Letakkan CSS dibawah tepat di atas ]]></b:skin> atau </style>
/* CSS Search */ #search {position:relative;font-family:'Anaheim',Arial,Helvetica,sans-serif;float:right;margin-top:9px;right:18px;} #search-form {background-color:#222;height:32px;line-height:32px;border:0 none;font-size:14px;font-weight:400;color:#999;width:150px;padding:0 10px;transition:all 0.5s ease 0s;} #search-form .search-button,#search-form .search-button:hover{transition:all 0.5s ease 0s;height:21px;width:21px;line-height:30px;background-color:#232323;border:0 none;float:right;cursor:pointer;outline:none;} #search-form:hover{background-color:#151515;} #search-form:focus{background-color:#080808;text-shadow:none !important;outline:none;color:#e09a33;opacity:0.8;} #box {display:none} .search-text {font-size:14px;font-family:'Oswald';float:right;cursor:pointer;} .search-text:hover {color:#ef7f67}
Terakhir Letakkan Kode dibawah Tepat Diatas </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
//]]></script>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$("#accordian h2").click(function(){
$("#accordian ul ul").slideUp();
if ($(this).next().is(":hidden")){
$(this).next().slideDown();
}
});
});
//]]></script>
Segitu saja , jika kurang jelas sobat bisa bertanya melalui Kotak komentar.
Terima kasih.
info yang sangat bermanfaat gan.
ReplyDeleteizin bookmark ja nanti kapan" bisa diterapin navigasinya :D
http://handexcel.blogspot.com/
Makasih sob , Terima kasih berkunjung dan comment. :)
Delete