Postingan ini untuk menjawab pertanyaan dari beberapa sobat dibalikseo yang menanyakan bagaimana membuat Menu yang simple dan Responsive di blogger, sebenarnya ini sudah lama juga ditanyakan namun baru sekarang sempet membahasanya. Di postingan kali ini saya akan berbagi Bagaimana Cara Membuat Simple Menu Responsive Di Blogger.
Di postingan ini akan dibahas cara tersebut sesuai dengan judulnya kita akan membahas membuat menu yang simple dan responsive, namanya juga sudah simple pastinya tidak banyak script yang akan kita letakkan di blog nantinya dan kode ini tidak menggunakan Jquery kan namanya sudah simple menu sehingga meminimalisir beban loading pada blog kita.
Di sini saya tampilkan 2 jenis dan Cara Membuat Simple Menu Responsive Di Blogger ada yang menggunakan dan Menu simple ini saya sih sarankan untuk sobat pasang di Page Menu atas yang berisi kontak, daftar isi, privasi, dan lainnya semuanya bisa sobat sesuaikan nantinya. Simple menu responsive ini sangat berguna sebagai menu navigasi untuk pengunjung nantinya dan bagi sobat yang ingin mendaftar adsense tentu ini adalah syarat utama menu navigasi yang wajib ada.
Bagi sobat yang ingin mencobanya silahkan simak langkah berikut ini :
1. Jenis Simple Menu Responsive Menggunakan Sosial Media dan Logo
Silahkan sobat salin kode CSS ini kemudian letakkan di diatas kode ]]></b:skin> atau di </style>
Perhatikan kode yang ditandai max-width:1100px silahkan sobat sesuaikan dengan max-width yang ada di blog sobat.
Lanjut silahkan salin kembali kode HTML dibawah ini kemudian letakkan di bawah <body>
Untuk logo blog sobat bisa buat dengan ukuran tinggi 30px dan lebar silahkan sesuaikan, dan di alamat URL Blog silahkan ganti dengan URL Blog sobat silahkan sesuaikan sendiri untuk lebarnya logo. Untuk tanda # silahkan isi sesuai dengan URL Laman Blog sobat dan seterusnya. Kemudian silahkan sesuaikan username sosial media dengan punya sobat.
2. Jenis Simple Menu Responsive Menggunakan Logo dan Search Box
Silahkan sobat salin kode CSS ini lalu letakkan di atas kode ]]></b:skin> atau di </style>
Perhatikan kode yang ditandai max-width:1100px silahkan sobat sesuaikan dengan max-width yang ada di blog sobat.
Lanjut silahkan salin kembali kode HTML dibawah ini kemudian letakkan di bawah <body>
Untuk logo blog sobat bisa buat dengan ukuran tinggi 30px dan lebar silahkan sesuaikan, dan di alamat URL Blog silahkan ganti dengan URL Blog sobat silahkan sesuaikan sendiri untuk lebarnya logo. Untuk tanda # silahkan isi sesuai dengan URL Laman Blog sobat dan seterusnya.
Penggunaan Icon di Menu simple Responsive ini menggunakan font awesome jadi pastikan sobat sudah memasangnya diblog, dan selesai selamat mencoba.
.page_menu_wrapper{width:100%;max-width:1100px;margin:0 auto}
.clear{clear:both}
.page-menu ul li,.sos-profil ul{list-style:none}
.page-menu ul li{display:inline-block;transition:all 400ms ease-in-out}
.page-menu{float:left;width:auto;height:auto;padding:0!important;margin:0 5px;font-size:100%;font-weight:400}
.page-menu ul{margin:0 auto!important;padding:0!important;line-height:3em}
.page-menu ul li a:hover{color:#e8554e!important}
.page-menu ul li a{color:#666!important;padding:0 20px 0 0;text-decoration:none}
.page-menu ul li a img{vertical-align:middle!important}
.sos-profil{float:right;margin:0}
.sos-profil li{float:left;display:inline-block;margin-left:10px}
.sos-profil a{color:#666;font-weight:500}
.sos-profil a:hover{color:#e8554e!important}
@media screen and (max-width:800px){.page-menu,.sos-profil{width:100%;margin:0}
.page-menu ul li{width:33.3%;float:left}
.page-menu ul li:first-child{width:100%;float:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:10px}
.page-menu ul li,.sos-profil{text-align:center}
.page-menu ul li a{margin:0 auto;padding:0}
.sos-profil ul{width:auto;display:inline-block;float:none;margin:0 auto;padding:0!important}
.sos-profil li{margin:0 10px}
.sos-profil{margin-top:10px}
.page_menu_wrapper{padding-bottom:10px}
}
@media screen and (max-width:480px){.page-menu ul{line-height:2em}
}
@media screen and (max-width:240px){.page-menu ul li{width:50%}
.sos-profil li{margin:0 5px}
}Perhatikan kode yang ditandai max-width:1100px silahkan sobat sesuaikan dengan max-width yang ada di blog sobat.
Lanjut silahkan salin kembali kode HTML dibawah ini kemudian letakkan di bawah <body>
<div class="page_menu_wrapper">
<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li><a href='/' itemprop='url' expr:title='data:blog.title'><img alt='logo blog' class='image-logo' height='30' src='URL LOGO BLOG' expr:title='data:blog.title' width='171'/></a></li>
<li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
<li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url' title='Terms of Service'><span itemprop='name'>TOS</span></a></li>
</ul>
<div class='clear'></div>
</nav>
<div class='sos-profil'>
<ul>
<li><a href='https://www.facebook.com/username' title='Facebook'><i class='fa fa-facebook fa-lg'></i></a></li>
<li><a href='https://twitter.com/username' title='Twitter'><i class='fa fa-twitter fa-lg'></i></a></li>
<li><a href='https://www.google.com/+username' title='Google+'><i class='fa fa-google-plus fa-lg'></i></a></li>
<li><a href='//id.linkedin.com/in/username' title='LinkedIn'><i class='fa fa-linkedin fa-lg'></i></a></li>
<li><a href='http://www.youtube.com/c/username' title='Youtube'><i class='fa fa-youtube fa-lg'></i></a></li>
<li><a href='http://www.blogger.com/follow-blog.g?blogID=920672884281913xxxx' title='Follow Blog'><i class='fa fa-plus-square fa-lg'></i></a></li>
</ul>
</div>
<div class='clear'></div>
</div>Untuk logo blog sobat bisa buat dengan ukuran tinggi 30px dan lebar silahkan sesuaikan, dan di alamat URL Blog silahkan ganti dengan URL Blog sobat silahkan sesuaikan sendiri untuk lebarnya logo. Untuk tanda # silahkan isi sesuai dengan URL Laman Blog sobat dan seterusnya. Kemudian silahkan sesuaikan username sosial media dengan punya sobat.
2. Jenis Simple Menu Responsive Menggunakan Logo dan Search Box
Silahkan sobat salin kode CSS ini lalu letakkan di atas kode ]]></b:skin> atau di </style>
.page_menu_wrapper{width:100%;max-width:1100px;margin:0 auto}
.clear{clear:both}
.page-menu ul li{list-style:none;display:inline-block;transition:all 400ms ease-in-out}
.page-menu{float:left;width:auto;height:auto;padding:0!important;margin:0 5px;font-size:100%;font-weight:400}
.page-menu ul{margin:0 auto!important;padding:0!important;line-height:3em}
.page-menu ul li a:hover{color:#e8554e!important}
.page-menu ul li a{color:#666!important;padding:0 20px 0 0;text-decoration:none}
.page-menu ul li a img{vertical-align:middle!important}
.search-box{width:300px;height:27px;float:right;padding:0;margin:8px 8px 1px 0;position:relative}
#search-form,#searchform,.search-button{border:none;line-height:27px}
#searchform{position:relative;border:1px solid #ddd}
#search-form{color:gray;width:100%;padding:0 10px 0 30px;height:27px;line-height:27px;font-size:14px;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.search-button{width:30px;padding:0;text-align:center;margin:0;top:0;left:0;font-size:16px;color:#888;background:0 0;position:absolute;border-radius:0;text-shadow:none;box-shadow:none}
#search-form:focus,#search-form:hover,.search-button:focus,.search-button:hover{border:none;outline:0;color:#000}
@media screen and (max-width:800px){.page-menu,.search-box{width:100%;margin:0}
.page-menu ul li{width:33.3%;float:left}
.page-menu ul li:first-child{width:100%;float:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:10px}
.page-menu ul li,.search-box{text-align:center}
.page-menu ul li a{margin:0 auto;padding:0}
#search-box,.page_menu_wrapper{padding-bottom:10px}
#search-box{width:96%;float:left;padding-right:0;margin:0 2%}
.search-box{margin-top:10px}
#searchform{margin:0 10px}
}
@media screen and (max-width:480px){.page-menu ul{line-height:2em}
}
@media screen and (max-width:240px){.page-menu ul li{width:50%}
}Perhatikan kode yang ditandai max-width:1100px silahkan sobat sesuaikan dengan max-width yang ada di blog sobat.
Lanjut silahkan salin kembali kode HTML dibawah ini kemudian letakkan di bawah <body>
<div class="page_menu_wrapper">
<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
<li><a href='/' itemprop='url' expr:title='data:blog.title'><img alt='logo blog' class='image-logo' height='30' src='URL LOGO BLOG' expr:title='data:blog.title' width='171'/></a></li>
<li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
<li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url' title='Terms of Service'><span itemprop='name'>TOS</span></a></li>
</ul>
<div class='clear'></div>
</nav>
<div class='search-box'>
<form action='/search' id='searchform' method='get'>
<input id='search-form' name='q' placeholder='Search here and hit enter' type='text'/>
<span class='search-button'><i class='fa fa-search'></i></span>
</form>
</div>
<div class='clear'></div>
</div>Untuk logo blog sobat bisa buat dengan ukuran tinggi 30px dan lebar silahkan sesuaikan, dan di alamat URL Blog silahkan ganti dengan URL Blog sobat silahkan sesuaikan sendiri untuk lebarnya logo. Untuk tanda # silahkan isi sesuai dengan URL Laman Blog sobat dan seterusnya.
Live DEMO Simple Menu
Penggunaan Icon di Menu simple Responsive ini menggunakan font awesome jadi pastikan sobat sudah memasangnya diblog, dan selesai selamat mencoba.
EmoticonEmoticon