Memasang Slide box (Auto Show/Hide) Muncul ketika Hover dengan Css | Ciskulnet

Kumpulan tutorial dan artikel seputar teknologi

Memasang Slide box (Auto Show/Hide) Muncul ketika Hover dengan Css

21:18

         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.

Related Post:
- Hide Comments

0 Komentar Untuk "Memasang Slide box (Auto Show/Hide) Muncul ketika Hover dengan Css"

Berkmentarlah dengan baek dan sopan
- jangan melakukan spam ataupun sara Home

Artikel Rekomendasi

Related Post

Powered by Blogger.
Copyright © 2017 Ciskulnet All Rights Reserved - Template by Djasnote
^