Posted by AWAN THE KILL
-
-
Gambar bocah striptis disamping benar - benar tidak ada hubungannya sama contoh Show Hidden Content Onmouseover Widget ini, karena contohnya sahabat bisa lihat widgetnya disamping artikel ini silakan
klik disini setelah sahabat klik sahabat bisa lihat disamping artikel ini ada widget tepatnya sebelah kiri, itulah contoh widget Show Hidden Content Onmouseover Widget. Setelah tahu mari kita menuju TKP pembuatanya.
LANGKAH PERTAMA Membuat Show Hidden Content Onmouseover Widget
- Tentu saja Login ke Blogger.
- Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
- Tuliskan "Password ".
- KLIK "Login".
- Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)". KLIK link "Design (Rancangan)"..
- Design/Rancangan : Cari dan klik link "Edit HTML".Cari kode ]]></b:skin>.
- Kemudian Letakkan dan simpan semua kode CSS dibawah ini tepat di atasnya.
.bgsGR_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;
}
.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;
}
LANGKAH KEDUA Membuat Show Hidden Content Onmouseover Widget
Masih berada pada menu Edit HTML dan masih mencari ]]></b:skin> ( untuk lebih memudahkan silahkan tekan tombol CtrL dan F bersamaan lalu paste ]]></b:skin didalam kotak pencarian ) Setelah ketemu silahkan copy dan pastekan kode dibawah ini tepat dibawahnya ]]></b:skin>`ingat dibawahnya hee.... hee....... Jika Sudah Silahkan Save Template sahabat.
<!--[if IE]>
<style type="text/css">
.bgsGR_onmos {height: 30px; }
.bgsGR_onmos h3, .jerohan h3 {font-size: 13px; }
</style>
<![endif]-->
LANGKAH KETIGA Membuat Show Hidden Content Onmouseover Widget
Kembali Buka dasboard Blog sahabat, kemudian klik rancangan tambah gadget
KLIK "HTML/Javascript". Setelah box penyimpanan widget terlihat, masukkan kode dengan copy-paste.
KLIK SAVE/Simpan. Lihat hasilnya
<div class="bgsGR_onmos">
<h3>
ASMAN COUNTER</h3>
<div class="jerohan">
<h3>
BLOGGER TINGGI</h3>
<img class="mini" src="
http://i52.tinypic.com/i74lrk.gif" />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 ...!!!!
<h3>New Post</h3>
<ul>
<li><a href="Link-1">Tuliskan disini : Link Title-1</a></li>
<li><a href="Link-2">Tuliskan disini : Link Title-2</a></li>
<li><a href="Link-3">Tuliskan disini : Link Title-3</a></li>
<li><a href="Link-4">Tuliskan disini : Link Title-4</a></li>
<li><a href="Link-5">Tuliskan disini : Link Title-5</a></li>
<li><a href="Link-6">Tuliskan disini : Link Title-6</a></li>
<li><a href="Link-7">Tuliskan disini : Link Title-7</a></li>
<li><a href="Link-8">Tuliskan disini : Link Title-8</a></li>
<li><a href="Link-9">Tuliskan disini : Link Title-9</a></li>
<li><a href="Link-10">Tuliskan disini : Link Title-10</a></li>
</ul></div></div>
Silahkan sahabat ganti Link dan tulisan yang berwana
Merah dan
biru sesuai dengan yang sahabat inginkan. Selamat Mencoba.
