25 Membuat Icon Disamping Judul Posting

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Ingin membuat variasi icon disamping judul posting yang contohnya bisa anda lihat pada blog ini atau seperti pada beberapa gambar dibawah ini?

variasi icon disamping judul posting

variasi icon disamping judul posting variasi icon disamping judul posting

Caranya mudah saja, ikuti langkah-langkah berikut:

Langkah pertama: Tentukan image atau gambar yang akan dijadikan icon kemudian upload ketempat hosting anda, ambil URL gambar iconnya.

Langkah kedua:

  • Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> cari kode berikut:

.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-style:italic;
line-height:1.3em;
color:#333;
}

  • kalau sudah dapat sisipkan kode berikut

background:url(alamat gambar anda) no-repeat left center;

  • Sehingga keselurahannya menjadi seperti ini:

.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-style:italic;
line-height:1.3em;
color:#333; 
background:url(alamat gambar anda) no-repeat left center;}

  • Terakhir klik save/ simpan.

Semoga bermanfaat!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

25 komentar :

  1. salam sahabat
    wah siip infonya thnxs n good luck ya

    BalasHapus
  2. wassalam ukhty, baru datang lagi? syukron ya apresiasinya!

    BalasHapus
  3. mantab kawan.... blog q juga dah tak pasang

    BalasHapus
  4. iya, terimakasih komentarnya!

    BalasHapus
  5. sangat bermanfaat sekali bro, pokoknya sip deh.

    BalasHapus
  6. langsung saya coba ya mas, thanx ata ilmunya nich

    BalasHapus
  7. follow balik ya sob n masukin banner mu ok

    BalasHapus
  8. @ amalia: iya deh? khn ada shoutmix tu dihalaman depan?

    BalasHapus
  9. Askum..Maaf baru kunjung Mba..ponakanku khitanan. Jadi sibuk deh. Waduh, produktif banget. Ditinggal 3 hr udah ada 3 posting baru. Selamat deh atas inspirasi penuhnya, hehe
    Oh masih proses ya. Ya udah, aku tunggu dengan sabar deh. Sebenarnya sy jg udah nemuin tutorial ttg next page, tp setelah dicoba ternyata gak berhasil! Moga nanti, tutorial dari Mba bisa langsung sukses ya, hehe

    BalasHapus
  10. kak,,maksudnya taruh di tempat yg kosong tuh dmn na? aq binun,,mana aq deadline akhir bulan kak,,

    :((

    BalasHapus
  11. dengan adanya icon ini membuat judul posting terlihat hidup, makasih infonya

    BalasHapus
  12. @ suci: icon disamping judul posting diblog ade khn dah ada tu (pen), hnya bedanya iconx disebelah kanan khn?

    @ all: terimakasih apresiasinya!

    BalasHapus
  13. Tutorialnya mantap nih sobat..
    jadi kepingin nyoba.
    Makasih banyak.

    BalasHapus
  14. terimakasih apresiasinya!

    BalasHapus
  15. mantab nie kag... pengen konsultasi nih.. tanya2 gtu hehehee... :)

    BalasHapus
  16. artikel yang bermanfaat,mudah2an sy bisa mencobanya

    mksh

    BalasHapus
  17. iya, smg berhasil terimakasih apresiasinya!

    BalasHapus
  18. kak, aku udah nyoba, tapi kok ga bisa2 ya? (bukan di blogku yang ini kak, tapi blog yang lain; minima template).. kenapa ya kak?

    BalasHapus
  19. @ syifa: bisa de karenna tes kk jg ditemplate minima, mungkin ade lupa nutup kodenya dengan ; atau }

    BalasHapus
  20. aku udah berhasil kak.. coba diliat deh kak..
    thanks a lot kak.. seneeeennnnggg banget rasanya :D

    BalasHapus
  21. bantu bro...di postingan blog sya selalu meampilkan jumlah komentar tetapi tidak bisa di lihat siapa - siapa saja yang memberi komentar...bagaimana menampilkan komentator yang di hidden blog...maksih bro

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!