Satu Frame Dua Fungsi

Dengan kreatifitas yang kita miliki, jika memang mau membuat karya full stylish dengan bahasa kode CSS yang pas-pasan ternyata bisa juga. Intinya paham saja itu si kode buat apaan dan bagaimana hasil efek yang dihasilkan. Misalkan mau bermain dengan variabel hover bisa tengok efek yg ditimbulkanya hover effect! ^{Try search with keyword "hover" in this blog}
Kepengen bermain dengan variable position fixed bisa menghasilkan karya seni indah seperti AddThis in Fixed Position? Berawal menclok ke blog sobat Ramlan, melihat ke bagian photonya yang ganteng kalem juga kayak Koben, ada hal menarik buat dibagi :D Bagian gambar kala cursor didekatkan muncul link yang tersembunyi!!!

Digambar link tujuan lain, link yg nongol tujuannya lain juga ;)) Satu frame dua fungsi berbeda :-bd Cocok banget bagi blogger edan eling akan gaya.
Live Demo aja deh biar NGEUH...arahkan (hover) cursor ke daerah image!

Read more...

Link image tujuannya kemana, link Read more... juga kemana kan??? Itu inti dari trik kali ini sob :-"
Cucok maracok banget bagi blogger dengan konten video², cerita², pendidikan, agama dll.

Kode CSS

#kutil {
height: 100px;
width: 305px;
}

#kutil img {
height: 100px;
width: 305px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

.bisul {
position: relative;
z-index: 50;
}

.bisul span {
display: none;
}

.bisul:hover span.cacar {
right: 0;
top: 0px;
display: block;
position: absolute;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYWmLs3UoPhEMYTP8EDbREy27Fnu67cD3NUW3XnrEk-ReI0cZNXSBXw25YtbUxlRVQFcsStIo-XD4bOEFEo3rKnswVM5qvyEnstaG_LbAWYJ4Fj84Lzdy9YIQs1LEi25vmAKOampnWr0V-/) left center no-repeat;
padding: 9px 9px 9px 20px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
}

.bisul a {
color: #fff;
font-weight: bold;
text-decoration: none;
}

Lihat kode yg diberi warna pada kode CSS diatas, Koben beri dgn nama² penyakit. Itulah yg dimaksudkan dengan UNIQUE ID. Jadi kalau dipostingan gue nulis unik id sobat sudah tau :) Belum apal meletakannya dimana, sebelum kode ]]></b:skin>

Kode HTML

<div id="kutil" class="bisul">
<a href="http://link-tujuan-1.com" title="">
<img src="http://link-image.JPG" />
</a>
<span class="cacar">
<a href="http://link-tujuan-2.com" title=""> Read more...</a>
</span>
</div>Kode HTML dipakai kala sesi postingan. Oh iyah, kode CSS jika mau mengatur posisi/float, tinggi & lebar image tinggal menambahkan saja. Contoh kan namanya juga, jadi standarisasi saja. Hias menghiasi tinggal daya kreasi masing² \m/
Semoga bermanfaat :)