Selasa, 08 Mei 2012

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!

11 komentar:

  1. Sipp gan..
    nanti aku coba :)

    BalasHapus
  2. oia, gan, mau nanya nih..
    Kalo gambar yang udah di kasih link di dreamweaver bisa di save format PNG gak sih..
    kaya header kamu itu, itu .PNG kan?

    BalasHapus
    Balasan
    1. bisa kok.. asal ga ngerubah ukuran & bentuk di photoshop save as png

      Hapus
  3. berguna sekali .. hahhaa
    requestku dijawab deh. makasih karuuung *eehh..
    udin maksudnya hahaha

    BalasHapus
  4. Bro itu default codingan blogger?

    BalasHapus
    Balasan
    1. bukan defauly juga sih bro.. tapi ya begitulah

      Hapus
  5. kalo untuk block quotenya?
    tolong ya makasih.....

    BalasHapus
  6. Kunjugan Perdana sobat..
    keren artikelnya.. jangan lupa kunjungan baliknya yaa :D

    Motor matic injeksi irit harga murah

    BalasHapus
  7. Artikel yang sangat menarik :D

    http://clayton88.blogspot.com | http://kagumiterus.blogspot.com/ |
    http://informasiberitatop.blogspot.com | http://www.layardewasa.top | http://http://pkcinema.com | http://bit.ly/1sAwovI | http://bit.ly/1sUU8dl | http://bit.ly/1ZIdBJv | http://bit.ly/1YjeNnK | http://bit.ly/1WKgJqp | http://bit.ly/1ZIehP9 | http://bit.ly/1sAwovI | http://bit.ly/1UobCKp | http://bit.ly/1S0ZSYr | http://bit.ly/1ZIehP9 | http://bit.ly/1UL7Ia5 | http://bit.ly/1WKgJqp | http://bit.ly/1YjeNnK |

    BalasHapus