Cara Membuat Kotak Profil Keren di Blog - Selamat pagi sobat SMJ-Sharing, pagi ini saya akan sharing sedikit artikel bisa dibilang tutorial blogging yaitu mengenai Cara Membuat Kotak Profil Keren di Blog. Seperti yang tertera pada gambar diatas, kotak profil yang sangat simple dan tentunya juga keren karena disuguhkan dengan tampilan yang cukup unik dengan menggunakan kombinasi kode HTML dan CSS.
Sebelum kita ke tutorial Cara Membuat Kotak Profil Keren di Blog ini, saya akan sedikit menjelaskan fungsi dari kotak profil ini sendiri. Salah satu fungsinya adalah sebagai media pengenalan diri kita sebagai author blog, supaya para pengunjung atau pembaca dapat tahu siapa author atau pemilik blog kita ini.
Lihat Juga :
Cara Membuat Kotak Profil Keren di Blog
- Pertama Login dulu ke akun Blogger kalian
- Pilih menu Tata Letak
- Tentukan dimana kalian ingin memasang kotak profilnya
- Klik Tambah Gadget
- Pilih HTML/JavaScript
- Masukan kode dibawah ini pada kotak HTML/JavaScript
<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="Foto Kalian" /></div><div class='name-author'><h3>Nama Kalian</h3></div><div class='aboutme-text'>Isi pesan kotak profil kalian<a href="Link Profil Blogger Anda" style="color: #666;">...Lihat Profil Saya Selanjutnya</a></div></div>
Keterangan :
- Tulisan berwarna Merah silahkan ubah sesuai petunjuk diatas.
- Tulisan berwarna Kuning itu untuk mengubah warna background dari kotak profil ini.
Sekian sedikit artikel yang saya bagikan mengenai Cara Membuat Kotak Profil Keren di Blog ini. Semoga artikel ini dapat bermanfaat bagi para pembaca. Jangan lupa share dan tinggalkan komentarnya.
Kritik dan saran para pembaca sangat bermanfaat bagi kami!
Emoticon