Home » » Cara Membuat Widget Profil Blogger Stylish Dengan CSS

Cara Membuat Widget Profil Blogger Stylish Dengan CSS

Ditulis oleh Dicky Fajriansyah pada Kamis, 29 Agustus 2013 | 07.13

Cara Membuat Widget Profil Blogger Stylish Dengan CSS

Kali ini Dicky's akan menshare Tips Blog yang berjudul Cara Membuat Widget Profil Blogger Stylish Dengan CSS | Widget profil blogger ini keren sob, karena dilengkapi dengan efek hover pada foto profil, dan efek link warna-warni pada link nama, untuk DEMO-nya sobat bisa lihat SS diatas. Pastinya membuat keren blog sobat donk. Oke, langsung saja ini Tips-nya.


Berikut Cara Membuat Widget Profil Blogger Stylish Dengan CSS :

  • Login ke Blogger atau klik disini
  • Pilih Tata Letak --> Tambahkan Gadget --> Pilih HTML/JavaSript
  • Copy kode dibawah ini, kemudian letakkan ke kolom 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:3px solid #666;
  padding:3px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  margin:0 auto;
  margin-top:15px;
  padding:10px;
  width:400px;
  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://lh5.googleusercontent.com/-pE23h3ikNvI/AAAAAAAAAAI/AAAAAAAAAAA/ZuIe1zhmBmI/s512-c/photo.jpg" />
</div>
<div class='name-author'>
<h3>Dicky Fajriansyah</h3></div>
<div class='aboutme-text'>Hidup itu seperti CSS, kita bisa merubahnya menjadi lebih berwarna dan memberikan background yang indah. Dan hidup itu seperti... sepertinya saya tidak tau lagi.. <a href="https://plus.google.com/u/0/100036115131863439765" style="color: #666;"><b>...Read More</b></a>
</div></div>

Keterangan :
- Kode yang berwarna MERAH yaitu URL Foto Profil Blogger sobat, bisa sobat ganti dengan URL Foto Profil Blogger sobat
- Kode yang berwarna HIJAU TUA yaitu Nama Sobat, bisa sobat ganti dengan nama Sobat sendiri
- Kode yang berwarna BIRU yaitu Kata-Kata/Pengalaman sobat, bisa sobat ganti dengan Kata-Kata/Pengalaman sobat sendiri
- Kode yang berwarna ORANGE yaitu URL Profil Blogger/G+ sobat, bisa sobat ganti dengan URL Profil Blogger/G+ sendiri
- Dan selanjutnya, sobat bisa modifikasi sesuai selera sobat.

  • Simpan, dan lihat hasilnya.


Semoga Tips Blog yang berjudul Cara Membuat Widget Profil Blogger Stylish Dengan CSS bisa bermanfaat.......
dan selamat mencoba.......


Sumber : mdf-blog.blogspot.com
Dilarang menduplikasi dan menyerbarluaskan artikel tanpa menyertakan sumbernya. Jika melanggar, berarti telah melanggar UUD 1945 No. 19 Tahun 2002 Tentang Hak Cipta dan akan dijatuhi denda.
thumbnail Title: Cara Membuat Widget Profil Blogger Stylish Dengan CSS
Posted by:Dicky Fajriansyah
Published :2013-08-29T07:13:00-07:00
Rating: 5
Reviewer: 100 Reviews
Cara Membuat Widget Profil Blogger Stylish Dengan CSS

6 komentar:

  1. Banyak banget kodenya... hihi.. pusing kepalaku

    BalasHapus
  2. wah sangat bagus yah, nanti saya coba, makasih sudah share :)

    BalasHapus
  3. infonya menarik .,
    ijin di simpen dulu codenya.,
    thank's

    BalasHapus
  4. Keren Widget Profilnya Saya Coba Dulu Bro

    BalasHapus