Cara membuat Kotak Author dengan Tombol MedSos di Blog

Haisob apa kabar? Ok sob, pada kesempatan ini saya akan membagikan cara membuat widget Author Box dengan tombol sosial media seperti Google plus, facebook, twitter dkk.

Kelebihannya juga sudah ada tombol Sosialnya jadi seandainya di template kamu belum ada tombol Sosial Media maka kamu dapat mencoba menggunakan widget Blogger yang satu ini.  Oh ya sob sebelumnya juga sudah pernah dibagikan widget author box seperti ini, kali ini tampilannya berbeda karena cocok untuk diletakan dibawah postingan blog.


Author Box With Social Connection


Author Box With Social Connection
Author Box With Social Connection

Cara memasang Widget Authort box With social connections di Blogger


Pertama yang harus kamu lakukan Masuk ke Dasboard blog dan pilih blog kamu yang ingin kamu pasingi widget ini. Pilih menu Template ➔ edit HTML dan Cari kode <div class='post-footer-line post-footer-line-1'>Jika kamu sudah menemukan kodenya maka kamu telah siap untuk menggunakan kode dibawah ini. Oh yah,  sialahkan sesuaikan tulisan berwarna merah dibawah ini sesuai kebutuhan.

Paste  Widget Code

<div class="beh-entry-author">
<div class="author-header main-color-bg">
<h4 class="title">
<a rel="author" href="#">Author name Here</a>
</h4>
</div>
<div class="author-wrap">
<div class="author-avatar">
<img class="avatar avatar-80 photo" width="80" height="80" src="Author profile image link here" alt="">
</div>
<div class="author-description">
Author bio goes here.
<div class="author-link">
<a rel="author" href="#">
Facebook
<span class="meta-nav">?</span>
</a>
</div>
</div>
</div>
</div>
<div class="entry-social">
<div class="fb">
<a target="_blank" href="Your_Facebok_Page">Facebook</a>
</div>
<div class="twitter">
<a target="_blank" href="Your_twitter_Profile">Twitter</a>
</div>
<div class="gplus">
<a target="_blank" href="Your_Googleplus_Follow">Google+</a>
</div>
<div class="linkedin">
<a target="_blank" href="Your_Linkedin_Profile">Linkedin</a>
</div>
<div class="pinterest">
<a target="_blank" href="You_Pinterest_Page">Pinterest</a>
</div>
<div class="delicious">
<a target="_blank" href="Your_Delicious_Profile">Delicious</a>
</div>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.seocips.com">blogger widgets</a></p>
</div>

Paste CSS Code

Untuk kode dibawah ini dapat anda letakan diatas kode CSS Blog anda misalnya di atas  ]]></b:skin> atau </style>.
.haisob-social { margin-bottom:20px; overflow:hidden; }
.haisob-social a { color:#FFFFFF !important; display:block; font-family:"Open Sans","Tahoma","Verdana","Arial",sans-serif; font-weight:600; padding-left:20px; }
.haisob-social div { float:left; margin-right:10px; width:138px; }
.haisob-social .fb a { background:url("http://3.bp.blogspot.com/-yqD2363XuAo/UeDk98twSlI/AAAAAAAAArg/kXIzFBWmczM/s1600/fb14.png") no-repeat scroll 10px center #3B5999; padding:7px 10px 7px 26px; }
.haisob-social .fb a:hover { background:url("http://3.bp.blogspot.com/-yqD2363XuAo/UeDk98twSlI/AAAAAAAAArg/kXIzFBWmczM/s1600/fb14.png") no-repeat scroll 10px center #324B81; }
.haisob-social .twitter a { background:url("http://3.bp.blogspot.com/-0u8P4VQmEeU/UeDlVdilwcI/AAAAAAAAAro/lGTnlvHGyVw/s1600/twitter14.png") no-repeat scroll 8px center #01BBF6; padding:7px 10px 7px 32px; }
.haisob-social .twitter a:hover { background:url("http://3.bp.blogspot.com/-0u8P4VQmEeU/UeDlVdilwcI/AAAAAAAAAro/lGTnlvHGyVw/s1600/twitter14.png") no-repeat scroll 8px center #01A7DE; }
.haisob-social .gplus a { background:url("http://3.bp.blogspot.com/-A8fFRexz_zk/UeDlgadvpiI/AAAAAAAAArw/TRd7NWNwo9s/s1600/gplus14.png") no-repeat scroll 10px center #D54135; padding:7px 10px 7px 32px; }
.haisob-social .gplus a:hover { background:url("http://3.bp.blogspot.com/-A8fFRexz_zk/UeDlgadvpiI/AAAAAAAAArw/TRd7NWNwo9s/s1600/gplus14.png") no-repeat scroll 10px center #BA3227; }
.haisob-social .linkedin a { background:url("http://4.bp.blogspot.com/-yuEMxhpIXPc/UeDltjBGR1I/AAAAAAAAAr4/kgidavlGbY8/s1600/linkedin14.png") no-repeat scroll 10px center #167FB1; padding:7px 10px 7px 35px; }
.haisob-social .linkedin a:hover { background:url("http://4.bp.blogspot.com/-yuEMxhpIXPc/UeDltjBGR1I/AAAAAAAAAr4/kgidavlGbY8/s1600/linkedin14.png") no-repeat scroll 10px center #136F9B; }
.haisob-social .pinterest a { background:url("http://1.bp.blogspot.com/-v-ZkEQhYpug/UeDl6uIio-I/AAAAAAAAAsA/9rqq2cXT08k/s320/pinterest14.png") no-repeat scroll 10px center #CB2027; padding:7px 10px 7px 32px; }
.haisob-social .pinterest a:hover { background:url("http://1.bp.blogspot.com/-v-ZkEQhYpug/UeDl6uIio-I/AAAAAAAAAsA/9rqq2cXT08k/s320/pinterest14.png") no-repeat scroll 10px center #B01C23; }
.haisob-social .delicious a { background:url("http://2.bp.blogspot.com/-J9p31gkQfXw/UeDmILHMQwI/AAAAAAAAAsI/bEws_iRNx7g/s320/delicious14.png") no-repeat scroll 10px center #3173D1; padding:7px 10px 7px 32px; }
.haisob-social .delicious a:hover { background:url("http://2.bp.blogspot.com/-J9p31gkQfXw/UeDmILHMQwI/AAAAAAAAAsI/bEws_iRNx7g/s320/delicious14.png") no-repeat scroll 10px center #2963B8; }
.haisob-social .delicious { margin-right:0; }
.beh-haisob-author { margin-bottom:20px; }
.beh-haisob-author .author-header { padding:1px 15px; }
.beh-haisob-author .author-header h4 a:hover { color:#000000; }
.beh-haisob-author .author-header h4 a { color:#FFFFFF; }
.beh-haisob-author .author-header h4 { color:#FFFFFF; font-size:15px; text-transform:uppercase; }
.beh-haisob-author .author-wrap { border:1px solid #EEEEEE; overflow:hidden; padding:12px 15px; }
.beh-haisob-author .author-avatar { float:left; height:80px; margin-right:30px; width:80px; }
.beh-haisob-author .author-link { margin-top:5px; }
.main-color-bg { background:none repeat scroll 0 0 #2BBFF6; }
.beh-haisob-author a { color:#3A3A3A; outline:0 none; text-decoration:none; transition:all 0.2s ease 0s; }
.haisob-social a { color:#3A3A3A; outline:0 none; text-decoration:none; transition:all 0.2s ease 0s; }
5. Sekarang simpan template anda dan lihat hasilnya.

Note:
Jika ketika dipasang widgetnya terlalu panjang, kurangi saja salah satu tombol sosial yang sobat tidak perlukan, Caranya / contohnya menghapus semua kode berwarna hijau di atas.

Sekian mengenai cara membuat Author Box dengan tombol sosial media di blog, salam Bloggers.
Join This Site