Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Cara menambah tiga kolom di bawah header blog

ini adalah cara yang dapat anda lakukan jika ingin menambah tiga buah kolom di bawah header pada blog anda,tapi sebelumnya ada baikknya anda save tamplate blog anda jika mungkin ada kesalahan nanti,agar tamplate anda dapat dikembalikan seperti semula.ok langsung saja dengan tahap pembuatan kolom
  1. Login ke Blogger, pilih Rancangan/Layout => Edit HTML, beri tanda centang pada Expand Template Widget
  2. Cari kode ]]></b:skin>;
  3. Sebelum atau di atas kode ]]></b:skin>; , letakkan kode di bawah ini:
/* Top Header
---------------------------- */
#topheader {
width:930px;
clear:both;
float:left;
color:#333;
background:#fff;
margin:0 auto;
padding:0 0 10px;
}
#topheader a:visited {
color:gray;
text-decoration:none;
}
#topheader h2 {
font-size:11px;
font-weight:700;
line-height:1.4em;
text-transform:uppercase;
border-bottom:1px dotted silver;
margin:0 0 10px;
padding:20px 0 2px;
}
#topheader ul {
color:#333;
margin:0;
padding:0;
}
#topheader ul li {
list-style-type:none;
background:fff;
border-bottom:1px dotted #ccc;
padding-left:17px;
margin-top:2px;
}
#left-topheader {
width:360px;
float:left;
padding-left:15px;
}
#center-topheader {
width:230px;
float:left;
padding:0 20px;
}
#right-topheader {
width:260px;
float:right;
padding-right:15px;
}
Keterangan:
#topheader adalah kode untuk kolom secara keseluruhan;
#left-topheader adalah kode untuk kolom sebelah kanan;
#center-topheader adalah kode untuk kolom pada posisi tengah;
#right-topheader adalah kode untuk kolom sebelah kiri;
Width: px adalah kode untuk ukuran lebar kolom;
Padding adalah jarak sela antara kolom satu dengan lainnya;
Silahkan dimodifikasi, dengan catatan harus sama dengan jumlah lebar pada template Anda dan untuk mengetahui ukuran lebar template, cari kode: #outer-wrapper dan lihat nilai width-nya;
4. Selanjutnya cari kode di bawah ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
5. Tepat di bawah kode di atas, tambahkan kode di bawah ini:


<div id='topheader'>
<b:section class='topheader' id='left-topheader' preferred='yes'/>
<b:section class='topheader' id='center-topheader' preferred='yes'/>
<b:section class='topheader' id='right-topheader' preferred='yes'/>
</div>
6. Simpan Tamplate, selesai.

Tutorial blog - cara membuat page number pada halaman blog

Page number adalah alat navigasi yang untuk memudahkan pengunjung menjelajahi konten yang ada pada blog kita,contoh nya seperti pada gambar dibawah

  1. Login ke blogspot click rancangan terus pilih elemen laman , pilih tambah gadget, didalam daftar gadget tersebut pilih HTML/JavaScript , kemudian paste kan kode dibawah ini..

Tutorial Blog - Cara menambah kotak banner iklan pada blog

ini adalah cara untuk membuat kotak banner iklan pada blog,
contoh pada blog saya ini,yang disebelah kanan,ada kotak iklan ,disana anda bisa memasang iklan atau org ingin memangsang iklan pada blog anda bisa dipasang disana..
baik langsung saja kita dengan tahap pertama..
1. Login pada blog cari Rancangan kemudian Edit Html
2. Cari <b:skin><![CDATA[ ,pas dibawahnya pastekan code dibawah ini

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best WordPress Themes