Membuat widget profil keren Ala BAW

Selamat siang, pada postingan kali ini saya akan berbagi trick mengenai Membuat widget profil keren Ala Blog Alvin Warasi. Cara ini saya buat ini berdasarkan pertanyaan dari sahabat blogger bernama priskilla.
Profil widget ini di lengkapi dengan 3 akun sosial network atau jejaring sosial yaitu Facebook, Google+ dan Twitter. Lebih jelasnya lihat gambar di bawah ini :

gimana,,? keren kan widget-nya, Jika Anda ingin membuatnya silahkan

Simak langkah² dibawah ini:

1. Login ke akun blogger Anda.
2. Klik Template  Edit HTML.
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan kode css berikut ini tepat di atas kode ]]></b:skin> atau </style>

 /* Widget Profile Ala Blog Alvin Warasi */
.alvinADMIN {width:auto;  height:83px;padding:5px}
.alvinADMIN-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;}
.alvindeskripsi{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px;   font-size:11px; color:#000;}
.alvinfb, .alvingp, .alvintw {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}
.alvinfb {background: #3B5998;margin-left:73px}
.alvinfb:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}
.alvingp {background: #D34836;font-size:11px;margin-left:85px}
.alvingp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}
.alvintw {background: #4099FF;margin-left:73px}
.alvintw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}

5. Jika sudah Save template.

• Pilih Tata letak  Add widget  Pilih widget HTML/JavaScript.

6. Lalu masukkan kode javascript dibawah ini ke dalam widget tersebut.

<div class="alvinADMIN">
<img alt="alvin" class="alvinADMIN-gambar" src="https://lh6.googleusercontent.com/-IHvmHczxf5o/AAAAAAAAAAI/AAAAAAAAAyQ/bNVBg9IhiuQ/s120-c/photo.jpg" title="Alvin" />
<a class="alvinfb" href="https://www.facebook.com/emanprofitmantap" rel="nofollow" target="_blank">f</a>
<a class="alvingp" href="https://plus.google.com/110192209595301873606" rel="nofollow" target="_blank">G</a>
<a class="alvintw" href="https://www.facebook.com/emanprofitmantap" rel="nofollow" target="_blank">t</a>
<div class="alvindeskripsi">
Hai, perkenalkan nama saya <b><a href="https://www.facebook.com/emanprofitmantap">Alvin Warasi</a></b> saya <b>lahir</b> di kota <br />
Medan - Sumatera Utara - Indonesia.<br />
Alumni <b>SMK NEGERI PASIRIAN</b>
Jika anda ingin kenal lebih dekat<br />
ADD sosial Network saya. <br />
<a href="http://the-warasi.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/110192209595301873606" 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 Anda.

Sekian dulu postingan dari saya. Jika Anda mau bertanya silahkan corat coret dibawah,..
Terima kasih..

source / sumber : http://the-warasi.blogspot.co.id/2014/06/membuat-widget-profil-keren-ala-baw.html

Terima kasih sudah berkunjung dan membaca artikel mengenai Membuat widget profil keren Ala BAW jika sobat ingin menyebar luaskan artikel ini di mohon untuk mencantumkan Link Sumbernya, Terima Kasih atas kerjasamanya ^_^

✚