Box Posting kalawan Background Transparan

Anjeun tiasa ngagunakeun sagala rupa ukuran image minangka background. Pangaturan dipigawe ngaliwatan properti css background position sarta background repeat sarta background size. Kalawan dibarengan properti background size,sumawonten anjeun tiasa ememaksa hiji image kalawan ukuran anu tak luyu kalawan box tiasa barobah kaayaan selebar box.

Box Posting kalawan Background Transparan,midamelna ngagunakeun 3 buah tag DIV dina posisi relatif sarta absolute sarta menyisipkeun opacity effect kanggo meghasilkeun transparansi. Anjeun tiasa mengatur tingkat transparansi kalawan mengatur peunteun opacity. Kelir background oge tiasa anjeun robih , di manten parobahan oge kedah dibarung kalawan parobahan kelir font. Parobahan kelir font boga tujuan midamel teks tiasa terbaca kalawan gampil.

Kode CSS :

#MBboxpost{
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9QnUCYeeq1Bep6n9uucG2pA8x7jXJ-Rp2sSUQqOSmQfp5fvgCqmTSZdtJ0pPmRVecfqvuBCrLUYL4k4K05ymRHpzYCF9mFEvf4N20qatjRMY9LuwReZPsqFBQvDznkjL6hVnx1Ii2Yzoq/);
        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;
}
.MBhoveruing{
        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);
}
.MBtulisandw{
        position:relative; 
        color:#eee; /* sesuaikan warna teks dengan background-color */
}

xHTML :

<div id="MBboxpost">
<div class="MBhoveruing"></div>
<div  class="MBtulisandw">
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;