Cara agar Foto (Image) Sejajar di dalam Artikel Blogspot
Menampilkan gambar dengan cara sejajar dan/atau berdampingan di dalam blogsposting menjadi kebutuhan beberapa blogger.
Biasanya, identik dengan situs yang berjualan secara online seperti baju, celana, produk kecantikan, template dan lainnya.
Pada tutorial kali ini, yang anda butuhkan adalah atribut HTML table, tr, td, href, rel tag, alt dan title tag dari gambar tersebut. Caranya sangat mudah kok! :)
Kode dasarnya adalah:
Untuk meyakinkan para pembaca yang ingin menggunakan tutorial ini, maka kode yang perlu ditambahkan adalah:
Sehingga apabila digabungkan akan menjadi seperti dibawah ini:
Diatas adalah cara menampilkan 2 gambar dengan cara sejajar. Kalau ingin menampilkan 3 foto yang sejajar di artikel blog, cukup tambakan kode td seperti dibawah ini:
Oh iya. Mungkin ukuran gambarnya yang terlalu besar atau bagaimana, bisa diatur kok dengan tambahan kode width dan height. Cara penerapannya sebagai berikut:
Pada kode width dan height di atas, bisa anda atur sedemikian rupa sehingga cocok dengan tampilan blogger anda. Silakan sesuaikan dengan cara yang anda mau.
Contoh tampilan yang berhasil saya buat nih! Seger ya! Hahaha... namanya furry citra delina, nggak tahu deh orang mana ^^
Itulah tutorial bagaimana cara menampilkan 2 dan 3 gambar sejajar secara bersamaan di dalam artikel blogspot. Semoga berguna, good luck!
Menampilkan gambar dengan cara sejajar dan/atau berdampingan di dalam blogsposting menjadi kebutuhan beberapa blogger.
Biasanya, identik dengan situs yang berjualan secara online seperti baju, celana, produk kecantikan, template dan lainnya.
Pada tutorial kali ini, yang anda butuhkan adalah atribut HTML table, tr, td, href, rel tag, alt dan title tag dari gambar tersebut. Caranya sangat mudah kok! :)
Cara mudah Membuat Gambar Berdampingan di Postingan Blog
Kode dasarnya adalah:
<table>
<tr>
<td> gambar #1 </td>
<td> gambar #2 </td>
</tr>
</table>
<tr>
<td> gambar #1 </td>
<td> gambar #2 </td>
</tr>
</table>
Untuk meyakinkan para pembaca yang ingin menggunakan tutorial ini, maka kode yang perlu ditambahkan adalah:
<a href="Target Situs" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a>
Sehingga apabila digabungkan akan menjadi seperti dibawah ini:
<table>
<tr>
<td> <a href="Target Situs" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a> </td>
<td> <a href="Target Situs" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a> </td>
</tr>
</table>
<tr>
<td> <a href="Target Situs" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a> </td>
<td> <a href="Target Situs" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a> </td>
</tr>
</table>
<table>
<tr>
<td> gambar #1 </td>
<td> gambar #2 </td>
<td> gambar #3 </td>
</tr>
</table>
<tr>
<td> gambar #1 </td>
<td> gambar #2 </td>
<td> gambar #3 </td>
</tr>
</table>
Oh iya. Mungkin ukuran gambarnya yang terlalu besar atau bagaimana, bisa diatur kok dengan tambahan kode width dan height. Cara penerapannya sebagai berikut:
<a href="Target Situs" width="250px" height="200px" target="_blank" rel="nofollow"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a>
Pada kode width dan height di atas, bisa anda atur sedemikian rupa sehingga cocok dengan tampilan blogger anda. Silakan sesuaikan dengan cara yang anda mau.
Target Situs adalah URL tujuan apabila gambar di klik; rel tag blank artinya apabila gambar di klik maka akan terbuka secara new tab; sedangkan rel nofollow sifat bagaimana backlink itu bekerja, jika ingin bersifat dofollow maka hapus kode rel nofollow.
Contoh tampilan yang berhasil saya buat nih! Seger ya! Hahaha... namanya furry citra delina, nggak tahu deh orang mana ^^
 |  |
Itulah tutorial bagaimana cara menampilkan 2 dan 3 gambar sejajar secara bersamaan di dalam artikel blogspot. Semoga berguna, good luck!
Post A Comment:
0 comments so far,add yours
Posting Komentar