×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Menu Navigasi Scroll ke Samping di Blogger

Jagoan Redesign - Kali ini saya akan membagikan sebuah tutorial Cara Membuat Menu Navigasi Scroll ke Samping di Blogger navigasi scroll ke samping mungkin hanya dapat kalian temukan di beberapa blog, karena memang penerapannya berbeda di tiap template blog.

Cara Membuat Menu Navigasi Scroll ke Samping di Blogger
Salah satu web yang menggunakan menu navigasi seperti ini adalah jalantikus dan forum kaskus. Sedangkan blogger ada blog arikadnyana, template textrim, dan idnxmus.

Tutorial ini saya khusus untuk pengguna template VioMagz, Untuk template model lain selain viomagz, silahkan menyesuaikan saja.

Cara Membuat Menu Navigasi Scroll ke Samping

Menu ini hanya muncul di tampilan Mobile saja. Jadi tidak akan muncul di tampilan Dekstop atau PC kalian.

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.
/*--- Nav Scroll by Jagoan redesign ---*/
.second-menu {
   left:0;
   right:0;
   top:48px;
   display:none;
   max-width:100%;
   overflow:scroll;
   overflow-y:hidden;
   position:fixed;
   z-index:5;
   background:#fff;
   height:35px;
   line-height:12.5px;
   font-size:13.5px;
   font-weight:500;
   box-shadow:0 2px 6px 0 rgba(0,0,0,.1);
}
 .second-menu ul {
   width:max-content;
   margin:0 0 0 90px;
}
 .second-menu ul li {
   float:left;
   font-size: 12px;
   padding:6px 8px;
   display:block;
   text-align:center;
   text-transform:uppercase;
}
 .second-menu ul li a:hover {
   color:#49ACE1;
   border-bottom:2px solid #49ACE1;
}
 .second-menu ul li a {
   color:#444;
   padding: 8px 5px;
}
 .second-menu ul li.satu1 {
   padding: 0;
   position:fixed;
   left:-1px;
}
 .second-menu ul li.satu1 span {
   background: #444;
   padding:11.5px 10.5px 10px;
   color:#fff;
   vertical-align: -6px;
   }
.second-menu ul li.satu1:after {
   content:'';
   display:inline-block;
   position:absolute;
   border-left:12px solid #444;
   border-top:8px solid transparent;
   border-bottom:8px solid transparent;
   right:-10px;
   top:4px;
}
@media screen and (max-width: 640px) {
.second-menu {
   display:block;
}
}

4. Selanjutnya cari kode</header></div> lalu tambahkan kode berikut ini tepat di bawahnya.

<div class='second-menu'>
  <ul>
   <li class='satu1'><span>KATEGORI :</span></li>
   <li><a href='#' title='Label 1'>Label 1</a></li>
   <li><a href='#' title='Label 2'>Label 2</a></li>
   <li><a href='#' title='Label 3'>Label 3</a></li>
   <li><a href='#' title='Label 4'>Label 3</a></li>
<li><a href='#' title='Label 5'>Label 5</a></li> <li><a href='#' title='Follow1'>Follow Blog Jagoan Redesign</a></li> </ul> </div>

Ganti # dengan Url kategori yang kamu inginkan, dan Label dengan Nama atau Title dari kategori tersebut.

5. Cari CSS Code dibawah ini.

@media only screen and (max-width:640px) {
#wrapper {
   padding: 70px 15px 15px;
}

Lalu ganti dengan CSS Code ini.

@media only screen and (max-width:640px) {
#wrapper {
   padding: 100px 15px 15px;
}

6. Selesai Simpan Tema.

Nah, itu adalah tutorial Cara Membuat Tombol Share Seperti Blog Igniel cara ini juga bisa kalian terapkan di blog yang menggunakan template yang Valid AMP, karena penerapannya hanya menggunakan HTML dan CSS. Cukup sesuaikan saja, bagian mana yang harus di ubah. Jika ada hal yang ingin ditanyakan silakan berkomentar saja di bawah.

Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

Komentar

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel