For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat menu navigasi scroll dibawah header

Hello Sobat IcloudZer kali ini saya akan membahas bagaimana Cara membuat menu navigasi scroll kesamping di bawah header, sebelum kita membuat dan memasang nya pada situs blog, perlu diperhatikan beberapa hal berikut

Header Melayang

Menu navigasi scroll samping di bawah header blog, ini sangat baik diterapkan untuk header sticky atau yang mempunyai tampilan header melayang

Jika header situs blog anda sudah Sticky atau melayang maka Cara membuat menu kategori kesamping dibawah header ini cocok untuk diterapkan disitus blog kesayangan sobat

Cara Penerapan

Baiklah kita akan langsung kepemasangnya aja ya, untuk lebih berhati hati back up dulu Template sobat agar lebih aman, untuk selanjutnya kita langsung Ketata caranya aja yak

  1. Login keblogger pakai akun blogger anda
  2. Cari kode ]]></b:skin> dan letakkan kode CSS dibawah ini tepat diatasnya
  3. <!-- Memu navigasi scroll samping di bawah header by Icloudice  -->
    .rahSec-m {
       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);
    }
     .rahSec-m ul {
       width:max-content;
       margin:0 0 0 90px;
    }
     .rahSec-m ul li {
       float:left;
       font-size: 12px;
       padding:6px 8px;
       display:block;
       text-align:center;
       text-transform:uppercase;
    }
     .rahSec-m ul li a:hover {
       color:#49ACE1;
       border-bottom:2px solid #49ACE1;
    }
     .rahSec-m ul li a {
       color:#444;
       padding: 8px 5px;
    }
     .rahSec-m ul li.rah {
       padding: 0;
       position:fixed;
       left:-1px;
    }
     .rahSec-m ul li.rah span {
       background: #1a73e8;
       padding:11.5px 10.5px 10px;
       color:#fff;
       vertical-align: -6px;
       }
    .rahSec-m ul li.rah:after {
       content:'';
       display:inline-block;
       position:absolute;
       border-left:12px solid #1a73e8;
       border-top:8px solid transparent;
       border-bottom:8px solid transparent;
       right:-10px;
       top:4px;
    }
    @media screen and (max-width: 640px) {
    .rahSec-m {
       display:block;
    }
    }
  4. Kemudian cari kode </header> </div> dan letakkan kode dibawah ini tepat dibawahnya
  5. <div class='rahSec-m'>
      <ul>
       <li class='rah'><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 4</a></li>
       <li><a href='#' title='Label 5'>Label 5</a></li>
      </ul>
    </div>
  6. Selanjutnya cari seperti dibawah ini, biasanya kode seperti dibawah ini terletak Diatas kode ]]></b:skin> cari secara perlahan
  7. @media only screen and (max-width:640px) {
    #wrapper {
       padding: 70px 15px 15px;
    }
  8. Jika sudah menemukan seperti kode diatas hapus dan ganti semua kode tersebut dengan kode dibawah ini ya
@media only screen and (max-width:640px) {
#wrapper {
   padding: 100px 15px 15px;
}

Contoh Tampilan

Jika kamu penasaran bagaimana dengan contoh tampilan dari menu navigasi scroll ke samping di bawah header blog, gunakan tombol di bawah ini untuk melihatnya

Apabila cara membuat menu kategori kesamping dibawah header ini sudah diterapkan maka, sobat akan melihat Label1, Label2 dan seterusnya tersebut dibawah header, maka sobat ganti label label tersebut dengan kemauan sobat nya, karena setiap kode yang saya berikan sobat harus menyempurnakannya sendiri dari setiap detailnya

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.