Membuat Sidebar Template Blogspot ( Part 9)

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.
   
   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..

Continue

Static Page Fitur Baru dari Blogspot/Blogger

Ini dia Fitur baru blogspot/blogger Static Page dapat digunakan sebagai top menu navigation seperti About Us, Contact Us dan lain sebagainya. Meskipun masih dalam tahap pengembangan Fitur Static Page layak di coba. Fitur ini dapat di akses melalui http://draft.blogger.com.

Bagaimana cara setting  Fitur static page di blogspot/blogger ?

Ikuti langkah-langkah di bawah ini:

1. Login ke  http://draft.blogger.com , login menggunakan account blogger kamu seprti biasa.
2. Kemudian klik Posting > Edit Laman/Edit Page(1) , lalu klik Laman Baru/New Page(2).

3. Setelah muncul form untuk mengisi Laman Baru(New Page), isi judul halaman misal About Me, kemudian klik Tayangkan Laman(Publish). 
   
4. Akan muncul pilihan penempatan : di Navigation Menu, di Sidebar atau akan kita pasang manual.Setelah dipiling klik Simpan dan Terbitkan.
   

5. Untuk mengedit susunannya klik Tata Letak ( Layout), klik Edit pada Widget Laman(Page). dari sinilah kita dapat mengedit susunan linknya.

Selamat mencoba...




Sumber : bloggerindraft.

Continue

Cara Menambah Banner Iklan di Blogger

Akhirnya nulis artikel lagi setelah sekian lama... mumpung lagi semangat lanjut...

Kali ini mau bagi - bagi cara menambah banner di blogger, kayak di saamping kanan blog ini. Buat apa sich dikasih banner? Ndak usah dijelaskan ya? para blogger sudah pasti tau to. Langsung ke caranya aja ya?

ikuti langkah - langkah di bawah ini :

1. Masuk ke account blogger kamu.
2. Lalu pilih Tataletak/layout dan pilih tab Edit Html.
3. Jangan lupa backup Blog kamu dulu, klik Download Template Lengkap dan juga contreng Expand Template Widget.
4. Cari Kode di bawah ini :


]]></b:skin>

Setelah itu copy paste kode di bawah ini tepat diatas kode tersebut.


/* Banner Iklan 125x125 */
#spotbanner{
overflow: hidden;
padding:0;
}
.ad1, .ad3 {
float: left;
margin-bottom: 5px;
padding-left:0px;
}
.ad2, .ad4 {
float: right;
margin-bottom: 5px;
padding-right:0px;
}

klik simpan template

5. Masuk ke Tab Elemen laman
   Kemudian buat element HTML/Javascript baru (di bagian sidebar kiri atau kanan halaman sesuai keinginan kamu) lalu masukan kode di bawah ini


<div id='spotbanner'>
<!-- Ad1 start -->
<a class='ad1' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<!-- Ad2 start -->
<a class='ad2' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<!-- Ad3 start -->
<a class='ad3' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<!-- Ad4 start -->
<a class='ad4' href='http://permakblogs.blogspot.com'><img src='http://i945.photobucket.com/albums/ad300/andrebwid/banner/banneriklan.jpg'/></a>
<div class='clearer'/>
</div>

*text warna biru dapat diganti dengan Url web yang lain
*text warna merah bisa diganti dengan Url gambar

6. Klik Simpan, setelah proses simpan selesai klik lihat blog... kelihatan kan banner iklannya?

ok semoga berhasil ya...

Continue