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

35 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. kren temann visit blog ku juga yaa

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

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

    ReplyDelete
  8. PROMO BESAR-BESARAN OLIVIACLUB 100%....!!!!
    promo oliviaclub kali ini adalah promo deposit akan mendapatkan bonus chip sebesar nilai deposit yang disetorkan
    jadi untuk para pecinta poker oliviaclub yang sudah lama mendaftar ataupun yang baru melakukan register.. akan bisa mengikuti promo ini...

    SYARAT DAN KETENTUAN
    1.pemain dapat mengklaim bonus promo melalui live chat kami
    2.pemain yang mengikuti promo tidak akan bisa melakukan WD sebelum turnover/fee/pajak belum mencapai 30 x lipat dari angka deposit.
    3.minimal deposit untuk promo ini adalah Rp.50.000
    maximal deposit adalah Rp.200.000
    apabila ada pemain yang melakukan deposit diatas 200rb rupiah..
    hanya 200rb yang akan di hitung untuk mendapatkan bonus
    promo ini
    4. apabila pemain melakukan deposit sebanyak 50rb akan
    mendapatkan bonus 50rb.. dan apabila chip habis dan melakukan
    deposit 50rb lagi maka harus menunggu selama 6 jam terlebih
    dahulu sebelum dapat mengklaim bonus 100% dari
    angkadeposit..
    batas maksimal klaim bonus tetap max deposit 200rb per hari
    5. klaim bonus promo berlaku 1x12 jam..
    para pemain diharuskan mengklaim bonus sebelum bermain..jika
    ada pemain yang melakukan deposit dan bermain..
    baru setelah bermain mengklaim bonus..maka tidak akan dilayani
    6.PROMO OLIVIACLUB ini dapat berakhir sewaktu waktu tanpa
    pemberitahuan terlebih dahulu
    7.keputusan pihak OLIVIACLUB tidak dapat diganggu gugat dan
    mutlak

    CARA MENGKLAIM BONUS PROMO :
    1.setelah melakukan register dan deposit maka pemain harus melakukan login dan masuk ke menu memo,tulis subjek klaim voucher promo
    2.admin OLIVIACLUB akan segera membalas memo anda dan
    memberikan kode voucher.
    3.setelah menerima kode voucher silakan menuju menu deposit
    isi kan formulir deposit sebagaimana anda biasa melakukan deposit.
    setelah itu pada kolom keterangan di menu deposit silakan anda tuliskan kode voucher yang telah diberikan
    4.silakan gunakan jasa live chat kami untuk membantu anda dalam mengklaim bonus PROMO OLIVIACLUB

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

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

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

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

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

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

    ReplyDelete
  15. Keren min artikelnya setsimpleart.blogspot.com

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

    ReplyDelete
  17. makasih work loh ...

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

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

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

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

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

    ReplyDelete

Thanks for commented