The most practical way to post images

Posting yang hanya berupa teks adalah bentuk posting yang paling sederhana, sekalipun sebenarnya jika dalam teks tersebut digunakan berbagai variasi font, color, ketebalan font serta ukuran font maka posting tak lagi dapat dikatakan sederhana. Ukuran posting sederhana atau rumit itu sendiri akan kita ukur dari banyak sedikitnya kode html yang dilibatkan di halaman posting. Anda tak akan pernah menemukan betapa rumitnya box posting yang dijejali dengan kode html jika hanya berkutat di mode posting Compose. Cobalah sekali-sekali buka box posting pada mode Edit HTML. Memanfaatkan posting pada mode Edit HTML memberi banyak kemungkinan dan keuntungan bagi blogger. Berbagai modifikasi dapat dilakukan dengan menambahkan kode HTML baru (CSS atau javascript) di dalam template. Sebelum kita lanjutkan ada sebuah pertanyaan penting yang perlu diperhatikan! Mengapa blog menyediakan 2 (dua) mode posting? Mengapa harus disertakan mode Rdit HTML.

Posting dalam mode Compose adalah sebuah mode posting yang telah disediakan blogger dengan karakteristik tertentu yang pengaturanya telah ditentukan melalui kode html (css) default. Jika menggunakan Blogger Template Designer anda dapat mengaturnya melalui beberapa tool yang ada. Anda dapat merubah background, jenis font, color, ketebalan, dan ukuran (widget dan font) dengan hanya melalui beberapa kali klik. Karena pengaturan ini sangat terbatas akibatnya blog yang hanya mengandalkan kode default dan posting dalam mode Compose tak akan mampu menyuguhkan sajian posting yang lebih variatif. Blog akan terkesan tampil ala kadarnya dan terlihat seragam dengan blog-blog yang lain. menyadari berbagai keterbatasan inilah yang akhirnya membuat blogger memberi pilihan dengan posting dalam mode Edit HTML. Melalui mode ini segala bentuk kreatifitas blogger dengan mudah akan tersalurkan hingga tampilan blog menjadi sangat variatif. Anda juga akan mendapatkan kesempatan untuk menarik minat pengunjung agar lebih kerasan dan suka berkunjung karena berbagai hal menarik yang disuguhkan dihalaman posting melalui penambahan dan penggunaan kode html baru.

Kelebihan menggunakan posting mode Edit HTML:

1. Memungkinkan blogger untuk membuat penampilan posting yang berbeda dari default blogger.
2. Dapat meminimalkan penggunaan kode HTML di box posting.
3. Memungkinkan berbagai improvisasi pada kode html yang bertujuan untuk mendapatkan kecantikan dan keindahan blog secara umum dan khususnya pada posting blog.

Ke-3 image dia atas adalah contoh (DEMO) penggunaan kode html baru untuk membuat image/gambar bertambah menarik dan mengatur image pada posisi di sebelah kiri/left (paling atas=class="imgfl"), di sebelah kanan/right (gambar ke-2=class="imgfr") dan posisi di tengah-tengah/centre (gambar ke-3=class="imgfc"). Jika ingin menggunakan untuk membuat gallery, anda cukup menambahkan sebuah box dan menggunakan class="imgfn" pada tag img.

class="imgfn" untuk membuat image gallery

Point ke-2 di atas menjadi landasan utama posting kali ini. Jika anda melihat kode posting image pada mode Edit HTML, akan terlihat betapa deret kode html yang digunakan untuk 1 (satu) buah image saja sangatlah panjang. Kode yang terlalu rumit seperti default blogger ini akan menyulitkan ketika suatu saat diperlukan "update posting". Kode yang terlalu banyak juga pasti akan semakin membuat beban loading bertambah. Dibawah ini kita sertakan contoh kode html posting image default blogger dan kode baru yang kita buat lebih praktis. Cobalah bandingkan dan anda boleh pilih untuk menggunakannya atau tidak.

Kode html posting image (default blogger):

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s1600/bg-slideshow-css3.jpg" imageanchor="1"  style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="240" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s320/bg-slideshow-css3.jpg" /></a></div>

Kode html posting image super praktis:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s1600/bg-slideshow-css3.jpg"><img class="imgfl" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s320/bg-slideshow-css3.jpg" /></a>

Untuk dapat menggunakan kode praktis yang hasilnya jauh lebih cantik dari default blogger ini cukup simpan kode css berikut di atas kode ]]></b:skin> dan gunakan kode untuk posting sesuai panduan di bawahnya.

Kode CSS

.imgfn,a .imgfn,.imgfl,a .imgfl,.imgfr,a .imgfr,.imgfc,a .imgfc{
       width:200px;
       height:auto;
       padding:10px;
       background:#eee;
       background-size:200px auto;
       border:1px solid #aaa;
       border-radius:4px;
       box-shadow:0 0 5px #555;
       opacity:0.8;
       filter:alpha(opacity=80);
       transition:1s;
       -o-transition:1s;
       -moz-transition:1s;
       -webkit-transition:1s;
       -ms-transition:1s;
}
.imgfn:hover,.imgfl:hover,.imgfr:hover,.imgfc:hover{
       box-shadow:2px 2px 10px #000;
       border-radius:6px;
       background:#666;
       border:1px solid #eee;
       opacity:1.0;
       filter:alpha(opacity=100);
}
.imgfn{margin:1em 1em 0 0;}
.imgfl{float:left;margin:0.3em 1em 0.3em 0;}
.imgfr{float:right;margin:0.3em 0 0.3em 1em;}
.imgfc{display:block;text-align:center;margin:1em auto;}

Panduan menggunakan kode praktis untuk posting image:

Image di posisi sebelah kiri (left):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s1600/bg-slideshow-css3.jpg"><img class="imgfl" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s320/bg-slideshow-css3.jpg" /></a>

Image di posisi sebelah kanan (right):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s1600/bg-slideshow-css3.jpg"><img class="imgfr" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s320/bg-slideshow-css3.jpg" /></a>

Image di posisi tengah (centre):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s1600/bg-slideshow-css3.jpg"><img class="imgfc" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s320/bg-slideshow-css3.jpg" /></a>

Image di posisi Tak satupun (none):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s1600/bg-slideshow-css3.jpg"><img class="imgfn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiChaBZPMq07E68X2Eq-QpXUG175qN_lcIJpTght4ZFUnuwcry2Lf4DJAHvyLPKN1_UIzNhdV8-EO32pR6NTRhC1PXRMcYQYVJCNof_xDkc2pT8YPBYYS-pJ9wqJCzIl4-91cemIWLDyk/s320/bg-slideshow-css3.jpg" /></a>

Kode HTML Image Gallery

Image Gallery » Kode dibuat tanpa putus!

<div style="float:left;padding:0 0 10px 10px;margin:20px 0;border:2px solid #555;"><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bali-dance.jpg"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bali-dance.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bridge-bw01.jpg"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bridge-bw01.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-red-flower.jpg"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-red-flower.jpg" /></a><a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-night-01.jpg"><img class="imgfn" src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-night-01.jpg" /></a></div>
<div style="clear:both;"></div>

Untuk membuat image gallery gunakan kode class="imgfn", class="imgfl" atau class="imgfr". Pada contoh digunakan class="imgfn". Harap diingat bahwa untuk membuat gallery di posting blogger, semua kode html yang digunakan harus dibuat rapat (tanpa putus/sambung-menyambung) agar image ditampilkan di halaman posting tetap sesuai harapan!

Cara menyimpan Kode CSS

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Cari kode ]]></b:skin>.
6. Copy dan paste kode css tepat di atas kode ]]></b:skin>.
7. Klik Simpan Template (Save Template).
8. Lakukan posting pada mode Edit HTML dan atur posisi image sesuai kode yang telah disediakan.

Catatan/keterangan:

- Jika anda hanya ingin menampilkan image tanpa link, buat kode dalam bentuk seperti berikut:

Posting Image tanpa link

<img class="imgfl" src="image.jpg" />

Ganti class="imgfl" jika posisi image berbeda.

- Image dengan kode khusus ini didesain untuk menampilkan image dengan ukuran width=200px dan tinggi (height) secara otomatis menyesuaikan diri dengan perbandingan sesuai ukuran aslinya. Jika dikehendaki perubahan buat kode dalam bentuk seperti berikut:

Merubah ukuran image

<img class="imgfl" src="image.jpg" style="width:..px;height:..px;" />