Pada
gambar di atas dapat kalian lihat bahwa elemen sidebar berada di
sebelah kanan postingan (elemen posting blog). Di sini kita akan mencoba
menambahkan elemen sidebar dan meletakkannya di sebelah kiri postingan
sehingga akan tampak seperti gambar di bawah ini.
Pada
gambar di atas tampak bahwa sekarang elemen sidebar menjadi dua yaitu
berada sebelah kanan dan kiri postingan (elemen posting blog). Baiklah
langsung saja saya jelaskan cara membuatnya.
login-lah pada blog dan
masuklah ke bagian "Tata Letak" kemudian pilihlah "Edit HTML". Sampai di
sini kalian harus mencari kode ]]></b:skin> dan letakkan kode
Css di baw`h ini tepat di atas kode ]]></b:skin> tersebut.Css di bawah ini tepat di atas kode
]]>
tersebut.Kode Css#sidebar-wrapper2 {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.sidebar2 {
color: #ffffff;
line-height: 1.5em;
}
.sidebar2 ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar2 li {
margin:0;
padding-top:0;
padding-right:0;
padding-bottom:.25em;
padding-left:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar2 .widget {
border-bottom:1px dotted #cccccc;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Setelah
kalian masukkan kode css di atas, kalian cari lagi kode <div
id='main-wrapper'> dan letakkan kode sidebar di bawah ini tepat di
atas kode <div id='main-wrapper'> tersebut. Oya untuk mempercepat
pencarian kalian, gunakan saja Ctrl-F pada keyboard.Kode Sidebar<div id='sidebar-wrapper2'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'/>
</div>
Nah
jika sudah kalian masukkan kode sidebar tersebut, simpan template dan
lihatlah elemen halaman blog yang kalian miliki. Apa yang terjadi?!
hehe...pastinya elemen sidebar kalian sekarang sudah menjadi 2 tetapi
ini belum sempurna sobat karena kalian akan melihat tampilan elemen
halaman blog yang kalian miliki seperti gambar di bawah ini.
Untuk menyempurnakannya, kalian harus menambah luas wilayah template kalian dengan cara menambah lebar (width)
#outer-wrapper
pada "Edit HTML". Sorry boss, saya ajak kalian bolak-balik. Pada template "Minima" lebar (width) #outer-wrapper
adalah 660px. Karena ukuran sidebar2 adalah 220px, maka kalian tinggal menambahkan lebar (width) #outer-wrapper
menjadi 880px (660px + 220px). Nah supaya sidebar2 tidak berdempetan
dengan postingan kalian maka kalian harus memberi jarak diantara
keduanya. Untuk itu kalian harus memberi margin-left:10px;
pada #main-wrapper
. Kalau sudah, simpan template kalian dan coba kalian lihat lagi pada "Elemen Halaman".
Tidak ada komentar:
Posting Komentar