Skip to main content

Cara Membuat Menu di Blogspot

Cara Membuat Menu di Blogspot
Cara membuat menu drop down di blogspot, Menu adalah salah satu bagian paling penting dalam sebuah web, karena dengan menu yang teratur dan dan menarik, maka web kita terlihat terstruktur dan mudah mencari informasi yang di butuhkan oleh pembaca, Blogspot adalah salah satu favorit para blogger Nusantara, sementara pada Blogspot tidak disediakan menu untuk membuat menu drop down, entah kenapa, saya tidak tahu, sebaiknya hal ini di tanyakan ke pemiliknya, yaitu mbahhh GOOGLE.
Nah, Artikel kali ini akan membahas cara membuat menu drop down pada blogspot sehingga blog kita terlihat menarik dan terstruktur.

1. Login ke blog kamu
2. Pilih Template > Edit HTML > Cari kode

3. Letakan kode di bawah ini tepat di atas kode

<style>
#coolMenu,
#coolMenu ul {
    list-style: none;
}
#coolMenu {
width:980px;
    float: left;
}
#coolMenu > li {
    float:left;
}
#coolMenu li a {
display: block;
  
    padding: 5px 10px 5px 10px;
    text-decoration: none;
}
#coolMenu ul {
    position: absolute;
    display: none;
        z-index: 999;
}
#coolMenu ul li a {
    width: 30px;
 float:left;
padding: 5px 10px 5px 10px;
}
#coolMenu li:hover ul {  
}
/* Main menu
------------------------------------------*/
#coolMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
margin:0 auto;padding:0 auto; 
background: #02b0cf;
padding-left:3px;
border-bottom:1px solid #ccc;border-top:2px solid #ccc;
}
#coolMenu > li > a {
    color: #fff;
    font-weight: bold;
padding:8px 10px 8px 10px;
}
#coolMenu > li:hover > a {
    background: #f09d28;
    color: #000;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

}

/* Submenu
------------------------------------------*/
#coolMenu ul {
    background: #f09d28;
padding:3px 5px 3px 5px;
}
#coolMenu ul li a {
    color: #000;
width:100px;
}
#coolMenu ul li:hover a {
    background: #ffc97c;
    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
    $('#coolMenu').find('> li').hover(function(){
        $(this).find('ul')
        .removeClass('noJS')
        .stop(true, true).slideToggle('fast');
    });
});
</script>

Kode yang berwarna biru adalah kode lebar menu nya, jadi sesuaikan dengan blog kamu.
Kode yang berwarna merah adalah warna background menu nya.
Kode yang berwarna ungu adalah warna background sub menu nya.

4. Simpan Template
5. Ini adalah kode HTML Menu Drop Down Animasi.

<ul id="coolMenu">
<li><a href="http://blazerracing.blogspot.com/">Home</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Health</a></li>
<li>
<a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Blogger</a>
<ul class="noJS">
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">jQuery</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">CSS</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Widget</a></li>
</ul>
</li>
<li>
<a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Resep</a>
<ul class="noJS">
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Dessert</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Chicken</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Drink</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Cake</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Breakfast</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Soup</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Pasta</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Seafood</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Naruto Episode</a></li>
<li>
<a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">More</a>
<ul class="noJS">
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Kode Warna</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=9107643223809970520#">Get This Menu</a></li>
</ul>
</li>
</ul>

Ganti tanda pagar dengan URL yang dituju.
6. Sekarang untuk memasang menu nya, kamu bisa gunakan salah satu cara di bawah ini.
(Copy kode nomor 5 ke 2 cara di bawah ini, pilih salah satu saja, dan ikuti instruksinya.)

Cara 1 : Add Gadget &gt; HTML/Java Script &gt; Copy kode nomor 5.
Cara 2 : Template &gt; Edit HTML, Kamu cari kode bagian header blog kamu, untuk lebih mudah cari kode ini
<div id="header-wrapper">
biasanya, kodenya kaya di bawah ini

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="Blazer Blog (Header)" type="Header">
</b:widget></b:section></div>
<!-- end header-wrapper -->

NANTI KODE NOMOR 5 NYA LETAKAN DISINI DI BAWAH KODE AKHIR HEADER

Copy kode nomor 5 ke 2 cara di atas, ke HTML/JavaScript atau cara ke-2 letakan ganti kata-kata berwarna merah dengan kode nomor 5.

Notice:
Jika cara 1 gagal, berarti kamu harus gunakan cara ke 2 pasti berhasil.
Jika menggunakan cara ke-2 sebaiknya klik dulu PERTINJAUAN untuk menentukan berhasil tidaknya. Setelah berhasil bari SIMPAN TEMPLATE.

Comments

Wuihhh..bagus banget tutornya nih bang kemaren aku ada pake buat blog dummy saya bang untuk tampilannya keren ya bang,disetting apa lagi nih bang blognya sdh bagus koq..hahahyyyy
Rudi Gaol said…
oalah, ngeledek aja abang kita ini,..... bukan yg ini,
tapi, blog lain, blog ini mah blog iseng, aku pengen jualan,
nah, SEO yg bagus agar produk2 kita bisa bagus di halaman pertama, aku tidak paham benar,,,,,:)

Popular posts from this blog

Jasa Sewa Cold Storage Untuk Menyimpan Daging

Jasa Sewa Cold Storage Untuk Menyimpan Daging. Cold storage adalah tempat penyimpanan barang yang mudah rusak, misalnya seperti sayur, buah dan daging. Tapi banyak juga yang menggunakan cold storage untuk menyimpan bahan-bahan industri. Cold Storage menggunakan teknologi seperti AC, yang bisa membekukan material yang disimpan pada ruangan tersebut. Yang jadi masalah adalah biaya untuk membangun sebuah cold storage membutuhkan biaya yang cukup mahal. Pengganti Cold Storage! Untuk mengatasi hal diatas anda bisa menggunakan container reefer sebagai cold storage dengan harga relatif jauh lebih murah. Tapi sebaiknya menyewa container reefer agar terhindar dari masalah yang mungkin akan muncul. Pengguna container reefer sudah banyak di Indonesia karena jauh lebih efektif. Berita bagusnya bisa disewa per bulan. Mengapa Sebaiknya menyewa Container Reefer? Iya, ini sudah masalah klasik di negara kita, pada negara kita belum ada produsen sparepart container reefer. Sehingga jika terjadi kendala

Harga Container Bekas Naik Di Indonesia

Harga Container Bekas naik Di Indonesia. Faktor utama harga container bekas mengalami kenaikan adalah nilai tukar rupiah yang terus melemah terhadap dollar. Saat ini bahkan untuk beli dollar udah mencapai 1 usd = IDR 14.140,-. Container bekas tentu saja dibeli dengan mata uang asing khususnya dollar. Hal itu tentu memberatkan para pebisnis terutama perusahaan yang sering import barang dari luar negeri.

Tips Memilih Sewa Container Office Berkualitas Tinggi

Sewa container office menjadi salah satu kebutuhan yang saat ini banyak dibutuhkan oleh setiap pihak. Khususnya bagi para penyedia layanan pekerjaan yang membutuhkan alternatif dalam menyediakan tempat untuk karyawan dalam melakukan aktivitas bekerja. Hal ini cukup wajar sebab dengan atmosfer pola kualitas pekerjaan yang semakin berkembang pesat dan tentunya semakin modern, hal ini akan berdampak cukup berpengaruh pada kinerja khususnya pada tempat bekerja. Hal inilah yang membuat container menjadi inovasi terbaru. Akan ada banyak sekali manfaat yang akan didapatkan oleh Anda jika mampu memaksimalkan penggunaan sewa container office . Sebab ada banyak sekali kelebihan yang akan didapatkan semua pengguna bahkan dalam penggunaan jangka panjang. Kelebihan pertama dari adanya penggunaan container sebagai kantor adalah dengan memberikan fungsi pelayanan yang lebih simple. Desain yang tentunya lebih minimalis akan membuat kualitas penggunaan container, khususnya pekerja akan lebih n