Cara Memasang Profile Keren Pada Blog

Profile selain cukup penting untuk dipasang pada blog juga berfungsi untuk mempercantik blog itu sendiri. Secara default penampilan profile terlihat sederhana dan biasa-biasa saja, namun setelah dimodifikasi penampilan profile ini terlihat keren. Bagaimana, apakah anda ingin profilenya terlihat biasa-biasa saja atau ingin terlihat keren? Jika profilenya ingin terlihat keren, anda sudah tepat sekali berkunjung ke blog ini karena pada kesempatan ini Kang AP ingin memberikan trik cara memasang profile keren pada blog. Tanpa banyak basa-basi lagi, silahkan simak langkah-langkah berikut ini.

1. Pertama, tentu anda harus login dulu ke Blogger

2. Pilih Tata Letak » Tambah Gadget

3. Pilih HTML/JavaScript


4. Masukkan kode dibawah ini ke dalam kolom HTML/JavaScript

<style>
#aboutme {
  background-color:#16e162;
  -moz-box-shadow:0 0 3px #3316e1;
  -webkit-box-shadow:0 0 3px #3316e1;
  box-shadow:0 0 3px #3316e1;
  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:250px;
  height:auto;
}
.name-author {
  margin:0 0 7px;
  display:block;
  width:100%;
}
.name-author h3 {
  position:relative;
  display:inline;
  background-color:#3316e1;
  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 #3316e1;
}
@-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:#30a4ee;
}
.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/AVvXsEhJLtmfTrEwP7ZXLgnoA01uLqZ-Zi8vSZgj9R3GqAcdocuqVVMPmkNBtvVXSHUns03f-3QdV0ZfhCFjLjOLDpA9ReHia9_A_yKhCT7KZZMYjTYgo6JR26VFTgM85kJ21C7ht5rEdkRdVueU/s1600/%2523AP.png" />
</div>
<div class='name-author'>
<h3>Nama Anda</h3></div>
<div class='aboutme-text'>Masukan Kata-kata anda disini►►<a href="http://goo.gl/5yCPBX" target="_blank"> Selengkapnya </a>
</div></div>

Baca juga :
» Cara Mudah Membuat Kolom Langganan Keren Dibawah Postingan
» Cara Membuat Tombol Share Efek 3D
» Cara Membuat Tulisan Bismillah Dan Alhamdulillah Pada Blog

Ganti kode yang berwarna biru
» 250 untuk mengatur lebar kotak, sesuaikan dengan sidebar blog anda
» Ganti dengan url photo anda
» Tulis dengan nama anda
» Tulis dengan kalimat tentang/slogan anda

5. Simpan dan lihat hasilnya

Demikian cara memasang profile keren pada blog, semoga bermanfaat. Happy Blogging...!

Please Share » » Facebook Google+ Twitter