Minggu, 03 April 2011

Tutorial :Membuat dua kolom Dibawah di bawah Sidebar Blogger


Assalamualaikum shareliker,apa kabarmu hari ini?
Bagi Sharelikers yang baru dalam hal blogger,tentu anda mendapatkan Template default yang masih sederhana dengan sidebar seadanya.Pastinya anda ingin memaksimalkan blog anda dengan gambar-gambar ataupun gadget lainnya seperti iklan,gadget hiasan ataupun lainnya,tetapi terkendala dengan batasan template default.


Jangan khawatir ,semua ada jalan keluarnya,Saya pun dulu demikian.Melihat blog orang lain yang super tertata rapi dengan banyak kolom-kolom sidebar pastinya sebagai pencinta blog juga ingin seperti itu.Akhirnya dengan sedikit perjuangan belajar sana-sini saya mendapatkan resep jitunya,hehehe.Kali ini saya hanya membahas cara membuat dua kolom baru dibawah sidebar,mungkin lain kali saya akan membahas cara membuat kolom dibawah footer atau header .Ada dua cara untuk melakukannya,sesuai dengan selera anda masing-masing.

1.Cara otomatis.

Cara ini bisa anda lakukan dengan jika template anda,belum anda otak-atik alias belum diganti dengan template downloadan dari pihak ketiga.Alias masih "perawan",hehehe,bahasanya gimana gitu.Oke deh,bagi anda yang ingin melakukanya,dan masih belum tahu tenang saja ikuti langkah berikut ini:

1.Loggin ke blogger
2.Ketika masuk dasbor,anda pilih rancangan
3.Nah waktu di rancangan,anda bisa melihat pengaturan template yang terletak di 
   atas(kalau tidak terlihat bisalihat gambar dibawah ini)

 4.Kemudian,ketika udah diklik,anda bisa mengklik "Layout"dan anda bisa memilih
    tipe template sesukamu(bukan hanya buat sidebar loh,tetapi juga yang lainnya)
5.Nah ketika selesai mengatur anda bisa mengklik tombol Applied to this blog

6.Nah sekarang anda bisa melihat templatemu yang sudah ditambah dua sidebar  seperti gambar diatas sekali.

2.Cara Manual

Sebetulnya yang saya sarankan adalah cara manual,karen adengan cara ini kita bisa dengan bebas mengatur ukuran sidebar yang kita inginkan.Tetapi kita harus menguasai bahasa Html sebagai dasar ilmu kita,bila anda masih belum tahu bahasa html anda bisa melihat beberapa kode beserta fungsinya Disini.

Oke Langsung ke tutorialnya :
1.Loggin ke blogger ~ dasboard ~ Ke rancangan ~ edit Html
2.Lalu centang Expand Widget Template
3.lalu copy paste kode CSS berikut ini 
 
.singlesidebar {float:$endSide;  word-wrap:break-word;  overflow:hidden}
 
4.pastekan  kode diatas di bawah kode dibawah ini(bila tidak ketemu tekan ctrl +F,lalu masukkan kode dibawah ini untuk menemukannya di template kita.

#sidebar-wrapper{ width:320px;  float:$endSide;  word-wrap:break-word;  overflow:hidden}
5.langkah kita belum selesai,sekarang kita harus membuat mantra pemanggilnya 
   (agak lebay bahasanya).Copy paste kode berikut ini .


<div id='sidebar-wrapper'>
<div class='singlesidebar' style='width:100%'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

<div style='width:100%'><div class='singlesidebar' style='width:50%; float:left;'>
          <b:section class='sidebar' id='sidebar1' preferred='yes'/>
        </div>
 
<div class='singlesidebar' style='width:50%;float:right;'>
          <b:section class='sidebar' id='sidebar2' preferred='yes'/>
        </div>
        </div><div style='clear:both'/>
      </div>

6.pastekan kode diatas untuk menggantikan kode berikut ini (artinya kode yang  berikut ini diganti dengan kode nomor 5 Diatas)

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>
7
.selanjutnya save template dan lihat hasilnya,Sekarang anda bisa menambah gadget blog anda.(SUMBER)

~~~~~~~~~~~~~~~~SELAMAT MENCOBA~~~~~~~~~~~~~~~

0 komentar:

Posting Komentar