Tips Membuat Widget Floating Image

Hello kali ini gue mau ngepost tips membuat Widget Floating Image. Yang kayak gimana? Lihat dipojok kiri blog gue. Nah kayak gitu. So.. dibawah ini nih caranya.

Langkah         :
a. Setelah masuk  ke dasborb. 

b. Ikuti langkah-langkah pada gambar

    

c. Setelah mengikuti langkah 4. Akan muncul kotak dialog dan Copy tulisan dibawah ini.

<style type="text/css">
#corner {
        position:fixed;
        left:10px;
        bottom:5px;
}  
#corner img {
        height:67px;
        width:100px; 
        border:1px 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;
}  
#corner:hover img {
        z-index:99;
        background:#666666;
        border-color:#333333;
       -o-transform:rotate(360deg) scale(1.3) translate(25px,-30px);
       -moz-transform:rotate(360deg) scale(1.3) translate(25px,-30px);
       -webkit-transform:rotate(360deg) scale(1.3) translate(25px,-30px);
}

 </style>

<div id="corner">

<a href="https://twitter.com/uulululule" target="_blank" title="MyTwitter">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8oXK2ivA88WqvCjUhYPnakySWwqwdBPLL2u735Qj5O-w2vIKkcUbYumzMpT04xAUfydVBIArZA61kz9beLMBEMA7ofhh1IcDiefVruJfzUBml3T3ovModMNi_K4qZ2jin8Zk6I71xMYY/s400/twitter.jpg"/></a>

</div>

d.  Ubah
e. Setelah itu jangan lupa disave deh.

   Biru     : alamat halaman yang diinginkan

  Ungu   : gambar yang diinginkah

Eits ada tambahannya nih...

pada kotak

a. "left" nya dapat diganti dengan "right". itu berguna untuk mengubah penempatan gambar baik dikanan atau     dikiri.

b. height atau  width nya dapat diubah sesuai keiginin. berguna unttuk menentukan gambar foto.

nah segitu dulu yo tipsnya. Good Luck Guys :D