Menata gambar dalam sebuah posting memang merupakan kebutuhan vital yang harus tertangani dengan baik oleh blogger yang dengan sungguh-sungguh ingin memberikan sajian terbaik sebuah posting. Sebuah tampilan yang rapi pasti akan memberikan kepuasan batin tidak hanya bagi pemilik blog, namun juga memberikan kenyamanan tersendiri bagi pembaca blog untuk menikmati semua posting yang telah dibuat dengan kerja keras yang tidak hanya melelahkan secara fisik, namun sekaligus membuat pikiran terkadang terasa lunglai bagai tak bertulang! (He ... he ... memang ada otak bertulang?! Otak DinoPatiSaurus kali, ya?!). Ha ... ha ... rajin pangkal pandai, hemat pangkal kaya, rapi dan teliti bukan saja milik anak TK, namun juga menjadi milik ABRI (Asyiknya Blog Rajin dan Indah).
Menata beberapa gambar dalam sebuah posting memang berbeda dengan apabila kita hanya menampilkan sebuah gambar/image. Untuk satu gambar kita cukup letakkan saja dipojok kiri (float: left;) atau di pojok kanan (float:right;), maka semua selesai sudah dan posting mengalir bagai kali ciliwung. Deras dan suka menghanyutkan orang sekaligus bikin banjir! Iya, nggak?! He ... he ...! Ada cara yang cukup sederhana untuk membuat penataan gambar berderet/berjajar dalam arah horizontal dengan tampilan yang rapi. Satu yang perlu dipahami adalah dengan mengetahui kegunaan margin serta fungsi float. Secara sederhana margin merupakan jarak antara satu bidang dengan bidang yang lain dalam sebuah web/ blog, sedang float berfungsi untuk mengatur posisi gambar atau tag (DIV, p dll) supaya berada pada posisi kanan, kiri, tak dikanan dan/atau kiri dan sekaligus float mampu membuat sebuah tag secara otomatis mempunyai luas sebesar isi yang terkandung di dalamnya. Sifat yang seperti ini amat dibutuhkan untuk membuat materi (gambar atau tag lain) dapat tersusun secara berderet horizontal secara otomatis. Penggunaan float menguntungkan karena membuat width atau height terkadang tidak dibutuhkan untuk ditambahkan.
Untuk membangun sebuah desain yang bernilai lebih tentunya tidak hanya margin dan float yang harus dipahami fungsi dan kegunaanya. Kode CSS yang lain seperti border, padding, background serta beberapa yang lain akan banyak memberikan support hingga dihasilkan sebuah tampilan yang lebih cvcantik dan menarik. Hal yang sebenarnya tidak terlalu sulit untuk dilakukan, namun demikian satu hal yang utama adalah ketelatenan dan semangat serta kemauan yang keras untuk mencoba memahami satu demi satu setiap fungsi dan kegunaan kode HTML. Satu fasilitas (software) yang paling diperlukan untuk mempermudah pemahaman tentang kode HTML adalah dengan cara menggunakan software Dreamweaver atau yang kini lebih dikenal dengan Adobe Dreamweaver CS5. Cobalah untuk mencari software ini supaya lebih mudah dan cepat mempelajari kode CSS, xHTML, javascript ataupun PHP.
Sebagai langkah awal untuk memahami penataan gambar dalam posting, ada baiknya sampeyan juga membuka satu posting di blog ini yang mengupas tentang penggunaan margin untuk menata sebuah gambar yang terdapat dalam:
Kode utama untuk membuat sebuah gambar dalam bentuk deret horizontal :
- penggunaan margin
- float-left
- padding (untuk membentuk penataan ruang yang rapi)
- width dan height
- sebaiknya setiap gambar mempunyai tinggi yang sama, dimana ketinggian gambar bisa langsung diatur melalui kode CSS sekalipun gambar sebenarnya mempunyai tinggi yang tidak sama.
sebagai contoh: jika gambar asli tinggi= 200px, maka gambar bisa dibuat menjadi hanya bertinggi 100px atau misalnya 55px hanya dengan membuat kode CSS --> height: 100px; atau height: 55px;
- untuk border, background, border-radius, box-shadow atau yang lain akan dengan mudah dipelajari setelah pemahaman tentang kode-kode di atas sudah terpelajari dengan baik.
Setelah sampeyan membuka link posting berikut DEMO di atas, silahkan sampeyan coba pelajari kode pembentuk gambar berderet di bawah ini, yang dibuat dengan menggunakan 2 cara:
1. Mengatur gambar secara langsung dengan menyertakan setiap kode CSS yang berupa margin, width, height dan float, padding, border, border-radius dan background dalam tag img.
2. Membuat kode CSS terpisah dengan tag img.
Dengan cara pertama ini seluruh kode disertakan langsung saat posting dilakukan tanpa menambah kode lain di template blog.
- DIV berfungsi untuk membentuk boks image gallery.
- Kode CSS dalam tag img untuk mengatur posisi, jarak dan kerapian gambar.
- Margin berfungsi untuk mengatur jarak setiap gambar supaya sama.
- float-left pada tag img untuk membentuk deret gambar ke arah horizontal (ke kiri).
- Height: 100px; mengatur keseragaman tinggi gambar/image.
- width auto membuat gambar dalam skala sesuai aslinya (perbandingan height dan width-nya).
- width: ...px; Pemberian width dengan ukuran ditentukan (dalam px) dilakukan supaya box membentuk tatanan yang rapi dengan sisa margin atas, kanan, bawah dan kiri berukuran sama (pada boks). Perubahan ukuran width pada beberapa gambar ini bisa dalam bentuk pengurangan atau penambahan dengan tujuan sekedar supaya image gallery menjadi rapi. Tentu saja ada sedikit perubahan pada skala gambar jika dibandingkan dengan ukuran dan skala aslinya sehingga diharapkan perubahan tidak terlalu mencolok. Perubahan pada width ini juga dimaksudkan untuk lebih mempermudah penataan daripada harus dilakukan dengan cara memotong gambar menggunakan software seperti Adobe Photoshop.
Untuk menggunakan cara ke-2, silahkan simpan kode CSS dalam template setelah login dilakukan. Kode CSS diletakkan dan disimpan di atas kode ]]></b:skin>, dimana DIV dibentuk sebagai sebuah class (div class="bokskongbolang") dan berfungsi sebagai pembentuk boks Image Gallery. Hampir seluruh kode pengaturan gambar dilakukan di sini (kode CSS). Penambahan width: ..px; juga dilakukan pada beberapa gambar dengan tujuan seperti halnya di atas.
Menata beberapa gambar dalam sebuah posting memang berbeda dengan apabila kita hanya menampilkan sebuah gambar/image. Untuk satu gambar kita cukup letakkan saja dipojok kiri (float: left;) atau di pojok kanan (float:right;), maka semua selesai sudah dan posting mengalir bagai kali ciliwung. Deras dan suka menghanyutkan orang sekaligus bikin banjir! Iya, nggak?! He ... he ...! Ada cara yang cukup sederhana untuk membuat penataan gambar berderet/berjajar dalam arah horizontal dengan tampilan yang rapi. Satu yang perlu dipahami adalah dengan mengetahui kegunaan margin serta fungsi float. Secara sederhana margin merupakan jarak antara satu bidang dengan bidang yang lain dalam sebuah web/ blog, sedang float berfungsi untuk mengatur posisi gambar atau tag (DIV, p dll) supaya berada pada posisi kanan, kiri, tak dikanan dan/atau kiri dan sekaligus float mampu membuat sebuah tag secara otomatis mempunyai luas sebesar isi yang terkandung di dalamnya. Sifat yang seperti ini amat dibutuhkan untuk membuat materi (gambar atau tag lain) dapat tersusun secara berderet horizontal secara otomatis. Penggunaan float menguntungkan karena membuat width atau height terkadang tidak dibutuhkan untuk ditambahkan.
Untuk membangun sebuah desain yang bernilai lebih tentunya tidak hanya margin dan float yang harus dipahami fungsi dan kegunaanya. Kode CSS yang lain seperti border, padding, background serta beberapa yang lain akan banyak memberikan support hingga dihasilkan sebuah tampilan yang lebih cvcantik dan menarik. Hal yang sebenarnya tidak terlalu sulit untuk dilakukan, namun demikian satu hal yang utama adalah ketelatenan dan semangat serta kemauan yang keras untuk mencoba memahami satu demi satu setiap fungsi dan kegunaan kode HTML. Satu fasilitas (software) yang paling diperlukan untuk mempermudah pemahaman tentang kode HTML adalah dengan cara menggunakan software Dreamweaver atau yang kini lebih dikenal dengan Adobe Dreamweaver CS5. Cobalah untuk mencari software ini supaya lebih mudah dan cepat mempelajari kode CSS, xHTML, javascript ataupun PHP.
Sebagai langkah awal untuk memahami penataan gambar dalam posting, ada baiknya sampeyan juga membuka satu posting di blog ini yang mengupas tentang penggunaan margin untuk menata sebuah gambar yang terdapat dalam:
Kode utama untuk membuat sebuah gambar dalam bentuk deret horizontal :
- penggunaan margin
- float-left
- padding (untuk membentuk penataan ruang yang rapi)
- width dan height
- sebaiknya setiap gambar mempunyai tinggi yang sama, dimana ketinggian gambar bisa langsung diatur melalui kode CSS sekalipun gambar sebenarnya mempunyai tinggi yang tidak sama.
sebagai contoh: jika gambar asli tinggi= 200px, maka gambar bisa dibuat menjadi hanya bertinggi 100px atau misalnya 55px hanya dengan membuat kode CSS --> height: 100px; atau height: 55px;
- untuk border, background, border-radius, box-shadow atau yang lain akan dengan mudah dipelajari setelah pemahaman tentang kode-kode di atas sudah terpelajari dengan baik.
Setelah sampeyan membuka link posting berikut DEMO di atas, silahkan sampeyan coba pelajari kode pembentuk gambar berderet di bawah ini, yang dibuat dengan menggunakan 2 cara:
1. Mengatur gambar secara langsung dengan menyertakan setiap kode CSS yang berupa margin, width, height dan float, padding, border, border-radius dan background dalam tag img.
2. Membuat kode CSS terpisah dengan tag img.
Dengan Cara Pertama
Dengan cara pertama ini seluruh kode disertakan langsung saat posting dilakukan tanpa menambah kode lain di template blog.
- DIV berfungsi untuk membentuk boks image gallery.
- Kode CSS dalam tag img untuk mengatur posisi, jarak dan kerapian gambar.
- Margin berfungsi untuk mengatur jarak setiap gambar supaya sama.
- float-left pada tag img untuk membentuk deret gambar ke arah horizontal (ke kiri).
- Height: 100px; mengatur keseragaman tinggi gambar/image.
- width auto membuat gambar dalam skala sesuai aslinya (perbandingan height dan width-nya).
- width: ...px; Pemberian width dengan ukuran ditentukan (dalam px) dilakukan supaya box membentuk tatanan yang rapi dengan sisa margin atas, kanan, bawah dan kiri berukuran sama (pada boks). Perubahan ukuran width pada beberapa gambar ini bisa dalam bentuk pengurangan atau penambahan dengan tujuan sekedar supaya image gallery menjadi rapi. Tentu saja ada sedikit perubahan pada skala gambar jika dibandingkan dengan ukuran dan skala aslinya sehingga diharapkan perubahan tidak terlalu mencolok. Perubahan pada width ini juga dimaksudkan untuk lebih mempermudah penataan daripada harus dilakukan dengan cara memotong gambar menggunakan software seperti Adobe Photoshop.
<div style="width: 440px;float: left;margin: 10px;padding: 10px 0px 0px 10px;border: 2px solid #000;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;background: #996600;background: -moz-linear-gradient(top, #996600, #99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#996600), to(#99CCFF));">
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67isCON-eroWP86vhTY1hOINY7pV_sBTTuMl4Z6z29FBtZrmYMkopiDWX1NcKfL373UChdjh9xeCeQ7ZRi6B7Y9QM9fw1LsaH_uIdo_lQy8qIh6XtDNDbEeUfi8v37ipFmYGi9dQpGxys/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghP-Ii8tpytL4xgPmqLarZs-qFe8jqIyU7pf9xVp1LWRpKq7fDTQzl4TFjctRAXiv7JZ2IGdApMTiJ9FoWW5uA47bP5O114eRYav3Wn6oW1KyFFce_sbnBtmss9UTkzBuLGbfnAqLEQ9pO/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFYOzpT2iBx2ufGeFCZeJxLMZniFvjZI9QBwOv-HoTdjdmiV1dr-JrhibDsci35Hd4jr7viaJ-X815caUJbP2t06J3YJfa9gI4wVffSJleZMvhh1xLoXMQ2OxGYAXHeyyo7hkdpYAvfxXo/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-3nnlwz6pXzflLLhPrTDkZvVVzcY6rsJLz_jHssJ5So9mCHQtQsA1_-6rh8qWi_1U_n2FVocL2Edv14RV0adQUyid4PAU3W50ElW1O51OoEl4ZYaaZyYOfJGHDum1b0vtXeQFfeUGM2yD/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxxocrJ6m-kQqCTDYy-Awv4GQiZiH0z72I6Dsf5BQ4U-oF0Q3WUEwyfzYVmxmJ1x1Cg-vM5WBLliIRJ2dYrk6N12fWgh5Diz8aab4pS9QeJDa52V6k5kBMoQA_luOpeL7TD_CTUAdVrDd/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoU2wDWZ9HeFAdhT6QlUZtmspn3agC8LjKRCy8duxTfVJxrn43OOHlaf2dn8PIqdH-v4OkpRUDVk-7rdn5QtJIdVh-Hzl7WEPjJmQCg8qmvgKl4gN0Z1CAFvsuaxY5AYPSrjkNlOS2XPHY/s320/gbr11.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFt9rF8tavskHp8uVml88VSDdEk8me5s4GpMB5AyrO6JSkyx7e5afqy6EvTMlCuadLYpj_pj2aUQpYC8inAy8Cpekp-njxVjwHv9HiEvBpf4UYuBGYdgxfAvwQeJhl77CcPtF0HD_q400p/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVT_JfCpPmsP16VbsE40ML60VfB7GJkuhGxRd6Gj7WhVSm7HCJoSECZb91dOZEdJwsQHpPFl1xSiVY9rGAnROB8sresChHErIWvaSzpV5dcVeiHTtCD4i8ovAi_5wkfx2RJe0XM6oyRT8E/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_NbpY-KImJp3blOCVgt69KTygl29ShqjZpgQ8BQJqdiSaVA5dpeMVxempFa-kbkb7q-sk5h1SngKsn-2aWFeEEouNZXefaaJuVaXqsx6-xL7MHo7Ut8wp2de18IDTyAtt9nfds00AKv6/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXg6qYBQCQQx0kFgcs1YntPLEQOJzxWy_UQMkbfP9Cq9G8vb34_uWvWIHlJsII6xCj7sz3qW3kwhpA4ISTFFvHKg7hbPAAoBbbbyanPi91_h-MFYwsdwoesASlbGHPJG9sBgudyIgodPo/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6had83TW6RN8mwxsqzreHXyiEH5ei-MmwILjqY6Td2_TBSw90-sxilf1dNsdxh3aOr8xA8Wrpvf9OgcAaOmH07My3pA10hyphenhyphenIHIwpX1QOuvY8Sf0OfyJVXLoROn6ogFfGxfpWGw4BcF5uV/s320/gbr2.jpg" />
</div>
Seperti biasanya, supaya tidak terjadi perubahan pada desain atau rancangan image gallery, saat posting dilakukan seluruh kode harus dibuat dalam bentuk rapat sehingga kode di atas dirubah seperti di bawah ini.
<div style="width: 440px;float: left;margin: 10px auto;padding: 10px 0px 0px 10px;border: 2px solid #000;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;background: #996600;background: -moz-linear-gradient(top, #996600, #99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#996600), to(#99CCFF));"><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67isCON-eroWP86vhTY1hOINY7pV_sBTTuMl4Z6z29FBtZrmYMkopiDWX1NcKfL373UChdjh9xeCeQ7ZRi6B7Y9QM9fw1LsaH_uIdo_lQy8qIh6XtDNDbEeUfi8v37ipFmYGi9dQpGxys/s320/gbr1.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghP-Ii8tpytL4xgPmqLarZs-qFe8jqIyU7pf9xVp1LWRpKq7fDTQzl4TFjctRAXiv7JZ2IGdApMTiJ9FoWW5uA47bP5O114eRYav3Wn6oW1KyFFce_sbnBtmss9UTkzBuLGbfnAqLEQ9pO/s320/gbr9.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFYOzpT2iBx2ufGeFCZeJxLMZniFvjZI9QBwOv-HoTdjdmiV1dr-JrhibDsci35Hd4jr7viaJ-X815caUJbP2t06J3YJfa9gI4wVffSJleZMvhh1xLoXMQ2OxGYAXHeyyo7hkdpYAvfxXo/s320/gbr13.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-3nnlwz6pXzflLLhPrTDkZvVVzcY6rsJLz_jHssJ5So9mCHQtQsA1_-6rh8qWi_1U_n2FVocL2Edv14RV0adQUyid4PAU3W50ElW1O51OoEl4ZYaaZyYOfJGHDum1b0vtXeQFfeUGM2yD/s320/gbr6.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxxocrJ6m-kQqCTDYy-Awv4GQiZiH0z72I6Dsf5BQ4U-oF0Q3WUEwyfzYVmxmJ1x1Cg-vM5WBLliIRJ2dYrk6N12fWgh5Diz8aab4pS9QeJDa52V6k5kBMoQA_luOpeL7TD_CTUAdVrDd/s320/gbr3.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoU2wDWZ9HeFAdhT6QlUZtmspn3agC8LjKRCy8duxTfVJxrn43OOHlaf2dn8PIqdH-v4OkpRUDVk-7rdn5QtJIdVh-Hzl7WEPjJmQCg8qmvgKl4gN0Z1CAFvsuaxY5AYPSrjkNlOS2XPHY/s320/gbr11.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFt9rF8tavskHp8uVml88VSDdEk8me5s4GpMB5AyrO6JSkyx7e5afqy6EvTMlCuadLYpj_pj2aUQpYC8inAy8Cpekp-njxVjwHv9HiEvBpf4UYuBGYdgxfAvwQeJhl77CcPtF0HD_q400p/s320/gbr10.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVT_JfCpPmsP16VbsE40ML60VfB7GJkuhGxRd6Gj7WhVSm7HCJoSECZb91dOZEdJwsQHpPFl1xSiVY9rGAnROB8sresChHErIWvaSzpV5dcVeiHTtCD4i8ovAi_5wkfx2RJe0XM6oyRT8E/s320/gbr114.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_NbpY-KImJp3blOCVgt69KTygl29ShqjZpgQ8BQJqdiSaVA5dpeMVxempFa-kbkb7q-sk5h1SngKsn-2aWFeEEouNZXefaaJuVaXqsx6-xL7MHo7Ut8wp2de18IDTyAtt9nfds00AKv6/s320/gbr7.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXg6qYBQCQQx0kFgcs1YntPLEQOJzxWy_UQMkbfP9Cq9G8vb34_uWvWIHlJsII6xCj7sz3qW3kwhpA4ISTFFvHKg7hbPAAoBbbbyanPi91_h-MFYwsdwoesASlbGHPJG9sBgudyIgodPo/s320/gbr4.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6had83TW6RN8mwxsqzreHXyiEH5ei-MmwILjqY6Td2_TBSw90-sxilf1dNsdxh3aOr8xA8Wrpvf9OgcAaOmH07My3pA10hyphenhyphenIHIwpX1QOuvY8Sf0OfyJVXLoROn6ogFfGxfpWGw4BcF5uV/s320/gbr2.jpg" /></div>
Dengan Cara Kedua
Untuk menggunakan cara ke-2, silahkan simpan kode CSS dalam template setelah login dilakukan. Kode CSS diletakkan dan disimpan di atas kode ]]></b:skin>, dimana DIV dibentuk sebagai sebuah class (div class="bokskongbolang") dan berfungsi sebagai pembentuk boks Image Gallery. Hampir seluruh kode pengaturan gambar dilakukan di sini (kode CSS). Penambahan width: ..px; juga dilakukan pada beberapa gambar dengan tujuan seperti halnya di atas.
Kode CSS
.bokskongkubolang {
width: 440px;
float: left;
margin: 10px;
padding: 10px 0px 0px 10px;
border: 2px solid #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #996600;background:
-moz-linear-gradient(top, #996600, #99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#996600), to(#99CCFF));
}
.bokskongkubolang img {
height: 100px;
width: auto;
margin: 0px 10px 10px 0px;
float: left;
}xHTML
Gunakan xHTML di ruang posting. Dengan cara ke-2 ini maka kode HTML yang digunakan di halaman posting menjadi lebih irit. Sampeyan dapat memanfaatkan kode-kode ini setiap kali memerlukan bentuk tampilan yang sama dengan gambar berbeda tanpa perlu lagi membuat kode-kode HTML yang baru.<div class="bokskongkubolang">Saat posting dilakukan lakukan pemadatan kode (dibuat dalam bentuk rapat sehingga bentuknya menjadi seperti di bawah ini:
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67isCON-eroWP86vhTY1hOINY7pV_sBTTuMl4Z6z29FBtZrmYMkopiDWX1NcKfL373UChdjh9xeCeQ7ZRi6B7Y9QM9fw1LsaH_uIdo_lQy8qIh6XtDNDbEeUfi8v37ipFmYGi9dQpGxys/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghP-Ii8tpytL4xgPmqLarZs-qFe8jqIyU7pf9xVp1LWRpKq7fDTQzl4TFjctRAXiv7JZ2IGdApMTiJ9FoWW5uA47bP5O114eRYav3Wn6oW1KyFFce_sbnBtmss9UTkzBuLGbfnAqLEQ9pO/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFYOzpT2iBx2ufGeFCZeJxLMZniFvjZI9QBwOv-HoTdjdmiV1dr-JrhibDsci35Hd4jr7viaJ-X815caUJbP2t06J3YJfa9gI4wVffSJleZMvhh1xLoXMQ2OxGYAXHeyyo7hkdpYAvfxXo/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-3nnlwz6pXzflLLhPrTDkZvVVzcY6rsJLz_jHssJ5So9mCHQtQsA1_-6rh8qWi_1U_n2FVocL2Edv14RV0adQUyid4PAU3W50ElW1O51OoEl4ZYaaZyYOfJGHDum1b0vtXeQFfeUGM2yD/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxxocrJ6m-kQqCTDYy-Awv4GQiZiH0z72I6Dsf5BQ4U-oF0Q3WUEwyfzYVmxmJ1x1Cg-vM5WBLliIRJ2dYrk6N12fWgh5Diz8aab4pS9QeJDa52V6k5kBMoQA_luOpeL7TD_CTUAdVrDd/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoU2wDWZ9HeFAdhT6QlUZtmspn3agC8LjKRCy8duxTfVJxrn43OOHlaf2dn8PIqdH-v4OkpRUDVk-7rdn5QtJIdVh-Hzl7WEPjJmQCg8qmvgKl4gN0Z1CAFvsuaxY5AYPSrjkNlOS2XPHY/s320/gbr11.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFt9rF8tavskHp8uVml88VSDdEk8me5s4GpMB5AyrO6JSkyx7e5afqy6EvTMlCuadLYpj_pj2aUQpYC8inAy8Cpekp-njxVjwHv9HiEvBpf4UYuBGYdgxfAvwQeJhl77CcPtF0HD_q400p/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVT_JfCpPmsP16VbsE40ML60VfB7GJkuhGxRd6Gj7WhVSm7HCJoSECZb91dOZEdJwsQHpPFl1xSiVY9rGAnROB8sresChHErIWvaSzpV5dcVeiHTtCD4i8ovAi_5wkfx2RJe0XM6oyRT8E/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_NbpY-KImJp3blOCVgt69KTygl29ShqjZpgQ8BQJqdiSaVA5dpeMVxempFa-kbkb7q-sk5h1SngKsn-2aWFeEEouNZXefaaJuVaXqsx6-xL7MHo7Ut8wp2de18IDTyAtt9nfds00AKv6/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXg6qYBQCQQx0kFgcs1YntPLEQOJzxWy_UQMkbfP9Cq9G8vb34_uWvWIHlJsII6xCj7sz3qW3kwhpA4ISTFFvHKg7hbPAAoBbbbyanPi91_h-MFYwsdwoesASlbGHPJG9sBgudyIgodPo/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6had83TW6RN8mwxsqzreHXyiEH5ei-MmwILjqY6Td2_TBSw90-sxilf1dNsdxh3aOr8xA8Wrpvf9OgcAaOmH07My3pA10hyphenhyphenIHIwpX1QOuvY8Sf0OfyJVXLoROn6ogFfGxfpWGw4BcF5uV/s320/gbr2.jpg" />
</div>
<div class="bokskongkubolang"><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67isCON-eroWP86vhTY1hOINY7pV_sBTTuMl4Z6z29FBtZrmYMkopiDWX1NcKfL373UChdjh9xeCeQ7ZRi6B7Y9QM9fw1LsaH_uIdo_lQy8qIh6XtDNDbEeUfi8v37ipFmYGi9dQpGxys/s320/gbr1.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghP-Ii8tpytL4xgPmqLarZs-qFe8jqIyU7pf9xVp1LWRpKq7fDTQzl4TFjctRAXiv7JZ2IGdApMTiJ9FoWW5uA47bP5O114eRYav3Wn6oW1KyFFce_sbnBtmss9UTkzBuLGbfnAqLEQ9pO/s320/gbr9.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFYOzpT2iBx2ufGeFCZeJxLMZniFvjZI9QBwOv-HoTdjdmiV1dr-JrhibDsci35Hd4jr7viaJ-X815caUJbP2t06J3YJfa9gI4wVffSJleZMvhh1xLoXMQ2OxGYAXHeyyo7hkdpYAvfxXo/s320/gbr13.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-3nnlwz6pXzflLLhPrTDkZvVVzcY6rsJLz_jHssJ5So9mCHQtQsA1_-6rh8qWi_1U_n2FVocL2Edv14RV0adQUyid4PAU3W50ElW1O51OoEl4ZYaaZyYOfJGHDum1b0vtXeQFfeUGM2yD/s320/gbr6.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZxxocrJ6m-kQqCTDYy-Awv4GQiZiH0z72I6Dsf5BQ4U-oF0Q3WUEwyfzYVmxmJ1x1Cg-vM5WBLliIRJ2dYrk6N12fWgh5Diz8aab4pS9QeJDa52V6k5kBMoQA_luOpeL7TD_CTUAdVrDd/s320/gbr3.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoU2wDWZ9HeFAdhT6QlUZtmspn3agC8LjKRCy8duxTfVJxrn43OOHlaf2dn8PIqdH-v4OkpRUDVk-7rdn5QtJIdVh-Hzl7WEPjJmQCg8qmvgKl4gN0Z1CAFvsuaxY5AYPSrjkNlOS2XPHY/s320/gbr11.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFt9rF8tavskHp8uVml88VSDdEk8me5s4GpMB5AyrO6JSkyx7e5afqy6EvTMlCuadLYpj_pj2aUQpYC8inAy8Cpekp-njxVjwHv9HiEvBpf4UYuBGYdgxfAvwQeJhl77CcPtF0HD_q400p/s320/gbr10.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVT_JfCpPmsP16VbsE40ML60VfB7GJkuhGxRd6Gj7WhVSm7HCJoSECZb91dOZEdJwsQHpPFl1xSiVY9rGAnROB8sresChHErIWvaSzpV5dcVeiHTtCD4i8ovAi_5wkfx2RJe0XM6oyRT8E/s320/gbr114.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM_NbpY-KImJp3blOCVgt69KTygl29ShqjZpgQ8BQJqdiSaVA5dpeMVxempFa-kbkb7q-sk5h1SngKsn-2aWFeEEouNZXefaaJuVaXqsx6-xL7MHo7Ut8wp2de18IDTyAtt9nfds00AKv6/s320/gbr7.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXg6qYBQCQQx0kFgcs1YntPLEQOJzxWy_UQMkbfP9Cq9G8vb34_uWvWIHlJsII6xCj7sz3qW3kwhpA4ISTFFvHKg7hbPAAoBbbbyanPi91_h-MFYwsdwoesASlbGHPJG9sBgudyIgodPo/s320/gbr4.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6had83TW6RN8mwxsqzreHXyiEH5ei-MmwILjqY6Td2_TBSw90-sxilf1dNsdxh3aOr8xA8Wrpvf9OgcAaOmH07My3pA10hyphenhyphenIHIwpX1QOuvY8Sf0OfyJVXLoROn6ogFfGxfpWGw4BcF5uV/s320/gbr2.jpg" /></div>
Cara menyimpan Kode CSS
- Login ke blogger
- Setelah memasuki halaman dasboard kemudian KLIK link "Design (Rancangan)".
- Lanjutkan dengan KLIK link "Edit HTML".
- Cari kode ]]></b:skin> dan letakkan kode CSS di atasnya.
- KLIK "Simpan Template"
- Lanjutkan dengan posting menggunakan kode xHTML di halaman posting.
- Lihat hasil posting dengan membuka blog.
- Akan lebih baik jika lakukan percobaan terlebih dahulu melalui blog percobaan yang dapat sampeyan buat dengan membuat sebuah blog lagi atau beberapa buah yang dikhususkan untuk mencoba desain-desain yang baru!
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
Comments
Post a Comment