Rabu, Oktober 13, 2010

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


.post img.kiri, .post img.kiriplus {
float: left;
margin: 0 10px 5px 0;
border: none;
cursor: pointer;
}
.post img.tengah, .post img.tengahplus {
display: block;
margin: 0 auto;
border: none;
cursor: pointer;
}
.post img.kanan, .post img.kananplus {
float: right;
margin: 0 0 5px 10px;
border: none;
cursor: pointer;
}
.post img.kiriplus, .post img.tengahplus, .post img.kananplus {
cursor: pointer;
padding: 3px;
background: #999;
border: 3px solid;
border-color: #555 #777 #777 #555;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

Cara Menyimpan kode CSS di Template


  • Login : login ke blogger terlebih dahulu.
  • Setelah Dasboard/Dasbor terlihat, klik "Design/Rancangan".
  • Lanjutkan dengan klik "Edit HTML".
  • Cari kode ]]></b:skin>.
  • Copy-paste kode CSS letakkan persis di atas kode tersebut.
  • SAVE Templates/Simpan Template : klik, kemudian buka halaman posting dan gunakan kode berikut untuk melakukan posting gambar.
  • Buka blog untuk melihat hasil posting!

Kode HTML untuk Posting


Gambar di sebelah kiri Tanpa Accecories


<img class="kiri" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/>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!


Gambar di sebelah kiri dilengkapi Accecories


<img class="kiriplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/>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!



Gambar di tengah Tanpa Accecories


<img class="tengah" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/>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!


Gambar di tengah dilengkapi Accecories


<img class="tengahplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/>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!



Gambar di sebelah kanan Tanpa Accecories


<img class="kanan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/>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!


Gambar di sebelah kanan dilengkapi Accecories


<img class="kananplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/>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!


Catatan


  • Anda bisa menambahkan width jika posting selalu menggunakan ukuran yang sama.
  • Untuk membuat tampilan gambar berbeda bisa dilakukan perubahan pada background, padding, border dan border-radius.

Tutorial Menarik Lain


Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:

Related Posts

1 komentar:

Promote Your Blog
 
Tantytm | Edited by | Tanty Template Modification