Sedikit Info Seputar Cara membuat menu navigasi responsive di blogger Terbaru 2017 - Hay gaes kali ini team Apps Android Games, kali ini akan membahas artikel dengan judul Cara membuat menu navigasi responsive di blogger, kami selaku Team Apps Android Games telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Apps Android Games. semoga isi postingan tentang Artikel Blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Cara membuat menu navigasi responsive di blogger Full Update Terbaru
link: Cara membuat menu navigasi responsive di blogger

Artikel Terbaru Cara membuat menu navigasi responsive di blogger Update Terlengkap 2017

Cara membuat menu navigasi responsive di blogger. Sobat-sobat blogger yang saya cintai (suit-suit...), blog yang masih standar dengan menu dan tampilan bawaan blogger sangatlah sederhana. Jika kita menginginkan kemudahan dalam menjelajahi isi blog tersebut, maka blog tersebut harus memasang bar navigasi yang dapat mengarahkan kita ke artikel maupun kategori yang kita cari. Salah satunya seperti gambar contoh di bawah ini.

Bagi yang baru mempunyai blog, hal ini tentu sangat diperlukan sebagai beberapa tahapan awal dalam kelengkapan sebuah blog. Bagi sobat saya yang belum memiliki blog jangan khawatir, silahkan buat blog baru sobat sebab cara membuat blog di blogger tidaklah sulit.

Pada jaman yang semakin maju seperti saat ini, dimana gadget yang ada semakin canggih dan mempermudah kita melakukan banyak hal. Contonya adalah smartphone, Tablet dan lain-lain. Aktivitas browsing tak perlu lagi harus membuka laptop maupun PC (desktop), semuanya cukup dalam genggaman. Dan saya yakin para pengguna internet akan semakin banyak yang melakukan aktivitasnya melalui perangkat mobile.

Dengan alasan itu maka blogpun dituntut untuk lebih mobile friendly, atau bisa dibilang responsive. Oleh sebab itu pula maka kali ini saya akan memberikan info bagaimana membuat menu navigasi yang responsive. Sebenarnya tak susah melakukannya, sobat hanya tinggal mengikuti instruksi yang ada.

Cara menambahkan menu Navigasi responsive di Blogger

1. Log in ke akun blogger sobat seperti biasanya

2. Buka menu Template >> Edit HTML

3. tekan ctrl+F, cari kode <head> lalu sisipkan script di bawah ini tepat di bawah kode tersebut

Jika sudah selesai maka sekarang kita beranjak ke langkah selanjutnya.

Menambahkan kode CSS

Kali ini sobat ketikkan kode ini di pencarian ]]></b:skin> dan sisipkan script berikut ini di atasnya. Jangan sampai salah tempat peletakan ya Sob...

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);     margin: 0;     padding: 0; } article,aside,figure,footer,header,hgroup,nav,section {     display: block; } * {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } html {     -webkit-font-smoothing: antialiased; } a {     color: #BA0707;     text-decoration: none; } a:hover {     color: #BA0707; } body {     background: #e5e5e5;     color: #374147;     font: 14px "Open Sans",Helvetica,Arial,sans-serif;     -webkit-font-smoothing: antialiased;     line-height: 1;     width: 100%; } nav {     display: block;     margin-top: 100px;     background: #374147; } .menu {     display: block; } .menu li {     display: inline-block;     position: relative;     z-index: 100; } .menu li:first-child {     margin-left: 0; } .menu li a {     font-weight: 600;     text-decoration: none;     padding: 20px 15px;     display: block;     color: #fff;     transition: all 0.2s ease-in-out 0s; } .menu li a:hover,.menu li:hover>a {     color: #fff;     background: #F70000; } .menu ul {     visibility: hidden;     opacity: 0;     margin: 0;     padding: 0;     width: 150px;     position: absolute;     left: 0px;     background: #fff;     z-index: 99;     transform: translate(0,20px);     transition: all 0.2s ease-out; } .menu ul:after {     bottom: 100%;     left: 20%;     border: solid transparent;     content: " ";     height: 0;     width: 0;     position: absolute;     pointer-events: none;     border-color: rgba(255, 255, 255, 0);     border-bottom-color: #fff;     border-width: 6px;     margin-left: -6px; } .menu ul li {     display: block;     float: none;     background: none;     margin: 0;     padding: 0; } .menu ul li a {     font-size: 12px;     font-weight: normal;     display: block;     color: #797979;     background: #fff; } .menu ul li a:hover,.menu ul li:hover>a {     background: #F70000;     color: #fff; } .menu li:hover>ul {     visibility: visible;     opacity: 1;     transform: translate(0,0); } .menu ul ul {     left: 149px;     top: 0px;     visibility: hidden;     opacity: 0;     transform: translate(20px,20px);     transition: all 0.2s ease-out; } .menu ul ul:after {     left: -6px;     top: 10%;     border: solid transparent;     content: " ";     height: 0;     width: 0;     position: absolute;     pointer-events: none;     border-color: rgba(255, 255, 255, 0);     border-right-color: #fff;     border-width: 6px;     margin-top: -6px; } .menu li>ul ul:hover {     visibility: visible;     opacity: 1;     transform: translate(0,0); } .responsive-menu {     display: none;     width: 100%;     padding: 20px 15px;     background: #374147;     color: #fff;     text-transform: uppercase;     font-weight: 600; } .responsive-menu:hover {     background: #374147;     color: #fff;     text-decoration: none; } a.homer {     background: #F70000; } @media (min-width: 768px) and (max-width: 979px) {     .mainWrap {         width: 768px;     }     .menu ul {         top: 37px;     }     .menu li a {         font-size: 12px;     }     a.homer {         background: #374147;     } } @media (max-width: 767px) {     .mainWrap {         width: auto;         padding: 50px 20px;     }     .menu {         display: none;     }     .responsive-menu {         display: block;         margin-top: 100px;     }     nav {         margin: 0;         background: none;     }     .menu li {         display: block;         margin: 0;     }     .menu li a {         background: #fff;         color: #797979;     }     .menu li a:hover,.menu li:hover>a {         background: #F70000;         color: #fff;     }     .menu ul {         visibility: hidden;         opacity: 0;         top: 0;         left: 0;         width: 100%;         transform: initial;     }     .menu li:hover>ul {         visibility: visible;         opacity: 1;         position: relative;         transform: initial;     }     .menu ul ul {         left: 0;         transform: initial;     }     .menu li>ul ul:hover {         transform: initial;     } } @media (max-width: 480px) { } @media (max-width: 320px) { }

Menambahkan kode HTML

Tinggal langkah terakhir Sob, sama seperti kedua langkah sebelumnya, hanya saja kali ini yang perlu sobat cari adalah kode </header> , jika sudah sobat temukan sisipkan script berikut tepat dibawah kode header.

<nav>
<a id="resp-menu" class="responsive-menu" href="#"> Menu</a>
 <ul class="menu">
 <li><a class="homer" href="#"> HOME</a>
 </li><li><a href="#"> ABOUT</a></li>
<li><a href="#"> PORTFOLIO</a>
<ul class="sub-menu">
 <li><a href="#">Sub-Menu 1</a></li>
 <li><a href="#">Sub-Menu 2</a>
 <ul><li><a href="#">Sub Sub-Menu 1</a></li>
 <li><a href="#">Sub Sub-Menu 2</a></li></ul> </li>
 <li><a href="#">Sub-Menu 3</a><ul>
 <li><a href="#">Sub Sub-Menu 1</a></li>
 <li><a href="#">Sub Sub-Menu 2</a></li>
 </ul></li></ul></li>
<li><a href="#"> BLOG</a></li>
 <li><a href="#"> CATEGORIES</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a><ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
</ul></li><li><a href="#">Sub-Menu 3</a>
<ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
 </ul> </li></ul></li>
<li><a href="#"> CONTACT</a></li>
<li><a href="#"> SITEMAP</a></li>
</ul>
</nav>

Klik Simpan template, lalu coba sobat lihat tampilan blog standar sobat, hasilnya bagaimana? Oh iya Sob, hilangkan navigasi bawaan blogger di bagian palin atas halaman blog sobat, dengan cara mematikan/menutup navigasi tersebut, letaknya di menu administrasi blog >> Tata letak >> Navbar >> edit >> off.

Sampai disini tutorial tentang bagaimana cara membuat menu navigasi responsive di blogger yang dapat saya jelaskan, semoga dapat memberikan manfaat khususnya sobat-sobat saya yang baru memulai blogging.
Salam Pintar...

Itulah sedikit Artikel Cara membuat menu navigasi responsive di blogger terbaru dari kami

Semoga artikel Cara membuat menu navigasi responsive di blogger yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Apps Android Games. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Artikel Tentang Cara membuat menu navigasi responsive di blogger

Info Tentang Cara membuat menu navigasi responsive di blogger Update Terbaru 2017 Gratis

Artikel Terbaru Cara membuat menu navigasi responsive di blogger Update Terlengkap 2017

Itulah sedikit Artikel Cara membuat menu navigasi responsive di blogger terbaru dari kami