Menambah Widget Tiga Kolom Sejajar di Atas Footer

Menambah Widget Tiga Kolom Sejajar di Atas Footer

Posted by rike on 0

Bagaimana menambahkan 3 kotak lagi di bawah main wrapper? Pertanyaan ini dilontarkan oleh sobat OB Ad4m San dalam komentarnya di posting membuat menu horizontal. Mungkin singkatnya, yakni menambah widget tiga kolom sejajar di atas footer (sama aja he.. he.. he..). Untuk kode CSS dalam trik blogger ini harus disesuaikan dengan template blog kamu.

Berikut trik blogger menambah widget tiga kolom sejajar di atas footer :

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* -- bottom -- */



#bottom {

width:850px;

clear:both;

margin:0 auto;

float:left;

padding:10px 0;

color:#333;

background:#ffffff;

border-top:#ffffff;

border-bottom:#ffffff;

}



#bottom a:link {

color:#006699;

text-decoration:none;

}



#bottom a:hover {

color:#c06000;

text-decoration:underline;

}



#bottom a:visited {

color:#808080;

text-decoration:none;

}



#bottom h2 {

color:#000000;

padding:10px 0 2px 0;

margin:0 0 10px 0;

border-bottom:1px dotted #333;

font-size:11px;

font-weight:bold;

line-height:1.4em;

text-transform:uppercase;

}



#bottom ul {

padding:0;

margin:0;

color:#333;

}



#bottom ul li {

list-style-type:none;

border-bottom:1px dotted #333;

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px;

margin-top:2px;

}



#bottom1 {

width:260px;

float:left;

padding-left:15px;

}



#bottom2 {

width:260px;

float:left;

padding:0 20px 0 20px;

}



#bottom3 {

width:260px;

float:right;

padding-right:15px;

}

Catatan :

1. Ganti kode yang berwarna hijau sesuai dengan lebar template blog kamu.


2. Untuk variabel width di kode #bottom harus sesuai dengan lebar template blog kamu.


3. Untuk variabel width di kode #bottom1, #bottom2, dan #bottom3 dapat kamu ubah dengan lebar yang kamu inginkan, tapi harus memperhatikan point nomor 2.
   
   


4. Ganti kode yang berwarna merah dengan karakter blog kamu.


5. Khusus untuk kode background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16pOHxlvVuXCOM8JU-XnaO5ycUZZrpbZj9NgkSdS7b76VfWK4eRnzcK6ujJaUmIelYWpB56huhdxgCCCJjFcTZ-ouvWTw726ZCT_yHPO6nzAG6slwhe8Rj201a6LZmTtjtFTGFPb31_8/s144/Arrobblue.png") no-repeat 0px .17em; padding-left:17px; merupakan kode untuk menambahkan icon panah biru dalam teks kamu jika menggunakan metode penomoran, baik angka maupun butir-butir. Kalau kamu kurang suka silakan hapus kode tersebut atau ganti url dalam tanda kurung dengan icon kamu sendiri.
   
   

• Cari kembali kode HTML <div id='footer-wrapper'> atau kode yang sejenis. Kemudian copas kode di bawah ini di atas kode tersebut.

<div id='bottom'>

<b:section class='bottom' id='bottom1' preferred='yes'/>

<b:section class='bottom' id='bottom2' preferred='yes'/>

<b:section class='bottom' id='bottom3' preferred='yes'/>

</div>

• Jangan lupa disimpan.

Catatan : Sekarang coba kamu klik Tata Letak --> Elemen Halaman. Sekarang kamu akan melihat ada tampilan widget baru di bawah template blog kamu dan sudah bisa menambah beberapa gadget didalamnya.

Revisi :



Pantesan banyak teman-teman OB yang gagal menerapkan trik blogger ini, ternyata karena pengaruh kode <!-- ... --> yang ikut diterjemahkan dalam bahasa pemprograman. Sekarang kodenya telah diupdate dengan meniadakan kode yang OB sebutkan di atas.

Atas perhatian teman-teman yang terlanjur kecewa dengan kegagalan trik ini, OB haturkan maaf yang sebesarnya.



Tertanda,



OB

http://optimasi-blog/blogspot.com

Sebagai tambahan OB akan sedikit mencoba untuk menjelaskan modifikasi kode CSS pada variabel width (#bottom1, bottom2, bottom3) agar sesuai dengan width di kode #bottom (kode yang berkedap-kedip).

Misal :

1. #bottom { width:850px;}


2. Trik perubahan variabel width dalam kode #bottom1, #bottom2, #bottom3 adalah dengan memperhatikan lebar (padding) yang terpakai yakni 15px (#bottom1), 20px + 20px (#bottom2), 15px (#bottom3). Jadi total lebar yang telah digunakan adalah 70px.


3. Sisa lebar (width) adalah 850px-70px = 780px.


4. Sekarang tinggal memvariasikan 780px ke dalam 3 kolom. Sebagai contoh untuk membuat 3 kolom sama lebarnya, maka lebar (width) dalam kode #bottom1, #bottom2, #bottom3 masing-masing sebesar 260px.

Selamat menambah widget tiga kolom sejajar di atas footer...