Merubah Background Posting Dengan Gambar Efek Transparansi

Untuk Menciptakan Satu efek menarik pada suatu blog , akan sedikit menggelitik perasaan seseorang untuk mencari tahu , bukan mencari tahu tentang kehidupan melainkan sebuah tampilan sebuah postingan , agar lebih menarik kita bisa membuat sebuah artikel dengan latar belakang gambar dengan gambar yang sesuai dengan isi artikel tersebut . materi posting akan terkesan lebih kuat dengan background image dengan efek transparansi yang di timbulkan .


CARA MEMBUAT :
Login ke Blogger.
Pada  "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Pada Edit template klik "Edit HTML".
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". untuk berjaga bila terjadi kesalahan.
Cari kode ]]></b:skin> Gunakan Ctrl + F atau F3 untuk mencari
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Buat posting dengan mode (pada posisi xHTML bukan Compose.

#ALvkolomku{
        background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioDLb1U5-IhSO_MyXj3O4k4KJoIVd6iBx0w6vBCPsPsc6rY1JbS6IljT6XWIe0tLWVoR_F3FCR2BNRd82yVMVHwLveTyg07BVnNBtTrPPKRjsLe36pdOZWB6rhni5vipSr1e8OHypkKBg/s320/linux-4.jpg);
        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%;
        margin:-10px;  /* dapat disusuaikan dengan halaman posting */
        padding:10px;  /* dapat disusuaikan dengan halaman posting */
}
.ALvoverlayku{
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background:#000;  /* sesuaikan background color dengan warna teks */
        opacity:0.5;
        filter:alpha(opacity=50);
}
.ALvartikelku{
        position:relative;
        color:#eee;  /* sesuaikan warna teks dengan background-color */
}

<div id="ALvkolomku">
<div class="ALvoverlayku"></div>
<div  class="ALvartikelku">
LETAKKAN ARTIKEL DI SINI!</div>
</div>

CATATAN/KETERANGAN :
Sebagian keterangan sudah tertulis dalam kode CSS.
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;
- Selain dengan cara di atas, dapat juga dilakukan dengan menghapus:
- background-position:top center;, background-size:100% auto; dan background-repeat:repeat-y;
Warna background dan warna teks dapat diganti dengan merubah :
- background-color:#000;
- color:#eee;
- Untuk mengganti Background gambar bisa merubah pada : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioDLb1U5-IhSO_MyXj3O4k4KJoIVd6iBx0w6vBCPsPsc6rY1JbS6IljT6XWIe0tLWVoR_F3FCR2BNRd82yVMVHwLveTyg07BVnNBtTrPPKRjsLe36pdOZWB6rhni5vipSr1e8OHypkKBg/s320/linux-4.jpg