- Sign in di blogger
- Klik menu Layout
- Klik menu Edit HTML
- Ingat ! jangan memberi tanda centang pada kotak kecil di samping tulisan Expand Widget Template, sekali lagi jangan
mencentangnya, karena jika sobat mencentangnya nanti akan keluar kode-kode widget yang memusingkan kepala.
1. Cari kode seperti di bawah ini :
#header-wrapper{
width:860px; =====>>> Ganti 780px
margin:0 auto 10px;
border:1px solid $bordercolor;
}
2. Cari kode seperti di bawah ini :
#outer-wrapper {
width: 860px; ====>>> Ganti 780px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
3. Cari kode seperti di bawah ini :
#main-wrapper {
width: 530px; ====>>> Ganti 420px
float: $startSide;
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 */
}
4. cari kode seperti di bawah ini :
#sidebar-wrapper {
width: 300px; ====>>> Ganti 174px
float: right; ====>>> Ganti right
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 */
}
+ Copy paste kode berikut persis di bawah kode yang seperti di atas :
#newsidebar-wrapper { /* Sidebar kiri */
width: 174px;
float: left;
padding-right:5px;border-top: 1px solid #e8e7e9;
word-wrap: break-word;
overflow: hidden;
}
5. Cari kode seperti di bawah ini :
#footer {
width:860px; ====>>> Ganti 750px
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
6. Cari kode seperti di bawah ini :
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
+ Copy kode di bawah ini, lalu pastekan di ATAS kode di atas :
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Test Sidebar Kiri' type='HTML'/>
<b:widget id='HTML9' locked='false' title='Judul 1' type='HTML'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
<b:widget id='PageList8' locked='false' title='Pages - Menu' type='PageList'/>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
</div>
7. Untuk melihat hasilnya, klik tombol PRATINJAU
-Selesai.
Untuk melihat efek hasilnya, silahkan klik Elemen Halaman apakah sudah berformasi tiga kolom atau belum? jika sudah, silahkan isi sidebar tersebut dengan apa saja lalu lihatlah hasil nyatanya.
Mengatur Tampilan Judul Sidebar
===============================
“Bagaimana cara mengatur tampilan judul sidebar?” pertanyaan ini sepertinya banyak yang mempertanyakannya, baik sedikit demi sedikit akan saya terangkan Untuk mengatur tampilan judul sidebar tidaklah sulit, anda tinggal mengatur kode CSS untuk title sidebar, di manakah letak kode tersebut? jika merujuk pada template asli blogger, maka biasanya di tulis dengan kode :
.sidebar h2 {
……………….
……………….
………………
}
Titik-titik yang saya gambarkan adalah isi kode judul sidebar yang mengendalikan atau mendefinisikan tampilan judul sidebar. Tugas anda adalah menambahkan kode atau mungkin mengurangi kode yang ada di situ.
Misalkan anda ingin mengatur besarnya hurup judul sidebar, maka anda tinggal menambahkan kode ini :
.sidebar h2 {
font-size:110%;
}
Nilai 110% adalah nilai yang bisa anda ganti dengan nilai yang lainnya sesuai dengan besarnya hurup yang anda inginkan, misal : 120%, 200%, 250%, atau angka yang lainnya. Satuan persen ( % ) bisa juga bisa anda ganti dengan satuan pixel (px), misal : 12px, 15px, 20px, atau angka yang lainnya.
Jika huruf judul sidebar ingin terlihat tebal, maka anda cukup menambahkan kode berikut :
.sidebar h2 {
font-size:110%;
font-weight:bold;
}
Tulisan bold berarti hurup ingin tebal, definisi ini bisa anda ganti dengan yang lain, misal : jika tulisan yang tampil ingin terlihat biasa maka anda tinggal mengganti tulisan bold dengan tulisan normal. jika tulisan anda ingin terlihat miring, maka gantilah tulisan bold dengan tulisan italic.
Huruf judul sidebar ingin menjadi hurup besar (kapital) semua ;
.sidebar h2 {
font-size:110%;
font-weight:bold;
text-transform:uppercase;
}
Tulisan uppercase berarti hurup yang di tampilkan adalah besar (kapital) semua. Jika anda ingin hurup kecil semua, maka anda tinggal mengganti uppercase dengan lowercase. jika hurup depannya saja (inisial) yang ingin hurup besar maka ganti uppercase dengan capitalize.
Jika tulisannya ingin berada di sebelah kanan, tinggal menambahkan kode ini :
.sidebar h2 {
font-size:110%;
font-weight:bold;
text-transform:uppercase;
text-align:right;
}
Tulisan right berarti judul sidebar akan di kanan, jika ingin di sebelah kiri maka tinggal di ganti dengan tulisan left,jika ingin di tengah tinggal di ganti dengan center.
Jika ingin ada garis tinggal di tambahin kode border :
.sidebar h2 {
font-size:110%;
font-weight:bold;
text-transform:uppercase;
text-align:right;
border: 1px solid #000;
}
1px solid #000 berarti bahwa akan ada garis mengelilingi tulisan judul sidebar sebesar 1 pixel dengan warna hitam, tinggal di sesuaikan saja.
Jika judul sidebar ingin ada warna backgroundnya :
.sidebar h2 {
font-size:110%;
font-weight:bold;
text-transform:uppercase;
text-align:right;
border: 1px solid #000;
background:#6df466;
}
#6df66 adalah kode warna, kode ini di sesuaikan dengan keinginan anda. belum tahu mengenai kode warna? coba baca postingan saya di Blog saya dengan alamat URL ==> http://kodewarnaku.blogspot.com/
Penggunaan padding :
====================
.sidebar h2 {
font-size:110%;
font-weight:bold;
text-transform:uppercase;
text-align:right;
border: 1px solid #000;
background:#6df466;
padding;5px;
}
Penggunann padding sebesar 5px perlu anda tambahkan apabila anda menggunakan background warna, karena jika tidak memakai padding maka tulisan akan terlihat bertabrakan dengan bagian luar sehingga terlihat kurang menarik. nilai 5px tentu saja
nilai yang bisa anda sesuaikan dengan keinginan.
Bagaimana jika di template saya tidak ada kode :
.sidebar h2 {
……………….
……………….
………………
}
0 comments:
Post a Comment