Cara Membuat CSS3 Full Animated Show Hidden Content Onmouseover Di Blog

 Cara Membuat CSS3 Full Animated Show Hidden Content Onmouseover Di Blog - Kali ini saya akan share tips dan trik seputar dunia blogger, Yaitu Cara Membuat CSS3 Full Animated Show Hidden Content Onmouseover Di Blog. Tips dan trik ini bisa berguna untuk memperindah dan mempercantik tampilan blog sobat.

 Fungsi dari CSS3 Full Animated Show Hidden Content Onmouseover ini adalah jika mouse komputer, laptop atau netbook sobat menyentuh atau di arahkan pada CSS3 tersebut yang berada di blog sobat, Maka akan menimbulkan efek show hidden (buka tutup) seperti menu drop down. Namun lebih menariknya lagi di dalamnya sobat bisa meletakkan link seperti menu yang bergerak maupun gambar atau foto dengan efek berputar dan juga tulisan atau teks.

 Agar sobat bisa lebih faham tentang tampilan dari CSS3 Full Animated Show Hidden Content Onmouseover seperti apa, Dibawah ini saya akan memberikan contoh tampilannya. Silahkan sobat arahkan mouse ke CSS3 show hidden content dan juga foto yang ada di dalamnya untuk melihat efek yang ditimbulkannya.

CSS3 Show Hidden Content

Recent Post

• Judul Link Sobat
• Judul Link Sobat
• Judul Link Sobat

No Image and Script

Tulis Teks Sobat Di Sini.

OPEN MY WORLD

LABEL

• Tutorial Blog
• Trik Blog
• Tips Blog

HANTU

Lihatlah aku...
Aku akan menghantui malam-malam mu...
hihihihihi...

 Jika sobat tertarik untuk membuat dan memasang CSS3 Full Animated Show Hidden Content Onmouseover di blog sobat, Caranya sangat mudah. Karena semua kodenya tinggal di taruh dan di simpan pada template blog sobat. Kemudian xHTML-nya bisa di pasang pada posting atau di widget blog sobat. Silahkan sobat ikuti langkah-langkahnya sebagai berikut dibawah ini:

1. Silahkan sobat >> Login/masuk >> ke Blog sobat.

2. Pada halaman "Dasboard" Tampilan blogger baru, Sobat pilih menu >> Template >> Edit HTML >> Lanjutkan.

3. Jangan lupa sobat "Centang" >> Expand Template Widget.

4. Kemudian sobat cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).

5. Setelah ketemu, Taruh kode CSS berikut tepat sebelum atau diatas kode ]]></b:skin>

.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;
      }

6. Lalu sobat taruh lagi kode CSS berikut tepat sesudah atau di bawah kode ]]></b:skin>

<!--[if IE]>
<style type="text/css">
.bgsGR_onmos {height: 30px; }
.bgsGR_onmos h3, .jerohan h3 {font-size: 13px; }
</style>
<![endif]-->

Catatan:

• Contoh penerapan kode CSS-nya yang tepat akan nampak terlihat seperti di bawah ini:

.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;
      }

]]></b:skin>

<!--[if IE]>
<style type="text/css">
.bgsGR_onmos {height: 30px; }
.bgsGR_onmos h3, .jerohan h3 {font-size: 13px; }
</style>
<![endif]-->

• width: 300px; adalah Lebar CSS3 Full Animated Show Hidden Content Onmouseover Di Blog sobat, Silahkan di ganti nilainya agar sesuai dengan template sobat.

• Untuk pengaturan yang lainya, Silahkan sobat edit dan berexsperimen sendiri sesuai dengan keinginan sobat.

7. Setelah dirasa sudah cukup dan selesai mengedit kodenya, Jangan lupa sobat klik >> Preview atau Pratinjau, Demi untuk mencegah terjadinya kesalahan saat Edit HTML. Jika tidak terjadi eror, Silahkan sobat klik >> Save atau Simpan Template.

8. Sekarang saatnya sobat menuju ke langkah yang berikutnya, Yaitu cara agar bisa tampil di blog sobat.
Silahkan sobat masukkan semua kode xHTML Animated Show Hidden Content di bawah ini:

<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/AVvXsEjF-msJ95wDQ5mBN-x91yPMm8FXxiPLMSeGYqOpQEU3Qvxl46Xv_YAkYlM73otPGoqCm2XKyj-DjX3CLdHxnl82DoYf2kQwEuD2DHxm72ou0h9pqTr4DCR_4QMHSzFOfr2Es4pbV1axb-U/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://kuc0pas.blogspot.com/">Tutorial Blog</a></li>
<li><a href="http://kuc0pas.blogspot.com/">Trik Blog</a></li>
<li><a href="http://kuc0pas.blogspot.com/">Tips Blog</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:

• Warna Merah adalah Judul Animated Show Hidden Content yang akan tampil di luar, Silahkan sobat ganti sesuai dengan keinginan sobat.

• Warna Pink adalah Judul Animated Show Hidden Content yang akan tampil di dalam, Silahkan sobat ganti sesuai dengan keinginan sobat.

• Warna Biru adalah Link atau alamat URL, Silahkan sobat ganti dengan Link sobat.

• Warna Orange adalah Judul Link yang akan terlihat, Silahkan sobat ganti sesuai dengan keinginan sobat.

• Warna Hijau adalah Alamat URL gambar atau foto yang akan tampil, Silahkan di ganti dengan alamat URL gambar atau foto milik sobat.

• Warna Ungu/Purple adalah Tulisan atau teks yang akan tampil di samping gambar atau foto, Silahkan sobat ganti dengan tulisan atau teks seperti yang sobat inginkan.

Catatan:
 Kode xHTML bisa sobat terapkan di halaman posting maupun di pasang pada widget blog sobat.

• Cara penerapan di halaman posting >> Silahkan sobat taruh kode xHTML-nya diatas pada mode HTML bukan Compose.

• Cara memasang pada Widget blog >> Pada "Dashboard" Silahkan sobat pilih Menu >> Tata Letak >> Tambah Gadget >> Kemudian pilih >> HTML/JavaScript. Letakkan semua kode xHTML diatas kedalam kotak HTML/JavaScript, Lalu klik >> Simpan/Save.

• Selesai dan sobat bisa melihat hasilnya.

 Sampai disini saya rasa sobat pasti sudah paham dan mengerti bagaimana Cara Membuat Dan memasang CSS3 Full Animated Show Hidden Content Onmouseover Di Blog. Jika sobat mempraktekan caranya sesuai dengan langkah-langkah yang sudah saya berikan, Dapat di pastikan sobat akan berhasil memasangnya di blog sobat. Namun jika sobat masih kesulitan dan belum berhasil, Silahkan bertanya pada form comment yang tersedia. Tapi jika sobat sudah berhasil, Jangan lupa like atau follow blog KUCOPAS ini.

 Semoga penjelasan artikel posting yang saya share ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Selamat berkarya terus dalam mendesign blog, Happy blogging...

---

| Supported by http://kuc0pas.blogspot.com |

---