Senin, 13 Februari 2012

Membuat Scroll Box CSS dengan Gambar

. Senin, 13 Februari 2012
0 komentar


Baiklah Langsung saja ikuti langkah-langkahnya :
1. Login ke blogger
2. Rancangan
3. Edit html
4. 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;
}

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

5. terakhir copy kode dibawah ini dan letakkan di kolom entri/Membuat Posting.

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

6. Selesai dech,...
READ MORE - Membuat Scroll Box CSS dengan Gambar

 

Lorem ipsum 10

Gansget Community Is Proudly Powered By o-om.com | Modif by BLOG SulthanYusuf