Cara Membuat Kotak Profil di Blog Dengan CSS

Cara membuat Kotak Profil di Blog Dengan CSS - Mungkin kalian sering melihat di beberapa blog teman kalian ada kotak di sudut kanan atas yang berisikan profil pemilik blog. Tujuan di buatnya profil untuk mempermudah pembaca mengetahui siapa penulis di blog yang sedang mereka baca, Nah berhubung teman saya ingin membuat kotak profil di blog seperti yang ada di blog saya "Bukan yang ini blognya" haha. Yaudah langsung aja ke TKP, pembuatannya sangat gampang dan tidak memerlukan waktu yang lama.

1. Copy Code dibawah ini :
2. Pergi ke Tata Letak-Tambahkan Gadget-Tetxt/Javascript lalu pastekan
3. Simpan dan jadi

<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:0px solid #666; padding:3px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; margin:0 auto; margin-top:15px; padding:10px; width:340px; 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: white; } .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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgznvCMRjmLqZy0bdZ1PeFOeCukTkywm55M7xW1b_lCVHe1kzEC9X_XrVgd9a5EbJcA180cJOUybXU0p8CUFkONYSXHDYskyeJz5v4zLucZYAaeJDl88bAR3zRaUbJu97j0ILZnVWey9FM/s1600/10984239_622892891187780_7061637053351199965_n.jpg" /></div><div class='name-author'><h3>Andri Tekno</h3></div><div class='aboutme-text'>Hai, Saya Andri..Saya berterima kasih kepada pengunjung andritekno.com karena telah mau membaca artikel dari saya. Demi terjaganya kenyamanan bagi pembaca jika ada pelanggaran atau hal yang tidak ber-etika di halaman andritekno.com silahkan laporkan ke twitter pribadi saya <a href="https://twitter.com/andri_desmana95" style="color: blue;"> Disini</a></div></div>

Demo

Tutorial 13:41