Membuat Scroll Box CSS3 dengan Gambar

Ini adalah contohnya

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Lalu cari kode ]]></b:skin> dan letakkan kode CSS berikut diatasnya :

.boxe {
float: left;
margin: 20px 2px;
padding: 4px 2px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #eee url(http://i164.photobucket.com/albums/u14/simointer89/itachi.gif);
}
.boxe-1 {
margin: 0px auto;
width: 200px;
height: 100px;
border: 2px solid #676767;
background: #cccccc;
background: rgba(0,0,0, 0.2);
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
box-shadow: 1px 1px 10px rgba(0,0,0, 0.9);
-moz-box-shadow: 1px 1px 8px rgba(0,0,0, 0.9);
-webkit-box-shadow: 1px 1px 10px rgba(0,0,0, 0.9);
}
.boxe-2 {
margin: 10px auto;
margin-left: 10px;
margin-right: 10px;
background: #7a7a7a;
background: rgba(0,0,0, 0.2);
padding: 4px;
text-align: center;
border: 1px solid #aaa;
border: 1px solid rgba(0,0,0, 0.04);
box-shadow: 1px 1px 6px #fff;
-moz-box-shadow: 1px 1px 10px #fff;
-webkit-box-shadow: 1px 1px 6px #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font: 18px Serif;
color: #FFCC99;
text-shadow: 1px 1px 1px rgba(0,0,0, 1.0);
}
.boxe-3 {
margin: 0 5px 5px 5px;
float: left;
background: #c2c2c2;
background: rgba(0,0,0, 0.05);
padding: 4px;
max-height: 312px;
border: 1px solid #888;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
box-shadow: 1px 1px 20px #fff;
-moz-box-shadow: 1px 1px 20px #fff;
-webkit-box-shadow: 1px 1px 20px #fff;
}
.boxe-4 {
float: left;
margin: 2px;
padding: 3px;
background: #575656;
background: rgba(0,0,0, 0.4);
height: 300px;
overflow: auto;
overflow-x: hidden;
text-align: justify;
line-height: 15px;
font-family: Tahoma;
font-size: 12px;
border: 1px solid #666;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color: #eee;
text-shadow: 1px 1px 1px #000;
}

NB:
ganti teks yang berwarna merah.sesuai keinginan anda.
Alamat url gambar : http://i164.photobucket.com/albums/u14/simointer89/itachi.gif
width: 200px;
height: 100px;

7. Terakhir copy kode dibawah ini dan letakkan di kolom entri/Membuat Posting.

<div class="boxe">
<div class="boxe-1">
<div calass="boxe-2">
xXx</div>
<div class="boxe-3">
<div class="boxe-4">
Isikan dengan teks ataupun yang lainya
</div>
</div>
</div>
</div>

8. Save

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post