Cara mudah membuat menu navigator pada blog kesayangan anda. Bag 1

Untuk memudahkan pengunjung blog anda dalam mencari artikel maka perlu suatu desain blog yang professional,untuk itu saya akan membagikan resep bagaimana agar blog ada kelihatan professional. Bagaimana resepnya, resepnya yaitu dengan cara menambah icon menu pada blog anda. 

Dengan adanya menu-menu di blog kita maka pengunjung akan sangat di mudahlkan dalam melakukan pencarian. Ok langsung saja silahkan ikuti langkah-langkah berikut ini:

11.       Login ke blogger.com

22.       Pilih tata letak

33.       Kemudian Tambahkan gadget HTML/Java Script

44.     Paste semua kode berwarna biru di bawah  ini pada kolom konten HTML/Java Script

<style type="text/css">

/*CSS MENU*/

#menu{background:#343434;color:#eee;height:25px;border-bottom:2px solid #eeeded}

#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}

#menu ul{height:35px}

#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}

#menu li:first-child{border-left: none}

#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}

#menu li:hover > a,#menu li a:hover{background:#111}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}

#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}

#menu label span{font-size:12px;position:absolute;left:35px}

#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}

#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}

#menu li:hover ul.menus{display:block}

#menu a.home {background: #c00;}

#menu a.sub{padding:0 27px 0 14px}

#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}

#menu ul.menus a:hover{background:#333;}

</style>

<!-- Mulai Area Menu -->

<nav id="menu">

<input type="checkbox" />

<label>≡Navigation</label>

<ul>

<li><a class="BERANDA" href="http://jualannpulsa.blogspot.com/2015/08/save-system.html">BERANDA</a></li>

<li><a href="http://jualannpulsa.blogspot.com/2015/08/cara-transaksi.html">CARA TRANSAKSI</a></li>

<li><a href="#">KODE PRODUK</a></li>

<li><a href="#">CARA DAFTAR</a></li>

<li><a href="#">SMS CENTER</a></li>

<li><a href="#">CARA DEPOSIT</a></li>

<li><a href="http://report.saveplus.us/">WEB REPORT</a></li>

<li><a href="http://jualannpulsa.blogspot.com/2015/08/deposit-0352-488867call-0852-59681234.html">BANK DEPOSIT</a></li>

</ul>

</nav>

jika anda berhasil maka hasilnya akan seperti gambar di bawah ini..

Utk kode yang berwarna merah silahkan ganti dengan nama blog anda.
bagaimana, sangat mudah bukan....... selamat mencoba..

Baca Juga......

Cara Mudah Download Vidio Tanpa Sofware

Cara Simple Mengganti Template Pada Blog