Membuat Menu Dropdown Responsive Fresh Untuk Blogger
GeegleHayoO - Cara Membuat Desain Menu Dropdown Responsive di Blogger
Ingin Buat / Desain menu Responsif Bar di Blogger?
Bertanya-tanya Cara Tambah Responsif Menu Bar di Blogger, Maka Kamu berada di platform yang tepat karena hari ini di tutorial ini kita akan berbagi An Nice Looking Menu / Navigasi Bar Yang Sepenuhnya Responsif.
Menu atau lebih dikenal dengan menu navigasi yang sangat berguna untuk menyediakan lingkungan yang ramah pengguna untuk pengunjung Kamu. Menu memungkinkan pengunjung Kamu untuk mencari konten yang tepat yang mereka cari dengan pergi melalui kategori tertentu yang sudah kamu tetapkan. Namun, menu sekarang / hari ini telah berubah menjadi menu Responsif yang memberikan fleksibilitas bagi pengguna ponsel untuk menavigasi melalui situs Kamu dengan sangat mudah. Dalam kasus ini, Kamu ingin menambahkan mobile-friendly, menu responsif terhadap blog blogger Kamu maka Kamu beruntung berada di tempat yang tepat bersama GeegleHayoO Blog.
Daftar Isi :
1. Seperti Apa Menu Responsive itu?
2. Bagaimana Cara Menambahkan Menu Responsive di Blogger?
2.1 Tambahkan Responsif Menu Bar Untuk Blogger.
2.1.1 Kesimpulan:
Seperti Apa Menu Responsive itu?
Menu Responsive tersebut adalah menu navigasi yang fleksibel dan user-friendly.
Ia memberikan pengalaman berkualitas dari pengguna desktop untuk pengguna ponsel. Ketika pada desktop mereka muncul dengan cara tradisional, Tapi di ponsel mereka muncul seperti aplikasi mobile, tinggi dan lebar diatur dengan baik.
Dalam kasus Menu berikut, Kamu dapat dengan jelas melihat menu yang sama tetapi muncul bentuk yang berbeda pada desktop dan smartphone.
Tugas Merancang template blogger responsif dimulai dengan Header dan bagian yang paling penting dari header adalah menu navigasi atas yang menyediakan link yang berguna untuk halaman Batin Kamu hehey.
Sekarang Menu responsive adalah virus yang meledak dan langsing naik daun bagi kalangan Blogger dan dapat dilihat secara luas diterapkan pada semua blog terutama WordPress dan bahkan mashable.com juga pake.
Chakly berharap itu akan berguna untuk masyarakat blogger karena itu benar-benar sebuah menu yang efisien yang kompatibel dengan semua browser utama dan tidak menggunakan Jquery sama sekali!
Screenshot di bawah ini diambil untuk memberikan gambaran bagaimana menu blog Kamu akan terlihat seperti dalam ukuran layar yang berbeda dan dalam lanskap dan potret modus layar.
Menu Responsive KerenMenu ini otomatis menyesuaikan sendiri dengan menggunakan CSS3 MediaTalk.
Okay Mari kita mulai tutorial
((
___; )
(6
Bagaimana Cara Menambahkan Menu Responsibve di Blogger?
Ketika datang untuk menciptakan menu responsif di blogger, Kita memiliki berbagai teknik tentang "bagaimana kita bisa menangani menu navigasi kita untuk perangkat layar kecil seperti ponsel, smartphone, dan lain-lain". sumber daya yang kita punya untuk mencapai tujuan ini tidak terbatas. Pada artikel ini, Chakly akan menampilkan konsep utama yang lebih mudah untuk menerapkan dan memiliki keunggulan lebih dari yang namanya kerugian.
Catatan : Jika Kamu telah mengaktifkan "Mobile View" / "Mode Seluler" di Dashbord blog Kamu, Maka Kamu harus terlebih dahulu untuk menonaktifkannya! dengan cara :
1. Masuk ke Blogger.com > Template...
2. klik ikon Roda Gigi.
3. Pilih No, Tampilkan template seluler di perangkat mobile.
4. Menyimpan...
Tambahkan Responsif Menu Bar Untuk Blogger
Hal pertama yang Kamu perlu adalah menambahkan CSS ke template Kamu. Untuk melakukannya lagi itu dalam template, Silahkan cari tag
]]> </ b: skin> dan Passtekan script di bawah ini tepat diatasnya.
//****************************———————-***********************// Responsive Menu Bar Designed By MyBloggerGuides.com //****************************———————-***********************// #menu-wrapper{background:#4b3f57;height:50px;width:100%;position:relative;}#menu1{background:#4b3f57;color:#fff;height:50px;}#menu1 {border-bottom: 4px solid #f35d5c;}#menu1 ul,#menu1 li{margin:0;padding:0;list-style:none;}#menu1 ul{height:50px}#menu1 li{float:left;display:inline;position:relative;font-family:’Oswald’;font-size:14px;font-weight:400;text-transform:capitalize;}#menu1 li a{color:#fff;}#menu1 a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}#menu1 li:hover > a{background:#3f354a;color:#fff;}#menu1 li a:hover{color:#fff;}#menu1 li:last-child a{border-right:none;}#menu1 input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}#menu1 label{font-family:’Oswald’;font-size:30px;font-weight:400;text-transform:capitalize ;display:none;width:35px;height:51px;line-height:51px;text-align:center}#menu1 label span{font-size:13px;position:absolute;left:35px}#menu1 ul.menus{visibility:hidden;opacity:0;height:auto;overflow:hidden;width:166px;background:#3f354a;position:absolute;z-index:99;display:none;color:#fff;transition:all 0.3s ease-in-out;}#menu1 li > ul.menus{transition:all 0.3s linear;}#menu1 li:hover > ul.menus{visibility:visible;opacity:1;display:block;-moz-animation: fadeInUp .3s ease-in-out;-webkit-animation: fadeInUp .3s ease-in-out;animation: fadeInUp .3s ease-in-out;transition:all 0.3s linear;}#menu1 a.ai,#menu1 a.trigger2{padding:0 27px 0 14px;transition:all 0.3s linear;}#menu1 li:hover > a.ai,#menu1 a.ai:hover{background:#3f354a;color:#fff}#menu1 li > a.ai::after {content:””;margin:0 auto;background:url(‘http://2.bp.blogspot.com/-mHVCs4K3A84/U9vKbpqhSmI/AAAAAAAAE5E/y7Dp7HzmenA/s1600/arrow.png’) no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 li:hover > a.ai::after {content:””;margin:0 auto;background:url(‘http://3.bp.blogspot.com/-ihlfaVl0yFM/U9vMSJa-tLI/AAAAAAAAE5Q/9SRXYxdvmmI/s1600/arrowhover.png’) no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:1px solid #3a3144;transition:all .3s linear;}#menu1 ul.menus a:hover{background:#322a3b;color:#fff;transition:all .1s linear;}#menu1 ul.menus li{display:block;width:100%;font-family:’Open Sans’;font-size:13px;font-weight:400;text-transform:none;}#menu1 ul.menus li:hover{width:100%;}#menu1 ul.menus li:last-child {border-bottom:none;}#menu1 ul.menus li:first-child a{border-top:none;}#menu1 ul.menus li:last-child a{border-bottom:none;}#menu1 ul.menus li:hover a {background:#322a3b;color:#fff;}#menu1 .homers a{background:#f35d5c;color:#fff;}#menu1 .homers a:hover{background:#d95353;color:#fff;}#menu1 .homers1 a{box-shadow:inset 0 -4px 0 0 #f35d5c;color:#fff;}#menu1 .homers1 a:hover{box-shadow:inset 0 -54px 0 0 #f35d5c;color:#fff;}
@media screen and (max-width:960px) {#menu1{position:relative;background:#4b3f57;color:#fff;}#menu1 ul{background:#3f354a;position:absolute;top:100%;right:0;left:0;z-index:5;height:auto;display:none;}#menu1 ul.menus{width:100%;position:static;}#menu1 li{display:block;width:100%;text-align:left;}#menu1 a{border:none;}#menu1 li a{color:#fff;}#menu1 li a:hover{background:#f35d5c;color:#fff}#menu1 li:hover{background:#f35d5c;color:#fff;}#menu1 li:hover > a.ai,#menu1 a.ai:hover{background:#f35d5c;color:#fff;}#menu1 li:hover > a,#menu1 li a:hover{background:#f35d5c;color:#fff;box-shadow:none;transition: .3s linear;}#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus a:hover{background:#f35d5c;color:#fff;border-left:none;}#menu1 ul.menus li{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li:hover{background:#f35d5c;color:#fff;border-left:none;}#menu1 ul.menus li a{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li a:hover{background:#f35d5c;color:#fff;border-left:none;}#menu1 input,#menu1 label{display:inline-block;position:absolute;right:0;top:0;}#menu1 input:after,#menu1 label:after {content:””;background:url(‘http://1.bp.blogspot.com/-P2RRijDirXA/U8ftwSomm6I/AAAAAAAAEbo/tLU4c5dk2K4/s1600/nav-icon.png’) no-repeat; width:30px;height:30px;display:inline-block;position:absolute;right:15px;top:17px;}#menu1 input{z-index:4}#menu1 input:checked + label{color:#fff;font-weight:700}#menu1 input:checked ~ ul{display:block}#menu1 .homers a{background:transparent;color:#fff;}#menu1 .homers a:hover{background:#f35d5c;color:#fff;}#footer-widgetfix {width:100%;overflow:hidden;}#menu1 li:hover > a.ai::after{content:””;width:6px;height:6px;border:2px solid #fff;border-right-width:0;border-top-width:0;transform:rotate(320deg);-webkit-transform:rotate(320deg);-moz-transform:rotate(320deg);-o-transform:rotate(320deg);-ms-transform:rotate(320deg);position:absolute;top:19px;right:12px;transition:all .3s linear;}}
Sekarang yang perlu Kamu lakukan adalah pergi ke
Blogger.com> Template> Edit HTML dan paste kode berikut di mana saja setelah asalahlan di area / didalam tag <body>. (Perlu diingat sisipkan kode ini tepat di mana Kamu ingin menu Kamu muncul).
<nav id=’menu1′><input type=’checkbox’/><label><span>MBG</span></label><ul><li class=’homers’><a href=’/’><i class=’fa fa-home fa-2x fa-fw’></i></a></li><li><a href=’#’>Drop Down1</a><ul class=’menus’><li><a href=’#’>Tab 1</a></li><li><a href=’#’>Tab 2</a></li><li><a href=’#’>Tab 3</a></li></ul></li><li><a href=’#’>Seo</a></li><li><a href=’#’>Blogger Template</a></li><li><a href=’#’>Blogger Widget</a></li><li><a href=’#’>Social Media</a></li><li><a href=’#’>Get This Menu Bar</a></li></ul><a href=’#’ id=’pull’>MENU</a></nav>
Setelah Kamu selesai menambahkan dua kode / script diatas dalam template Kamu, Sekarang kamu boleh menyimpannya dengan menekan "Simpan Template". Selamat, Kamu telah berhasil menambahkan menu responsif seluler di blogger.
Sekarang coba pergi dan menguji situs Kamu dari desktop dan mobile untuk melihat perbedaannya.
Kesimpulan :
Jadi Panduan di atas adalah tentang Cara Membuat / Desain Responsif Menu Bar di Blogger Blog? Chakly harap tutorial ini akan membantu setiap orang untuk menambahkan menu bar responsif di blogger tanpa menghadapi banyak kekhawatiran. Jika Kamu suka artikel ini, Tolong di bagikan ke teman-teman Kamu supaya orang lain mengetahui hal yang Penting ini terutama bagi temen2 Blogger di Indonesia.
Terima kasih! Happy Blogging...
((
___; )
((
