Cara Menghilangkan Bingkai Gambar di Posting

Bingkai gambar atau border image merupakan garis yang muncul di sekeliling gambar pada posting. Pada sebagian template, bingkai atau border ini masih muncul pada gambar yang diunggah dalam artikel. Namun, pada sebagian template yang lain, bingkai gambar ini sudah tidak terlihat lagi.

Jika dirasa kemunculan bingkai ini mengurangi nilai keindahan tampilan dari gambar itu sendiri, maka kita dapat menghilangkan bingkai tersebut. Sebenarnya kita tidak menghilangkan, hanya saja membuatnya tidak terlihat karena kita menentukan nilai ketebalan bingkai itu menjadi  nol piksel.

Bingkai gambar

Kalau sewaktu-waktu nanti kita ingin mengembalikan border image tersebut, kita tinggal memberi nilai kembali ketebalan dari border tadi. Berikut langkah-langkah dalam menghilangkan bingkai gambar.

1. Masuk ke akun Blogger Anda.

2. Klik segitiga hitam dropdown (Opsi lainnya) lalu pilih menu "Template".

3. Klik tombol "Edit HTML" kemudian klik tombol "Lanjutkan".

4. Kemudian carilah kode yang mirip dengan kode di bawah ini (.post img).

.post img {
border:4px solid #DDDDDD;
}

5. Selanjutnya ganti ketebalan border menjadi 0px sehingga kodenya menjadi seperti di bawah ini.

.post img {
border:0px solid #DDDDDD;
}

6. Klik tombol "Simpan template" dan lihat hasilnya pada postingan Anda yang mengandung gambar.

Properties, Menu Baru untuk Pengaturan Gambar

Akhir-akhir ini Blogger sepertinya tengah gencar menambahkan fitur-fitur baru di menu "Posting" khususnya pada tab "Entri Baru". Misalnya saja, belum lama ini Blogger telah menyediakan tool "Format". Menu ini berguna untuk memudahkan pengaturan heading artikel sehingga kita tidak perlu menambahkan tag <Hn> lagi secara manual di "Edit HTML".

Dalam hal pengaturan gambar atau image pada posting, Blogger juga telah menanamkan menu baru yaitu "Properties".

Properties.

"Properties" ini berisi "TITLE text" dan "ALT text".

Image Properties.

Pada kolom "TITLE text" kita dapat mengisinya dengan judul gambar sesuai dengan keinginan. Nantinya, bila kita meletakkan pointer mouse di area gambar, maka judul gambar yang telah diisikan tadi akan mucul di dekat pointer tersebut. Silakan dicoba pada kedua gambar di atas.

Sedangkan di kolom "ALT text", kita bisa menuliskan keterangan yang berkaitan dengan gambar tersebut atau kata kunci dari gambar itu. Setelah mengisikan keduanya, jangan lupa klik tombol "OK". Dengan menambahkan "ALT" ini pada gambar akan membuat gambar menjadi lebih seo friendly di hasil pencarian gambar.

Adanya menu "Properties" ini memudahkan kita dalam menambahkan atribut "title" dan "alt" pada gambar di postingan atau artikel. Sekarang dengan hadirnya menu tersebut, pekerjaan kita akan lebih praktis dalam memasang kedua atribut tersebut karena tak perlu lagi mengeditnya secara manual di "Edit HTML". 

Cara Hosting Gambar di Blogger

Meng-hosting gambar merupakan kegiatan menyimpan gambar dengan cara mengunggah (upload) di situs layanan hosting gambar untuk mendapatkan URL gambar tersebut. URL gambar ini nantinya akan diletakkan di blog agar dapat digunakan secara online. Di internet, ada beberapa situs penyedia hosting gambar (image hosting) yang bisa dimanfaatkan untuk menyimpan gambar secara online.

Selain menggunakan situs-situs hosting gambar, sebenarnya kita dapat juga meng-hosting gambar di Blogger/Blogspot sendiri. Gambar-gambar yang telah diunggah ini akan terkumpul di Album Picasa. jatah atau kuota kita untuk menyimpan gambar di Blogger ini adalah sebesar 1024 MB (sekitar 1 GB). Meng-hosting gambar di Blogspot ini akan terasa lebih praktis bila dibandingkan dengan di situs hosting gambar lainnya.

Untuk meng-hosting gambar di Blogger, caranya adalah masuk ke "Entri Baru" layaknya saat kita akan menulis artikel baru. Kemudian isikan judulnya, misalnya "Gambar-gambar". Tidak diberikan judul juga tidak apa-apa. Selanjutnya jika berada dalam posisi "Compose", klik icon "Insert image" untuk mulai mengunggah gambar.

Setelah gambar terunggah, silakan klik kanan pada gambar tersebut lalu pilih "Salin Lokasi Tautan". Kemudian paste di "Notepad" misalnya, tautan tersebut. Tautan tersebut adalah sebagai URL gambarnya. Kodenya akan tampak seperti di bawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcI8K1FED3ORbMCpqF3F9XoHTz_bMTECYjhb1hp4pASjfQL4foTdCeWiMuHc-phKzvU8LyWXjjibiKnCE-7CQcopaRd1Ibv1VQblUVcUqwd8hBOqWIJv95N1pEEfYNmkou3ZWZ2tlYo9NE/s1600/Blogger.png

Klik kanan pada gambar kemudian pilih "Salin Lokasi Tautan".

Selain cara di atas, dapat juga digunakan cara berikut ini yaitu setelah gambar berhasil diunggah, silakan beralih ke posisi "Edit HTML". Pada posisi ini perhatikan serangkaian kode HTML yang mewakili dari gambar yang di-upload tersebut. Kode HTML dari gambar itu akan tampak seperti di bawah ini.

<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcI8K1FED3ORbMCpqF3F9XoHTz_bMTECYjhb1hp4pASjfQL4foTdCeWiMuHc-phKzvU8LyWXjjibiKnCE-7CQcopaRd1Ibv1VQblUVcUqwd8hBOqWIJv95N1pEEfYNmkou3ZWZ2tlYo9NE/s1600/Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcI8K1FED3ORbMCpqF3F9XoHTz_bMTECYjhb1hp4pASjfQL4foTdCeWiMuHc-phKzvU8LyWXjjibiKnCE-7CQcopaRd1Ibv1VQblUVcUqwd8hBOqWIJv95N1pEEfYNmkou3ZWZ2tlYo9NE/s1600/Blogger.png" /></a></div>

Selanjutnya, perhatikan bagian kode yang berwarna merah. Bagian kode inilah yang diambil sebagai URL dalam membentuk suatu kode HTML untuk gambar nantinya.

Bila ingin meng-hosting gambar lagi, Anda tinggal masuk kembali ke entri yang diberi judul "Gambar-gambar" tadi. Status dari entri adalah masih dalam berbentuk "draft".

URL gambar ini dapat digunakan untuk:

• Memasang favicon.
• Mengganti tulisan "Posting Lebih Baru", "Beranda", "Posting Lama" dengan gambar.
• Memasang iklan banner.
• Memasang gambar berjalan.
• Dan lain-lain.

Cara Memasang Gambar di Postingan Blogger

Agar tampilan postingan kita tampak lebih menarik, kita dapat menyisipkan gambar ke dalam postingan kita. Selain itu, dengan adanya gambar juga akan lebih memperjelas tentang apa yang sedang kita terangkan kepada para pembaca. Biasanya postingan-postingan bertema tutorial yang membutuhkan gambar-gambar. Namun, pemasangan gambar ini jangan terlalu berlebihan karena dapat berpotensi memperlambat loading blog.

Untuk menyisipkan gambar pada posting di Blogger tidaklah terbilang sulit. Pertama, dalam posisi Compose, tentukan dulu posisi kursor tempat di mana kita akan meletakkan gambar. Sesudah itu, klik ikon yang berjudul "Insert image".

Kemudian akan muncul jendela Add Images seperti gambar di bawah ini.

Bila Anda ingin mengunduh gambar dari komputer, pilih opsi Upload. Kemudian klik tombol Pilih berkas, selanjutnya pilih gambar dan klik tombol Open. Tunggu sebentar, Blogger sedang dalam proses pengunduhan. Bila sudah selesai klik tombol Add selected. Lalu gambar akan terpasang di menu Compose.

 

Selanjutnya atur gambar sesuai keinginan Anda dengan cara klik gambar tersebut, kemudian akan muncul menu seperti gambar di bawah ini.

• Small untuk membuat gambar dalam ukuran terkecil.
• Medium untuk membuat gambar dalam ukuran sedang.
• Large untuk membuat gambar dalam ukuran lebih besar.
• X-Large untuk membuat gambar dalam ukuran paling besar.
• Original size untuk membuat gambar dalam ukuran sebenarnya.
• Left untuk meletakkan gambar di sebelah kiri teks.
• Center untuk meletakkan gambar di tengah teks.
• Right untuk meletakkan gambar di sebelah kanan teks.
• Add caption untuk menambahkan keterangan di bawah gambar.
• Remove untuk menghapus gambar.

Bila Anda ingin menyisipkan gambar dari gambar yang sudah ada di blog Anda, silakan klik opsi From this blog pada jendela Add Images. Kemudian pilih gambar yang Anda inginkan lalu klik tombol Add selected. Pilih From Picasa Web Albums jika mau mengambil dari album Picasa. Kalau ingin menggunakan URL, silakan pilih opsi From a URL, kemudian masukkan URL gambar Anda dan klik tombol Add selected.

Cara Membuat Gambar Berjalan

Selain teks atau tulisan, kita juga dapat membuat gambar bisa berjalan atau bergerak dengan marquee. Caranya adalah dengan menyisipkan URL gambar ke kode program marquee. Namun, sebelumnya kita harus mengunggah atau meng-upload gambar ke layanan penyimpan gambar online, semacam Photobucket, untuk mendapatkan link dari gambar tersebut.

Dalam program marquee, kita juga dapat menyisipkan elemen lainnya seperti link atau tautan dengan berprinsip sebagai berikut:

<marquee>

TEKS, GAMBAR, TEKS TAUTAN, GAMBAR TAUTAN, DAN LAIN SEBAGAINYA.

</marquee>

Contoh:

Di bawah ini ada 2 URL gambar yang akan dimasukkan ke program marquee.

1. <a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=KLIKMUNADI.jpg" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" border="0" alt="Klik Munadi"></a>
2. <a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=klikmunadi-1.png" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" border="0" alt="Photobucket"></a>

Lalu kedua URL gambar tersebut akan kita sisipkan ke kode marquee di bawah ini.

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%">

<a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=KLIKMUNADI.jpg" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" border="0" alt="Klik Munadi"></a>

<a href="http://s1119.photobucket.com/albums/k636/klikmunadi/?action=view&amp;current=klikmunadi-1.png" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" border="0" alt="Photobucket"></a>

</marquee>

Maka hasilnya akan seperti di bawah ini.







Bila kedua gambar tersebut diberi tautan atau link target sesuai keinginan saya, maka hasil akhir dari URL gambar tersebut akan seperti di bawah ini.

1. <a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" /></a>
2. <a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" /></a>

Selanjutnya kedua URL di atas kita masukkan ke kode marquee seperti di bawah ini.

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%">

<a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/KLIKMUNADI.jpg" /></a>

<a href="http://klikmunadi.blogspot.com/" target="_blank"><img src="http://i1119.photobucket.com/albums/k636/klikmunadi/klikmunadi-1.png" /></a>

</marquee>

Hasilnya:

Contoh kode marquee di atas adalah salah satunya saja. Masih ada lagi ragam marquee yang lain yang dapat Anda pelajari di Cara Membuat Marquee di Blogger. Selain itu, Anda dapat juga menambahkan kode-kode yang lain ke dalam kode marquee sesuai keinginan atau kreativitas Anda sendiri.