Gambar Icon disamping Judul Posting - Sengaja saya lakukan dua posting malam ini sob,pasalnya ada sahabat kita yang menanyakan bagaimana sih menambahkan/memasang/meletakkan/membuat icon gambar sebelum entri atau judul postingan
Memang meletakkan script atau bahasa html pada template blogger (halaman edit html dengan contreng exspand widget templates) yang biasa kita lakukan,akan tidak bekerja jika terjadi kesalahan meskipun hanya kesalahan kecil dalam menuliskan 'tanda petik,garis miring sebagai penutup dalam bahasa html,dan lain sebagainya.
Oleh karenanya,kode yang akan kita tempatkan pada halaman tersebut harus benar-benar fix tanpa ada kesalahan,biasanya yang sering terjadi adalah kesalahan pada tanda petik.
Berikut ini sob adalah tutorial cara menambahkan icon gambar sebelum entri posting pada blogger yang sebenarnya pernah juga saya sharing di posting 'cara meletekkan gambar sebelum judul posting' beberapoa waktu lalu.Insya Allah,cara ini 100% bekerja.
Memang meletakkan script atau bahasa html pada template blogger (halaman edit html dengan contreng exspand widget templates) yang biasa kita lakukan,akan tidak bekerja jika terjadi kesalahan meskipun hanya kesalahan kecil dalam menuliskan 'tanda petik,garis miring sebagai penutup dalam bahasa html,dan lain sebagainya.
Oleh karenanya,kode yang akan kita tempatkan pada halaman tersebut harus benar-benar fix tanpa ada kesalahan,biasanya yang sering terjadi adalah kesalahan pada tanda petik.
Berikut ini sob adalah tutorial cara menambahkan icon gambar sebelum entri posting pada blogger yang sebenarnya pernah juga saya sharing di posting 'cara meletekkan gambar sebelum judul posting' beberapoa waktu lalu.Insya Allah,cara ini 100% bekerja.
Langkah Memasang Icon Gambar Sebelum Entri / Judul Posting
Setelah bahan sudah ada,anda tinggal upload ke hosting anda,atau bisa ke blog anda sendiri,setelah itu copy alamat URL gambar tersebut.Contoh,alamat URL gambar yang saya punya:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdX-BJk5BZ5CVM4UBOGA36WqYwhP87KTH0nKyWkrLwINsIJY5JMh_E7A89lloJZ6eiowVeYhHTYj3XHLjC97Et3ffHHAWNOH2DY4YnjY_3mJwPwhlsB6RLp3qabQOATAN6V-kOexUfMfjc/s200/logo.pngRubahlah menjadi seperti ini:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdX-BJk5BZ5CVM4UBOGA36WqYwhP87KTH0nKyWkrLwINsIJY5JMh_E7A89lloJZ6eiowVeYhHTYj3XHLjC97Et3ffHHAWNOH2DY4YnjY_3mJwPwhlsB6RLp3qabQOATAN6V-kOexUfMfjc/s1600/logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdX-BJk5BZ5CVM4UBOGA36WqYwhP87KTH0nKyWkrLwINsIJY5JMh_E7A89lloJZ6eiowVeYhHTYj3XHLjC97Et3ffHHAWNOH2DY4YnjY_3mJwPwhlsB6RLp3qabQOATAN6V-kOexUfMfjc/s200/logo.png" width="50" /></a></div>Warna merah,ganti dengan alamat URL gambar yang telah anda siapkan tadi.
Simpan di Notepad dulu,jangan disimpan dan jangan pula di hapus,aaaaalah!
Setelah itu,pergilah ke Dashboard Blog anda,lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML.
Contreng Expand Widget Templates,lalu cari kode berikut :
<a expr:href='data:post.url'><data:post.title/></a>Untuk mempermudah pencarian,Tekan Ctrl+F pada keyboard,dan tuliskan kode tersebut,nantinya kode akan terdeteksi secara otomatis!
Setelah ketemu,sisipkan alamat URL gambar anda (yang sudah anda simpan di notepad tadi),di antara kode tersebut.
Setelah kode URL alamat gambar anda disisipkan,akan menjadi seperti ini :
<a expr:href='data:post.url'>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdX-BJk5BZ5CVM4UBOGA36WqYwhP87KTH0nKyWkrLwINsIJY5JMh_E7A89lloJZ6eiowVeYhHTYj3XHLjC97Et3ffHHAWNOH2DY4YnjY_3mJwPwhlsB6RLp3qabQOATAN6V-kOexUfMfjc/s1600/logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdX-BJk5BZ5CVM4UBOGA36WqYwhP87KTH0nKyWkrLwINsIJY5JMh_E7A89lloJZ6eiowVeYhHTYj3XHLjC97Et3ffHHAWNOH2DY4YnjY_3mJwPwhlsB6RLp3qabQOATAN6V-kOexUfMfjc/s200/logo.png" width="50" /></a></div>
<data:post.title/></a>Semoga bermanfaat,dan maklum atas repost ini ya sob :D
Post a Comment
W a r n i n g !
Komentar anda tidak boleh mengandung unsur:
- Penghinaan atau Pelecehan.
- Spamming (Spam Comment).
- Link Aktif atau Anchor Text, dan sejenisnya.
Komentar akan muncul setelah di setujui.
Tulislah setiap kata dengan penuh kesopanan.
Terima kasih untuk kunjungannya.