Drop-in Conten Box atau DIV merupakan sebuah desain yang dibuat menggunakan CSS3 untuk membentuk fungsi berikut animasinya. Sedikit javascript hanya dipergunakan sebagai controll menghilangkan box dari halaman blog. Script ini amat simple dan sederhana seperti terlihat di bawah:
onclick = "if (this.className =='.....') (this.className ='.....' ) Else (this.className ='.....' ) "
Sobat blogger mania cukup meletakkan dan menyimpan seluruh kode CSS dan xHTML melalui "Add a Gadget" atau "Tambah Gadget" dan tampilah "Drop-in Conten Box atau DIV" dengan amat manisnya. Jika ingin menyimpan kode CSS di atas
]]></b:skin>
]]></b:skin>
justru akan menjadi perusak desain HTML. Jika ingin menggunakannya simpanlah CSS melaui Add a Gadget atau di bagian body atau bisa juga di bawah ]]></b:skin>
CSS Code-1 (for browsers other than IE)
<style type="text/css">
.GRmabur {
background: #888;
background: -moz-linear-gradient(top, #32013F, #CCCCCC);
background: -webkit-gradient(linear, left top, left bottom, from(#32013F), to(#fff));
border: 4px solid #777;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
position: absolute;
left: 30px;
top: -400px;
z-index: 99999999;
width: 100px;
height: 50px;
padding: 15px;
color: #00CCFF;
text-shadow: 1px 1px 1px #000;
font: 12px Tahoma;
-o-transition: all 4s linear;
-moz-transition: all 4s linear;
-webkit-transition: all 4s linear;
opacity: 1.0;
overflow: hidden;
}
.GRngilang {
position: absolute;
height: 300px;
left: -400px;
top: -1300px;
background: red;
border: 10px solid black;
overflow: hidden;
display: block;
border-radius: 60px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
-o-transition: all 10s ease-in 1s;
-moz-transition: all 10s ease-in 1s;
-webkit-transition: all 10s ease-in 1s;
opacity: 0;
}
.GRmabur h2, .GRmabur h2 a {
font-size: 22px;
text-align: center;
color: #666;
text-shadow: -1px -1px 0px #eee, 1px 1px 0px #eee;
font-family: Times;
}
.GRmabur h2 {color: blue; !important;}
.GRmabur h2 a:hover {color: red;}
.GRmabur p {
font-size: 14px;
text-align: justify;
}
body:hover .GRmabur {
height: 250px;
width: 900px;
-o-transform: translate(0, 600px);
-moz-transform: translate(0, 600px);
-webkit-transform: translate(0, 600px);
}
.GRmabur:hover {
box-shadow: -3px -3px 4px #000, 2px 2px 22px #000;
-moz-box-shadow: -3px -3px 4px #000, 2px 2px 22px #000;
-webkit-box-shadow: -3px -3px 4px #000, 2px 2px 22px #000;
}
.GRmabur img, .GRngilang img {
width: 140px;
height: 180px;
border: 2px solid #666;
padding: 4px;
float: left;
margin: 0 15px 5px 0;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: 0px 0px 15px #000;
-moz-box-shadow: 0px 0px 15px #000;
-webkit-box-shadow: 0px 0px 15px #000;
}
.adahnjero {
padding: 10px;
float: left;
overflow: auto; height: 230px;
background: rgba(0,0,0, 0.3);
border: 2px solid transparent;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
.adahnjero b {
float: right;
font-size: 18px;
color: red;
display:block;
position: absolute;
top: 20px;
right: 40px;
cursor: pointer;
}
.clr30 {clear:both; height: 30px;}
</style>
CSS Code-2 (for Internet Explorer (IE)
<!--[if IE]>
<style type="text/css">
.GRmabur {width: 900px; height: 250px;top: -400px; background: #111;}
body:hover .GRmabur{top: 230px;}
.adahnjero {background: #555; color: white;}
</style>
<![endif]-->
xHTML Drop-in Content
<div class="GRmabur" onclick="if (this.classNama=='GRmabur') { this.className='GRngilang' } else { this.className='GRngilang' }">
<div class="adahnjero">
<h2>Drop-in Content DIV-Box- DEMO</h2>bgsGR Tutorial (http://bgsgr.blogspot.com) contains a demo of some of the designs created through the HTML code, which consists of the CSS code, CSS3, Javascript and xHTML. We tried to dedicate this HTML designs, hope it's improve the spirit of blogger friends to continue working and provide the best offerings for the reader.<br/><br/>Happy blogging and create a new useful things.<br><br>Regards ...<br/><br/>
<center>
<a href="http://gubhugreyot.blogspot.com/" target="_blank" style="text-decoration: underline;">gubhug reyot </a><br/>(http://gubhugreyot.blogspot.com)</center>
<div class="clr30"></div>
<img src="http://img.theomegaproject.org/thumbs/2010/07/222.jpg" /><h2><a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Original tutorial by gubhug reyot">gubhug reyot</a></h2>
<b>Click to Close!</b>
<p>Dimitar Berbatov's rejuvenation continued as his brilliant hat-trick gave Manchester United a fully deserved win against Liverpool at Old Trafford.<br />
The Bulgarian striker scored either side of the interval - the second a stunning overhead kick - to put Sir Alex Ferguson's side in complete control against a subdued Liverpool.</p>
</div>
</div>
- Login : Login to Blogger (Login ke Blogger).
- Tuliskan User Name (Nama Pengguna) atau Email Address.
- Tuliskan Password (Sandi)
- KLIK Login
- Dasboard (Dasbor : KLIK link "Design" atau "Rancangan". Tunggu beberapa saat hingga Page Elements terbuka!
- Design (Rancangan) : Ketika halaman "Design" atau "Rancangan" terbuka maka yang sampeyan lihat adalah pada bagian "Page Elements" atau "Elemen Laman". Melalui bagian inilah kode CSS dan xHTML akan disimpan. KLIK "Add a Gadget" atau "Tambah Gadget" (box bergaris putus-putus).
- Setelah window baru terbuka, maka akan terlihat beberapa pilihan widget. Pilih dan KLIK "HTML/Javascript"
- Copy-paste : Copy semua kode (CSS-1, CSS-2 dan xHTML) kemudian pastekan di box yang tersedia.
- KLIK "SAVE/Simpan" dan buka blog untuk melihat hasilnya.
Menyimpan CSS di bagian head
Apabila dikehendaki untuk menyimpan kode CSS-nya di antara tag <head> dan tag </head>, maka sampeyan harus masuk ke "Edit HTML" setelah halaman dasboard terbuka. - Cari kode ]]></b:skin> dengan menggunakan Ctrl+F, kemudian copy dan letakkan kode CSS-1 di atas ]]></b:skin>. Buang tag <style type="text/css"> dan </style>.
- Copy dan pastekan kode CSS-2 (untuk IE) di bawah kode ]]></b:skin>.
- KLIK "SAVE Template" atau "Simpan Template".
- Gunakan xHTML melalui "Add a Gadget" atau gunakan di halaman posting.
0 komentar:
Sudah ada diskusi
Terima kasih atas Komentar anda