Cara Membuat Widget Profil Yang Sederhana Tetapi Sangat Keren di Blogspot Blogger

Haro-Haro minna,ketemu lagi nih...Hari ini saya Akan memberikan tutorial tentang  bagaimana Cara Membuat Widget Profil Yang Sederhana Tetapi Sangat Keren di Blogspot Blogger

Jika kamu ingin mencobanya kamu bisa lihat caranya di bawah ini.Dan semoga kamu suka dengan widget ini...
CARANYA IALAH>>>>>
1. Masuk Ke akun bloggermu.
2. Pilih Tata Letak » Tambah Gadget » HTML/JavaScript
3. Masukkan kode di bawah ini kedalam kotak HTML/JavaScript

<style>     #aboutme {       background-color:lime;       -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:auto;       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://i1361.photobucket.com/albums/r662/AS_riyo/IMG_20150908_215922_zpsb5o6dpuw.jpg" />     </div>     <div class='name-author'>     <h3>Riyo Adi Syahputro</h3></div>     <div class='aboutme-text'>Halo....Nama saya Riyo Adi Syahputro,Hobby yang satu ini yaitu ngeblog yang lain bulu tangkis,berenang...Dan saya memiliki prinsip tersendiri yaitu "Jika Saya Berusaha Maka Saya Akan Banyak Tahu".Dan like atau add media sosial gue ya......<a href="https://plus.google.com/u/0/107740539130663440601" style="color: #666;">...Read More</a>     </div></div>

Keterangan:
#fff; adalah Warna Baground kotak widget profilmu(Dapat Di ganti Sesuka hati)
auto; adalah Lebar kotak widget Profil sobat(dapat Di ubah sesuai kehendak)
http://i1361.photobucket.com/albums/r662/AS_riyo/IMG_20150908_215922_zpsb5o6dpuw.jpg adalah URL gambar(alamat foto yang digunakan untuk profil di blog).
Riyo Adi Syahputro adalah nama profilmu.
Belajar ngeblog jangan setengah-setengah, nanti hasilnya juga setenagh-setengah. ada kalanya kita mencoba berekspresi dengan CSS keren seperti ini untuk merespon otak agar tetap bisa berkarya. hehe. adalah kalimat tentang profilmu.
https://plus.google.com/u/0/107740539130663440601 adalah URL profil sobat bisa About Us atau profil Google+

4. Save dan lihat hasilnya dengan klik lihat blog.

Yap....,itulah tutorial tentang  bagaimana Cara Membuat Widget Profil Yang Sederhana Tetapi Sangat Keren di Blogspot Blogger.Dan jika ada suatu kesalahan dalam tutur kata(mohon di maaf’in ya)tehee.....juga like fanspage facebook ane ya.......