Saturday, June 18, 2016

Cara Membuat Menu di Blog dengan Mudah

Jika anda sudah memiliki blog, tahap selanjutnya adalah mempercantik tampilan blog anda sehingga pengunjung mudah menemukan postingan anda dengan memberikan menu di blog anda. Namun jika anda belum memiliki blog, silahkan baca tutorial cara membuat blog dengan cepat dan mudah serta berpeluang menghasilkan uang.

Cara membuat menu di blog adalah sangat beraneka ragam tergantung dengan jenis blog yang anda inginkan. Namun, kali ini kita akan membahas cara menu diblog dengan mudah dan cepat khususnya anda pengguna blogger atau blogspot.


Disini saya hanya ingin membagikan informasi yang sudah saya terima yaitu membuat menu horizontal pada blog tanpa mengedit template anda. Sehingga langkah atau tutorial ini sangat mudah dipelajari dan dilakukan untuk blogger pemula seperti saya.


Bagaimana cara membuat menu bar di blog tanpa mengedit Template?


Langkah awal kita untuk membuat menu tersebut di blog kita, tentunya kita harus login terlebih dahulu ke blogger.com. Silahkan masukkan akun gmail anda supaya anda dapat mengakses akun blog anda. Namun jika anda belum memiliki akun gmail yang merupakan persyaratn dasar memiliki blog, anda dapat membaca tutorial saya yang sudah saya buat beberapa waktu yang lalu yaitu cara membuat akun gmail.

Setelah anda sudah memasukki akun blogger anda, silahkan pilih blog yang ingin anda lengkapi dengan menu yang akan kita buat. Setelah itu silahkan anda klik Tata letak pada bagian kiri menu dashboard anda.

Selanjutnya pilih bagian dari tata letak yang memiliki kelebaran cukup. Saya memilih pada bagian, Cross-Coulum. Pada bagian tersebut silahkan klik tambahkan gadget dan pilih html/javascript maka anda akan melihat tampilan seperti pada bagian dibawah ini.

Setelah anda melihat tampilan diatas, silahkan klik tanda plus HTML/JavaScript. Lalu isikan kode dibawah ini.
<style type="text/css">
/*CSS MENU*/
#menu{background:#343434;color:#eee;height:35px;border-bottom:10px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:45px}
#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:45px;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:100px;height:45px;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="home" href="/">Home</a></li>
<li><a href="http://www.indpanduanmembuatblog.xyz/p/contact-form.html">Kontak Kami</a></li>
<li><a href="http://www.indpanduanmembuatblog.xyz/p/disclaimer.html">Disclaimer</a></li>
<li><a href="http://www.indpanduanmembuatblog.xyz/p/kebijakan-privasi.html">Kebijakan Privasi</a></li>
<li><a href="http://www.indpanduanmembuatblog.xyz/p/kebijakan-privasi.html">Daftar Isi</a></li>
<li><a
href="http://www.indpanduanmembuatblog.xyz/search/label/Blog">Blog</a></li>
<li><a href="http://www.indpanduanmembuatblog.xyz/search/label/tampilan">Tampilan</a></li>
<li><a href="http://www.indpanduanmembuatblog.xyz/search/label/optimalkan">optimalkan</a></li>
</ul></nav>
<!-- Area Menu Selesai-->

Untuk mengedit kode html diatas perhatikan contoh berikut ini:
<li><a href="http://www.indpanduanmembuatblog.xyz/p/kebijakan-privasi.html">Kebijakan Privasi</a></li>
 Pada warna biru diatas adalah menu yang akan ditampilkan pada blog anda, silahkan anda edit seseuai dengan apa yang anda inginkan. kemudian kata yang berwarna merah silahkan anda ganti dengan alamat menu yang anda buat. 

Jika anda menempatkan kode singkat tentang cara mudah membuat menu di blog tanpa mengedit template dengan benar, maka anda akan melihat tampilan persis sama dengan yang ada di blog saya sebagai berikut:


Demikian tutorial atau panduan singkat tentang bagaimana caranya membuat menu bar di blog dengan mudah tanpa anda mengedit template. Tutorial ini sangat mudah dilakukan bagi blogger pemula seperti saya.