langkahkan kakimu di atas jalan menuju kemenangan dan jangan pernah lepas pandangan dari tujuanmu. Berilah ia segalamu setiap hari tetapi yang paling penting, pastikan kamu belajar dan menerapkan pelajaran-pelajaran yang benar setiap hari!!!!!
Jangan melihat orang lain telah melakukan hal yang lebih baik darimu. Kalahkan rekor harianmu sendiri karena kesuksesan adalah pertarungan antara kamu dan dirimu
Untuk membuat CSS3 Full Animated Show Hidden Content Onmouseover cukup mudah karena semua kode tinggal simpan di template, kemudian xHTML-nya gunakan saat posting atau di widget blog, maka segalanya akan selesai dengan teramat cepat.
Berbeda dengan biasanya, dimana show hidden content lebih banya menggunakan "KLIK" untuk membuka dan menutup, kali ini kita akan memanfaatkan mouseover sebagai trigger untuk mengorek apa yang tersembunyi di dalam box. Amat praktis karena hanya perlu sentuhan cursor dan semua bagian serta merta terlihat. Untuk menutup lepas saja cursor dan biarkan box menutup kembali seperti sedia kala.
Demonya sobat bisa lihat yang ada di blog ini !!!
Langkahnya adalah sebagai berikut:
1.Login ke BloGGeR
2.kemudian halaman "Dasboard"
3.Setelah memasuki Page Element, KLIK link "Edit HTML"
4.Back-up Template dengan cara KLIK "Download Full Template (Download Lengkap Template) dan SAVE/Simpan "File Template" di Folder PC.
5.Cari kode ]]></b:skin>, kemudian simpan kode CSS dengan posisi seperti yang terlihat di kode CSS yang tertulis di bawah.
6.Jangan Lupa KLIK "SAVE/Simpan Template".(Simpan Template)
Copy paste KODE CSS di bawah ini:
letakan sebelum kode: ]]></b:skin>
KODE CSS
.box_ontamos {
height: 45px;
width: 230px;
border: 2px solid #000;
background: #888888;
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: #555;
overflow: hidden;
box-shadow: 0 1px 15px #1E90FF;
-moz-box-shadow: 0 1px 15px #1E90FF;
-webkit-box-shadow: 0 1px 15px #1E90FF;
}
.box_ontamos:hover {
min-height: 250px;
border: 2px solid #00008B;
background: #111;
box-shadow: 0 1px 25px #1E90FF;
-moz-box-shadow: 0 1px 25px #1E90FF;
-webkit-box-shadow: 0 1px 25px #1E90FF;
color: #0000ff; text-shadow: 0 1px 1px #000;
}
.box_ontamos h3, .jerohan h3 {
font-size: 14px;
font-family: Droid Serif;
font-weight: bold;
color: #ffffff;
text-align: center;
text-shadow: 2px 2px 3px #000; margin: 3px 5px;
padding: 3px 10px;
background: #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
height: 37px;
}
.box_ontamos h3:hover {
box-shadow: 0 1px 8px #000;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
color:#800000;border: 2px solid #0000ff;
}
.box_ontamos img.mini, .negri_ontamos 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;
}
.box_ontamos img.mini:hover, .negri_ontamos 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 :#000;
-o-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
margin-top: 20px;
margin-left: 15px;
}
.box_ontamos 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);
}
.ontadalam {
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:#222;
}
.ontadalam:hover {
background: #000000;
color: #aaa;
text-shadow: 0 0px 1px #fe0303;
}
.ontadalam h3 {
margin: 20px 0;
max-width: 210px;
background: #eeeeee;
box-shadow: 0 1px 12px #004400;
-moz-box-shadow: 0 1px 12px #004400;
-webkit-box-shadow: 0 1px 12px #004400;
}
.ontadalam h3:hover {
background: #222222;
border: 1px solid #000;
border-left: 5px double #00ff00;
border-right: 5px double #00ff00;
box-shadow: 0 1px 12px #00ff00;
-moz-box-shadow: 0 1px 12px #00ff00;
-webkit-box-shadow: 0 1px 12px #00ff00;
}
.ontadalam ul {
padding: 0;
margin: 0;
list-style: none;
}
.ontadalam li {
padding: 0;
margin: 0;
list-style: none;
border-bottom:1px dotted #777;
}
.ontadalam 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;
}
.ontadalam 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;
}
<!--[if IE]>
<style type="text/css">
.box_ontamos {height: 30px; }
.box_ontamos h3, .ontadalam h3 {font-size: 13px; }
</style>
<![endif]-->
Copy paste KODE HTML di bawah ini:
letakan di Tambah Gadged
letakan di Tambah Gadged
teks
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 ...!!!!
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 ...!!!!
0 komentar:
Posting Komentar