CREATE FLOAT "FOLLOWE ME ON FACEBOOK!!!" WITH CSS STARBURST

Diposting oleh Unknown - 0 komentar

Baiklah Sebelum saya kasih Source CSS dan HTML-nya, demo bisa anda lihat pada Postingan ini :)

Dan jika berminat untuk membuatnya, silahkan ikuti panduan singkat dibawah ini:
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin> , Jika Sudah Ketemu, letakkan Kode CSS berikut tepat diatasnya.

.starburst5 {
display:block;
width:5em;
height:5em;
background:darkred;
border: 2px solid #ddd;
position:relative;
top:1em;
left:1em;
text-align:center;
text-decoration:none;
color:#ddd;
text-shadow:
0 0 1px #fff,
0 0 2px #fff,
0 0 3px #fff,
0 0 4px #fff,
0 0 5px red,
0 0 7px red,
0 0 10px red,
0 0 15px red;
font-weight:bold;
font-family:Calibri, sans-serif;
font-size:1.5em;
-webkit-transform:rotate(-56.5deg);
-moz-transform:rotate(-56.5deg);
rotation:-56.5deg;
}
.starburst5 span {
display:block;
width:6em;
height:6em;
background:darkred;
border: 2px solid #ccc;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
rotation:-45deg;
-moz-transition: -moz-transform 1s ease;
-webkit-transition: -webkit-transform 1s ease;
transition: transform 1s ease;
}
.starburst5:hover {
background:#000;
}
.starburst5:hover span {background:#111;border: 2px solid red;
-webkit-transform:rotate(11.25deg);
-moz-transform:rotate(11.25deg);
rotation:11.25deg;
}
#UTtrik_pojok {
position:fixed;_position:absolute;top:50px; left:-10px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

5. Jika Sudah, taruh kode dibawah ini, dibawah kode <body> , (Bisa juga ditaruh "Tambah Gadget" pada bagian sidebar..

<div id='UTtrik_pojok'>
<ul class='starbursts'>
<li>
<a class='starburst5' href='https://www.facebook.com/sujiyanto.loph.khayantin.nufus.tri.handayani'> Follow me on Facebook!!!</a>
</li>
</ul>
</div>

Ganti kode werna merah dengan ID facebook sobat
Udah? klo udah silahkan Save Template anda dan lihat hasilnya ...

Penulis: Unknown

Artikel CREATE FLOAT "FOLLOWE ME ON FACEBOOK!!!" WITH CSS STARBURST, diterbitkan oleh Unknown pada hari Rabu, 24 April 2013. Semoga artikel ini dapat menambah wawasan Anda. Unknown adalah Seorang Manusia yang selalu ingin menjadi lebih baik ,Karena Bila Anda berpikir Anda bisa,maka Anda benar. Bila Anda berpikir Anda tidak bisa, Anda pun benar… karena itu ketika seseorang berpikir tidak bisa, maka sesungguhnya dia telah membuang kesempatan untuk menjadi bisa