• Bm7
    Terima kasih sudah berkunjung xD
Home » , , » Cara Mempercantik Widget Profil

Cara Mempercantik Widget Profil

Diposting oleh khaidar Selasa, 28 Agustus 2012 Label: , ,
Mempercantik Widget Profil Pada blog - Pada kesempatan yang indah ini alhamdulillah saya masih bisa menshare tips & trick seputar blogger dan css, kali ini saya share bagaimana cara untuk mempercantik widget profil, sebagai contoh yang ada dalam blog ini dihalaman beranda disitu terdapat widget profil tentang pemilik blog ini, jika cursor mouse diarahkan tepat pada foto profil yang terdapat dalam widget tersebut maka otomatis pula foto profil yang terkena sorot mouse langsung membesar.
Anda merasa penasaran?Simaklah dan perhatikan langkah-langkah dibawah ini,langkah dibawah ini menggunakan sedikit css yang digunakan dan css sudah saya compress biar ringan untuk blog sobat

NB : TRIK DAN TUTORIAL DIBAWAH INI MENGGUNAKAN BLOGGER ANTAR MUKA TERBARU

Langkah-Langkah
1.Login ke Akun blogger sobat
2.Pilih Templates
3.Pilih Edit HTML klik lanjutkan
4.Centang Expand Template Widget
5.Cari kode ini ]]></b:skin> setelah ketemu Copypaste kode dibawah ini sebelum tag ]]></b:skin>
Black Market7:
.profile-img{border:8px solid #aaa;opacity:0.8;border-radius:6px;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 0 1.5s ease-out 1s opacity 2s ease-in;-moz-transition:margin 1.5s ease-in 2s 0 1.5s ease-out 1s opacity 2s ease-in;-webkit-transition:margin 1.5s ease-in 2s 0 1.5s ease-out 1s opacity 2s ease-in;margin:0 5px 5px 0;padding:4px} .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;-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 .4s margin-top 1.5s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;-moz-transition:margin 1.5s ease-in .4s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;-webkit-transition:margin 1.5s ease-in .4s 0 2.5s ease-out 1.4s opacity 3s ease-in 4s;margin:40px 0 20px 10px} .profile-data{color:red;font-weight:700;line-height:1.6em;font:25px reenie Beanie;margin:0} .profile-datablock{margin:.5em 0} .profile-textblock{line-height:1.6em;color:#fff;margin:.5em 0} .profile-link{font:13px IM Fell English,arial,serif;text-transform:none;letter-spacing:2px;line-height:1.2em} #menu{background-color:#333;border-bottom:1px solid #000;border-right:1px solid #000;border-top:1px solid #000;height:29px;width:1001px;margin:3px auto 0 -1px}

6.Setelah itu klik Simpan Templates
 CONTOH DARI TUTORIAL INI ADALAH HALAMAN BERANDA/HOME PADA BLOG INI,SILAHKAN ARAHKAN CURSOR MOUSE TANPA DIKLIK PADA FOTO WIDGET YANG BERJUDUL MENGENAI SAYA.



Terimakasih telah berkunjung di http://black-market7.blogspot.com


.: Artikel Terkait :.

2 komentar:

{ Dav Dmilano } at: 31 Agustus 2012 pukul 15.51 mengatakan...

Saleum,
Keren sob, test dulu ya

{ khaidar } at: 31 Agustus 2012 pukul 21.28 mengatakan...

@Dmilano : Terimakasih atas kunjungannya yaa diblog saya......

Posting Komentar

Silahkan berkomentar asalkan tidak mengandung SPAM/SARA, jika komentar mengandng spam maka komentar tidak akan ditampilkan atau dihapus oleh admin blog ini. TERIMAKASIH

Langganan: Posting Komentar (Atom)

Facebook