Postingan ini untuk menjawab pertanyaan dari beberapa sahabat dibalikseo yang menanyakan bagaimana membuat Menu yang simple dan Responsive di blogger, bahu-membahu ini sudah lama juga ditanyakan namun gres sekarang sempet membahasanya. Di postingan kali ini aku akan membuatkan 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 isyarat ini tidak menggunakan Jquery kan namanya sudah simple menu sehingga meminimalisir beban loading pada blog kita.
Di sini aku tampilkan 2 jenis dan Cara Membuat Simple Menu Responsive Di Blogger ada yang menggunakan dan Menu simple ini aku sih sarankan untuk sahabat pasang di Page Menu atas yang berisi kontak, daftar isi, privasi, dan lainnya semuanya mampu sahabat sesuaikan nantinya. Simple menu responsive ini sangat berkhasiat sebagai menu navigasi untuk pengunjung nantinya dan bagi sahabat yang ingin mendaftar adsense tentu ini yakni syarat utama menu navigasi yang wajib ada.
Bagi sahabat yang ingin mencobanya silahkan simak langkah berikut ini :
1. Jenis Simple Menu Responsive Menggunakan Sosial Media dan Logo
Silahkan sahabat salin isyarat CSS ini kemudian letakkan di diatas isyarat ]]></b:skin> atau di </style>
Perhatikan isyarat yang ditandai max-width:1100px silahkan sahabat sesuaikan dengan max-width yang ada di blog sobat.
Lanjut silahkan salin kembali isyarat HTML dibawah ini kemudian letakkan di bawah <body>
Untuk logo blog sahabat mampu buat dengan ukuran tinggi 30px dan lebar silahkan sesuaikan, dan di alamat URL Blog silahkan ganti dengan URL Blog sahabat silahkan sesuaikan sendiri untuk lebarnya logo. Untuk tanda # silahkan isi sesuai dengan URL Laman Blog sahabat dan seterusnya. Kemudian silahkan sesuaikan username sosial media dengan punya sobat.
2. Jenis Simple Menu Responsive Menggunakan Logo dan Search Box
Silahkan sahabat salin isyarat CSS ini lalu letakkan di atas isyarat ]]></b:skin> atau di </style>
Perhatikan isyarat yang ditandai max-width:1100px silahkan sahabat sesuaikan dengan max-width yang ada di blog sobat.
Lanjut silahkan salin kembali isyarat HTML dibawah ini kemudian letakkan di bawah <body>
Untuk logo blog sahabat mampu buat dengan ukuran tinggi 30px dan lebar silahkan sesuaikan, dan di alamat URL Blog silahkan ganti dengan URL Blog sahabat silahkan sesuaikan sendiri untuk lebarnya logo. Untuk tanda # silahkan isi sesuai dengan URL Laman Blog sahabat dan seterusnya.
Penggunaan Icon di Menu simple Responsive ini menggunakan font awesome jadi pastikan sahabat sudah memasangnya diblog, dan simpulan 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 isyarat yang ditandai max-width:1100px silahkan sahabat sesuaikan dengan max-width yang ada di blog sobat.
Lanjut silahkan salin kembali isyarat 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 sahabat mampu buat dengan ukuran tinggi 30px dan lebar silahkan sesuaikan, dan di alamat URL Blog silahkan ganti dengan URL Blog sahabat silahkan sesuaikan sendiri untuk lebarnya logo. Untuk tanda # silahkan isi sesuai dengan URL Laman Blog sahabat dan seterusnya. Kemudian silahkan sesuaikan username sosial media dengan punya sobat.
2. Jenis Simple Menu Responsive Menggunakan Logo dan Search Box
Silahkan sahabat salin isyarat CSS ini lalu letakkan di atas isyarat ]]></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 isyarat yang ditandai max-width:1100px silahkan sahabat sesuaikan dengan max-width yang ada di blog sobat.
Lanjut silahkan salin kembali isyarat 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 sahabat mampu buat dengan ukuran tinggi 30px dan lebar silahkan sesuaikan, dan di alamat URL Blog silahkan ganti dengan URL Blog sahabat silahkan sesuaikan sendiri untuk lebarnya logo. Untuk tanda # silahkan isi sesuai dengan URL Laman Blog sahabat dan seterusnya.
Live DEMO Simple Menu
Penggunaan Icon di Menu simple Responsive ini menggunakan font awesome jadi pastikan sahabat sudah memasangnya diblog, dan simpulan selamat mencoba.
Comments