Cara Membuat Template Blogspot: Pasang Menu Di Template Blogspot

<div style='background-color: none transparent;'></div>
Halo sobat,

Sorry nih agak mundur penjelasannya. Karena saya harus mengolah 5 blog sekaligus.  Pada tutorial kali ini saya akan membahas tentang pasang menu di template blogspot. Kita kan kemarin sudah membuat menunya bukan? Kalau ada temen-temen yang ketinggalan, temen-temen bisa lihat disini tutorialnya:http://intuts.blogspot.com/2011/06/cara-membuat-template-blogspot-membuat.html

Setelah udah tau cara membuat menunya. Saya ingin teman-teman memasukannya kedalam blogspot. Tapi sebelum itu saya ingin teman-teman memakai template minima sebagai dasar pembuatan template kita. Bagaimana caranya.

1. Login Ke Blogger.com
2. Pada rancangan pilih Edit HTML.
3. Scroll Kebawah dan lihat pada Template Tataletak(Diluncurkan 2006).
4. Klik dan Pilih Template Minima dan Simpan Template.

Jika teman-teman melakukannya dengan benar, maka akan muncul gambar seperti dibawah ini:
Setelah teman-teman rasa sudah benar. Klik Edit HTML lagi. Lalu tambahkan kode CSS yang sudah kita buat kemarin di atas kode:
/* Header
-----------------------------------------------
 */
Dan hapus kode #menu yang terhubung dengan navigasi agar tidak terjadi pemanggilan ganda. Hasil akhir codenya adalah sebagai berikut.

#menu {
    height: 50px;
    width: auto;
    background-color: #242424;
}
#navigasi {
    float: right;
    height: 50px;
    width: 600px;
}
#navigasi a {
    display: block;
    float: left;
    margin: 0px;
    padding: 15px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
}
#navigasi a:hover {
    color: #999999;
    background-color: #333333;
}
Lalu cari kode <body>. Letakan kode pemanggilnya di bawah <body>.
<div id="menu">
<div id="navigasi">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<a href="#"><img src="image/logo.png" alt="ilove" border="0" /></a></div>
Ganti alamat logo dengan alamat logo yang sudah di upload. Jadi hasil akhir adalah sebagai berikut.
<div id="menu">
<div id="navigasi">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<a href="#"><img src="http://3.bp.blogspot.com/-4uZenk3hg_I/Tf29kx5A9II/AAAAAAAAAFk/3JTgc1rkDGs/s1600/logo.png" alt="ilove" border="0" /></a></div>
Sekarang Save dan Lihat hasilnya.
 Lho kok gambarnya gak dipinggir? Besok akan kita kulik gambar dan menunya. Jadi tetep berkunjung ke blog ini ya. Jangan lupa langganan RSSnya biar gak pernah ketinggalan info.

5 komentar:

Author mengatakan...

mantaps mas bro,,, makasih penjelasannya,,

Davot Marbun mengatakan...

Mau coba nih mas di blog saya

Fikri Alfarizi mengatakan...

mas atau bang...
minta alamat emailny doong
kalo perlu no. hape nya deh
mau tanya-tanya banyak nih
:D
bolehkan ??

Dudi Suswandi mengatakan...

ko yang saya ga ada template minima ..
mohon pencerahannya mas...
thanks

remo-xp.net mengatakan...

saya mendesain template blogspot dengan dreamwaver sudah selesai menghasilkan .html dan gambar dalam folder images ... bingung bagaimana ngeupload ke blogger, agar tema tersebut bisa di pake di blogspot saya.... apakah harus ada settingan atau langkah2 lagi??

gmana gan?? tau ngak caranya?

Posting Komentar

Kirimkan komentar yang berbobot untuk membangun kredibilitas anda, Komentar dengan link sampah/spam akan saya hapus.