Cara Menciptakan Hidangan Horizontal Menyerupai Kaskus

Cara Membuat Menu Horizontal Seperti KASKUS Cara Membuat Menu Horizontal Seperti KASKUS

Assalamu'alaikum....
Wah tampaknya ada yang lagi cari sajian horizontal menyerupai Kaskus Hehehe, OK dah kita eksklusif saja pada inti dari postingan ini yaitu Cara Membuar Menu Horizontal Seperti Kaskus ikuti langkah demi langkah berikut :

-Pergi ke Dasbord Blogger kalian

-Template » Edit HTML »

-Cari ]]></b:skin> dan lalu sisipkan instruksi di bawah ini sempurna di atasnya.

 #navbar-iframe {   height:0px; visibility: hidden; display: none; }

Keterangan:

Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

-sisipkan instruksi CSS berikut ini sempurna di atas ]]></b:skin> .

 /*-------------------------------------------------------------- Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog Oleh: Fajri Andaviar Blog: Fajri Andaviar URL : https://mamankdzgn.blogspot.com/ --------------------------------------------------------------*/    .bilah-menu-atas {   width: 100%;   min-width: 960px;   position: fixed;   top: 0px;   left: 0px;   right: 0px;   height: 27px;   font-size: 13px;   z-index: 99;   white-space: nowrap;   background-color: #336699;   background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);   box-shadow: 0px 2px 0px rgb(14, 90, 140);   border-bottom: 1px solid rgba(255, 255, 255, 0.1); }     .kolom-utama {   -moz-transition: all 0.2s linear 0s;   width: 960px;   height: auto;   margin: 0px auto; }  .kolom-menu {   width: 521px;   height: auto;   margin: 0px 0px 0px -41px;   float: left;   display: inline; }  .kolom-menu ul {   height: auto;   margin-top: 0px; }  .kolom-menu ul li {   float: left;   position: relative;   list-style: none outside none; }     .kolom-menu ul li:first-child {   border-left: 1px solid rgba(30, 30, 30, 0.125); }   .kolom-menu ul li a {   color: #ffffff;   font-weight: bold;   text-shadow: -1px -1px rgba(0, 0, 0, 0.2);   text-decoration: none;   display: inline-block;   padding-top: 5px;   padding-right: 10px;   padding-bottom: 5px;   padding-left: 10px;   position: relative;   border-right: 1px solid rgba(30, 30, 30, 0.125);   box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1); }     .kolom-menu ul li a:hover, .kolom-menu ul li a:focus {   background-color: rgba(255, 255, 255, 0.125);

Keterangan:

Warna yang dihasilkan oleh rangkaian instruksi CSS di atas ialah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti instruksi warna yang digunakan pada bab color:, background-color:, dan background-image:.

-Lalu cari instruksi <body> dan lalu sisipkan rangkaian instruksi dengan format menyerupai pola berikut ini sempurna di bawahnya.

  <div class='bilah-menu-atas' id='bilahmenuatas'>   <div class='kolom-utama'>     <div class='kolom-menu'>       <ul>         <li><a href='https://mamankdzgn.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-yditY9TTeSLc08rVkTAelT5JtLkJD7q8vDcH3C5Ev9nbiYP444zHQ97vCBlXZh40x_uA3XtP69SrbmWMtRJGYLYtYeRPcpVKxYZfILaSH6o9nZe4R_NlRnnL-BgTuBg16NHOb0tqKAM/s800/Beranda.png' width='20px'/></a></li>         <li><a href='URL'>Menu Kiri 1</a></li>         <li><a href='URL'>Menu Kiri 2</a></li>       </ul>     </div>     <div class='kolom-menu'>       <ul style='float: right'>         <li><a href='URL'>Menu Kanan 1</a></li>         <li><a href='URL'>Menu Kanan 2</a></li>       </ul>     </div>   </div> </div>

Keterangan:

Ganti https://mamankdzgn.blogspot.com/ dengan URL blog Kalian dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan lalu ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan sajian tampilan yang dikehendaki.

-Terakhir simpan template.

Bagaimana? Lumayan baguskan?

Sekian Tutorial aku Cara Membuat Menu Horizontal Seperti KASKUS ini. Selamat mencoba dan biar berhasil.