Berikut contoh screenshotnya:
Screenshot
Berikut cara membuatnya:
- Login ke akun blogger sobat
- Masuk ke Rancangan/Design
- Edit HTML
- Beri centang "Expand Widget Templates"
- Jangan lupa, Back Up dulu template sobat! Klik "Download Full Template"
- Lalu cari kode berikut: ]]></b:skin>
- Letakan kode berikut tepat diatas kode ]]></b:skin>
#bottom{background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG4YSgD4MxfVn_SE2-ZisQ8kucHgkOdJ6sz2ArSaTFeYDWnrhxU534AsYSUvzr9fzTCfPYrWVoFHNG_1-zTrdgisUXSSaf9zauuK6RUTJjk3yQlIDdda8NOjUeu_t0rrMEqlGoRUseUlTY/s1600/buttommenu-c.png) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff}Penting!!
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#C0C0C0; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:280px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:280px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0; padding-top:10px}
Perhatikan text yg saya beri warna pada kode diatas (harap disesuaikan semuanya dengan template sobat)
Warna merah: itu adalah link background, bisa sobat ganti sesuai kemauan sobat.
Warna hijau: itu adalah lebar dari template sobat, setelah sobat memasangnya bila masih kurang rapi, bisa sobat utak-utik sendiri lebarnya sampai seperti yang sobat harapkan.
Warna orange: itu adalah keterangan dari masing2 kolom. biar jelas saya beri warna.
Belum selesai sobb... lanjut...
- Carilah kode: <!-- end content-wrapper --> atau </div> <!-- end content-wrapper-->
- Letakan kode berikut diatas kode: </div> <!-- end content-wrapper-->
<div id='bottom'>
<b:section class='category' id='category'/>
<b:section class='left-bottom' id='left-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='center-bottom' id='center-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='right-bottom' id='right-bottom' preferred='yes' showaddelement='yes'/>
</div>
- Simpan template, dan lihat hasilnya.
Sippp... selamat mencoba dan semoga bermanfaat... Salam blogging \m/
No comments:
Post a Comment