Home » » Membuat Menu Scrollbox Elastis

Membuat Menu Scrollbox Elastis


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. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatasnya :
.elastcx {
float: left;
position: relative;
width: 170px;
height: 200px;
margin: 0 10px 5px 0;
}
.elastbx {
top: 0; left: 0; position: absolute;
line-height: 11px;width: 150px;    height: 188px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtcjHZmWWJXjv2Op-v64ACFU_NxQ2BfRZ6SzHbJbDhEFl3Fe17z0vg65SVr7TMMUnZGnM_I_aQ5SbvlW8R-GbmlK0F5lQcSK3tbo6c_my1Kf-xO-M4N0wR7JJvVQQVImT1iC-5YRNptrND/s1600/papers.jpg) repeat;
border: 2px solid #999999;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;  
border-top-left-radius: 12px;
border-bottom-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-bottomright: 12px;
-webkit-border-top-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
overflow-x: hidden;
font-family: trebuchet ms;font-size: 9px;
padding: 8px 8px 15px;
overflow: hidden;-o-transition: all 0.9s ease-out;
-moz-transition: all 0.6s ease-out;
-webkit-transition: all 0.9s ease-out;
}
.elastbx:hover {
line-height: 15px;width: 500px; height: 300px;
color: #000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtcjHZmWWJXjv2Op-v64ACFU_NxQ2BfRZ6SzHbJbDhEFl3Fe17z0vg65SVr7TMMUnZGnM_I_aQ5SbvlW8R-GbmlK0F5lQcSK3tbo6c_my1Kf-xO-M4N0wR7JJvVQQVImT1iC-5YRNptrND/s1600/papers.jpg) repeat;
font-size: 14px;overflow: auto;
}
8. Save


9. Untuk menerapkannya pada posting, simpan kode berikut pada edit html posting anda :
<div class="elastcx">
<div class="elastbx">Masukkan teks nya disini kaw an.........Masukkan teks nya disini kawan.........Masukkan teks nya disini kawan.........Masukkan teks nya disini... </div></div>
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .