0

Cara Membuat Widget Banner Di Header Blog

Minggu, 24 Maret 2013
Share this Article on :
Hey Yozers!!!
Saya mau share nih!!!
Ada yang mau nyimak??
Ahaha..
Ya harus ada.. :v
Saya mo share "Cara Membuat Widget Banner Di Header Blog"
Ini nih contohnya!



Oke,langsung aja nih ke penjelasannya!

1. Buka Dasbor Blog -> Template -> Edit HTML
2. Centang "Expand Template Widget"
3. Cari kode  ]]></b:skin> ( Ctrl+F atau F3 Untuk mempermudah pencarian )
4. Letakkan kode CSS berikut tepat di atas " ]]></b:skin>"

CSS :

#ACbanner{
float:right;
margin-right:1025px;
width: 468px;
height: 60px;
border-right: 3px solid #FFFFFF;
border-left:  3px solid #FFFFFF;
border-bottom:  3px solid #FFFFFF;
background: #000000;
margin-top: -300px;
padding: 3px;
border-top: 3px solid #FFFFFF;
}

NB:
- Tulisan berwarna orange : Arah ,Jika "right" yaitu dari kanan dan "left dari kiri!
- Tulisan berwarna kuning : Margin dari kanan ( Sesuaikan degan blog sobat )
- Tulisan berwarna merah : Panjang widget
- Tulisan berwarna biru muda : Tinggi widget
- Tulisan berwarna abu-abu : Tebal border ( garis tepi ) widget
- Tulisan berwarna biru tua : Jenis border ( garis tepi ) widget
- Tulisan berwarna hijau : Warna border ( garis tepi ) widget
- Tulisan berwarna biru : Warna background widget
- Tulisan berwarna pink : Margin dari atas ( Sesuaikan degan blog sobat )

5. Cari "header-wrapper" ( Ctrl+F atau F3 Untuk mempermudah pencarian )
6. Letakkan kode HTML berikut tepat di atas kode "header-wrapper"

HTML : 

<div id='ACbanner'>
<b:section class=' ACbanner1' id=' ACbanner ' showaddelement='yes'/>
</div>

NB:
- Kode HTML tersebut juga bisa di taruh di antara tag "<body>" dan "</body> ( Asalkan Tidak Error )

7. Pratinjau terlebih dahulu,jika tidak error,lalu "Simpan"
8. Selesai!

Sekian dulu ya yozers...
Capek saya ngetik manual semua kode di atas.. :v
Oke!!
Thx!






Artikel Terkait:

0 komentar:

Posting Komentar