Cara buat ikon di samping judul Sidebar

Tweet

Kali ini, kita akan belajar bagaimana menempatkan ikon kecil atau kanan gambar di samping judul widget / gadget Sidebar ... 

Dalam artikel kustomisasi Blogger judul sidebar, Anda melihat bagaimana menyesuaikan latar belakang judul, menambahkan beberapa perbatasan untuk itu , atau menggantinya dengan gambar .. 

Sekarang, kita ingin mencapai hal ini: Ada 4 langkah untuk mendapatkan ini bekerja:

1. Cari ikon (gambar) Anda suka, mengoptimalkannya
2. Upload pic ke web host gratis (untuk mendapatkan URL)
3. Membuat CSS style untuk judul sidebar (judul)
4. Bermain dengan gaya CSS (customize)

1. Ini adalah bagian yang menyenangkan. Cari pic (icon) Anda suka, desain satu, tanaman itu, memotongnya, warna itu Dua hal yang harus di urus:

• Ukuran ikon - buat ukurannya menjadi kecil, seperti 25px 25px ... Ini bukan aturan, dan rasio yang tidak penting (Anda dapat membuat .. 25x10px). Trial and error. Anda akan mendapatkannya
• Pic transparan atau tidak? - saya sarankan untuk TIDAK menggunakan Pics transparan. Sebaliknya membuat sebuah pic dengan latar belakang yang memiliki warna yang sama dengan warna latar belakang sidebar Anda (sehingga mereka berbaur bersama-sama). Transparansi adalah besar, tetapi browser Internet Explorer lebih tua tidak menampilkan dengan benar. Dan banyak orang di luar sana menggunakan mereka.

2. Ketika pic Anda sudah siap, hal berikutnya adalah untuk meng-upload ke web host gratis. Kami melakukan ini untuk mendapatkan link langsung dari pic host kita, sehingga kita dapat menggunakannya (link untuk itu) dari template kami ... gratis gambar (image) penyedia hosting (favorit saya): photobucket.com tinypic.com. Buat account, upload pic dandapatkan linknya.

3. Sekarang, kita harus membuat style untuk judul sidebar di Blogger HTML. Khawatir Don ', itu hanya dipotong-paste pekerjaan ... dengan sedikit tweak .. 

gaya Default untuk judul sidebar (judul) sudah ada di template, tetapi dalam default template Blogger (seperti Minima ) mendefinisikan gaya untuk tanggal pos juga . Jadi, kita harus membagi gaya tersebut ... Lagi pula, Anda dapat memiliki:

• standar template Blogger (yang dari Blogger Pilih template baru ) - Anda akan memiliki masalah dengan tutorial ini
• disesuaikan, pihak ketiga Blogger Template - Anda harus mengidentifikasi sidebar gaya judul dalam kode HTML (CSS), dan kemudian menyesuaikannya ... Biasanya, template ini sudah memiliki kode yang bersih bagus, dan gaya dibagi, jadi, Anda tidak akan memiliki masalah ... Inilah yang harus Anda lakukan: Pertama, back up template Blogger Anda . Lalu pergi ke menu LAYOUT >> EDIT HTML >> dan masukkan kode dibawah ini (warna kuning) DI ATAS  kode (yang berwarna pink):

.sidebar h2 {background:url(Masukkan URL IMG Anda);background-repeat: no-repeat;background-position:left center;height:25px;margin:0;padding:10px 3px 0 30px;line-height:1.5em;text-transform:uppercase;letter-spacing:.2em;}]]></b:skin> dan </head>

4. Mari kita menganalisis (dan menyesuaikan) sidebar heading (judul) buru dengan gaya:

• Anda harus mengganti URL dari host PIC dengan gambar yang Anda upload (langkah 2 )

• Sesuaikan tinggi dan gambar (icon), jika tinggi pic Anda adalah 40px, maka garis akan height: 40px;

• dengan padding, Anda dapat menyesuaikan judul (bagian tekstual):

 

...misalnya, jika Anda meningkatkan padding atas untuk 20px, ini akan mendorong judul bawah ,

...dan jika Anda mengurangi bantalan kiri untuk 20px, ini akan menarik judul ke kiri

...tampaknya aneh, tapi Anda akan mendapatkannya

•dengan gaya lain (Anda juga dapat menambahkan beberapa lebih) Anda dapat mengatur huruf besar (CAPS) untuk huruf kecil , huruf spasi (spasi antara huruf dalam judul)

Itu saja! Jika Anda akan memiliki beberapa masalah, menjerit! Saya akan membantu.