Rabu, 09 Mei 2012

Create Float "Followe me on Facebook"

Selamat malam Sahabat Blogger,Kali Ini ReVo_HezronGuard Akan memposting Tentang CSS3 yaitu Followe On Facebook.Jika sahabat Blogger Tertarik,silahkan ikuti langkah berikut :

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;
}
#ReVotrik_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 &#8211; offsetWidth); } 
 5. Jika Sudah, taruh kode dibawah ini, dibawah kode <body> , (Bisa juga ditaruh "Tambah Gadget" pada bagian sidebar..
<div id='ReVotrik_pojok'>
<ul class='starbursts'>
<li>
<a class='starburst5' href='http://www.facebook.com/ZronGuard'><span><span><span><span><span><span><span><br/>Follow me<br/>on<br/>Facebook!!!</span></span></span></span></span></span></span></a>
</li>
</ul>
</div>
Gimana Caranya Sahabat Blogger? Mudah Bukan ? klo Sudah silahkan Save Template anda dan lihat hasilnya ...

NB:"Ganti Text Yang Berwarna Merah Dengan Facebook Sahabat Blogger"

Pasang Blockquote Keren dengan Fungsi Sliding Cara ReVo_HezronGuard

Selamat Malam Sahabat Blogger ,ReVo_HezronGuard akan memberitahu Cara Pasang Blockquote Keren dengan Fungsi Sliding Cara ReVo_HezronGuard ..
Caranya Sangat mudah Koq sahabat blogger,Jika sahabat blogger tertarik silahkan ikuti langkah berikut :

1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan Kode CSS berikut diatas ]]></b:skin>
/* Blockquote */
blockquote {
margin:15px 20px;
font:italic 14px "Consolas","Courier New",Courier,mono,serif;
height:1px;color:#888;
padding:0px 0px;
background-color:#333;
border:10px solid #111;
border-left-color:#FFFFFF;
-webkit-box-shadow:1px 2px 5px #000;
-moz-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
overflow:auto;
-webkit-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
-moz-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
-ms-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
-o-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
}
blockquote:hover {
padding:13px 18px;
background-color:#000000;
border:5px solid #323232;
height:350px;
-webkit-box-shadow:1px 2px 15px #000;
-moz-box-shadow:1px 2px 15px #000;
box-shadow:1px 2px 15px #000;
}
blockquote p { margin: 0; padding-top:10px;
}
3. Simpan template. Dan berhasil.

Itulah tutorial kita kali ini, semoga bermanfaat yach bagi teman2. ^_^