Cara Membuat Kotak Profil Responsive + Keren

By Video Arsip

Kotak Profil Responsive yang saya rancang kali ini sangat berbeda dengan Author Box yang sudah saya publikasikan beberapa hari yang lalu. Tapi fungsinya masih sama yaitu untuk mencantumkan data biografi seorang penulis atau pemilik website tersebut.

Kotak About Me ini dibuat dengan menggunakan kode css3 dan sedikit javascript. Sehingga tidak akan berpengaruh banyak terhadap loading blog anda. Dengan menambahkan kotak biografi ini, yang ada justru tampilan situs anda akan terlihat lebih bagus dan terkesan profesional. Tidak menutup kemungkinan pengunjung akan betah berlama-lama berada di website anda karena merasa nyaman dengan tampilan website anda. Terlebih kalau artikel yang anda sajikan benar-benar mereka butuhkan.

Untuk membuat Kotak Biografi Responsive ini juga sangat mudah. Ikuti saja tutorial yang akan saya berikan dengan seksama. Jika mengalami kesulitan silahkan bertanya lewat kolom komentar. Insyaallah saya akan membantu kalian dengan senang hati. Namun jika anda tidak mau repot, gunakan saja template premium yang harganya sangat terjangkau sekali.

01. Login ke blogger.com
02. Klik Template kemudian dilanjutkan dengan menekan Edit HTML
03. Cari kode ]]></b:skin> dengan bantuan CTRL + F
04. Masukkan seluruh kode dibawah ini tepat diatas kode tersebut

#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;  max-width:600px;  height:auto;margin:5px;}.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 4px 9px;  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 8 detik */  animation:8s infinite name-author linear;  -webkit-animation:10s infinite name-author linear;}.aboutme-text {  font-size:14px;  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;}

05. Cari kode <data:post.body/> atau </article> dengan bantuan CTRL + F juga
06. Salin kode dibawah ini tepat dibawah kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='aboutme'><div class='aboutme-image-container'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9orShotSD3bfOere1clML-2fH-usnI-uAegH3N-9HI9NkbrTRimeoEf5N-bRa0UNAU3uY4gM9ZR4RaU3ovBuptqKhqgedrHF46-K1E689fHoUSDzTCoGGZIQRcf3Jizv92DZDu5e06s1u/s1600/wp-profile.jpg'/></div>
<div class='name-author'><h3>About Me</h3></div>
<div class='aboutme-text'>
Isilah area ini dengan biodata atau profil anda...............
</div></div>
</b:if>

07. Ganti url warna purple dengan link gambar sobat
08. Keterangan biografinya silahkan disesuaikan sendiri
09. Simpan template dan lihatlah hasilnya
10. Salin kode nomor 6 diatas pada widget HTML/JAVASCRIPT jika ingin memasangnya pada sidebar

Demikianlah tutorial singkat dan mudah tentang cara bikin kotak biografi responsif yang keren banget. Semoga artikel sederhana ini dapat menambah wawasan kita bersama khususnya blogger mania yang suka dengan dunia web design.

Share :

Facebook Twitter Google+