Cara Membuat Widget Profil Keren di Blog


*Cara Membuat Profil Blog Keren di Blogger* - Kali ini kita akan belajar bareng Cara Membuat Widget Profil Blog Keren di Blogger, tips trik ini saya dapatkan di blog zainelhasany.com widget profil defaul blogger biasanya cukup simple dan tidak bisa dikasih sepucuk kata-kata mengenai profil admin. oleh karena itu kali ini saya akan share agar Profil Blogger kelihatan keren.

Sahabat tertarik untuk memasangnya agar widget profil keren, Coba Praktikkan Tutorial Cara Membuat Widget Profil Blogger Keren di Blog dibawah ini:

1. Login akun blogger Sobat.
2. Pilih Tata Letak » Tambah Gadget » HTML/JavaScript
3. Masukkan kode berikut ini kedalam kotak 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: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="http://i1297.photobucket.com/albums/ag31/BeZi-Sokhi/Mine_zps9648f25d.jpg" />
</div>
<div class='name-author'>
<h3>Be Zi Sokhi</h3></div>
<div class='aboutme-text'>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. <a href="YOUR LINK BLOGGER PROFIL" style="color: #666;">...Read More</a>
</div></div>

Keterangan:

#fff; adalah Baground kotak widget profil sobat.
270px; adalah Lebar kotak widget Profil sobat.
http://i1297.photobucket.com/albums/ag31/BeZi-Sokhi/Mine_zps9648f25d.jpg adalah URL gambar/foto sobat.
Be Zi Sokhi adalah nama profil sobat.
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 buat profil sobat.
YOUR LINK BLOGGER PROFIL adalah URL profil sobat bisa About Us atau profil Google+

4. Save dan lihat hasilnya. sobat bisa merubah bentuknya sesuaiketerangan diatas.

Sekian dulu share Cara Membuat Widget Profil Blog Keren di Blogger, semoga dapat bermanfaat. Selamat mencoba. Good Luck

Sumber: http://www.zainelhasany.com/2013/07/cara-membuat-widget-profil-blogger.html

34 comments:

  1. yaahowu Gan...Artikel Keren Gan..heheheh Lnjutkan..heheh

    ReplyDelete
  2. menarik bos, langsung coba dah.. trims

    ReplyDelete
  3. Thanks mas atas tutorialnya sangat bermanfaat

    ReplyDelete
  4. Keren jg :3
    visit my blog: http://cybeertooth.blogspot.com/

    ReplyDelete
  5. makasih gan, hasilnya jempol!

    ReplyDelete
  6. kren temann visit blog ku juga yaa

    ReplyDelete
  7. http://yuniarofficial.blogspot.com/

    ReplyDelete
  8. Makasih gan sukses, dan luar biasa...

    ReplyDelete
  9. mampir juga di sini mas http://sonytutorial.blogspot.com/

    ReplyDelete
  10. tanks gan....amat bermanfaat

    ReplyDelete
  11. keren ilmunya bos...langsung sedot ni...buat di: www.musthafakamal.net

    ReplyDelete
  12. kq fotonya g mau keluar ya? trims sebelumnya

    ReplyDelete
  13. izin copas ya mas...Blogwalking http://myinspiration20.blogspot.com

    ReplyDelete
  14. Nice Post jangan Lupa Kunjungi sidoarjorental.blogspot.com/

    ReplyDelete
  15. thank mas profile copas ya dah saya pasang dan mampir di newbie www.noteblogeko.blogspot.com

    ReplyDelete
  16. Keren min artikelnya setsimpleart.blogspot.com

    ReplyDelete
  17. Mantab gan.. ane psang di blog ane yaa... thankss
    http://logika999.blogspot.co.id/

    ReplyDelete
  18. makasih work loh ...

    Visit: http://carakitamudah.blogspot.co.id/

    ReplyDelete
  19. Sangat membantu..
    Bagi temen2 yg suka download program, kunjungi www.depo-program.blogspot.com
    Terima kasih.

    ReplyDelete
  20. Bgaimana cara pasang fotonya ga bisa keluar ambil uel foronya dimana.

    ReplyDelete
  21. Bgaimana cara pasang fotonya ga bisa keluar ambil uel foronya dimana.

    ReplyDelete
  22. Keren sekali hasilnya gan... ijin pasang yaah..

    ReplyDelete
  23. itu otomatis sudah tersambung di G+ ya gan

    ReplyDelete

Thanks for commented