Cara Membuat Menu Responsive Pada Blog
Menu atau lebih dikenal dengan menu navigasi yang sangat berguna untuk pengunjung blog anda. Menu memungkinkan pengunjung anda untuk mencari konten yang tepat yang mereka cari melalui kategori tertentu. Namun, menu sekarang telah berubah menjadi menu Responsif memberikan fleksibilitas bagi pengguna ponsel untuk menavigasi melalui situs anda dengan mudah. Jika anda ingin menambahkan menu yang responsif terhadap blog blogger anda maka anda beruntung berada di tempat yang tepat. Hari ini di artikel ini, serbacara.com akan menunjukkan cara membuat menu responsive dengan mudah.
Apa yang dimaksud dengan menu responsive?
Menu responsive adalah menu navigasi yang fleksibel. Memberikan pengalaman berkualitas bagi pengguna desktop dan pengguna ponsel. Ketika pada desktop mereka muncul dengan cara tradisional, tetapi pada ponsel mereka muncul seperti aplikasi mobile lebar, tinggi dan diatur dengan baik. Dalam screenshot berikut, anda dapat melihat dengan jelas menu yang sama tapi muncul berbeda pada desktop dan smartphone.
Cara Mudah Menambahkan Menu Responsive di Blogger
Ketika membuat menu responsive di blogger, serbacara.com memiliki berbagai teknik tentang bagaimana kita dapat menangani menu navigasi kami untuk perangkat layar kecil seperti ponsel, smartphone, dan lain-lain sumber daya yang kita punya untuk mencapai tujuan ini tidak terbatas. Dalam artikel ini, serbacara.com akan menunjukkan konsep utama yang lebih mudah untuk menerapkan menu responsive pada blog.
Hal pertama yang perlu anda lakukan adalah login ke Blogger.com - Template - Edit HTML dan paste kode berikut di mana saja setelah <body>. Jika kode <body> tidak ada anda bisa mencari kode </body> dan pastekan kode dibawah ini di atasnya kode </body>. (Perlu diingat sisipkan kode ini persis di mana anda ingin menu muncul).
Sekarang untuk gaya menu, Anda harus menambahkan CSS ke template anda. Untuk melakukannya cari kode </b:skin> dan pastekan kode berikut di atas kode </b:skin>.
Setelah menambahkan kode HTML dan kode CSS diatas, anda harus menambahkan kode JavaScript supaya menu bekerja dengan benar. Oleh karena itu, tambahkan kode berikut tepat di atas </ head>.
Setelah anda selesai menambahkan tiga kode diatas dengan benar. klik "Simpan Template". Selamat, anda telah berhasil menambahkan menu responsive di blog anda. Sekarang kunjungi blog Anda dengan desktop dan smartphone untuk memastikan sudah terpasang dengan benar.
Serbacara.com berharap tutorial cara membuat menu responsive ini dapat membantu setiap orang untuk belajar dengan mudah menambahkan menu responsif di blogger tanpa menghadapi banyak kekhawatiran. Jika anda menyukai artikel ini share ke facebook, twitter atau yang lainnya. Dan bila ada pertanyaan tanyakan di kolom komentar.
Apa yang dimaksud dengan menu responsive?
Menu responsive adalah menu navigasi yang fleksibel. Memberikan pengalaman berkualitas bagi pengguna desktop dan pengguna ponsel. Ketika pada desktop mereka muncul dengan cara tradisional, tetapi pada ponsel mereka muncul seperti aplikasi mobile lebar, tinggi dan diatur dengan baik. Dalam screenshot berikut, anda dapat melihat dengan jelas menu yang sama tapi muncul berbeda pada desktop dan smartphone.
Cara Mudah Menambahkan Menu Responsive di Blogger
Ketika membuat menu responsive di blogger, serbacara.com memiliki berbagai teknik tentang bagaimana kita dapat menangani menu navigasi kami untuk perangkat layar kecil seperti ponsel, smartphone, dan lain-lain sumber daya yang kita punya untuk mencapai tujuan ini tidak terbatas. Dalam artikel ini, serbacara.com akan menunjukkan konsep utama yang lebih mudah untuk menerapkan menu responsive pada blog.
Hal pertama yang perlu anda lakukan adalah login ke Blogger.com - Template - Edit HTML dan paste kode berikut di mana saja setelah <body>. Jika kode <body> tidak ada anda bisa mencari kode </body> dan pastekan kode dibawah ini di atasnya kode </body>. (Perlu diingat sisipkan kode ini persis di mana anda ingin menu muncul).
<!---Menu--> <nav id='nav-main'>Ambil kode menu diatas disini: pastebin.com/BiiZbDZt
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Gallery</a></li>
<li><a href=''>Tutorials</a></li>
<li><a href=''>Contact</a></li>
</ul>
</nav>
<div id='nav-trigger'>
<span>Menu <i class='fa fa-list'/></span>
</div>
<nav id='nav-mobile'/>
Sekarang untuk gaya menu, Anda harus menambahkan CSS ke template anda. Untuk melakukannya cari kode </b:skin> dan pastekan kode berikut di atas kode </b:skin>.
#nav-trigger {Ambil kode CSS-nya disini: pastebin.com/3Mc4yyqM
display: none;
text-align: center;
}
#nav-trigger span {
display: block;
background-color: #279CEB;
cursor: pointer;
text-transform: uppercase;
padding: 0 25px;
color: #EEE;
line-height: 67px;
}
nav#nav-mobile {
margin: 0px;
}
nav {
margin-bottom: 30px;
}
nav#nav-main {
background-color: #279CEB;
margin: 0px;
float: left;
}
nav#nav-main ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav#nav-main li {
display: inline-block;
float: left;
ont-family: 'Open Sans', sans-serif;
}
nav#nav-main li:last-child {
border-right: none;
}
nav#nav-main a {
padding: 0 25px;
color: #EEE;
line-height: 67px;
display: block;
}
nav#nav-main a:hover {
background-color: #3AB0FF;
text-decoration: none;
color: #fff;
}
nav#nav-mobile {
position: relatifve;
display: none;
}
nav#nav-mobile ul {
display: none;
list-style-type: none;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #ddf0f9;
z-index: 10;
padding: 0px;
border-bottom: solid 1px #cc0028;
}
nav#nav-mobile li:last-child {
border-bottom: none;
}
nav#nav-mobile a {
display: block;
color: #29a7e1;
padding: 10px 30px;
text-decoration: none;
border-bottom: 1px solid #00aeef;
}
nav#nav-mobile a:hover {
background-color: #e6002d;
color: #fff;
}
/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 900px) {
#nav-trigger {
display: block;
}
nav#nav-main {
display: none;
}
nav#nav-mobile {
display: block;
}
}
Setelah menambahkan kode HTML dan kode CSS diatas, anda harus menambahkan kode JavaScript supaya menu bekerja dengan benar. Oleh karena itu, tambahkan kode berikut tepat di atas </ head>.
<script type='text/javascript'>Ambil kode HTML disini: pastebin.com/PSxe8tac
//<![CDATA[
$(document).ready(function(){
$("#nav-mobile").html($("#nav-main").html());
$("#nav-trigger span").click(function(){
if ($("nav#nav-mobile ul").hasClass("expanded")) {
$("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
$(this).removeClass("open");
} else {
$("nav#nav-mobile ul").addClass("expanded").slideDown(250);
$(this).addClass("open");
}
});
});
//]]>
</script>
Setelah anda selesai menambahkan tiga kode diatas dengan benar. klik "Simpan Template". Selamat, anda telah berhasil menambahkan menu responsive di blog anda. Sekarang kunjungi blog Anda dengan desktop dan smartphone untuk memastikan sudah terpasang dengan benar.
Serbacara.com berharap tutorial cara membuat menu responsive ini dapat membantu setiap orang untuk belajar dengan mudah menambahkan menu responsif di blogger tanpa menghadapi banyak kekhawatiran. Jika anda menyukai artikel ini share ke facebook, twitter atau yang lainnya. Dan bila ada pertanyaan tanyakan di kolom komentar.
Post a Comment for "Cara Membuat Menu Responsive Pada Blog"