Cara Membuat Widget Author Keren Dengan Tombol Sosial Media

Cara Membuat Widget Author Keren Dengan Tombol Sosial Media. Kali ini Jona Rendra akan membagikan info tentang widget yang dapat mempercantik blog. Seperti yang bisa anda lihat pada judul, pasti sudah mengerti maksudnya kan? Widget author kali ini berbeda dengan bawaan blogger. Yang satu ini tampilannya keren banget. Berisi foto author, tombol facebook, twitter, google plus serta anda bisa menambahkan deskripsi tentang diri anda.

Bisa anda lihat pada gambar diatas adalah contoh gambar widget author menarik dengan tombol sosial media. Apakah anda juga ingin memasangnya ke blog anda? Caranya sangat mudah. Cukup ikuti tutorial saya dibawah ini.

Cara Membuat Widget Author Keren Dengan Tombol Sosial Media

1. Login ke blogger, pada dashboard pilih blog lalu masuk ke Tata Letak

2. Pikirkan dulu kolom mana yang akan anda taruh widget author ini. Kalau sudah, klik Tambah Gadget (Add Gadget)

3. Pilih HTML Javascript

4. Pada kolom konten, copy kode HTML dibawah ini dan paste

<style>
.widget-author {width:auto;  height:83px;padding:5px}
.foto-author {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;}
.dskrpsi-author{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px;   font-size:11px; color:#fff;}
.fb, .gp, .tw {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}
.fb {background: #3B5998;margin-left:73px}
.fb:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}
.gp {background: #D34836;font-size:11px;margin-left:85px}
.gp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}
.tw {background: #4099FF;margin-left:73px}
.tw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}
</style>


<div class='widget-author'>
<img alt='NAMA' src='URL GAMBAR / FOTO' title='NAMA' class='foto-author' />
<a class='fb' href='URL FACEBOOK' rel='nofollow' target="_blank">f</a>
<a class='gp' href='URL GOOGLE PLUS' rel='nofollow' target="_blank">g+</a>
<a class='tw' href='URL TWITTER' rel='nofollow' target="_blank">t</a>
<div class='dskrpsi-author'>
<span style="color: #000;">
DESKRIPSI
</span>
</div>
</div>

Keterangan:

• Anda perlu kustomisasikan rangkaian HTML diatas, agar data anda dapat terpasang sempurnya dengan mengganti
• NAMA dengan nma anda
• URL GAMBAR / FOTO dengan URL foto anda
• URL FACEBOOK dengan URL profil facebook anda
• URL GOOGLE PLUS dengan URL google plus anda
• URL TWITTER dengan URL twitter anda

5. Setelah di edit edit, terakhir klik simpan dan lihat tampilannya.

Bagaimana? Mudah dan cepat kan untuk Membuat Widget Author Keren Dengan Tombol Sosial Media nya? Dengan memasang widget ini, pengunjung blog akan lebih mengenal pemilik blog tersebut. Itulah artikel dari Jona Rendra yang berjudul Cara Membuat Widget Author Keren Dengan Tombol Sosial Media, semoga bermanfaat untuk anda dalam proses mengedit blog. Apabila ada kesulitan saat melakukan edit kode HTML, anda bisa tanyakan saya melalui komentar dibawah.