Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
KianHome - Gadget/widget adalah salah satu bagian cukup penting dalam membantu tampilan dan performa sebuah blog atau website.

Bisa dibilang widget/Gadget adalah penghias dari menu utama blog yang kita punya, bisa juga kita artikan sebagai menu tambahan untuk memberi informasi lain selain menu utama.

Kali ini kita akan membahas mengenai "Cara pasang gambar pada judul Gadget/widget Blog", dimana ini adalah request dari sobat "Around The World" yang beralamat pada http://ramadhansk.blogspot.com/. Berikut tutorialnya :

Pengenalan Dasar,
  1. Siapkan sebuah gambar yang memiliki ukuran yang kamu anggap pas untuk tampilan judul dari widget blog kamu, bisa menggunakan ukuran ,36x36,45x45,50x50 jika berupa ikon. Ukuran harus disesuaikan dengan lebar dan tinggi kolom judul widget. Perbandingannya adalah jika ukuran kolom judul widget adalah 300(lebar)x60(tinggi), maka gunakan ukuran ikon dibawah tinggi dari kolom tersebut. yang menjadi perhatian adalah tinggi kolom widgetnya.
  2. Untuk ukuran gambar hampir sama dengan ukuran ikon, namun gambar sendiri biasa memiliki lebar dan tinggi yang berbeda. jadi yang diperhatikan yaitu tinggi dari gambar itu sendiri, jangan sampai melebihi tinggi kolom widget.
Koding Image
JIka semua persyaratan sudah dipenuhi maka, kita fokuskan cara memasang kodenya. akan sedikit sulit mengingat kita akan menempatkan gambar sebagai latar (Background), bukan gambar utama. perhatikan kode dibwah ini
.sidebar h2{background:#ffffff;
border-bottom:#76312D solid 1px;
color:#800;
font-family:Georgia,Century gothic,Arial,sans-serif;
font-size:14px;
padding:6px;
}
ini adalah kode standar untuk sidebar blog, meskipun kolom widget tidak sama antar blog, yang harus kamu perhatikan adalah kode widget dengan style <--h2-->, dimana kode ini biasa diimplementasikan sebagai judul.

Selanjutnya kita akan menambahkan gambar pada judul kolom widget tersebut, perhatikan kembali kode dibawah ini (yang berwarna merah)
.sidebar h2{background: url(https://sites.google.com/site/kianbersama/javascript/headcontent.gif)no-repeat left;
background-indent:10px;
border-bottom:#76312D solid 1px;
color:#800;
font-family:Georgia,Century gothic,Arial,sans-serif;
font-size:14px;
padding:6px;
text-align:right;}
Penjelasan :
  • background: url(https://sites.google.com/site/kianbersama/javascript/headcontent.gif)no-repeat left;, kode background sudah menggunakan format gambar, dimana keterangan:
  • no-repeat : Agar gambar yang kita pasang tidak berulang, atau muncul banyak.
  • Left : Adalah posisi dari sigambar itu sendiri, dimana dia berada di sebelah kiri. Jika ingin meletakkannya dikanan cukup mengganti "left" menjadi "right".
  • background-indent :10px;, adalah kode untuk jarak antara gambar dengan judul widget, jika dirasa perlu ukuran bisa ditambah agar tampilan lebih maksimal lagi.
  • Padding:6px;, ini adalah hal yang cukup menjadi perhatian, mengingat padding mengatur jarak antara tulisan dengan garis tepi dari judul kolom widget.
  • text-align:right;, inipun sobat semua juga sudah tahu, namun perlu menjadi perhatian. karena letak tulisan mempengaruhi tampilan. jika gambar yang kita pilih, sebaiknya tulisan judul berada dikanan. jika ikon yang dipilih sebaiknya tulisan judul berada dikiri, namun perlu sedikit pengaturan untuk "Background-indent"nya.
Oke, itu saja yang bisa k'ian bagi, semoga bermanfaat..apabila masih ada pertanyaan silahkan tuliskan pada kotak komentar.. Thank's

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

13 Response to "Cara pasang gambar pada judul Gadget / Widget Blog"

  1. Thanx ya gan.... artikel anda sangat membantu saya ^_^

    Yang anda kasih tau itu, sekarang sedang saya garap...

    oh ya gan, klau gagdet yang di bawah gimana cara merubahnya ? ...Replay

     

  2. Kian Coi Said,

    @Ramadhan.S.K.: Oke sob semoga berhasil...!!! untuk gadget yg dimaksud yg mn nih...??? ...Replay

     

  3. This comment has been removed by the author.

     


  4. Rizkyzone Said,

    keren sob blog q juga dah tak pasang ...Replay

     

  5. Pijan Said,

    Terimaksih Infonya Mas,,, Mau saya coba Ne... ...Replay

     

  6. Gan, perlu di update tu artikelnya :).haha. Nama blogku sekarang ganti GoBiy Faceter. thanks.... ...Replay

     






  7. Pengen yang lebih seru ...
    Ayo kunjungi www.asianbet77.com
    Buktikan sendiri ..

    Real Play = Real Money

    - Bonus Promo Red Card pertandingan manapun .
    - Bonus Mixparlay .
    - Bonus Tangkasnet setiap hari .
    - New Produk Sabung Ayam ( minimal bet sangat ringan ) .
    - Referal 5 + 1 % ( seumur hidup ) .
    - Cash Back up to 10 % .
    - Bonus Royalty Rewards setiap bulan .

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : op1_asianbet77@yahoo.com
    - EMAIL : asianbet77@yahoo.com
    - WHATSAPP : +63 905 213 7234
    - WECHAT : asianbet_77
    - SMS CENTER : +63 905 209 8162
    - PIN BB : 2B4BB06A / 28339A41

    Salam Admin ,
    http://asianbet77.com/
    ...Replay

     

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |