Friday, March 4, 2011

Cara Membuat template sederhana Blogspot Part 9 ini membahas pembuatan SIDEBAR. Untuk menampilan sidebar pada template blogspot yang kita buat, perlu menambahkan kode khusus.. kode apa itu? Lanjutin aja bacanya nanti juga tau... hehe.. Untuk yang ketinggalan artikel baca dulu artikel di bawah ini yak :

Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2 , Part3, Part4, Part 5, Part 6, Part 7, Part 8

Ayo kita kemon.... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 8 sudah kita buat top menu dan sekarang kita akan menambah kode untuk sidebar di template Blogspot, ikuti langkah-langkah di bawah ini :

  1. Masuk Ke Account Blogspot kamu.
  2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. jangan lupa beri tanda cek pada Expand Template Widget.Cari kode di bawah ini :
    <div id='sidebar'>...... </div>

    Lalu tambahkan didalamnya Kode berikut :
    Sidebar-kiri :
    <b:section class='sidebar' id='sidebar1' preferred='yes'>
    </b:section>

    Sidebar-kanan :
    <b:section class='sidebar' id='sidebar2' preferred='yes'>
    </b:section>

    Dan lengkapnya seperti di bawah ini :
    <div id='sidebar'>
    <b:section class='sidebar' id='sidebar1' preferred='yes'>
    </b:section>
    </div>
    <div id='content'>
    judul-postingan
    isi-posting
    metatag
    kolom-komentar
    form-komentar
    </div>
    <div id='sidebar'>
    <b:section class='sidebar' id='sidebar2' preferred='yes'>
    </b:section>
    <br class='clear'/>
    </div>

    Jangan lupa hapus tulisan sidebar-kiri dan sidebar-kanan ya..

    Keterangan :
    Ini digunakan untuk menampilkan widget pada blogspot pada posisi sidebar.
  3. Setelah selesai klik simpan template.
  4. Langkah selanjutnya uncheck Expand Template Widget, lalu klik Elemen laman maka akan muncul seperti gambar dibawah ini di kanan dan dikiri.
    contoh sidebar
    Nah ini menandakan sidebar kanan dan kiri sudah jadi. Tinggal klik tambah gadget pilih dah gadget yang mau kamu tampilin di sidebar... ok coy...
    Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/
Mudah bukan? Ok untuk artikel selanjutnya kita akan memasukan kode agar posting asrtikel dapat tampil di template blogspot yang kita buat... jadi terus kunjungi blog ini ya biar tuntas bikinnya.. jangan lupa komentarnya... thanku everybody.... seee uuu..

Wednesday, March 2, 2011

Cara Membuat template sederhana Blogspot Part 8 ini membahas pembuatan TOP MENU. Sebenernya membuat top menu ini bisa kamu baca pada artikel Cara Membuat Top Menu di Blogger, tapi karena ini sederhana jadi aku tulis lagi deh top menu yang paling sederhana ok? Sekali lagi jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2 , Part3, Part4, Part 5, Part 6, Part 7

Ayo kita kemon.... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 7 sudah kita masukan kode untuk menampilakan judul dan diskripsi Blog. Dan sekarang kita akan menambah kode untuk top menu di template Blogspot, ikuti langkah-langkah di bawah ini :

  1. Masuk Ke Account Blogspot kamu.
  2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. jangan lupa beri tanda cek pada Expand Template Widget.Cari kode di bawah ini :
    #top-menu {
    ...........
    }

    Lalu tambahkan dibawahnya Kode CSS berikut :
    #top-menu a, #top-menu a:visited {
    color: #000000;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0px 0px 0px 3px;
    font-weight:bold;
    }
    #top-menu a:hover {
    color: #000000;
    text-decoration: underline;
    padding: 0px 0px 0px 3px;
    }
    #topleft {
    width: 500px;
    float: left;
    margin: 5px 0 0 3px;
    padding: 0px;
    }

  3. Langakah selanjutnya cari kode di bawah ini :
    <div id='top-menu'>
    Home |
    About Me |
    Contact Us
    </div>
    Tambahkan kode seperti di bawah ini :
    <div id='top-menu'>
    <div id='topleft'>
    <a href='http://tempfor.blogspot.com/'>Home</a> |
    <a href='http://tempfor.blogspot.com/'>About Me</a> |
    <a href='http://tempfor.blogspot.com/'>Contact Us</a>
    </div>
    </div>

    kemudian ganti tulisan yang berwarna merah dengan link yang kamu kehendaki.
    Misal :
    <a href='http://tempfor.blogspot.com/'>Home</a>
    ganti http://tempfor.blogspot.com dengan alamat blog kamu.
  4. Setelah selesai klik simpan template. Uuntuk melihat hasilnya klik kanan mouse kamu pada tulisan Lihat Blog lalau pilih open new tab (kalau pake mozzila) bimsalabim jadi deh top menunya di bawah ini :
    Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/

    Jika panah mouse berada pada tulisan home di top menu akan keluar garis bawah yang menandakan ada linknya :)


Tambahan : Merapikan bagian Navbar. Kenapa harus dirapikan ? ini sebabnya : kalau kamu lihat navbarnya masih ada jarak dengan browser untuk itu kita buat nempel ke browser aja... caranya ?
Ikuti langkah-langkah di bawah ini :
  1. Masih pada posisi Edit HTML, cari kode CSS si bawah ini :
    body {
    padding:3px;
    background:#fff;
    font-family:Century gothic, Arial,Tahoma,sans-serif;
    color:#126A9B;
    font-size:13px;
    text-align: center;
    margin:2px;
    }

    Ubah padding dari 3px menjadi auto dan margin dari 2px ke auto. Kemudian klik simpan template. Setelah proses selesai silahkan lihat blog ada dannnnn sudah rapi deh... :)

Ok sampai disini dulu ya... terus kunjungi blog ini ya biar tuntas bikinnya.. jangan lupa komentar ya... thanku everybody....

Part 9 - Membuat Sidebar Template Blogspot