share all free for you

Advertiser Here

Cara Mempercantik Widget Profil

Pada kesempatan kali ini saya akan share cara membuat widget profil menjadi kren dengan CSS, jika sobat blogger bosan dengan widget profil yang bentuknya gitu-gitu aja (gak menarik) gak ada salahnya jika sobat blogger mencoba trik ini

Ini adalah screenshotnya "sebelum di sorot mouse"


dan ini adalah setelah di sorot oleh mouse "hover"


untuk demonya silahkan sobat lihat widget profil di blog ini, di bawah kiri blog ini tepatnya
bagaimana sobat tertarik untuk memakai trik ini di blog sobat?

jika tertarik silahkan ikuti langkah2 brikut :

1. Pertama, masuk dulu ke halaman Edit HTML

2. Cari kode ini ]]></b:skin>

3. Kemudian letakan kode berikut di atasnya
.profile-img {
border: 8px solid #aaa;
opacity: 0.8;
border-radius: 6px;
margin:0 5px 5px 0;
padding: 4px;
background: #eee;
box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in;
}
.profile-img:hover {
opacity: 1.0;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-moz-box-shadow: 1px 1px 1px #33F, -1px -1px 1px #33F, 0 0 16px #33F;
margin: 40px 0px 20px 10px;
-o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.4s, margin-top 1.5s, -o-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-moz-transition: margin 1.5s ease-in 0.4s, -moz-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-webkit-transition: margin 1.5s ease-in 0.4s, -webkit-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
}
.profile-data {
margin:0;
color:red;
font-weight: bold;
line-height: 1.6em;
font: 25px  reenie Beanie;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
color:#fff;
}
.profile-link{ font: 13px IM Fell English,arial,serif; text-transform:none;letter-spacing:2px;line-height:1.2em;}
#menu {
background-color:#333333;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
height:29px;
margin:3px auto 0;
width:1001px;
margin-left:-1px;
}
5. Simpan dan lihat hasilnya

Jika ada pertanyaan atau tambahan silahkan berikomentar, saya sangat menghargai pendapat sobat sekalian,...

Title : Cara Mempercantik Widget Profil
URL : http://blogcunayz.blogspot.com/2011/09/cara-mempercantik-widget-profil.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Mempercantik Widget Profil sebagai Sumbernya.

Sudah ada [ 8 komentar ] bagaimana pendapat Anda,,?

  1. keren dah sob, cman sepertinya memberatkan blog y ?
    apa lagi sepertinya tidak menggunakan css 3 ... Thnks infonya sob ...

    ReplyDelete
  2. kalo menurut saya gak terlalu ngaruh ke loading blog,
    saya juga pake tapi kecepatan loadingnya tetep segitu2 aja,
    btw thank ya atas masukannya,...

    ReplyDelete
  3. wah keren banget mas..oya mas ada tutor buat menu home,fhoto,pencarian,kontak me kayak punya mas yang ada di sudut kanan atas itu

    ReplyDelete
  4. Keren2.. dari dulu kayak gini yang saya cari ini baru ketemu caranta..

    ReplyDelete
  5. @ esthetique : ada gan sudah saya share silahkan di baca

    @ Fahrur Rozi : bukannya tanya sama saya atuh wkwkwk

    ReplyDelete
  6. nice post gan, nitip backlink :)

    for online business--> http://www.bisnisonlinee.tk/
    for healthy and beauty --> http://www.thehealthnews.tk/

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah