King Files

Membuat Area Sidebar Kotak Terpisah

Masih sama seperti postingan yang lalu yaitu dalam mengedit template seperti Membuat Area Komentar Kotak Terpisah dan juga Membuat Area Posting Kotak Terpisah kalau gitu neh ada lagi Membuat Area Sidebar Kotak Terpisah sudah ngak sabar ? Lihat dulu gambarnya : kalau cocok , ya langsung di coba ya :

Udah lihat kan .. Yuk menuju ke cara pembuatannya ( hehehe ) :

Masuk ke Blog kamu dengan ID kamu:

Kemudian Tata Letak

Langsung klik Edit Html

Untuk berjaga-jaga kalau gagal mengedit , Backup template kamu !
Klik aja Download Template Lengkap dan save !

Cari kode di bawah ini:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Hapus kode di atas dan ganti dengan kode ini :
.sidebar .widget {
background:#fff url(http://i49.tinypic.com/w8176h.jpg) repeat-x top;
border:1px solid #DF0101;
margin:0 0 0.5em;
padding:0.5em;
font-size:11px;
font-family:"verdana";
}

Simpan template dan selesai lah sudah !

Coba lihat blog kamu , berhasil ngak ..

Sedikit tambahan : Url gambar yang berwarna merah bisa di ganti dengan Url gambar kamu dan kalau kamu pengen mengubah ukuran tulisan ubah angka yang berwarna hijau ! masih banyak yang bisa di ubah >> silahkan berkreasi !

Available link for download

Menambah Scroll Box di sidebar Blogspot

Menambah Scroll Box
coba lihat pada sidebar sebelah kanan, pada kategori Berita Bisnis...disitu saya menambahkan sebuah scroll box untuk kotak iklan dari kumpul blogger sehingga iklan yang tampil seolah-olah bisa diatur sedemikian rupa sehingga terlihat rapi

secara default jika script dari kumpul blogger langsung dipasang maka tampilannya akan melebar dan panjang kebawah dan terlihat nggak rapi, maka dari itu agar terlihat rapi kode dari kumpul blogger harus dimasukkan ke sebuah element HTML yaitu scroll box.

berikut ini adalah cara untuk menambahkannya:
- login ke blogger
- masuk ke tataletak dan tambahkan sebuah widget untuk javascript/html
- widget bisa diletakkan di sidebar atau body
- copast kode berikut ini :
<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee"> --masukkan kode kumpulblogger disini--</div>
- masukkan kode tersebut diatas pada widget javascript/html yang baru saja anda tambah
- letakkan kode kumpulblogger sebelum tag penutup dari "div"
- simpan
Keterangan :
- overflow:auto --> kode ini akan membuat scroll box otomatis memanjang kebawah jika isinya melebihi ukuran standart
- width -->digunakan untuk mengatur lebar dari scroll box
- height --->digunakan untuk mengatur tinggi dari scrool box
- padding --->digunakan untuk mengatur spasi
- border -->mengatur garis tepi, jika bernilai 1 maka garis tepi (kotak) akan dimunculkan
- solid --> warna






Share

Available link for download