Cara Membuat Dan Memasang Screensaver Di Blog

 Cara Membuat Dan Memasang Screensaver Di Blog - Kali ini saya akan share kembali artikel posting trik blog tentang cara membuat dan memasang screensaver di blog. Sebenarnya dulu sudah lama sekali sekitar satu tahun yang lalu saya sudah pernah share artikel ini, Namun karena ada kendala dan perbaikan dalam template blog saya, Akhirnya artikel ini hanya saya simpan dalam draf dan kini akan saya perbarui lagi.

 Sekedar pengertian untuk sobat KUCOPAS, Screensaver di blog ini hanyalah semacam pernak-pernik untuk mempercantik tampilan blog. Fungsinya adalah semacam Energy Saving Mode yang menggunakan CSS. Dan efeknya bisa terlihat saat bila mouse tidak di gerakkan, Maka screensaver ini akan muncul untuk menutupi halaman blog yang di buka pada layar komputer atau laptop. Namun bila mouse di gerakkan, Maka screensaver ini akan menghilang dengan gerakan memutar dan membuka lagi halaman blog tersebut.

 Trik membuat dan memasang Screensaver dengan CSS di blog ini saya dapat dari sobat TejaHTC, Namun kode CSS-nya saya modifikasi sedikit. Untuk mengetahui tampilanya screensaver di blog ini seperti apa? Kurang lebih seperti gambar screenshot berikut di bawah ini. Sobat bisa melihat efek screensaver aslinya yang sudah saya pasang di blog DEMO.

DEMO

 Cara pemasangannya di blog sangatlah mudah, Karena tanpa Edit HTML dalam template blog sobat, Jika sobat tertarik untuk membuat dan memasang screensaver dengan CSS ini di blog sobat, Silahkan sobat ikuti langkah-langkahnya sebagai berikut.

Cara Pemasangan di Blog

1. Silahkan sobat >> Masuk/Login >> Ke blog sobat.
2. Pada "Dashboard" tampilan blogger baru, Pilih dan klik menu >> Tata Letak >> klik >> Tambah Gadget >> Pilih dan klik >> HTML/JavaScript.
3. Kemudian Masukkan semua Kode CSS berikut pada kotak HTML/JavaScript.

<style type="text/css">body .saving{position: fixed;width: 100%;top: 0;left:0;height: 100%;opacity: 0.98;filter:  alpha(opacity=98);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";background: #000;border-bottom: 3px solid transparent;z-index: 999999;-o-transition: all 3s ease-in-out 10s;-moz-transition: all 3s ease-in-out 10s;-webkit-transition: all 3s ease-in-out 10s;}body:hover .saving {opacity: 0.0;height:0.001%;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";background: #0a7f01;border-bottom: 5px solid #333;-o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s;-moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;-webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;}body .saving p.esm1{margin: 0;padding: 0;width: 92%;background: transparent;font-size: 100px;font-family: "Serif", Times New Roman;color: #FF0000;text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40,   2px -10px 10px #f10;position: relative;margin-top: 200px;line-height: 20px;font-weight: bold;text-align: center;border: 30px solid transparent;border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px;-o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s;-moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;-webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s;}body:hover .saving p.esm1{font-size: 10px;color: red;width: 25%;margin: 340px 0 0 300px;padding: 25px;background: #aaa;border: 20px solid #888;border-radius: 170px;-moz-border-radius: 170px;-webkit-border-radius: 170px;-o-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in;}.saving p span.esm2{font-size: 18px;opacity: 0.5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";display: block;text-align: center;width: 300px;margin: -10px auto; font-weight: normal;padding: 2px 8px;background: #000;border: 1px solid #333;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;color: #0000FF;text-shadow: none;font-family: Arial, Helvetica, sans-serif;-o-transition: 1s ease-out;-moz-transition: 1s ease-out;-webkit-transition: 1s ease-out;}.saving:hover p span.esm2{font-size: 10px;width: 200px;padding: 0;}.saving p span.esm3{color: #ccc;font-family: "Tahoma", Arial, Helvetica;display: block;margin:10px auto;background: url http://i964.photobucket.com/albums/ae124...) left center repeat-x;background: -moz-linear-gradient(top,#666,#111);background: -webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666));opacity: 0.6;filter: alpha(opacity=60);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";width: 250px;text-shadow: 1px 1px 1px #000;border: 1px solid #333;border-radius: 4px;padding:2px 10px;-moz-border-radius: 4px;-webkit-border-radius: 4px;font-size: 12px;font-weight: normal;line-height: 16px;}.saving .by_kucopas {margin-left: 30px;text-align: center;color: #015828;font-size: 12px;font-weight: normal;position: absolute;bottom: 30px;width: 100%;height: 20px;left: 0;}.saving .by_kucopas span.esm4 {color: #aaa;font-style:italic;font-size:14px;font-weight:bold;text-transform:uppercase;}#recpost {width:210px;overflow: hidden;height: 327px;float: right;margin-top: 10px;padding: 4px 2px;background: transparent;border: 1px solid transparent;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-webkit-transition: all 1.5s ease-out;}</style>

<div class='saving'>
<p class='esm1'>KUCOPAS<br/>
<span class='esm2'>Energy Saving Mode using CSS3</span><br/><br/>
<span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan baca kembali posting kami!</span></p>
<div class='by_kucopas'>Support design by: <span class='esm4'>KUCOPAS</span> - September 2012</div>
</div>

Keterangan:

• Sobat bisa mengedit kode CSS tersebut dengan catatan bila sudah mahir mengenai kode CSS.
• Warna HIJAU silahkan sobat ganti dengan Nama sobat atau Nama blog sobat.
• Warna MERAH silahkan sobat ganti dengan kata-kata atau tulisan sesuai dengan keinginan sobat.

4. Setelah sobat selesai mengganti dan mengedit kode CSS diatas, Jangan lupa kilk >> Simpan dan nikmati hasilnya screensaver yang sudah terpasang di blog, Pada semua halaman blog sobat.

 Semoga artikel posting ringan tentang trik blog cara membuat dan memasang screensaver di blog ini, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. Happy Blogging...

---

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

---

Cara Membuat Dan Memasang Daftar Isi Blog Dengan Jquery Accordion

 Cara Membuat Dan Memasang Daftar Isi Blog Dengan Jquery Accordion - Kali ini saya akan share artikel tentang cara membuat daftar isi di blog. Namun daftar isi yang akan saya kasih triknya berikut ini bukan seperti daftar isi yang biasa, Karena daftar isi blog ini menggunakan Jquery Accordion mempunyai efek yang sangat luar biasa mengagumkan.

 Daftar isi blog dengan Jquery Accordion ini yang membuat kodenya adalah Abu Farhan, Kemudian di modifikasi lagi kodenya oleh Teja HTC. Lalu daftar isi blog Jquery Accordion ini saya edit lagi sehingga lebih mudah untuk di pasang atau di terapkan pada blog sobat semua.

 Daftar isi atau sitemap di blog memang sangat penting, Karena dapat memudahkan para pengunjung untuk mengetahui semua daftar dari isi blog itu sendiri. Kegunaan yang lain adalah agar lebih memudahkan visitor atau pengunjung blog dalam mencari konten atau artikel posting yang di butuhkan.

 Jika sobat ingin memasang iklan pada blog sobat, Kemungkinan besar blog sobat akan di review oleh pemasang iklan. Apakah layak atau tidak blog sobat di tempeli iklan dari penyedia iklan. Yang biasa menonjol di review adalah tentang apakah navigasi pencarian konten berbelit-belit dan tepat pada tujuan yang di cari atau tidak, Kemudian apakah ada pemasangan sitemap atau daftar isi pada blog atau tidak.

 Menurut webmaster, Memasang daftar isi atau sitemap pada blog itu wajib hukumnya. Sebab untuk menunjang agar menjadi suatu blog yang profesional memang harus mempunyai navigasi pencarian yang tertuju dengan benar untuk memudahkan para pengunjung atau visitor mencari apa yang di cari atau di butuhkan dalam blog tersebut.

 Mengenai tampilan atau wujud dari daftar isi blog yang menggunakan Jquery Accordion ini kurang lebih seperti seperti gambar berikut di bawah ini. Namun biasanya link dari judul akan berubah warna mengikuti warna link default dari blog sobat.

 Efek dari Daftar isi blog dengan Jquery Accordion ini akan menimbulkan efek dropdown seperti menu, Efeknya akan timbul jika mouse di arahkan dan di klik pada satu pilihan label atau kategori, Maka akan keluar daftar isi dari label atau kategori tersebut berurutan kebawah sesuai dengan banyaknya isi label atau kategori blog.

 Jika sobat tertarik untuk membuat, memasang dan menerapkannya pada blog sobat, Caranya sangat mudah. Jadi silahkan sobat ikuti langkah-langkahnya dengan teliti yang akan saya jelaskan sebagai berikut:

• Langkah Pertama:

1. Silahkan sobat >> Masuk/Login >> ke Blog sobat.
2. Pada "Dasboard" Tampilan blogger baru, Pilih Menu >> Template >> Edit HTML >> Lanjutkan.
3. Jangan lupa sobat "Centang" kotak >> Expand Template Widget.
4. Kemudian silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL+F pada keyboard sobat untuk memudahkan pencarian).
5. Jika sudah ketemu, Silahkan sobat masukkan kode CSS berikut tepat sebelum atau di atas kode ]]></b:skin>

.judul-label{background:-moz-linear-gradient(top,  #393E41,  #000000);font-weight:bold;line-height:1.4em;margin-bottom:5px;overflow:hidden;white-space:nowrap;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 1px 1px 4px #AAAAAA;box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e9e9e9;border: 2px solid white !important;background:#000 url("http://2.bp.blogspot.com/-6OcDgB9yXXI/TVfIh9HaUYI/AAAAAAAABUk/PUZFTYOTg-8/s1600/1m3.gif") no-repeat}.data-list{line-height:1.5em;margin-left:5px;margin-right:5px;padding-left:15px;padding-right:5px;white-space:nowrap;text-align:left;font-family:kristen itc;font-size:12px;}.list-ganjil{background-color:#000;color:#51A104;border-top:1px solid #FF0000;border-bottom:1px solid #FF0000}.headactive{color: #FFFFFF;border: 2px solid:#C0C0C0;!important;background: #D11717;background: -moz-linear-gradient(top,  #D11717,  #8C0000)}

Catatan:

• Warna Merah adalah Kode warna dari daftar isi yang akan di tampilkan. Sobat bisa menggantinya sesuai dengan keinginan sobat, Namun saya menyarankan tidak usah di ganti. Karena kemungkinan daftar isi akan menjadi eror.

6. Sebelum sobat klik Simpan Template, Ada baiknya sobat klik >> Preview atau Pratinjau terlebih dahulu. Guna untuk menghindari terjadinya eror saat Edit HTML dalam template blog sobat.

7. Jika hasil dari Preview atau Pratinjau tidak terjadi masalah eror, Maka silahkan sobat klik >> Simpan Template.

• Langkah Terakhir:

 Langkah yang pertama sudah selesai, Kemudian kita akan menuju ke langkah tahap yang terakhir yaitu pemasangan kode pemanggil, Agar daftar isi dengan Jquery Accordion dapat muncul dan berfungsi di blog sobat dengan baik.

Cara Memasang Daftar Isi Jquery Accordion Pada Posting Blog

1. Setelah Template di Save atau di Simpan, Sekarang silahkan sobat langsung menuju ke menu >> Post atau Tab Posting.
2. Kemudian pilih klik >> Buat Entri Baru. (Caranya seperti saat membuat postingan blog).
3. Lalu isikan judul Entri atau judul postingnya dengan judul Daftar isi, Sitemap, Table of Content atau judul yang lain seperti yang sobat inginkan.
4. Setelah itu sobat pilih Mode >> HTML bukan Compose, Lalu masukkan semua kode script berikut ke dalamnya.

 <script src="http://kucopas.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://kucopas.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

5. Yang terakhir silahkan sobat klik >> Publikasikan atau Terbitkan Entri dan lihat hasilnya pada posting blog sobat.

Catatan:

• Silahkan sobat ganti URL warna BIRU dengan Alamat URL blog sobat.

Cara Memasang Daftar Isi Jquery Accordion Pada Laman Blog

1. Setelah Template di Save atau di Simpan, Sekarang silahkan sobat langsung menuju pilih menu >> Laman >> pilih dan klik >> Laman Baru >> Pilih dan klik lagi >> Laman Kosong.
2. Kemudian  isikan judul Laman dengan judul Daftar isi, Sitemap, Table of Content atau judul yang lain seperti yang sobat inginkan.
3. Setelah itu sobat pilih Mode >> HTML bukan Compose, Lalu masukkan semua kode script berikut ke dalamnya.

 <script src="http://kucopas.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://kucopas.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

4. Yang terakhir silahkan sobat klik >> Publikasikan dan lihat hasilnya pada laman blog sobat.

Catatan:

• Ganti URL warna BIRU dengan Alamat URL blog sobat.

Cara Memasang Daftar Isi Jquery Accordion Pada Widget, Sidebar Atau Gadget Blog

1. Setelah Template di Save atau di Simpan, Sekarang silahkan sobat langsung menuju pilihan menu >> Tata Letak >> Silahkan sobat tentukan posisinya dimana daftar isi Jquery Accordion ini akan di letakkan pada blog sobat.
2. Kemudian pilih dan klik >> Tambah Gadget >> Lalu pilih dan klik lagi >> HTML/JavaScript.
3. Setelah itu sobat masukkan semua kode script berikut di bawah ini ke dalamnya.

 <script src="http://kucopas.googlecode.com/files/sitemap1.js">
</script>
<script src="http://kuc0pas.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://kucopas.googlecode.com/files/sitemap.js" type="text/javascript">
</script>

4. Yang terakhir silahkan sobat klik >> Simpan atau Save dan lihat hasilnya pada halaman blog sobat.

Catatan:

• Ganti URL warna BIRU dengan Alamat URL blog sobat.

 Sampai di sini saya kira sobat pasti sudah bisa mengerti dan paham bagaimana cara membuat dan memasang daftar isi dengan Jquery Accordion di blog sobat. Bisa sobat sudah berhasil, Jangan lupa di Like atau Follow blog saya. Namun jika sobat masih menemui kesulitan, Silahkan bertanya pada form komentar yang tersedia.

 Semoga artikel tutorial blog tentang Cara Membuat Dan Memasang Daftar Isi Blog Dengan Jquery Accordion yang saya share ini, Bisa sangat bermanfaat untuk para sobat KUCOPAS semua. Happy Blogging...

---

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

---

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 |

---