Demo Site

Selasa, 20 Desember 2011

Membuat Scroll Box CSS dengan Gambar


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,...


* Selamat Mencoba *

0 komentar:

Posting Komentar

cbox

Statistik site

Internet

SEO Stats powered by MyPagerank.Net

Yahoo bot last visit powered by MyPagerank.Net
Msn bot last visit powered by MyPagerank.Net

ping fast  my blog, website, or RSS feed for Free

Link Teman

Bagi anda yang ingin atau berminat menaruh link-nya di blog ini, saya persilahkan dengan senang hati, dan saya akan ngelink balik ke web anda. Isikan nama dan alamat website anda dibawah ini:

Banner Teman

..jika sobat ingin memasang banner nya disini, silahkan pasang link dan banner saya di web anda.. dan jangan lupa beri tau saya jika sudah memasangnya.. maka saya akan pasang balik..
hostgator coupon hostgator coupon 1 cent Hostgator promo