Choose Your Language
English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
Language

Perlu Disini

Untuk mempercepat download software silahkan klik DISINI.
Agar dapat meng-extract kompressan software klik DISINI.

Loading

Menambah Tiga Kolom dibawah Header

Sebenarnya sudah banyak yang memposting artikel ini. Tetapi saya sekedar memberikan ilmu kepada Paksi-Dirgantara yang merequest cara menambah multy kolom pada blog. Sekalian buat kawan blogger, mungkin ilmu ini bisa dicoba. 


Untuk lebih paham agar memperhatikan langkah-demi langkah.
1. Login ke account blog anda.

2. Klik Tata Letak >> Edit HTML.

3. Centang Expland Template Widget.

4. Tambahkan kode berikut tepat diatas kode ]]></b:skin> 


#bottom {
width: 990px;
position: relative;
clear:both;
margin: 0 auto;
color:#000;
float: center;
background:transparent;
padding: 15px 0 15px 0; }

#bottom h2 {

background:url(http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/background.png)repeat-x;
text-align:center;
font-weight: strong;
font-family: Georgia;
margin: 0px 0px 15px;
padding: 8px 0 10px 0px;
color:#000000;
font-size: 18px;
letter-spacing: 1px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;}

#bottom ul{padding:0; margin:0; color:#333}

#bottom ul li{ background:url('http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }

#bottom li{ background:url('http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }

#bottom ul li a:hover {
background: #B1ACB1;}

#left-bottom { /* kolom kiri */
background:#FFFFFF;
width: 300px;
float: left;
margin-left:10px;
padding:5px; /* Jarak antara text dengan garis pinggir */
Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px; }

#center-bottom { /* kolom tengah */
background:#FFFFFF;
width: 300px;
float: left;
margin-left:10px;
padding:5px; /* Jarak antara text dengan garis pinggir */
Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px; }

#right-bottom { /* kolom kanan */
background:#FFFFFF;
width: 300px;
float: left;
margin: 0 5px 0 10px;
padding:5px; /* Jarak antara text dengan garis pinggir */
Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px}

5. Sekarang tuju bagian body atau bagian bawah template, lalu cari kode yang mirip dengan kode berikut :    


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

 
        Nb: Fokus <div id='footer-wrapper'> 
 
6. Copy paste kode berikut ini tepat sebelum kode diatas.



<div id='bottom'>

<b:section class='bottom' id='left-bottom'/>

<b:section class='bottom' id='center-bottom'/>

<b:section class='bottom' id='right-bottom'/>

</div>

7. Langkah Terakhir Simpan Template anda.


Ket: Sebenarnya gampang! Jika  kawan blogger pintar pasti bisa memvariasi sendiri. Saya kasih keterangan-keterangn kode diatas oke.

-->>  #bottom { width: 990px;

    lebar kolom keseluruhan, sesuaikan dengan lebar template sobat.  

-->>  background:url(http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/background.png)repeat-x;

    latar belakang (background kolom).

-->>  color:#000000;

    Warna tulisan judul.

-->>  #left-bottom { /* kolom kiri */ background:#FFFFFF;  width: 300px;     
     Lebar kolom kiri dan warna latar belakangnya.

-->>  -moz-border-radius-bottomleft:5px;
         -moz-border-radius-bottomright:5px;
         -moz-border-radius-topleft:5px;
         -moz-border-radius-topright:5px}   


     Untuk membuat garis melengkung pada garis atau sisi tepi.

-->>  Border-top: 2px solid #1B2A0A; /* warna garis  pinggir atas */
         Border-bottom: 2px solid #1B2A0A; /* warna garis  pinggir bawah */
         Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
         Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
         Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
   

      Untuk ketebalan garis pada sisi-sisi kolom. #1B2A0A merupakan warna garis (border).

-->> http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg 

  icon untuk kode ul li


Kalau ada yang kurang paham silahkan ditanyakan. :) 




Artikel Terkait:

7 komentar:

Miss Rinda mengatakan...

wah bagus banget nie tutornya...buat yg pgn harus dicoba ^_^


www.rinda-holic.blogspot.com

super.sonic42 mengatakan...

.mantep tenan nih

t h y a mengatakan...

bagus! bagus! tapi pusing. he,,

"om_rame" mengatakan...

buanyak banged yah yang di utak-utik.
pening aku, pening.

DEMPO AWANG PUTRA ELANG ANTARNUSA mengatakan...

@thya & @ om_rame : ^_^ pokoknya yang bewarna anggap saja enggak ada. Itu gampang bnget kog!

hans mengatakan...

gan saya mw nanya cara buat tulisan yg kya diatas gmana????

paijo ojiap mengatakan...

*. mas han => download aja disini mas lalu di extrak mungkin bisa mebantu

http://www.4shared.com/rar/QSrhrZcB/bikin_teks_berjalan.html

Posting Komentar

 
KLIK DI SINI UNTUK MEMBUATTEXT ON YOUR DEKSTOP| BARU. . . MOZILLA FIREFOX 4.0 ALPHA 1 PORTABLE FULL. KLIK DISINI| KUNJUNGI BERBAGAI SOFTWARE GRATISAN FULL ALIAS NO TRIAL | TERIMA KASIH TELAH BERKUNJUNG