Kali ini ane akan bagikan gadget/widget yang keren simple dan ringan :D. widget ini 100% ringan karena dibuat dengan cinta, css dan html (tanpa javascript).
Untuk demonya bisa dilihat di gambar samping.
Kegunaannya sangat beragam, selain bisa untuk iklan bisa juga untuk promo atau dipasang widget lain.
Untuk memasang Slide box silahkan masuk ke blog kamu terus tambahkan gadget Html/javascript lalu masukan code berikut:
<style>
#indcer{z-index:9999;
top:10px;
position: fixed;
right: -190px;
height: 100px;
background: black;
padding: 10px;
padding-right: 0;
transition: all 0.7s ease 0s;
border-radius: 6px;}
#indcer:hover{right:0;}
#indbox{
margin-left: 50px;
background: black;
padding: 15px;
}
#judul{ color: white;
font-size: 22px;
transform: rotate(-90deg);
width: 100px;
left: -20px;
top: 40px;
position: absolute;}
</style>
<div id="indcer">
<div id="indbox">
<div id="judul">Geroxs</div>
<script language="javascript" src="http://www.cpmfun.com/getad.php?49757;86114;160x600"></script>
</div>
</div>
Keterangan:
teks berwarna merah adalah judul slide box kamu
teks yang berwarna biru adalah script iklan atau gadget lainnya
teks yang berwarna hijau untuk warna background
dan texk berwarna kuning untuk mengatur posisi
Ok sekian post kali ini jika gadget bermasalah silahkan berkomentar di kotak komentar ya, coba juga tools yang sudah saya buat yaitu css visualisasi yang bisa di lihat atau di coba disini.
0 Komentar Untuk "Memasang Slide box (Auto Show/Hide) Muncul ketika Hover dengan Css"
Post a Comment
Berkmentarlah dengan baek dan sopan
- jangan melakukan spam ataupun sara Home