Hay sobat,.. Pada postingan kali ini saya akan berbagi trick mengenai Membuat widget profil keren Ala Blog Irvan Efendy. Cara ini saya buat berdasarkan request dari sahabat Blogger bernama Prio Cah Salam.
Profil widget ini di lengkapi dengan 3 akun sosial network atau jejaring sosial yaitu Facebook, Google+ dan Twitter. Lebih jelasnya lihat gambar dibawah ini:
gimana,,? keren kan widget nya, Jika sobat ingin membuatnya silahkan
5. Jika sudah Save template.
7. Save widget dan lihat hasilnya.
Sekian dulu postingan dari saya. Jika sobat mau bertanya silahkan corat coret dibawah,..
Terima kasih
Profil widget ini di lengkapi dengan 3 akun sosial network atau jejaring sosial yaitu Facebook, Google+ dan Twitter. Lebih jelasnya lihat gambar dibawah ini:
gimana,,? keren kan widget nya, Jika sobat ingin membuatnya silahkan
Simak langkah2 dibawah ini:
1. Login ke akun blogger sobat2. Klik Template » Edit HTML
3. Kemudian tekan CTRL+F cari kode
]]></b:skin> atau </style> 4. Lalu tambahkan kode
CSS berikut ini tepat diatas kode ]]></b:skin> atau </style> /* Widget Profile Ala Blog Irvan Efendy */
.vanzADMIN {width:auto; height:83px;padding:5px}
.vanzADMIN-gambar {float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:2px solid #cf2031;border-right:2px solid #0f7dc8;border-bottom:2px solid #2eb31a;border-left:2px solid #eab823;}
.vanzdeskripsi{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px; font-size:11px; color:#000;}
.vanzfb, .vanzgp, .vanztw {color:#fff!important; display:block;font-weight: bold; line-height: 14px; height: 14px; width: 14px; border: 3px solid #444;text-align: center;padding:3px;border-radius:15px;font-size: 13px;text-decoration:none!important;margin: 1px;position:relative;margin-right:0px}
.vanzfb {background: #3B5998;margin-left:73px}
.vanzfb:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}
.vanzgp {background: #D34836;font-size:11px;margin-left:85px}
.vanzgp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}
.vanztw {background: #4099FF;margin-left:73px}
.vanztw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}
5. Jika sudah Save template.
- Pilih Tata letak » Add Widget » Pilih widget HTML/JavaScript
Javascript dibawah ini ke dalam widget tersebut.<div class="vanzADMIN">
<img alt="vanzdy" class="vanzADMIN-gambar" src="http://lh6.googleusercontent.com/-mNlGAhTr9W4/AAAAAAAAAAI/AAAAAAAAA0s/d6REegERfrM/s512-c/photo.jpg" title="vanzdy" />
<a class="vanzfb" href="http://facebook.com/irvan.cyberArt" rel="nofollow" target="_blank">f</a>
<a class="vanzgp" href="http://plus.google.com/116872946466272383878" rel="nofollow" target="_blank">G</a>
<a class="vanztw" href="http://twitter.com/irvan_efendy" rel="nofollow" target="_blank">t</a>
<div class="vanzdeskripsi">
Hai, perkenalkan nama saya <b><a href="http://facebook.com/irvan.cyberArt">Irvan Efendy</a></b> saya <b>lahir</b> di kota <br />
Lumajang - Jawa Timur - Indonesia.<br />
Alumni <b>SMK NEGERI PASIRIAN</b>
Jika anda ingin kenal lebih dekat<br />
ADD sosial Network saya. <br />
<a href="http://irvan-efendy.blogspot.com/p/about-me.html" style="color: #888888;" target="_blank"> Read More »</a><br />
<div style='float:left;margin:0px;'>
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/116872946466272383878" data-rel="author"></div></div></div></div></div>
7. Save widget dan lihat hasilnya.
Nb: Silahkan ganti Tulisan yang tercetak warna Merah dan Hijau tersebut sesuai dengan keinginan sobat.
Sekian dulu postingan dari saya. Jika sobat mau bertanya silahkan corat coret dibawah,..
Terima kasih
Tags:
#Tutorial Blog
#Widget Blog
