Cara Membuat Profil Admin Dengan Sentuhan CSS Pada Blog

Assalamualaikum Sobat Blogger, Gimana Kabar'a ? (pasti sehat semua kan ?? (alhamdulillah yaakk, sesuatuu :p :p (syahrono) wkwkkw...

 

Sumber

Pada kesempatan ini saya akan posting Cara Mempercantik Tampilan Profil Admin Dengan Sentuhan CSS Pada Blog , untuk lebih jelas lihat tampilan profil saya yang udah diubah pada gambar diatas (untuk tampilan defult'a (semula) lupa saya simpen, jadi gak ada contoh'a).
pasti sobat kepingin kan,,yawudahh,, ikuti cara dibawah ini, cekkkiiidooottt :

1. Login akun blogger.
2. Pilih Tata Letak » Tambah Gadget » HTML/JavaScript
3. Masukkan kode dibawah ini kedalam kotak HTML/JavaScript dan si

<style>#aboutme { background-color:#fff; -moz-box-shadow:0 0 3px #e0e0e0; -webkit-box-shadow:0 0 3px #e0e0e0; box-shadow:0 0 3px #e0e0e0; border:1px solid #666; padding:3px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; margin:0 auto; margin-top:15px; padding:10px; width:270px; height:auto;}.name-author { margin:0 0 7px; display:block; width:100%;}.name-author h3 { position:relative; display:inline; background-color:#0097BD; color:#FFF; font-family:Segoe UI; font-size:15px; font-weight:bold; margin:0 0 0 -3px; padding:3px 5px 3px 10px; width:100%; -moz-text-shadow:0 1px 0 black; -webkit-text-shadow:0 1px 0 black; text-shadow:0 1px 0 black;}.name-author h3:after { content:" "; width:0; height:0; position:absolute; left:100%; top:0; border-width:13px; border-style:solid; border-color:transparent transparent transparent #0097BD;}@-webkit-keyframes name-author { 0% {color:white} 20% {color:Orange} 40% {color:pink} 60% {color:Orchid} 80% {color:gold} 100% {color:white}}@-moz-keyframes name-author { 0% {color:white} 20% {color:Orange} 40% {color:pink} 60% {color:Orchid} 80% {color:gold} 100% {color:white}}@-keyframes name-author { 0% {color:white} 20% {color:Orange} 40% {color:pink} 60% {color:Orchid} 80% {color:gold} 100% {color:white}}/* Penerapan efek pada element yang akan diberi efek*/.name-author h3 {/* Waktu 10 detik */ animation:10s infinite name-author linear; -webkit-animation:10s infinite name-author linear;}.aboutme-text { font-size:12px; text-align:left; margin:0;}.aboutme-image-container { float:left; width:70px; height:70px; margin-right:75px; z-index:1;}.aboutme-image-container { margin:-20px 0 5px 0; padding:9px; position:relative; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:100%; -moz-border-radius-bottomright:100%; -moz-border-radius-bottomleft:100%; border-bottom-right-radius:100%; border-bottom-left-radius:100%; -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666; background-color:#59B52E;}.aboutme-image-container:before { content:' '; position:absolute; top:0; left:-10px; width:0; height:0; border-style:solid; border-width:0 0 10px 10px; border-color:transparent transparent #333 transparent;}.aboutme-image-container:after { content:' '; position:absolute; top:0; right:-10px; width:0; height:0; border-style:solid; border-width:10px 0 0 10px; border-color:transparent transparent transparent #333;}.aboutme-image-container img { width:100%; height:100%; border:2px solid yellow; border-radius:100%; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; -moz-box-shadow:1px 1px 4px #000; -webkit-box-shadow:1px 1px 4px #000; box-shadow:1px 1px 4px #000;}.aboutme-image-container img:hover { border:2px solid GOld; cursor:pointer; margin-left:0; -moz-transform:scale(1.2) rotate(360deg); -webkit-transform:scale(1.2) rotate(360deg); -o-transform:scale(1.2) rotate(360deg); -ms-transform:scale(1) rotate(-360deg); transform:scale(1.2) rotate(360deg); -moz-box-shadow:1px 1px 4px #000; -webkit-box-shadow:1px 1px 4px #000; box-shadow:1px 1px 4px #000;}</style><div id='aboutme'><div class='aboutme-image-container'><img src="http://i1261.photobucket.com/albums/ii585/zainelhasany/9894d29b.jpg" /></div><div class='name-author'><h3>Deddy De Gazaa</h3></div><div class='aboutme-text'>Saya hanya seorang blogger pemula yang mencoba untuk berbagi tentang hal apapun yang saya ketahui dan semoga yang saya bagi ini bisa bermanfaat bagi anda, mohon maaf bila ada kekurangan dan terima kasih atas kunjungannya. Wassalam. <a href="Link Profil Blogger Anda" style="color: #666;">...Lihat Profil Saya Selanjutnya</a></div></div>

Keterangan :

#fff; adalah Baground kotak widget profil sobat.270px; adalah Lebar kotak widget Profil sobat.http://i1261.photobucket.com/albums/ii585/zainelhasany/9894d29b.jpg adalah URL gambar/foto kesukaan sobat.Deddy De Gazaa adalah nama profil sobat.
Saya hanya seorang blogger pemula yang mencoba untuk berbagi tentang hal apapun yang saya ketahui dan semoga yang saya bagi ini bisa bermanfaat bagi anda, mohon maaf bila ada kekurangan dan terima kasih atas kunjungannya. Wassalam. adalah kalimat buat profil sobat.Link Profil Blogger Anda adalah URL profil sobat bisa About Us atau profil Google+

 Selamat mencoba, Silahkan komentar jika ada kendala !!