Dasar-Dasar Template: Cara Menampilkan Gambar di Judul Postingan

Ada pertanyaan yang mau tidak mau saya jawab melalui postingan supaya bisa dibaca banyak orang. Dibandingkan menjawab pertanyaannya di kotak komentar bukan? Nah kemarin Mbak Fitri tanya soal cara menampilkan judul postingan yang ada gambarnya. Gambar bisa diambil dari mana saja. Tinggal mengambil yang ukurannya paling sesuai. Sebenarnya saya tidak menyarankan untuk memasang gambar di judul postingan agar template menjadi lebih ringan. Meskipun kecil, gambar ini bisa membuat pengunjung dengan koneksi internet pas-pasan akan megap-megap.

Kalau masih ingin mencobanya untuk menambah pengetahuan sebenarnya mudah saja.
  1. Siapkan gambar yang sudah diunggah dan ambil tautan gambar tersebut (URL gambar)
    Ini contoh gambar yang akan saya gunakan untuk judul postingan.

    Photobucket

    URL-nya sebagai berikut. 
    http://i1115.photobucket.com/albums/k559/listia_19/pigtails_blogspot.png

  2. Siapkan kode html
      <img src="http://i1115.photobucket.com/albums/k559/listia_19/pigtails_blogspot.png" width="30" hight="30" border="0"></img>

    Angka 30 tersebut adalah ukuran gambar yang akan muncul di samping judul postingan. Bisa diubah sesuai keinginan kita. Usahakan jangan terlalu besar sehingga tidak mengganggu proses loading blog.

  3. Edit 'HTML' dan ingat untuk mencentang "Expand Widget Templates"
    Cari kode
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>

  4. Sisipkan kode gambar (2) yang telah kita buat tadi 
    Penyisipan ditandai dengan gambar. 
      <a expr:href='data:post.url'>Photobucket<data:post.title/></a><b:else/>




    Tampilan kode htmlnya akan seperti di bawah ini.

      <a expr:href='data:post.url'><img src="http://i1115.photobucket.com/albums/k559/listia_19/pigtails_blogspot.png" width="30" hight="30" border="0"></img><data:post.title/></a>
      <b:else/>



  5. Simpan
    Setelah itu simpan hasil editan yang telah kita lakukan dan pratinjau hasilnya.
  6. Selesai atau edit kembali
    Jika sudah puas artinya kita sudah selesai dan bisa menikmati hasilnya atau edit kembali untuk mengganti gambar atau mengubah ukurannya.

Namun jika ingin memiliki judul postingan yang diapit dengan simbol yang bervariasi sebenarnya tidak perlu melakukan pengeditan HTML. Cukup tuliskan di samping judulnya. Seperti bunga yang ada di judul widget blog ini. Itu Sebenarnya hanyalah simbol bunga. Tulisan. Bukan gambar. Bukankah di smartphone yang kita miliki banyak sekali simbol lucu yang bisa kita gunakan untuk mempercantik judul postingan? Ukurannya akan sama dengan ukuran yang kita berikan pada judul postingan di blog jadi tidak perlu khawatir ukurannya berbeda. Warnanya juga akan sama.

Simbol tersebut bisa kita temukan di program yang ada di netbook. Semacam Word atau Writer punya kok. Banyak sekali pilihannya. Di Writer sendiri disebut Special Character.

ini bunga yang menghiasi blog ini.

Contoh lainnya sebagai berikut.

♣  ্ ♫  ৣ ௵ ♔ ☞ ♂ ♀ 

Masih banyak lagi simbol yang ada di sana dan tak mampu untuk saya hadirkan di sini satu persatu. Pilih mana saja yang disukai untuk digunakan ya!
Share:

Posting Komentar

Berkomentarlah yang baik. Semua komentar yang masuk akan dimoderasi. (admin: Honeylizious [Rohani Syawaliah]).

Designed by OddThemes | Distributed by Blogger Themes