Cara membuat Kotak Author dengan Tombol Sosial Media

Ok sobat anisuka.com pada kesempatan ini akan membagikan kepada anda bagaimana cara membuat Author Bos dengan tombol media sosial seperti Google plus, facebook, twitter dkk. Sebenarnya sebelumnya juga sudah pernah dibagikan widget author box seperti ini, cuma kali ini tampilannya berbeda karena cocok untuk diletakan dibawah postingan blog.

Kelebihannya juga sudah ada tombol Sosialnya jadi seandainya di template sobat belum ada tombol share ke sosial media maka dapat mencoba menggunakan widget author ini.

LIHAT DEMO

MEMBUAT WIDGET AUTHOR BOX Di BLOG

Pertama yang harus anda lakukan Masuk ke Dasboard blog dan pilih blog anda. kemudian pergi ke menu template >> edit HTML template Blog dan Cari kode <div class=’post-footer-line post-footer-line-1′> Jika anda sudah menemukan kodenya maka anda telah siap untuk menggunakan kode dibawah ini. Dan ingat sesuaikan tulisan berwarnah 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=”https://www.anisuka.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>.

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

5. Sekarang simpan template anda dan lihat hasilnya.

Tambahan:
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.


Baca Juga:

• Cara membuat chop Slider Otomatis
• Cara membuat Artike terkait model SLide

Sekian mengenai Cara membuat Kotak Author dengan Tombol Sosial Media di blog semoga bermanfaat untuk anda.

Diposkan oleh

Brando Mewo

You Might Also Like: