Show Hide Panel

Akhirnya setelah sekian waktu saya tidak posting artikel, sekarang sudah bisa posting. Pada kali ini saya akan memberikan materi tentang CSS3. Saya di sini hanya bermaksud membantu anda yang ingin blognya sedikit menjadi lebih berwarna. Tutorial ini saya dapat dari web sebelah. Langsung saja anda masuk ke blogger dan klik "Tambah Gadget" dan salin kode di bawah ini dan letakkan di dalam formulirnya.

<article>
<header>
<h1><a href="#show">Show</a> / <a href="#">Hide</a></h1>
</header>
<p id="show">Cobalah mensyukuri apa yang telah engkau dapat, maka Tuhan akan menambah nikmatmu yang lebih banyak :D</p>
</article>

Masih di dalam form yang widget yang tadi masukkan juga kode berikut
<

<style type="text/CSS">
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,900);
*{
margin: 0;
padding: 0;
}
body{
background:rgb(32,82,135);
}
article{
margin:20px 0px 0px 180px;
width:400px;
height:300px;
z-index:-3;
overflow:hidden;
}
article header h1{
background-color:rgb(14,14,14);
font-family:Lato;
font-weight:900;
font-size:17px;
color:rgb(255,255,255);
padding:6px 10px 6px 10px;
-webkit-box-shadow:0px 5px 5px -5px rgb(0,0,0);
-moz-box-shadow:0px 5px 5px -5px rgb(0,0,0);
box-shadow:0px 5px 5px -5px rgb(0,0,0);
z-index:2;
}
article header h1 a{
color:rgb(255,255,255);
text-decoration:none;
}
article header h1 a:hover{
border-bottom:1px dotted rgb(255,255,255);
}
article p#show{
background-color:rgb(35,35,35);
font-family:Lato;
font-weight:400;
color:rgb(255,255,255);
padding:15px 15px 15px 15px;
width:340px;
position:relative;
top:-230px;
margin:auto;
z-index:-1;
overflow:hidden;
-webkit-transition:0.8s ease;
-moz-transition:0.8s ease;
-o-transition:0.8s ease;
transition:0.8s ease;
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.8);
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.8);
box-shadow:0px 0px 2px rgba(0,0,0,0.8);
}
article p#show:target{
top:0px;
}
</style>

Lalu langkah terakhir klik simpan dan lihat hasilnya.
Untuk demonya ada bisa di lihat di sini Show Hide Panel