Cara Buat Posting Gambar Lebih Menarik, Cantik,Mudah dan Cepat dengan Kode CSS

Posting gambar terhitung paling njelimet saat kita posting di "Mode Posting Edit HTML". Ini setimbang dengan hasil yang kita dapatkan di output blog. Dengan menambah beberapa kode HTML yang tak mungkin dilakukan jika hanya memanfaatkan "Posting Mode Tulis/Compose", maka gambar/image Posting menjadi tampil lebih cantik dan rapi.

Mengandalkan membuat kode HTML tambahan untuk gambar di halaman posting tentulah membuat halaman posting jadi berjubel bagai naik bis kota. Itupun masih ditambah dengan pusingnya kepala bila ada satu atau beberapa kode tertulis salah atau tak lengkap. Penerbitan posting kemudian harus dilakukan berulangkali karena kesalahan yang kode tersebut. Bila mata sudah mengantuk dan badan terasa lelah serta pikiran sudah mulai kendor, biasanya rasa jengkel meluap seketika. Bagaimana mengatasi rumitnya kode HTML saat posting? Akankah setiap kali kita akan selalu dihadapkan dengan persoalan seperti ini tanpa pernah punya solusi?

Kode CSS menjadi satu solusi yang paling tepat. Dengan menambahkannya di template di atas kode ]]></b:skin>, maka pecahlah sudah permasalahan satu yang menahun tersebut. Melalui kode CSS ini pula kita dapat membuat gambar tampil lebih cantik dengan menambahkan beberapa variabel baru seperti border, border-radius, padding, background dan jika dikehendaki bisa juga ditambahkan animasi dengan memanfaatkan CSS3 transition delay, CSS3 transition Property, CSS3 Transition Duration, CSS3 transformation, CSS3 drop shadow dan CSS3 Transition Timing Function. Kode CSS di bawah ini mempunyai 3 (tiga) fungsi penataan gambar posting. Disebelah kiri (float:left;), posisi di tengah (margin:0 auto;display:block;) dan gambar di kanan (float:right;). Setelah anda menggunakan kode CSS ini maka setiap kali posting gambar tinggal tambahkan class="...", kenudian lengkapi dengan width="...px" dan height="...px", maka gambar akan meluncur di halaman blog dengan cepat, mudah, praktis dan hasil memuaskan.

Contoh Gambar tanpa Accecories dan gambar dengan Accecories

Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!
Karena beberapa sobat blogger banyak juga yang suka menampilkan gambar tanpa "bumbu penyedap" atau "accecories tambahan", maka dalam kode CSS ini kita sertakan dua macam kode, dimana kode yang pertama untuk menampilkan gambar apa adanya dan yang ke-2 (dengan tambahan "plus") kode CSS yang sudah dilengkapi dengan beberapa penambahan variabel baru guna mempercantik gambar. Untuk menggunakan di antara 2 (dua) pilihan tersebut anda langsung menggunakannya di halaman posting.

Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!
Karena beberapa sobat blogger banyak juga yang suka menampilkan gambar tanpa "bumbu penyedap" atau "accecories tambahan", maka dalam kode CSS ini kita sertakan dua macam kode, dimana kode yang pertama untuk menampilkan gambar apa adanya dan yang ke-2 (dengan tambahan "plus") kode CSS yang sudah dilengkapi dengan beberapa penambahan variabel baru guna mempercantik gambar. Untuk menggunakan di antara 2 (dua) pilihan tersebut anda langsung menggunakannya di halaman posting.

Kode CSS

Buat Pembatas Antar Komentar Menggunakan Background Image

Komentar bagi seorang blogger adalah ibarat setetes air di tengah teriknya mentari di atas gurun. Sangat diharapkan untuk tetap menyalakan semangat posting. Dan tetesan air itu kurasakan juga hari ini. Menggugah semangat ku yang beberapa waktu sempat lunglai ditelan banyaknya kesibukan. Yah..., sekalipun ketika mau memulai terasa begitu berat. Kemalasan telah sedikit menggerogoti rasa antusias yang selama ini begitu menggelegak. Beruntunglah sekalipun dengan langkah tertatih akhirnya jemari ku mulai menari menyentuh setiap onggokan hitam berbalut putih huruf di keyboard ku! Buih ..., setelah sekian bulan tak pernah tersentuh, akhirnya pagi ini satu posting tutorial dan panduan blogger dalam memodifikasi blog selesai ku buat.

Satu hal sederhana dan masih berhubungan dengan "komentar si penyala semangat posting", kali ini aku akan mencoba membedah sedikit persoalan bagaimana "menambal" template/blog kita supaya terlihat rapi dan kolom komentar terlihat sedikit berbeda dengan tampilan biasanya. Membuat sebuah garis batas antar setiap komentar yang telah diberikan pengunjung mungkin akan membuat blog terlihat lebih indah dan dengan mudah siapapun dapat membedakan satu persatu komentar yang menghiasi halaman posting.

Batas setiap komentar yang masuk dapat dibuat dengan 2 (dua) buah macam cara:

• Menggunakan border : penggunaan border adalah sebuah cara yang paling simpel sekalipun tidak banyak variasi bentuk pembatas komentar yang bisa diciptakan. Kita hanya bisa merubah jenis bordernya serta warna border. Bagi yang menyukai "blog minimalis" ini adalah cara yang paling tepat. Sederhana, praktis pembuatannya dan tentu saja dengan amat cepat segera bisa diselesaikan.
• Menggunakan background-image : Memanfaatkan sebuah background sebuah gambar merupakan cara yang paling tepat bagi blogger yang menyukai warna, seni atau keindahan. Dengan background-image kemungkinan pembuatan bentuk batas komentar menjadi tidak terbatas. Berbagai variasi bentuk dan warna bisa dibuat, bahkan bagi yang menyukai sebuah gambar animasi (.gif), maka dengan amat cantiknya sebuah batas komentar beranimasi dapat kita buat.

Cara Membuat Batas Setiap Komentar

• Login : Silahkan lakukan login ke blogger terlebih dahulu.
  • Tulis User Name (Nama Pengguna) atau bisa juga menggunakan Alamat Email (Email Address).
  • Tulis juga Password (Kode Rahasia/Sandi).
  • Klik Login.
• Dasboard (Dasbor) : Klik Design (Rancangan).
• Design (Rancangan) : Klik Edit HTML.
• Di halaman HTML ini akan terlihat banyak sekali kode html, silahkan cari kode ]]></b:skin>. Copy paste kode CSS di atas kode ]]></b:skin>.
• Klik SAVE Templates (Simpan Template).
• Anda harus membuka halaman posting yang sudah ada komentarnya. Apabila belum ada , buatlah komentar sendiri supaya bisa terlihat hasilnya. Jika dikehendaki, setelah bisa diketahui hasil akhir pembuatan batas komentar, maka komentar bisa anda hapus melalui link Comments atau Komentar.

Batas Komentar Menggunakan Border

Kode CSS

dd.comment-footer {
      border-bottom: 4px solid #888; 
}

Beberapa perubahan yang dapat dilakukan jika kita gunakan border:

• Silahkan anda bisa merubah tebal border (4px) sesuai tebal batas komentar yang di kehenndaki. Semakin besar nilainya maka akan semakin tebal bentuk batasnya.
• Untuk merubah warna border, anda bisa mengganti kode warna (#555) dengan kode warna yang lain. Bisa dalam bentuk kode menggunakan angka dan huruf (#000, #fff, #333, #b40303 , ... dsb) atau kode warna berbentuk teks (contoh: blue, red, white ... dsb).
• Pilihan lain yang bisa anda lakukan untuk merubah bentuk batas komentar adalah dengan merubah style border-nya (contoh: ridge, dotted, solid, outset, dashed, inset). Dibawah ini adalah bentuk perubahan yang dilakukan.

dd.comment-footer {
      border-bottom: 1px dotted lightblue; 
}

Batas Komentar Menggunakan Background-Image

Menggunakan sebuah background-image tidak jauh berbeda dengan penggunaan border, hanya kode CSS yang kita gunakan sedikit berbeda.
Kode CSS

dd.comment-footer {
      padding-bottom: 4px; 
      background: url(http://i43.tinypic.com/2aeqkiv/tabtytm/bgimg/.png) bottom left repeat-x;
   background-position: 50% 15px;
}

Keterangan

• Untuk background position pada posisi vertical kita gunakan sebesar 15px.
• Background-position horizontal bernilai 50% supaya posisi background center horizontal.
• Saat menggunakan sebuah background-image sebagai batas komentar, kita harus mengetahui ketinggian background (gambar).
• Tinggi gambar tersebut kita gunakan sebagai padding-bottom dengan menambahnya sebesar 10px. Penambahan ini dimaksudkan untuk menciptakan ruang dengan komentar di bawahnya.
• Dengan perhitungan menggunakan angka angka di atas, maka batas tiap komentar akan lekat di teks terakhir komentar sementara di bawahnya ada padding yang mencukupi.
• Dalam kode CSS di atas digunakan background berktinggian 4px oleh karena itu padding-bottom = 4px + 10px = 14px.

Beberapa Kode CSS yang bisa dimanfaatkan

Beberapa kode CSS yang telah lengkap dengan background-image ini bisa dimanfaatkan langsung dengan menyimpan di atas kode ]]></b:skin>.

dd.comment-footer {
      padding-bottom: 22px; 
      background: url(http://i37.tinypic.com/t8b1na/tantytm/bgimg/Redball12.gif) bottom left repeat-x;
   background-position: 50% 15px;
}

dd.comment-footer {
      padding-bottom: 25px; 
      background: url(http://i54.tinypic.com/28l7tyr/tantytm/bgimg/V15H5.gif) bottom left repeat-x;
   background-position: 50% 15px;
}

dd.comment-footer {
      padding-bottom: 16px; 
      background: url(http://i40.tinypic.com/2evwaq9/tantytm/bgimg/V6H345.png) bottom left repeat-x;
   background-position: 50% 15px;
}

Menggunakan background animasi:

dd.comment-footer {
      padding-bottom: 24px; 
      background: url(http://i47.tinypic.com/1zf69nr/tantytm/bgimg/minusAnima14.png) bottom left repeat-x;
   background-position: 50% 15px;
}

dd.comment-footer {
      padding-bottom: 35px; 
      background: url(http://i51.tinypic.com/2r2q805/tantytm/bgimg/bloodanima.gif) bottom left repeat-x;
   background-position: 50% 15px;
}

Tutorial lain yang jauh lebih lengkap dengan jumlah ratusan posting menarik dapat anda buka melalui link di bawah ini:

Best Blogger Tutorial Collection