Trick Buat Box Posting dg Background Transparan

Anda dapat menggunakan berbagai ukuran image sebagai background. Pengaturan dilakukan melalui properti css background position dan background repeat serta background size. Dengan dilibatkannya properti background size, bahkan anda dapat ememaksa sebuah image dengan ukuran yang tak sesuai dengan box bisa menjadi selebar box.

Background image with transparency effect for blog posts, dibuat menggunakan 3 buah tag DIV dalam posisi relatif dan absolute serta menyisipkan opacity effect untuk meghasilkan transparansi. Anda dapat mengatur tingkat transparansi dengan mengatur nilai opacity. Warna background juga dapat anda rubah, dimana perubahan juga harus disertai dengan perubahan warna font. Perubahan warna font bertujuan membuat teks dapat terbaca dengan mudah.

Kode CSS :

#GRkolomku{
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR06VVTTMwTKK_FZ0w9m9aI40uspbJlCkvhHYJqyErsH7ThGFP2NMLbwbtZfkVYcT6OynrMOI1JELT9EptVuAHZZ4Fyf-AT074DNrpf3G2GSw2suDyHvM115kZHesdUg223oSiYWQmECY/);
        background-position:top center; /* posisi background horizontal-vertical */
        background-repeat:repeat-y; /* berulang secara vertikal */
        background-size:100% auto; /* mengatur ukuran background */
        position:relative;
        width:100%; 
        padding:10px;
        margin:-10px;
}
.GRoverlayku{
        position:absolute;
        top:0; 
        left:0;
        height:100%;
        width:100%;
        background-color:#000; /* sesuaikan background color dengan warna teks */
        opacity:0.5;
        filter:alpha(opacity=50);
}
.GRartikelku{
        position:relative; 
        color:#eee; /* sesuaikan warna teks dengan background-color */
}

xHTML :

<div id="GRkolomku">
<div class="GRoverlayku"></div>
<div  class="GRartikelku">
Content here!
</div>
</div>
</div>

Cara Membuat :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Klik "Simpan Template (Save Template)".
8. Buat posting dengan xHTML di atas kemudian buka blog untuk melihat hasilnya.

Catatan/Keterangan :

1. Sebagian keterangan sudah tertulis dalam kode CSS.
2. Jika menggunakan background image dengan ukuran kecil, rubah :
   - background-size:100% auto; menjadi » background-size:(image-width)px auto;
   - background-repeat:repeat-y; menjadi » background-repeat:repeat;
3. Warna background dan warna teks dapat diganti dengan merubah :
   - background-color:#000;
   - color:#eee;