Tutorial Karungboy Edisi 2

ngelanjutin post yang ini,
kemaren ada beberapa orang yg minta dibikinin tutorial..
nah sekarang aku bikinin tutorialnya yah..
kalau kurang jelas boleh nanyain lagi lewat akun FB atau twitter aku yah.. komen dibawah juga boleh :D
sebelumnyaa harap berdoa supaya berhasil dulu dan jangan lupa backup template untuk menghindari hal hal yang tidak diinginkan..

..
...
.....

udah berdoanya?
oke langsung aja kita mulai..

1.  Background Header Widget

 buat bikin background header widget ini ada 2 cara..
yang pertama  ke Layout
terus add new gadget diatas widget yang mau dikasih header
terus pilih Html/text widget
naah.. disitu masukin

<img src="url si gambar(misal http://karungboy.com/gambarnya.jpg)">

kalau udah terus save..
nanti bentuknya jadi kayak gini :

INI WIDGET HEADER

Ini widget yang di headerin

udah gitu aja.. cara kedua masuk ke Template > Edit HTML terus Pencet CTRL+F terus cari ]]></b:skin> kalo udah ketemu diatasnya simpen

#Widget ID h2{
background: url(alamat gambar backgroundnya);
background-size: 100%;
text-align:center;

widget IDnya cari  ini dulu

<b:widget id

nanti bakal ketemu widget id nya
contohnya nanti dapet kayak gini
<b:widget id='HTML6' locked='false' title='' type='HTML'>
yang dimerahin itu widget idnya..
nanti dimasukin ke code diatas jadinya

#HTML6 h2{
background: url(alamat gambar backgroundnya);
background-size: 100%;
text-align:center;

udah deh.. oiya ini berlaku untuk 1 widget aja.. jadi kalo mau semuanya ada headernya ya bikin lagi gitu..

2. Background Full

buat yang ini gampang aja..
tinggal tambah kata repeat dibelakang url gambar..
kalo disini

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) url(URL GAMBAR BACKGROUND) scroll top left"/>
   <Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>

diubah dikit jadi

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) url(URL GAMBAR BACKGROUND) repeat scroll top left"/>
   <Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>

dan selesaai~

-tambahan :
3. Blockquote
yang ini gampang banget  . .
tinggal copas script dibawah ini sebelum ]]></b:skin>

blockquote { color: white; background: #0000ff; padding: 15px; letter-spacing: 0px; -webkit-border-top-left-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius: 30px 0px 30px 0px;}
blockquote:hover { color: white; text-decoration: bold; background: #0000ff; letter-spacing: 1px; -webkit-border-top-right-radius: 30px; -webkit-border-bottom-left-radius: 30px; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-right-radius: 0px;  -moz-border-radius: 0px 30px 0px 30px;}

#0000ff itu warna biru.. ganti aja ama warna yang kamu mau~

gimana? kalo ada yg bingung atau kurang puas silakan bertanya di kontak aku diatas yaa..
maaf kalau membingungkan~

see you next post!