Cara Membuat Show Hidden Content Onmouseover Di Blog

KUCOPAS - Cara Membuat 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 diblog. 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 pointer komputer, laptop atau notebook sobat menyentuh atau di arahkan pada content tersebut yang berada di blog sobat, maka akan menimbulkan efek show hidden (buka tutup) seperti menu drop down. Namun lebih menariknya lagi didalamnya sobat bisa meletakkan link seperti menu maupun gambar atau foto dengan efek berputar dan juga tulisan atau teks.

Agar sobat bisa lebih faham tentang bagaimana tampilan dari CSS3 Full Animated Show Hidden Content Onmouseover seperti apa, sobat dapat melihat langsung contoh tampilannya pada blog Demo Kucopas. Silahkan sobat arahkan mouse pointer pada CSS3 show hidden content onmouseover dan juga foto yang ada di dalamnya untuk melihat efek yang ditimbulkannya.

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.

Cara Membuat Dan Memasang CSS3 Full Animated Show Hidden Content Onmouseover Di Blog

1. Silahkan sobat >> Login/Masuk >> ke Blogger.com menggunakan akun sobat.

2. Pada halaman Dasboard tampilan blogger baru, sobat pilih Menu >> Template >> Edit HTML.

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

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

5. Lalu sobat taruh lagi kode CSS berikut tepat setelah atau dibawah 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, dilahkan di ganti nilainya agar sesuai dengan template sobat.

• Untuk pengaturan yang lainya, dilahkan sobat edit dan ber-exsperimen sendiri sesuai dengan keinginan sobat.

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

7. 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/AVvXsEiA1rVd6MYMGHrB93Wo4JU9FBaq4t-pzItb8SdSc-LQutCO6arD4Ir9TBeXYMfBRVV_25lt41DuaGFBoyWtP68E6R1n9L-sgdUNxcrpDVN1_yAlA-M1fCatN5KWbE-pdcKnUvrvWd7Gu34/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 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 tentang Cara Membuat Show Hidden Content Onmouseover Di Blog yang saya share ini, bisa sangat bermanfaat bagi sobat KUCOPAS semua. Selamat berkarya terus dalam mendesign blog, Happy blogging...