Membuat Show Hidden Content dengan CSS3

By Rey 05:32 Post a Comment

Membuat Show Hidden Content dengan CSS3 - Assalamualaikum sobat :D Sobat pernah tau apa itu Show Hidden Content ? apalagi pembuatannya di bantu oleh saudara CSS3. Pasti tambah wahh wah se wah nya. :D

Gak sabar ? Oke, langsung TKP :D

1. Login Blogger.com

2. Klik Bagian Template > Edit HTML > centang Expand Widget Templates

3. Masukkan Kode berikut di atas kode ]]></b:skin>

.bgsC_onmos {
      height: 32px;
      width: 260px;
      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; 
      }
.bgsC_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;
      }
.bgsC_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; 
      }
.bgsC_onmos h3:hover {
      box-shadow: 0 1px 8px #000;
      -moz-box-shadow: 0 1px 8px #000;
      -webkit-box-shadow: 0 1px 8px #000; 
      } 
.bgsC_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;
      }
.bgsC_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;
      }
.bgsC_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;
      }

]]></b:skin>

Dan Save tuh editan.
Kemudian Buka Layout > Add a Gadget > Add HTML/ Javascript
Kemudian Masukkan kode berikut

<div class="bgsC_onmos">
<h3>
CSS3 Show Hidden Content</h3>
<div class="jerohan">
<h3>
CSS3 Show Hidden Content</h3>
<img class="mini" src="http://img.theomegaproject.org/thumbs/2009/11/121.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
<br />
<h3>
New Post</h3>
<ul>
<li><a href="http://www.blogger.com/Link-1">Tuliskan disini : Link Title-1</a></li>
<li><a href="http://www.blogger.com/Link-2">Tuliskan disini : Link Title-2</a></li>
<li><a href="http://www.blogger.com/Link-3">Tuliskan disini : Link Title-3</a></li>
<li><a href="http://www.blogger.com/Link-4">Tuliskan disini : Link Title-4</a></li>
<li><a href="http://www.blogger.com/Link-5">Tuliskan disini : Link Title-5</a></li>
<li><a href="http://www.blogger.com/Link-6">Tuliskan disini : Link Title-6</a></li>
<li><a href="http://www.blogger.com/Link-7">Tuliskan disini : Link Title-7</a></li>
<li><a href="http://www.blogger.com/Link-8">Tuliskan disini : Link Title-8</a></li>
<li><a href="http://www.blogger.com/Link-9">Tuliskan disini : Link Title-9</a></li>
<li><a href="http://www.blogger.com/Link-10">Tuliskan disini : Link Title-10</a></li>
</ul>
<h3>
No Image and Script</h3>
<img class="minianima" src="http://img.theomegaproject.org/thumbs/2010/06/517.jpg" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks? Atau mungkin deretan menu dan link lain mo ditampilkan di collapsible ini? Semua sudah tertata dengan rapi dengan ukuran yang sangat ideal. Sampeyan tinggal masukkan saja sebanyak sampeyan mau. Plung ... plung ... plung ... dan berkarung-karung akan terwadahi. yah ... asal jangan masukkan yang berbau busuk saja. He ... he .... 'ntar pengunjung pada lari kesetanan kaya dikejar babi hutan kesurupan mabok oplosan, he ...... he ...!!!!
</div>
</div>

Simpan dan lihat hasilnya. Oke, sekian dulu tutorial dari saya sobat ^^

Artikel Kecil

Widget Atas Posting

Membuat Show Hidden Content dengan CSS3

Keyword - Membuat Show Hidden Content dengan CSS3

Post a Comment for "Membuat Show Hidden Content dengan CSS3"