Cara Membuat Link floating-image mengunakan css3

Pada tutorial kali ini EFA akan memposting artikel tentang  Cara Membuat Link floating-image mengunakan css3 Nah dan untuk melihat contohnya bisa sobat blogger mania lihat disebelah kiri blog EFA ini. cara membuatnyapun cukup mudah. bagi sobat blogger mania yang ingin mempraktekanya silahkan saja ikuti langkah langkah dibawah ini:

CSS Code
#pojok {
        position:fixed;
        left:2px;
        bottom:2px;
}
#pojok img {
        height:167px;
        width:20px;
        border:3px solid #888;
        padding:1px;
        background:#aaa;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
       -o-transition:all 1.2s ease-out;
       -moz-transition:all 1.2s ease-out;
       -webkit-transition:all 1.2s ease-out;
}
#pojok:hover img {
        z-index:99;
        background:#993300;
        border-color:#FF0000;
       -o-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
       -moz-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
       -webkit-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
}


xHTML

<div id="pojok">
<a href="http://fajar7siblings.blogspot.com/" target="_blank" title="You may learn about 500 of blogger tutorial, here!">
<img src="http://i1128.photobucket.com/albums/m493/wonglampung1/th_siblings.jpg" /></a>
</div>  

letakan kode  CSS  diatas ]]></b:skin> and xHTML above </body>
 dan yang berwarna pink silahkan sobat ganti dengan alamat URL yang ingin dituju sedangkan yang berwarna merah silahkan ganti dengan image gambar sobat. mudahkan. begitu aja kok repottttt............

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «