Ok sobat gn, atikel kali ini kita akan membahas Cara Memasang Biodata Ke Widget di Blog. Widget yang dapat kita gunakan sebagai informasi siapa penulis blog dan dimana dapat menemukannya. 


Agar terjadi hubungan atau komunikasi yang baik antara sipenulis dan sipembaca salah satu cara adalah memasang widget author box seperti ini, yang menjelaskan "about the author" yang mengarahkan pembaca ke halaman profil  admin agar pembaca yang ingin mengetahui lebih jelas siapa admin blog tersebut dapat dengan mudah menemukannya.

Cara Memasang Biodata Ke Widget di Blog


 1.Login akun Blogger kita.
2.Pada halaman dashboard, masuklah ke bagian tata letak.
3.Klik tambahkan gadget diposisi widget about The Author Box ini ingin dipasang.
4.Pilih HTML/Javascript, dan masukan kode berikut.

<div class="gn"> <img alt="gn" class="gn-gambar" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/14291628_626499870856446_7988046278648323870_n.jpg?oh=0eb2fb79782f86c31ec026d016926477&oe=588BD9B1" title="khun" /> <a class="gnfb" href="https://www.facebook.com/gopenote/" rel="nofollow" target="_blank">f</a> <a class="gngp" href="http://plus.google.com/103662134309614692674" rel="nofollow" target="_blank">G</a> <a class="gntw" href="https://twitter.com/@Gophekhun" rel="nofollow" target="_blank">t</a> <div class="gndeskripsi"> Hallo, Nama saya <b><a href="http://facebook.com/zone.ace">Rafli Renaldo</a>,</b> Saya Belajar Jadi Penulis Artikel Untuk Membagikan Pemahaman Semoga Ini Bermanfaat.<br /> You, ADD sosial Network saya. <a href="https://gopenote.blogspot.co.id" target="_blank"> Read More »</a></div></div>
<style>
.gn { width:auto; margin:0; height:95px; padding:5px; border:1px solid #ddd; }
.gn-gambar { float:left; width:85px; height:85px; margin:4px 1px 1px 3px; opacity:0.8; border-top:2px solid #cf2031; border-right:2px solid #0f7dc8; border-bottom:2px solid #2eb31a; border-left:2px solid #eab823; }
.gndeskripsi { width:auto; padding:0 0 0 20px; font-family:arial,sans-serif; margin:-90px 0 0 110px; font-size:11px; color:#ff000; }
.gnfb,.gngp,.gntw { 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:5px; position:relative; margin-right:0; }
.gnfb { background:#3B5998; margin-left:95px; }
.gnfb:hover { border-color:#4F77CC; box-shadow:0 0 3px #4F77CC; }
.gngp { background:#D34836; font-size:12px; margin-left:95px; }
.gngp:hover { border-color:#EB503C; box-shadow:0 0 3px #EB503C; }
.gntw { background:#4099FF; margin-left:95px; }
.gntw:hover { border-color:#36D0FF; box-shadow:0 0 3px #36D0FF; }
</style>

Setting Widget



Silahkan ganti kode berwarna: 

  • warna blue dengan foto profil kamu, 
  • warna red dengan fans page,
  • warna aqua dengan google plus,
  • warna green dengan akun twitter dan
  • warna grey dengan akun facebook.


 Ok sobat, Sekian artikel kali ini, jangan lupa lihat tutorial blog terbaru dari gn, semoga bermanfaat.