Effek Hujan Dhuwit

Effek hujan uang sebenarnya merupakan pengembangan dari effek hujan salju atau snow effect. Untuk merubah salju menjadi bentuk uang anda hanya perlu membuat sebuah gambar baru berbentuk uang kemudian upload melalui boks posting blogger. Gunakan URL hasil upload tadi dengan menempatkannya di javascript. Anda dapat mengganti image dengan berbagai image yang lain dan sebutlah effeknya sesuka anda sesuai dengan image yang digunakan.

Tutorial :
Back to tutorial

Create body background using javascript

Umumnya, membuat atau menambah sebuah background image pada body dilakukan menggunakan kode CSS, namun kali ini kita akan membuatnya menggunakan javascript. Sangat simple dan amat mudah menggunakannya. Letakkan dan simpan javascript di atas kode </body> dan segera buka blog untuk melihat bagaimana javascript ini bekerja. Jika anda tak merubah image yang digunakan sebagai background pada javascript, maka halaman blog anda akan terlihat seperti di blog ini (lihat di sisi kanan dan kiri halaman yang background-nya terlihat seperti dari bahan serat kayu/wood.

Template Tata Letak :

Javascript :

<script type="text/javascript">
if (document.all||document.getElementById)
document.body.style.background="url('https://lh3.googleusercontent.com/-TsO62JV2VfU/T24gYRSDWOI/AAAAAAAAAgs/1R-WamNCKkU/s128/gubhugreyot_wood-01.gif') center repeat"
</script>

Blogger Template Designer :

Javascript :

<script type="text/javascript">
document.write("<style>.body-fauxcolumn-outer .cap-top{z-index:0;opacity:0.0;filter:alpha(opacity=0);</style>");
if (document.all||document.getElementById)
document.body.style.background="url('https://lh3.googleusercontent.com/-TsO62JV2VfU/T24gYRSDWOI/AAAAAAAAAgs/1R-WamNCKkU/s128/gubhugreyot_wood-01.gif') white center repeat"
</script>

Tutorial :
Back to tutorial

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;

Background Image di Header Blog dg Kode CSS

Contoh Kode CSS untuk Background Header Blogger Template Designer

Anda bisa mencoba contoh ini menggunakan Dreamwaver, Adobe Dreamweaver CS5 dan CS5.5 atau memasang di blog. Apabila digunakan untuk blog, gunakan kode CSS yang telah diberi tanda. Anda dapat mengatur ukuran background image dengan merubah nilai pada properti CSS background-size:808px 160px;, dimana 808px adalah lebar background image sedang 160px merupakan tinggi background image.

DEMO Background Header dg Kode CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating a Background Image in Blog Header with CSS Code</title>

<style type="text/css">
#header-inner{
       margin:50px auto;
       padding:4px;
       width:808px;
       height:160px;
       border:2px solid #000;
       background:#999;
}
/* Kode CSS yang diperlukan untuk membuat background header Blogger Template Designer - START */
#header-inner{
       position:relative;
       background:#666 url('http://gubhugreyot-image-post.googlecode.com/files/gubhugreyot_bridge-900-200.jpg') center no-repeat;
       background-size:808px 160px;
}
#header-inner:before{
       position:absolute;
       display:block;
       width:58px;
       height:50px;
       left:60px;  /* code by: http://gubhugreyot.blogspot.com */
       top:0px;
       content:url('https://lh5.googleusercontent.com/-WVnUd2BO_UQ/TzvcQeXo4XI/AAAAAAAAAL8/av3xRaGcXjw/h120/gubhugreyot-animasi-pesawat-terbang-02.gif');
}
#header-inner:after{
       position:absolute;
       display:block;
       font-size:27px;
       color:red; /* code by: http://gubhugreyot.blogdetik.com */
       text-shadow:1px 1px 1px #000;
       right:20px;
       bottom:10px;
       content:"http://gubhugreyot.blogspot.com";
}
/* Kode CSS yang diperlukan untuk membuat background header Blogger Template Designer - END */
</style>

</head>

<body>

   <div id="header-inner"></div>
 
</body>
</html>