Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Drop-in Content DIV-Box with Animation Using CSS3 Transition-Transformation

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 ='.....' ) "

Sampeyan 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>, sampeyan harus menghapus tag <style type="text/css"> beserta tag penutupnya </style>, karena penyimpanan dengan melibatkan tag seperti tersebut di atas kode ]]></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>.

DEMO

Silahkan melihat demonya dengan membuka link demo berikut!

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>

How to use CSS Code and xHTML

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



Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :








» Happy Blogging - gubhugreyot «


2 komentar:

  1. Bang... keren bgt.. tapi aq coba kook gagal.. mohon pencerahanya...

    BalasHapus
  2. Sekali lagi sukses diblog saya... Caranya gimana yagg Pak untuk membuat Widget ini aktif pada saat pertama masuk saja?? Karena, Untuk sementara ini, widget ini aktif setiap buka sesuatu diblog saya.. Terima Kasih sebelumnya

    BalasHapus

 
GR | Edited by | gubhug reyot