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 langkah2 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.
<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
EmoticonEmoticon