Cara Membuat Tampilan Widget profil blog keren

     Mungkin bagi yang sudah cukup berpengalaman dalam dunia Coding dan Blog untuk menampilkan widget keren adalah suatu hal yang biasa, tapi lain halnya bagi pemula yang masih tahap coba-coba dan juga masih mode untuk memperdalam ilmunya, Nah untuk itu Sekarang kami akan berbagi Tutorial Bagaimana cara membuat widget keren dengan Kode HTML diBlog.

Kami disini tidak akan membahas cara membuat kodenya, karena kami sudah menyediakan kodenya dibawah hanya mungkin ada yang harus dirubah sedikit untuk bisa dipakai di widget agan sekalian.

Dibawah ini adalah ss dari widget yang akan kita buat :

Screenshoot Widget Profil Blog

     Kalo agan berminat Berikut kode HTMLnya, Silahkan Copy CSS nya terlebih dahulu :

<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="-----" /> </div> <div class='name-author'>  <h3>Bustomi Azzaini</h3> </div> <div class='aboutme-text'>Guru terbaik adalah pengalaman marilah saling sahring ilmu  <a href="http://ibnu-zaini.blogspot.com/p/blog-page. html" style="color: #666;"< ...Read More</a> </div></div>

1. Silahkan login ke draftblog agan terlebih dahulu
2. Pilih tata letak » Tambah gadget » HTML/Javascript
3. Masukkan kode yang sudah dicopy tadi ke kolom yang sudah disediakan
4. Simpan » Simpan perubahan

Keterangan:

----- (diganti url foto agan) 
Bustomi Azzaini (Diganti dengan nama agan)

Guru terbaik adalah prngalaman marilah saling sharing ilmu (Diganti dengan kata-kata agan)

http://ibnu-zaini.blogspot.com/p/blog.html (Diganti dengan url page profil/ bisa juga profil google +)

     Selamat agan telah berhasil memakai widget kerennya, Semoga artikel ini bermanfaat.