Pages

Monday, April 21, 2014

Cara Membuat Menu Bar di Blog

Blogger Logo
Menu Bar merupakan salah satu elemen penting dari sebuah Blog maupun website lainnya. Selain untuk mempercantik tampilan sebuah Blog, Menu bar juga sangat berguna untuk navigasi pada sebuah blog, seperti berpindah dari satu halaman (page) ke halaman lainnya. Mengetahui konten apa saja yang tersedia pada blog, karena biasanya kategori dari konten selalu disisipkan pada menu bar tersebut.

Secara default Blogger sudah menyediakan menu navigasi standar yang biasanya berada dibawah header blog, tapi apakah anda sudah puas dengan menu standar tersebut? bayangkan jika ada pengunjung (visitor) telah selesai membaca posting dan dia berniat untuk mengakses menu yang ada di bagian atas blog, mau tidak mau dia harus men-scroll keatas terlebih dahulu sebelum bisa mengakses menu dari blog. Terdengar sederhana memang, tapi terkadang hal seperti itu bisa membuat pengunjung enggan untuk melanjutkan, dan akhirnya dia pun meninggalkan blog anda. Benar-benar bukan hal yang anda harapkan tentunya.

Pada postingan kali ini kita akan menyelesaikan masalah diatas dengan cara membuat menu bar yang melayang atau istilah kerennya "sticky floating navigation menu", sehingga visitor tidak perlu men-scroll ke atas untuk dapat mengakses menu dari blog. Menu yang akan kita buat akan memiliki tampilan seperti gambar berikut:

Sticky Floating Menu

Bagaimana cara membuat Menu Bar di Blog?

Langkah ke 1:
Masuk ke blogger dashboard >> Template >> Sesuaikan

Langkah ke 2:
Pada jendela perancangan template pilih Tingkat Lanjut >> Tambahkan CSS. Kemudian paste kode CSS berikut pada kolom Tambahkan CSS khusus.

/*-- Powered by MyBloggerLab, shared by rizki-java.blogspot.com Sticky Navigation Bar--*/
#MBL_wrapper .MBL_social_wrapper
{
margin-top: 15px;
}

#MBL_wrapper
{
width: 100%;
margin: auto;
background: #fff;
height: 50px;
border-top: 5px solid #2c2f32;
border-bottom: 1px solid #EBEBEC;
-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
position: fixed;
z-index: 999;
}

#MBL_wrapper .topmenu.notice
{
float: left;
width: 500px;
margin-top: 15px;
color: #fff;
}

#top_menu a
{
color: #fff;
}

#top_menu
{
display: block;
float: left;
list-style: none;
margin-top: 12px;
}

#top_menu li
{
display: inline-block;
margin-right: 15px;
font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
font-size: 14px;
text-transform: uppercase;
}

#top_menu li ul
{
display: none;
}

#boxed_wrapper
{
width: 980px;
margin: auto;
}

.MBL_standard_wrapper
{
width: 960px;
margin: auto;
}

.MBL_standard_wrapper.wide
{
width: 980px;
}

.MBL_standard_wrapper.header
{
margin-bottom: 0px;
}

.MBL_social_wrapper
{
width: auto;
float: right;
}

#menuforall .MBL_social_wrapper
{
margin-top: 15px;
}

.MBL_social_wrapper ul
{
list-style: none;
}

.MBL_social_wrapper ul li
{
float: right;
margin-left: 5px;
}

.MBL_social_wrapper ul li img
{
width: 24px;
}

#MBL_menu_wrapper
{
width: 930px;
height: 50px;
padding: 0;
margin:auto;
}

.mainmenu.notice
{
float: left;
width: 600px;
padding: 17px 0 10px 12px;
z-index: 999;
}

#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav
{
list-style: none;
display: block;
float: left;
margin: 0 23px 0 5px;
width: 700px;
}

#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li
{
display: block;
float :left;
margin: 0;
}

#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul
{
display: none;
list-style: none;
background: #000;
position:absolute;
padding: 0;
margin-top: 51px;
width: 200px;
height: auto;
z-index: 1000;
padding-top: 5px;
border-bottom: 5px solid #000;
border-left: 0;
}

#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul
{
margin-left: 200px;
margin-top: 5px;
}

#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a
{
background: none;
}

.main_nav li ul li
{
width: 100%;
}

#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a
{
color: #fff;
display: block;
width: 188px;
font-weight: bold;
line-height: 1em;
padding: 10px 0 10px 12px;
background: none;
}

.main_nav ul, .main_nav
{
list-style: none;
margin: auto;
width: 600px;
height: 50px;
z-index: 999;
float: left;
border-left: 1px solid #EBEBEC;
}

.main_nav ul li,  .main_nav li
{
display: block;
float :left;
margin: 0;
}

.main_nav ul li a,  .main_nav li a
{
display: block;
float :left;
margin: 0 0 0 0;
padding: 18px 15px 14px 15px;
color: #2c2f32;
font-family: 'Patua One';
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
border-right: 1px solid #EBEBEC;
}

.main_nav ul li ul li a,  .main_nav li ul li a
{
width: 165px;
padding: 7px 19px 7px 16px;
border: 0;
font-size: 12px;
font-weight: normal;
color: #ccc;
font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
}

.main_nav ul li ul li:last-child a,  .main_nav li ul li:last-child a
{
border-bottom: 0;
}

.main_nav ul li a:hover,  .main_nav li a:hover, .main_nav ul li a.hover,  .main_nav li a.hover, .main_nav ul li a:active,  .main_nav li a:active, .main_nav li.current-menu-item a
{
color: #fff;
background: #1bc4de;
}

.main_nav li:last-child a:hover, .main_nav li:last-child a.hover
{
border-right: 0;
}

.main_nav li ul li a,  .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,
{
display: block;
width: 170px;
line-height: 0.7em;
padding: 5px 0 5px 30px;
}

.main_nav li ul li a:hover,  .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover,  .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover
}

 div
{
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}

a
{
color: #2C2F32;
text-decoration: none;
-webkit-transition: color .2s linear, background .1s linear;
-moz-transition: color .2s linear, background .1s linear;
-ms-transition: color .2s linear, background .1s linear;
-o-transition: color .2s linear, background .1s linear;
transition: color .2s linear, background .1s linear;
}

/* Font Face ----------------------------------------------- */
@font-face {
font-family: 'Patua One';
font-style: normal;
font-weight: 400;
src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

ul{
margin: 0;
padding: 0;
list-style: none;
}

Untuk mengubah warna terhadap efek hover, cari dan ganti #1bc4de yang terdapat pada kode CSS di atas dengan warna yang anda inginkan. Kemudian simpan semua perubahan, setelah semuanya tersimpan sekarang pilih kembali ke blogger >> edit HTML

Langkah ke 3:
Cari tag <body pada kode sumber HTML (gunakan Ctrl-F untuk memudahkan pencarian), kemudian paste kode HTML berikut di bawah tag <body

<!-- Begin Navigation -->
<div id='MBL_wrapper'>
<div class='MBL_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>

<a href='#'>Home</a></li>

<li><a href='#'>Blog</a></li>

<li><a href='#'>About Us</a></li>

<li><a href='#'>Advertise Here</a></li>

<li><a href='#'>Contact Us</a></li>

<li><a href='htto://www.mybloggerlab.com'>MyBloggerLab</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='MBL_social_wrapper'>
<ul>

<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkguQXAlbZpUsoezBAanxekviGKFyyXIw92oBX19CrdksA0I4xamGszb-c0lGtJPPq3Mv5B2gHypZHtcPNbv1w-dAUmmyy8yvV538qIwvn57ohB9cZP3qLUc5c-o7bccMHOaFYYMFH5c5j/s1600/facebook.png'/></a></li>

<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8rPUnUShhB_MKjJZdYJNfecFFoqSgfceOlueOi0ggV0APpe-9IaunzStKQ-Qh7UqFViveh3lXlH36H1apPVD7EDzHnPnFU5fHVB4xfk0JwydTKlSpWH451q5iwtpeSzngzJNy2fQ2ej-m/s1600/twitter.png'/></a></li>

<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNpQO1rzi5pr06c5sXVZUNDrtd7wwFwVgQyHd5RKm6jcUZHLPbNUY6WfeDeW1SimZVOSkW0w7RWXTBCHamTEhRMxQzSf4WXqz3sXgHh4FFlwMYiw36AL6bCcYfADReHU1_p4B_UHB74p0/s1600/flickr.png'/></a></li>

<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMNuY_-sfkDzc65ePOU2sjuNnP5lQAtNXcP6p_3xyg2nYwELiHNU6hjSCJE71g1goG-P5iw3WRpNtAQ1uTYsl-Rdmx6s6OH_NZgT_EdSY74eb4SgiApChV8MLE7p90y1Vdvo_sLfuFwXpt/s1600/vimeo.png'/></a></li>

<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcW0anNNrkrZLij3v-FVmizt9BMTgbXDiY70F4DrwssBJ0gkq8Anc-nmxBrfUrOG7E5Uko8_Mz8uH51BMqqbD63YlR2-6J7gzgS4Sffaw2GVmj4TWHwt6aWjupdaeOUx8W5U9dP1la6iBh/s1600/tumblr.png'/></a></li>

<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH31-dEGqsdxp8IdLbOGL45YODiZ9tEo1SO1BsXxrWpZFV8AmfqA0hOzGMP49HHQtX9qoOGHCgt_A5VHT6Hf6V4bwq2UGD9lmWu87MGiFwuV5sAhrPN220EtArCFL1_33Vzh2npoeiHH-E/s1600/google.png'/></a></li>

<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjndlwZh7BD0YAPr1cOuOXKl9bCGvZoY2Nrw2LHfH8b3ZIoOyoxJmTcxstW7sRUSyF9rG-S7GxIkv-rQejno_uQ-Q7_9GG-lKghhgWJR2c3D02w99G5U0qDq5-4xYxyMpbQicqeY7V2g6CG/s1600/dribbble.png'/></a></li>

<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtVzqF6MdYgv1jk_R1ikSywaU8TMEd0vZVbcKbUIcqPX_kFkaMC-JYyl6gfyvsNgewiezzptxtKtHeEj3izjg3Bqu4aHlet2E0eHocgv6wt-mCPebMw_y1kZ48izUes9P9Nakdc4_NwX6c/s1600/digg.png'/></a></li>

<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivRIAbYJq1Fx0JQRw8W9cNpHSY4QOdGU3mfAwVFyuHwTU3xwvUlYrEocS2BhN2s75WwZCitt4_sH54nqxELGXOC13BEsFhNkd9tPctw0Bico9iETTmdLdH2f6LWvs08pyApSlJ__vWgBGD/s1600/linkedin.png'/></a></li>

<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7Lr8K6Kl6RkL4KZ6DpYdptvrXOz0Org9NCaL6y4MeKS1QJP0Qg7ncQvtKcO-qstS1QR8fbuiZ532IMOwNRszWD0P6nBMd38IGD_Gor4_rkFl7M6vF_O3Yhe28WSVpM1QdH4DDqZgFC9O/s1600/pinterest.png'/></a></li>

<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghFQTZfG3X9Bs7tjQiBYUbyFubHjBmm_WHfLva6J-gskmnT-N1w5C4YlOZy4ZW67_js7RL9O5Lfc04HCCpflYO3EbTZJxZM0W2w5yTfEEq2bbMv-VT6hHdVktV6yVSFuDncNOslDinHIUm/s1600/rss.png'/></a></li>

</ul>
</div>
</div>
</div>
<!-- End Navigation -->

Langkah ke 4:
Sesuaikan menu dengan keinginan anda, kemudian simpan semua perubahan.

Selesai, cek blog untuk melihat tampilan menu yang baru dibuat.. dan enjoy!

source: MyBloggerLab
Diposkan oleh di
Tag:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Related Posts Plugin for WordPress, Blogger...