Selasa, 22 Maret 2011

Menambah Icon Pada Judul Postingan

M
emasang gambar atau icon di dalam blog pada satu sisi mungkin akan membuat blog kita lebih menarik tapi di sisi lain juga akan membuat loading blog kita semakin lambat. Tapi untuk temen-temen blogger yang ingin blognya tampil lebih menarik, kali ini saya punya satu lagi cara untuk memperindah blog, yaitu dengan menambah icon atau gambar di sebelah judul postingan. Tampilan judul postingan setiap template blogger berbeda-beda, tapi kebanyakan dari template tidak menyediakan fasilitas icon untuk judul postingannya. Nah, jika temen-temen tertarik berikut ini saya akan berikan langkah-langkah pembuatannya :
 
Langkah Pertama

[1]. Siapkan gambar atau logo yang ingin anda pasang dalam format .gif atau .png karena kualitasnya lebih bagus.

[2]. Resize gambarnya menjadi (20px x 20px) atau (25px x 25px). Usahakan ukuran gambarnya jangan terlalu besar agar loading blog tidak berat. 
[3]. Jika sudah, upload icon atau gambarnya ke image hosting yang anda gunakan atau upload saja pada blogger anda.
[4]. Setelah upload, copy alamat gambarnya. Untuk contoh url gambar diatas : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ_ghED19Fd-lFi14IkVVITXWDAmoqkfWMVsL9eVdtAjXtxdfQYNgyTqmWiGgf2QiXHzB4Oo0kC02ODkFkjqSh_6_yhv7u0ZMOIngupTYg2RzeAF2K7sSKQNGjh13nHxdohniq5WGBTZY/s1600/mata+%255B+HARI+%255D.png.

    Langkah Kedua


    [1]. Login ke blogger dengan akun anda
    [2]. Kemudian menuju Tata Letak  
    [3]. Pada tab menu klik Edit HTML  
    [4]. Silahkan back-up dulu template dengan mengklik kotak kecil Expand Template Widget jika dirasa perlu. 
    [5]. Cari kode berikut :
    .post h3 {
    color: #444;
    font-size: 140%;
    font-weight:100;
    padding: 6px 0 5px 48px;
    margin: 3px 5px 3px 5px;
    border-bottom: 1px solid #ddd;
    }
    [6]. Setiap template mempunyai kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah tulisan post h3  
    [7]. Kalau sudah ketemu, tambahkan kode background: url(URL gambar) no-repeat; dan edit nilai padding menjadi 6px 0px. Sehingga hasilnya menjadi seperti ini :
    .post h3 {
    color: #444;
    font-size: 140%;
    font-weight:100;
    padding: 6px 0 5px 48px;
    margin: 3px 5px 3px 5px;
    background:  url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJChmER2L0XhxM1-o70v-Z48WzGiYz6Zma799WUolFTSEOdpXAeI3O19XfOheEvc7cazJWZKYhMtOtdvI2a4WMuErASpaUQlQzozpUkYJpzKMiPY3H8_cwKtPzfMfpr29A962joPrqxI/s1600/headset-icon.png") 6px 0px no-repeat;
    border-bottom: 1px solid #ddd;
    }
    [8]. Kalau sudah, klik Save Template  
    [9]. Selesai
      Anda bisa ganti background icon atau gambar sesuai selera, dan jika temen-temen sudah memasangnya dengan benar maka hasilnya akan tampak seperti gambar di bawah ini :

       
      Bagaimana, menarik bukan..?!! hehe5..

      Selamat mencoba yaa..




      4 komentar:

      1. post h3 -nya tidak ketemu gan,udah pake alat Find lagi,jadi gimana donk?

        BalasHapus
      2. @ Eko Kurniaseputra
        Silahkan cari "h3.post-title", mas bro.. Kalo nggak ada ya cari "h3" yang letaknya di atas "post-body".. Setelah itu baru masukkan kode gambar yang mau dipasang..

        BalasHapus
      3. berhasil mas, terimakasih ya.. coba kunjungi kami di website resmi Kecamatan Toho, kabupaten Pontianak, KALBAR, Indonesia.. di www.ekotoho.blogspot.com , kami banyak menggunakan trik anda, Terimakasih sudah menjawab... Salam Dari Anak Toho

        BalasHapus
      4. @ Eko Kurniaseputra
        Oke.. sama-sama mas..
        N terima kasih sudah sering berkunjung n mengaplikasikan tips n trik yang ada di blog saya, semoga bermanfaat, mas..
        Dan sekarang, saatnya saya berkunjung balik ke blog mas, hehe5.. Berangkat...!!!

        BalasHapus


      Facebook Comment Box : "Silahkan berikan komentar Anda mengenai tampilan dan isi blog saya ini untuk membangun blog ini jadi lebih baik lagi . . ."