Kali ini saya mau ngasih Tutorial yg mungkin bermanfaat karena ini bisa menjadikan tempat yg efektif untuk konten yg banyak. Spoiler ini bisa digunakan pada Postingan maupun Sidebar. Spoiler ini tidak memakai Jquery dan Javascript. Ini Full menggunakan CSS. Langsung aja ke TKP untuk menemukan bahan bahan nya...
Kode CSS part 1 :
.bgsGR_onmos {
height: 32px;
width: 300px;
border: 2px solid #666666;
background: #CCCCCC;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
padding: 5px 5px;
margin: 15px auto;
font: 11px Arial;
color: #003366;
overflow: hidden;
box-shadow: 0 1px 8px #000;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
}
.bgsGR_onmos:hover {
min-height: 250px;
border: 2px solid #333333;
background: #111;
box-shadow: 0 1px 15px #000;
-moz-box-shadow: 0 1px 15px #000;
-webkit-box-shadow: 0 1px 15px #000;
color: #000; text-shadow: 0 1px 1px #888;
}
.bgsGR_onmos h3, .jerohan h3 {
font-size: 14px;
font-family: Droid Serif;
font-weight: bold;
color: #000;
text-align: center;
text-shadow: 0px 1px 1px #fff; margin: 3px 5px;
padding: 3px 10px;
background: #bbb;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #999;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
.bgsGR_onmos h3:hover {
box-shadow: 0 1px 8px #000;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
}
.bgsGR_onmos img.mini, .bgsGR_onmos img.minianima {
width: 70px;
border: 4px solid #666;
padding: 3px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
float: left; margin: 0 10px 5px 0;
background: #222;
-o-transition: all 1.5s;
-moz-transition: all 1.5s;
-webkit-transition: all 1.5s;
}
.bgsGR_onmos img.mini:hover, .bgsGR_onmos img.minianima:hover {
box-shadow: 1px 1px 15px #000;
-moz-box-shadow: 1px 1px 15px #000;
-webkit-box-shadow: 1px 1px 15px #000;
border: 4px solid #CCCCCC;
background :#666;
-o-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
margin-top: 20px;
margin-left: 15px;
}
.bgsGR_onmos img.minianima:hover {
-o-transform: scale(1.4) rotate(360deg) translate(0px);
-moz-transform: scale(1.4) rotate(360deg) translate(0px);
-webkit-transform: scale(1.4) rotate(360deg) translate(0px);
}
.jerohan {
margin-top: 15px;
height: 200px;
overflow: auto;
padding: 0 5px;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out; background: #CFE7E9;
}
.jerohan:hover {
background: #333;
color: #eee;
text-shadow: 0 0px 1px #fe0303;
}
.jerohan h3 {
margin: 20px 0;
max-width: 204px;
background: #66CCFF;
box-shadow: 0 1px 12px #eee;
-moz-box-shadow: 0 1px 12px #eee;
-webkit-box-shadow: 0 1px 12px #eee;
}
.jerohan h3:hover {
background: #888;
border: 1px solid #666;
box-shadow: 0 1px 12px #fff;
-moz-box-shadow: 0 1px 12px #fff;
-webkit-box-shadow: 0 1px 12px #fff;
}
.jerohan ul {
padding: 0;
margin: 0;
list-style: none;
}
.jerohan li {
padding: 0;
margin: 0;
list-style: none;
border-bottom:1px dotted #777;
}
.jerohan li a{
color: #03d8fe;
padding: 0;
margin: 0;
text-decoration:none;
font-size: 12px;
-o-transition: all 1.5s;
-moz-transition: all 1.5s;
-webkit-transition: all 1.5s;
}
.jerohan li a:hover {
-o-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
color: red;
text-shadow: 0 1px 1px #000;
margin-left: 20px;
}
Kode CSS part 2 :
<!--[if IE]>
<style type="text/css">
.bgsGR_onmos {height: 30px; }
.bgsGR_onmos h3, .jerohan h3 {font-size: 13px; }
</style>
<![endif]-->
Kode HTML :
<div class="bgsGR_onmos">
<h3>
CSS3 Show Hidden Content</h3>
<div class="jerohan">
<h3>
Recent Post</h3>
<ul>
<li><a href="Link-Blog-Sobat">Judul Link Sobat</a></li>
<li><a href="Link-Blog-Sobat">Judul Link Sobat</a></li>
<li><a href="Link-Blog-Sobat">Judul Link Sobat</a></li>
</ul>
<h3>
No Image and Script</h3>
<img class="minianima" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwxRH4FqCM47sx8nEZnaXza1hr44AwVFLIWp0ZYetPI_SaCP8FoTBdHYSkPXkU2FW3eZlDo4Ci78Ddi2sEgQVCASGBgbbggTXE_Dj4KOB1eR2HZCRNX7HcuZMGPvdh_de7pz2dsGCGnuo/s1600/sonal_chauhan.jpg" />Tulis Teks Sobat Di Sini.</div>
</div>
<div class="bgsGR_onmos">
<h3>
OPEN MY WORLD</h3>
<div class="jerohan">
<h3>LABEL</h3>
<ul>
<li><a href="http://rully-sc.blogspot.com/">Rully-SC</a></li>
<li><a href="http://rully-sc.blogspot.com/">Rully-SC</a></li>
<li><a href="http://rully-sc.blogspot.com/">Rully-SC</a></li>
</ul>
<h3>
HANTU</h3>
<img class="minianima" src="http://a5.sphotos.ak.fbcdn.net/hphotos-ak-ash4/378409_143736929067750_100002943326264_209514_2113713558_n.jp" />Lihatlah aku...
Aku akan menghantui malam-malam mu...
hihihihihi...</div>
</div>
-=[ Keterangan Full ]=-
[-] Kode CSS part 1 - Kode yg berwarna MERAH adalah Lebar nya[-] Kode HTML - Kode yg berwarna MERAH adalah Judul Show Hide Content yg tampil DILUAR
Kode yg berwarna PINK adalah Judul Show Hide Content yg tampil DIDALAM
Kode yg berwarna HIJAU adalah URL Gambar yg akan tampil
- Untuk memunculkan di Postingan silahkan ganti dari Compose menjadi HTML
Untuk memunculkan di Sidebar silahkan COPAS kode nya di
Tambah Gadget >> Edit HTML/Javascript
Semoga Bermanfaat Dan Budayakan Berkomentar
Tag :
Tutorial Blog
0 Komentar untuk "Cara Membuat Show Hide Content Dengan CSS3"