Sebelumnya saya hanya ingin memberitahukan sesuatu terlebih dahulu kepada teman teman semua bahwa Menu bar yang akan teman teman buat sebenarnya adalah menubar dari salah satu blog yaitu EvoMagz yang editornya adalah Mas Sugeng sendiri. Sebelumnya maaf sekali kepada Mas Sugeng karena saya telah membagikan karyanya tapi gak mirip mirip amat kok cuman dikit sih perbedaannya ini juga buat menjawab pertanyaan teman teman yang mempunyai masalah terhadap Menu bar mereka.
Penampakan dari menu bar yang akan kita buat pada kesempatan kali ini seperti gambar diatas! bagaimana ? apakah anda tertarik dengan menu bar seperti ini?
Menu bar seperti Evo Magz ini memiliki beberapa keuntungan dari segi design, full responsive, ada tambahan kotak search dibagian kanan menu dan juga memiliki warna yang bisa anda kreasikan nantinya.
Penampakan dari menu bar yang akan kita buat pada kesempatan kali ini seperti gambar diatas! bagaimana ? apakah anda tertarik dengan menu bar seperti ini?
Menu bar seperti Evo Magz ini memiliki beberapa keuntungan dari segi design, full responsive, ada tambahan kotak search dibagian kanan menu dan juga memiliki warna yang bisa anda kreasikan nantinya.
à Membuat Kerangka Menu Bar Evo Magz
1. Pertama silahkan anda bersiap untuk masung kedalam blogger masing masing . Login
2. Kemudian anda pergi ke menu Template dan pilih Edit HTML
3. Selanjutnya anda simpan template anda dulu dengan cara simpan template untuk menjaga jaga agar cara ini tidak merusak template sobat.
4. Pasang kode seperti dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* NAVIGATION MENU 2 */
.toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important}
#nav{font:normal bold 12px
Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px}
.nav-menu2{background:#333333;list-style:none;margin:0 0 0
0;*zoom:1;float:left} .nav-menu2:before,.nav-menu2:after{content:"
";display:table} .nav-menu2:after{clear:both} .nav-menu2
ul{list-style:none;margin:0 0 0 0;width:12em} .nav-menu2
a{display:block;padding:0 15px} .nav-menu2 li{position:relative;margin:0 0}
.nav-menu2 > li{float:left} .nav-menu2 > li >
a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0
#333333 inset} .nav-menu2 > li > a.active{background:#222222;box-shadow:0
4px 0 #E73138 inset} .nav-menu2 > li:hover > a{background:#222222;box-shadow:0
4px 0 #E73138 inset} .nav-menu2 li
ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-webkit-transition:all
.25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s
ease-out;-o-transition:all .25s ease-out;transition:all .25s
ease-out;border:1px solid #d9d9d9;border:1px solid
rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)} .nav-menu2 li li
ul{left:100%;top:-1px} .nav-menu2 > li.hover >
ul{visibility:visible;opacity:10} .nav-menu2 > li > ul:before{content:"";width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent
transparent #fff transparent;display:block} .nav-menu2 li li.hover
ul{visibility:visible;opacity:10} .nav-menu2 li li a{display:block;color:#333;position:relative;z-index:100;line-height:32px}
.nav-menu2 li li a:hover{background:#f0f0f0} .nav-menu2 li li li
a{background:#fff;z-index:20;color:#333} .nav-menu2 li
.parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
#search-form{background:#333333;float:right;margin:0 0;width:200px}
#search-form table{width:100%;margin:0 0 0 0} #search-form
td.search-box{padding-right:30px} #search-form input#search-box[type="text"]{background:#ffffff;height:36px;line-height:36px;margin:5px
0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none} #search-form
input#search-button[type="submit"]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px
10px 5px 0;padding:0 12px;border:none;outline:none;transition:all
0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s} #search-form
input#search-button[type="submit"]:hover{background:#222222;cursor:pointer}
#search-form
input#search-box[type="text"]:focus{background:#eee;outline:none}
3. Untuk menyesuaikan kode CSS diatas ada baiknya anda memasang kode seperti dibawah ini dan letakkan dibawah kode </header>
<nav id='nav'>
<a class='toggleMenu' href='#'><i class='fa
fa-th-list'></i> Menu</a>
<!-- secondary
navigation menu start -->
<ul class='nav nav-menu2'> <li><a class='active'
href='masjonny.blogspot.com'>
<i class='fa fa-home'></i> Home</a></li>
<li>
<a href='#'>Menu 1</a> <ul>
<li><a
href='#'>Sub Menu 1</a></li>
<li><a
href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a> <ul>
<li><a href='#'>Sub
Menu 1</a> </li>
<li><a
href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a
href='#'>Menu 3</a></li>
<li><a
href='masjonny.blogspot.com'>Markup</a></li>
<li><a href='masjonny.blogspot.com'>Error
Page</a></li>
<li><a href='masjonny.blogspot.com'>Static
Page</a></li>
</ul> <!-- secondary navigation menu end -->
<form action='/search' id='search-form' method='get'
style='display: inline;'><table><tbody><tr><td
class='search-box'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='';'
type='text' value='Search...' vinput=''/></td> <td
class='search-button'><'/ input id='search-button' type='submit'
value='></td></tr></tbody></table></form>
</nav>
4. Save template sobat....
à Membuat Menu Bar Evo Magz Menjadi Responsive
Sebenarnya tutorialnya sudah selesai tetapi untuk menjadikan menu bar ini Responsive artinya dapat dibuka melalui media smartphone yang akan berdampak baik pada blog anda.
1. Tetap di Edit HTML sobat
2. Cari kode </body> dan letakkan kode dibawah ini diatas kode </body> tersebut
<script type='text/javascript'> //<![CDATA[ var
ww=document.body.clien
tWidth;$(docume
nt).ready(function(){$(".nav li
a").each(function(){if($(this).next().le
ngth>0){$(this).addClass("parent")}});$(".toggleMenu").click(fu
nction(e){e.preventDefault();$(this).toggleClass("active");$
(".nav").toggle()});adjustMenu()});$(window).bind("resize
orientationchan
ge",function(){ww=document.body.clientWidth;adjustMenu()});
var
adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".nav
").hide()}else{$(".nav").show()}$(".nav
li").unbind("mouseenter mouseleave");
$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("
hover")})}else
if(ww>=768){$(".toggleMenu").css("display","none");$(".nav").show();$(".nav
li").removeClass("hover");$(".nav li
a").unbind("click");$(".nav li").unbind("mouseenter
mouseleave").bind("mouseenter
mouseleave",function(){$(this).toggleC
lass("hover")})}} //]]></script><script
src='https://googledrive.com/host/0BxH
5pEKXqBWU
SUhtOTZFOUw5QkU/menu-navigasi-evo-magz-masyadi-com.js'></script>
@media only screen and (max-width: 768px) { .nav
{ float: none; width: 100%; max-width: 100%; }.active { display:
block; }
#search-form { width: 100%; margin: 0 0 0 0 !important; }.nav li
ul:before
{ display: none; }.nav > li { float: none; overflow: hidden;
}.nav ul { display:
block; width: 100%; float: none; }.nav-menu2 li ul { background:
#eee; border:
none; box-shadow: none; }.nav-menu2 li li ul { background:
#f5f5f5; }.nav-menu2
li li a:hover { background: #ddd; }.nav > li.hover > ul,
.nav li li.hover ul { position:
static; }#search-form { width: 100%; background: #444;
}#search-form td.search-box
{ padding: 0 10px !important; }#search-form td.search-button {
padding: 0 10px;
width: 1%; }#search-form input#search-box[type="text"]
{ margin: 0 0 0 0; }#search-form input#search-button[type="submit"] {
margin: 0 0 0 0; } }
<link
href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'
rel='stylesheet'/>
Yah sampai disitulah tutorial cara membuat Menu Bar seperti Evo Magz yang melelahkan semoga dengan tutorial ini dapat menambah wawasan kita tentang cara cara membuat Desain blog yang keren dan semoga tutorial ini dapat memberikan semangat kepada kita untuk terus berusaha membuat hasil karya sendiri walaupun tidak sekeren ini.
Happy Blogging And Bye-bye.................!!!!!!
Belum ada tanggapan untuk "Tips Membuat Menu Bar Website Evo Magz"
Post a Comment