Setting Custom Subdomain di Blogger

Seminggu yang lalu aku menugaskan bikin subdomain ke juniorku lewat Blogger. Eh ternyata dia bilang ga bisa. Akhirnya aku gemes dan nyoba sendiri -karena pengalaman sebelumnya bikin subdomain di blogger itu tidak lebih dari 10 menit aja-. Akhirnya aku pun juga menyerah. Besoknya aku chat dengan Enny mengenai masalah ini. Selidik demi selidik, Enny pun menemukan kalo Google emang lagi memperbarui mekanisme pengaturan custom subdomain untuk blogger. Aku pun mengabarkan itu pada juniorku. Akhirnya aku dapat message dari juniorku kalo dia udah berhasil. Aku cek, ternyata berhasil. Aku pun ingin mencobanya juga, tapi gagal. Hehe.

Nah siang ini, saat lagi nganggur, karena emang lagi ga ada kuliah, iseng-iseng bikin custom subdomain intikali di Blogger. Dan ternyata bisa. Bisa kamu cek subdomain yang barusan aku buat, yaitu coba.intikali.org. Dan sesuai dugaanku bahwa bikin subdomain itu tidak lebih dari 10 menit. Hehe. Untuk itu aku ingin membagikan cara setting custom subdomain (terupdate dari Google) di Blogger. Berikut ulasannya.

Catatan: Beberapa langkah yang saya anggap tidak penting, saya hilangkan.
www.ceaster.com
Langkah Pertama

Gambar 1. Setting di Blogger

• Masukkan subdomain yang kamu inginkan
• Klik pada settings instructions
• Jangan klik Save

Langkah Kedua

Gambar 2. Setting Tambahan

•  Setelah pada Gambar 1 kamu klik settings instructions, kamu akan dibawa di halaman seperti pada Gambar 2.
• Perhatikan "coba" dan "ghs.google.com" dan yang dikotaki merah lainnya.

Langkah Ketiga

Gambar 3. CNAME di hostingmu

• Masukkan "coba" (tanpa tanda petik) ke kolom Name.
• Masukkan "ghs.google.com" (tanpa tanda petik) ke kolom CNAME.
• Lalu klik Add CNAME Record.
• Masukkan lagi kode aneh seperti "SOQ bla bla bla" (tanpa tanda petik) ke kolom Name.
• Masukkan juga kode aneh seperti "gv-bla bla bla" (tanpa tanda petik) ke kolom CNAME.
• Lalu klik Add CNAME Record.

Langkah Empat

• Kembali lagi ke Gambar 1. Lalu klik Save.
• Hapus CNAME Record di CPANEL yang mempunyai Name: SOQ bla bla bla tadi. Perhatikan Gambar 4.
• Kemudian coba cek blog dengan custom subdomain yang baru saja kamu buat.

Gambar 4. List subdomain tanpa CNAME Record geje

CNAME Record yang geje tadi digunakan untuk melakukan verifikasi apakah benar blog tersebut yang ditujukan untuk sebuah subdomain. Setelah blog terverifikasi, CNAME Record geje tadi boleh dihapus dan tidak berarti apa-apa. Silakan mencoba. Ceaster Corp

Read More

Tips Cara mempercepat website

Cara Mempercepat Loading Situs Atau Website

Kecepatan akses ke suatu website tentunya juga mempengaruhi banyaknya visitor ke suatu blog atau website. Karena visitor atau pengunjung akan lebih merasa nyaman bila website yang dikunjunginya cepat diakses.

Ada beberapa faktor yang mempengaruhi kecepatan suatu website pada saat diakses dan berikut Tips dan trik dari ESC Creation agar situs website atau blog kita yang menggunakan CMS wordpres bisa diakses lebih cepat.

1. Gunakan Plugins WP Super cache.

Plugins ini terbukti efektif untuk mempercepat akses suatu website. Karena plugins WP-super cache ini pada dasarnya adalah meng convert sementara website dinamis seperti CMS wordpress ini menjadi website statis, sehingga mengurangi jumlah banyak nya query atau pemanggilan data dari data base.

2. Gunakan WordPress Plugins Script Compressor

Dengan terpasangnya plugins Script compresor pada cms wordpress maka akan meringkas script cms atau java script yang terpasang pada website kita. Script java script bisa diatur sehingga loading java scritp bisa didelay pada query paling belakang dan hal ini bisa mempercepat akses visitor ke website dan blog kita.

3. Jangan Menggunakan Image Gambar Yang Berlebihan

Gunakan Gambar atau image secukupnya, pasang image / gambar yang beresolusi kecil atau size kecil hal ini akan mengurangi besarnya data yang diakses pengguna atau visitor Blog dan Website kita.

4. Jangan Menggunakan Flash File atau Animasi Yang Berlebihan

Sebaiknya anda tidak menggunakan Flash File atau Animasitapi bila masih ingin menggunakan sebaiknya gunakan Flash file atau Animasi yang berukuran kecil atau sizenya kecil.

5. Gunakan File Hosting Lain Untuk Menyimpan Data File

Manfaatkan File Hosting Gratis untuk menyimpan atau upload file gambar, flash, video atau file lain yang kita pasang atau gunakan pada blog dan website kita. Dengan menaruh file tersebut di hosting lain maka otomatis akan mengurangi beban loading data pada server webhosting yang kita gunakan. Anda bisa memanfaatkan File Hosting atau image hosting gratis seperti photobucket.com, Youtube.com, box.net, 4shared.com, ziddu.com dan masih banyak lagi file hosting gratis yang bisa kita manfaatkan.

6. Gunakan Webhhosting Yang Berkualitas

Gunakan webhsoting yang berkualitas atau mempunyai spesifikasi data transfer yang bagus dan cepat. Salah satu cara untuk mengetahui seberapa cepat data tranfer dari suatu webhosting adalah dengan cara tes ping ke suatu Hosting.

Cara tes ping yaitu dengan menggunakan Tool Tes ping yaitu di :

http://just-ping.com

Caranya masukan nama domain yang akan di test misal esc-creation.com kemudian klik ping. Tunggu beberapa saat sampai data test ping tersedia. Pada data rrt Semakin kecil nilai yang tertera pada test ping maka akan semakin bagus atau semakin cepat data tranfer webhosting tersebut.

Cara lain dengan test ping dari Komputer kita aitu masuk menu : run >> CMD >> ketikan ping namadomain.com (ping spasi nama domain) >> enter.

Silahkan mencoba Tips Optimalisasi Situs Untuk Mempercepat akses Loading website / situs atau blog dengan cms wordpess di atas semoga bermanfaat.

TAG : Cara mempercepat akses loading website dan blog, Plugins Worpress mempercepat akses website, Ask Kenapa loading website lambat Lemot lelet dibuka?, Tips dan trik agar website situs cepat dibuka, Cara mempercepat Website situs cepat diakses, cara mengetahui kecepatan akses data transfer suatu web hosting, Bagaimana cara situs website kita cepat diakses ?, Tips dan Cara agar website cepat dibuka, Cara Test Ping ke situs website, Cara Mengatasi Problem Lelet Loading Akses ke situs lambat, Fungsi wp plugins script compressor dan wp super cache, tips meringkas script cms dan java script, cara test ping web hosting atau domai

www.ceaster.com Ceaster Corp

Read More

Tutorial membuat gambar baris berderet horizontal html

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:

Bedah Posting gambar dan photo ; fungsi margin

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/AVvXsEj0XvFlX0QNG-bmjC6mJDyZdzB4NHZzUZ-d-buVGB-RIZ54dgLjTmz06P2G_eCVOEc99MpnNom9Bb1IU76Y4P3MVDeuugYH9_cZciBJH30m-zwsO6Wl0x_Iphyphenhyphen4-ai_clr_Rfq5uXQ9pGlw/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq49QEhJgnFci7CSzbg7fyNN8fWkmrvDHW_MRxuFn9yXc6WW4vFVs3sfbE7alfDK-8TDhU1TpBWTry01h7zO9E_gqUGur2KbRWmNnMviReiGdl_jrK4FKcIO8YTeNl4dof8zP9-y-tMLlG/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcby5joe8Luqvh4qefA6nSeL-NRenuwKlIyzVtxsuFEs7E2jil4tI1dGUW94A0W6tpkswoVk18nvtHYDMOCpdeHxWLg_40LMUwPdOmV1_CX7jhOrjbv4YRlc_WLXb_ryxmw7ZZO98Fv_R_/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtR5gCUFTj5d-axJbN84PQfiwCmupskBfx6nmzJ-Q1pqrs4ym23wWv_adMP_Jn_qWYfi_TDBUD9EHmF2nzKhH4h-5BZE4kTpwxtC2rGOQWkn5TJV7nOA59NfMZ31htl-kT59jxrtf9hFE/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhdiaBry7hJR2T27Iuz5wxuNsN9bcYpnGPFcO9zbX-cbeqpC2N6FqZhCE8j4k-N2Xx2_VwYYm398XfaPUqlJAlUPVXBge3FBFq3yf9Fws4kILh6HatXdU7IEHllAvzg3EA2TIsjJXrU32E/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1wXQ4RVHb2STcpPXLCsq2leI6vBPX3p626X9eFTuhjRZpobPFj40JSmQXE6ic6w6O74Z2it9EsckCU_HLuwO2Hxbj6PfSCg16FPi4SiWPk9cGBVyvQDe2Bs1-LSE4Qnvj6_shR_-fSTJq/s320/gbr11.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGuliH4NXJSvweTb6MMKA9sQFplA1qrZG67TRkALLpIXWBw0Ymv89IiVbSLLXz91_UE009qhJLM7Nw3NkJuhvx15J_Ti-544s0shK_ewowVxZydRW-Gl9vqX_78iJrZddvHJETRs7wowCv/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFPMsIg2njSFq6uWc0zcX1f1b4zNbLy_-ShY7ifK4908ocsLP2KbGt9_q5VAyzqss-KCFvsgnhIt-sKd-Npi7ko4Q0vJYbMJ12XM8X6tPOozRl0n5nE7gzA7KlCQDcIlE-O-vmNpEki4G/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh49rxIsEZ1br7q2uwfsJmbrqNyZgMgsCCpLyaLmwlb_QQR-vAD6Ni5MrRICBdCJ_Z-7OU18bEJwDJoVnww47lv_ocZ_dQpodrnXFHpOQYdElfddxvvbF5saodR7FsOgt_mdvyhcHokuYih/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ooWq68AosYqqkm7yfl_wx_EIsW5hjeK6MSK8lMBMsY0sWJ9QqdLoCZ4es2ULbw_SRQVMKIhtEONeaMVmgSOUXGqVcJYwe9fOVlOeVneaDj-uzl3Nf3XWrZKkLYFvkAQnXGPSEIK1uFoO/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJV8ikG5AZDYhDv02-T6-qqHJSPbePfsVweW7G_EbE60znpGUCvygKKjw663fHN66BCi8oOBN_TkpO2AEJJDUZnek-_V4eWZQ_c2ih1DSnCuBD9JHPORIPUZOd7Zr0vhHv48AeU1rpYvr/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/AVvXsEj0XvFlX0QNG-bmjC6mJDyZdzB4NHZzUZ-d-buVGB-RIZ54dgLjTmz06P2G_eCVOEc99MpnNom9Bb1IU76Y4P3MVDeuugYH9_cZciBJH30m-zwsO6Wl0x_Iphyphenhyphen4-ai_clr_Rfq5uXQ9pGlw/s320/gbr1.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq49QEhJgnFci7CSzbg7fyNN8fWkmrvDHW_MRxuFn9yXc6WW4vFVs3sfbE7alfDK-8TDhU1TpBWTry01h7zO9E_gqUGur2KbRWmNnMviReiGdl_jrK4FKcIO8YTeNl4dof8zP9-y-tMLlG/s320/gbr9.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcby5joe8Luqvh4qefA6nSeL-NRenuwKlIyzVtxsuFEs7E2jil4tI1dGUW94A0W6tpkswoVk18nvtHYDMOCpdeHxWLg_40LMUwPdOmV1_CX7jhOrjbv4YRlc_WLXb_ryxmw7ZZO98Fv_R_/s320/gbr13.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtR5gCUFTj5d-axJbN84PQfiwCmupskBfx6nmzJ-Q1pqrs4ym23wWv_adMP_Jn_qWYfi_TDBUD9EHmF2nzKhH4h-5BZE4kTpwxtC2rGOQWkn5TJV7nOA59NfMZ31htl-kT59jxrtf9hFE/s320/gbr6.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhdiaBry7hJR2T27Iuz5wxuNsN9bcYpnGPFcO9zbX-cbeqpC2N6FqZhCE8j4k-N2Xx2_VwYYm398XfaPUqlJAlUPVXBge3FBFq3yf9Fws4kILh6HatXdU7IEHllAvzg3EA2TIsjJXrU32E/s320/gbr3.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1wXQ4RVHb2STcpPXLCsq2leI6vBPX3p626X9eFTuhjRZpobPFj40JSmQXE6ic6w6O74Z2it9EsckCU_HLuwO2Hxbj6PfSCg16FPi4SiWPk9cGBVyvQDe2Bs1-LSE4Qnvj6_shR_-fSTJq/s320/gbr11.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGuliH4NXJSvweTb6MMKA9sQFplA1qrZG67TRkALLpIXWBw0Ymv89IiVbSLLXz91_UE009qhJLM7Nw3NkJuhvx15J_Ti-544s0shK_ewowVxZydRW-Gl9vqX_78iJrZddvHJETRs7wowCv/s320/gbr10.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFPMsIg2njSFq6uWc0zcX1f1b4zNbLy_-ShY7ifK4908ocsLP2KbGt9_q5VAyzqss-KCFvsgnhIt-sKd-Npi7ko4Q0vJYbMJ12XM8X6tPOozRl0n5nE7gzA7KlCQDcIlE-O-vmNpEki4G/s320/gbr114.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh49rxIsEZ1br7q2uwfsJmbrqNyZgMgsCCpLyaLmwlb_QQR-vAD6Ni5MrRICBdCJ_Z-7OU18bEJwDJoVnww47lv_ocZ_dQpodrnXFHpOQYdElfddxvvbF5saodR7FsOgt_mdvyhcHokuYih/s320/gbr7.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ooWq68AosYqqkm7yfl_wx_EIsW5hjeK6MSK8lMBMsY0sWJ9QqdLoCZ4es2ULbw_SRQVMKIhtEONeaMVmgSOUXGqVcJYwe9fOVlOeVneaDj-uzl3Nf3XWrZKkLYFvkAQnXGPSEIK1uFoO/s320/gbr4.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJV8ikG5AZDYhDv02-T6-qqHJSPbePfsVweW7G_EbE60znpGUCvygKKjw663fHN66BCi8oOBN_TkpO2AEJJDUZnek-_V4eWZQ_c2ih1DSnCuBD9JHPORIPUZOd7Zr0vhHv48AeU1rpYvr/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">
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0XvFlX0QNG-bmjC6mJDyZdzB4NHZzUZ-d-buVGB-RIZ54dgLjTmz06P2G_eCVOEc99MpnNom9Bb1IU76Y4P3MVDeuugYH9_cZciBJH30m-zwsO6Wl0x_Iphyphenhyphen4-ai_clr_Rfq5uXQ9pGlw/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq49QEhJgnFci7CSzbg7fyNN8fWkmrvDHW_MRxuFn9yXc6WW4vFVs3sfbE7alfDK-8TDhU1TpBWTry01h7zO9E_gqUGur2KbRWmNnMviReiGdl_jrK4FKcIO8YTeNl4dof8zP9-y-tMLlG/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcby5joe8Luqvh4qefA6nSeL-NRenuwKlIyzVtxsuFEs7E2jil4tI1dGUW94A0W6tpkswoVk18nvtHYDMOCpdeHxWLg_40LMUwPdOmV1_CX7jhOrjbv4YRlc_WLXb_ryxmw7ZZO98Fv_R_/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtR5gCUFTj5d-axJbN84PQfiwCmupskBfx6nmzJ-Q1pqrs4ym23wWv_adMP_Jn_qWYfi_TDBUD9EHmF2nzKhH4h-5BZE4kTpwxtC2rGOQWkn5TJV7nOA59NfMZ31htl-kT59jxrtf9hFE/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhdiaBry7hJR2T27Iuz5wxuNsN9bcYpnGPFcO9zbX-cbeqpC2N6FqZhCE8j4k-N2Xx2_VwYYm398XfaPUqlJAlUPVXBge3FBFq3yf9Fws4kILh6HatXdU7IEHllAvzg3EA2TIsjJXrU32E/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1wXQ4RVHb2STcpPXLCsq2leI6vBPX3p626X9eFTuhjRZpobPFj40JSmQXE6ic6w6O74Z2it9EsckCU_HLuwO2Hxbj6PfSCg16FPi4SiWPk9cGBVyvQDe2Bs1-LSE4Qnvj6_shR_-fSTJq/s320/gbr11.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGuliH4NXJSvweTb6MMKA9sQFplA1qrZG67TRkALLpIXWBw0Ymv89IiVbSLLXz91_UE009qhJLM7Nw3NkJuhvx15J_Ti-544s0shK_ewowVxZydRW-Gl9vqX_78iJrZddvHJETRs7wowCv/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFPMsIg2njSFq6uWc0zcX1f1b4zNbLy_-ShY7ifK4908ocsLP2KbGt9_q5VAyzqss-KCFvsgnhIt-sKd-Npi7ko4Q0vJYbMJ12XM8X6tPOozRl0n5nE7gzA7KlCQDcIlE-O-vmNpEki4G/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh49rxIsEZ1br7q2uwfsJmbrqNyZgMgsCCpLyaLmwlb_QQR-vAD6Ni5MrRICBdCJ_Z-7OU18bEJwDJoVnww47lv_ocZ_dQpodrnXFHpOQYdElfddxvvbF5saodR7FsOgt_mdvyhcHokuYih/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ooWq68AosYqqkm7yfl_wx_EIsW5hjeK6MSK8lMBMsY0sWJ9QqdLoCZ4es2ULbw_SRQVMKIhtEONeaMVmgSOUXGqVcJYwe9fOVlOeVneaDj-uzl3Nf3XWrZKkLYFvkAQnXGPSEIK1uFoO/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJV8ikG5AZDYhDv02-T6-qqHJSPbePfsVweW7G_EbE60znpGUCvygKKjw663fHN66BCi8oOBN_TkpO2AEJJDUZnek-_V4eWZQ_c2ih1DSnCuBD9JHPORIPUZOd7Zr0vhHv48AeU1rpYvr/s320/gbr2.jpg" />
</div>

Saat posting dilakukan lakukan pemadatan kode (dibuat dalam bentuk rapat sehingga bentuknya menjadi seperti di bawah ini:

<div class="bokskongkubolang"><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0XvFlX0QNG-bmjC6mJDyZdzB4NHZzUZ-d-buVGB-RIZ54dgLjTmz06P2G_eCVOEc99MpnNom9Bb1IU76Y4P3MVDeuugYH9_cZciBJH30m-zwsO6Wl0x_Iphyphenhyphen4-ai_clr_Rfq5uXQ9pGlw/s320/gbr1.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq49QEhJgnFci7CSzbg7fyNN8fWkmrvDHW_MRxuFn9yXc6WW4vFVs3sfbE7alfDK-8TDhU1TpBWTry01h7zO9E_gqUGur2KbRWmNnMviReiGdl_jrK4FKcIO8YTeNl4dof8zP9-y-tMLlG/s320/gbr9.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcby5joe8Luqvh4qefA6nSeL-NRenuwKlIyzVtxsuFEs7E2jil4tI1dGUW94A0W6tpkswoVk18nvtHYDMOCpdeHxWLg_40LMUwPdOmV1_CX7jhOrjbv4YRlc_WLXb_ryxmw7ZZO98Fv_R_/s320/gbr13.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEtR5gCUFTj5d-axJbN84PQfiwCmupskBfx6nmzJ-Q1pqrs4ym23wWv_adMP_Jn_qWYfi_TDBUD9EHmF2nzKhH4h-5BZE4kTpwxtC2rGOQWkn5TJV7nOA59NfMZ31htl-kT59jxrtf9hFE/s320/gbr6.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhdiaBry7hJR2T27Iuz5wxuNsN9bcYpnGPFcO9zbX-cbeqpC2N6FqZhCE8j4k-N2Xx2_VwYYm398XfaPUqlJAlUPVXBge3FBFq3yf9Fws4kILh6HatXdU7IEHllAvzg3EA2TIsjJXrU32E/s320/gbr3.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1wXQ4RVHb2STcpPXLCsq2leI6vBPX3p626X9eFTuhjRZpobPFj40JSmQXE6ic6w6O74Z2it9EsckCU_HLuwO2Hxbj6PfSCg16FPi4SiWPk9cGBVyvQDe2Bs1-LSE4Qnvj6_shR_-fSTJq/s320/gbr11.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGuliH4NXJSvweTb6MMKA9sQFplA1qrZG67TRkALLpIXWBw0Ymv89IiVbSLLXz91_UE009qhJLM7Nw3NkJuhvx15J_Ti-544s0shK_ewowVxZydRW-Gl9vqX_78iJrZddvHJETRs7wowCv/s320/gbr10.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFPMsIg2njSFq6uWc0zcX1f1b4zNbLy_-ShY7ifK4908ocsLP2KbGt9_q5VAyzqss-KCFvsgnhIt-sKd-Npi7ko4Q0vJYbMJ12XM8X6tPOozRl0n5nE7gzA7KlCQDcIlE-O-vmNpEki4G/s320/gbr114.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh49rxIsEZ1br7q2uwfsJmbrqNyZgMgsCCpLyaLmwlb_QQR-vAD6Ni5MrRICBdCJ_Z-7OU18bEJwDJoVnww47lv_ocZ_dQpodrnXFHpOQYdElfddxvvbF5saodR7FsOgt_mdvyhcHokuYih/s320/gbr7.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ooWq68AosYqqkm7yfl_wx_EIsW5hjeK6MSK8lMBMsY0sWJ9QqdLoCZ4es2ULbw_SRQVMKIhtEONeaMVmgSOUXGqVcJYwe9fOVlOeVneaDj-uzl3Nf3XWrZKkLYFvkAQnXGPSEIK1uFoO/s320/gbr4.jpg" /><img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJV8ikG5AZDYhDv02-T6-qqHJSPbePfsVweW7G_EbE60znpGUCvygKKjw663fHN66BCi8oOBN_TkpO2AEJJDUZnek-_V4eWZQ_c2ih1DSnCuBD9JHPORIPUZOd7Zr0vhHv48AeU1rpYvr/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!

www.ceaster.com Ceaster Corp

Read More