Home / Social Buttons / Add Author Box With Stylish Social Media Buttons in Blogger

Add Author Box With Stylish Social Media Buttons in Blogger

Posted by Unknown Jumat, 03 Januari 2014 0 komentar

Most of professional bloggers have been using author bio box from a long period adding it in blogger them defines and make good relation between readers and admin, it connects directly readers to author, the widgets contains social media button which can be used as admin social profiles or can be used as website/blog fan pages, this is not the first article on author bio box MBR Personally have designed a stylish author box for blogger, the below tutorial is quit easy to add it in blogger and see the below live demo and imagine how will it appear on your blog,

Adding Author Box in Blogger!

First of all Backup your template
Go to Blogger------> Dashboard
And -------->EDIT HTML

Now Search for the below code with the help of Ctrl+F

<div class='post-footer-line post-footer-line-1'>

After finding the above code just like the below image then move to the next step to add the author bio box in blogger.

Now simply copy and paste the below code just beneath/Below the above code we searched .

<div class="beh-entry-author">
<div class="author-header main-color-bg">
<h4 class="title">
<a rel="author" href="#">Admin Name Here</a>
</h4>
</div>
<div class="author-wrap">
<div class="author-avatar">
<img class="avatar avatar-80 photo" width="80" height="80" src="Your Image Link Here"/></div>
<div class="author-description">
Author Bio Here Write something about yourself.
<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.bloggingehow.com">blogger widgets</a></p>
</div>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLb-ygY3QZWQ1mYZARwF9XlRYbvMDselT6e3qeEaXAALb2AT0iazjzH6WrMNVRw8_-IK_xq4Y8xDjFmRBoNyeCfagLZLzJJoZOHDEtwScPd-nj-XB-Xc4iUV8B-RkASAV8bUtHtee8Y6Gc/s1600/fb14.png") no-repeat scroll 10px center #3B5999;
padding: 7px 10px 7px 26px;
}
.entry-social .fb a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLb-ygY3QZWQ1mYZARwF9XlRYbvMDselT6e3qeEaXAALb2AT0iazjzH6WrMNVRw8_-IK_xq4Y8xDjFmRBoNyeCfagLZLzJJoZOHDEtwScPd-nj-XB-Xc4iUV8B-RkASAV8bUtHtee8Y6Gc/s1600/fb14.png") no-repeat scroll 10px center #324B81;
}
.entry-social .twitter a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbnG1pJP0oezH_nNIBsRsF0oxXjy1nTw1vqkzKkrozW-esJwgikVOyKbXtwHFpceb3MjLHLV9KNZgdRhbyfUiPyEwJuA3LUQ4oomGHqQ0K81K7LtM7hyphenhyphenj7yv128J3giQbMLVp4Fi0-3TdT/s1600/twitter14.png") no-repeat scroll 8px center #01BBF6;
padding: 7px 10px 7px 32px;
}
.entry-social .twitter a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbnG1pJP0oezH_nNIBsRsF0oxXjy1nTw1vqkzKkrozW-esJwgikVOyKbXtwHFpceb3MjLHLV9KNZgdRhbyfUiPyEwJuA3LUQ4oomGHqQ0K81K7LtM7hyphenhyphenj7yv128J3giQbMLVp4Fi0-3TdT/s1600/twitter14.png") no-repeat scroll 8px center #01A7DE;
}
.entry-social .gplus a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNVQqOen9EubSvZLgilsZzwXgXpg-TE-RkPDCgU_yGVQz9OyQ9U31BD1jYZb_bVQA5k_BUMGrQd3xdvLcTPGuMd7woQ5h2Q2qfvt8_TECTem9-fE21EtOTX5e-L-wTg2k-HX46S-a-Ivm_/s1600/gplus14.png") no-repeat scroll 10px center #D54135;
padding: 7px 10px 7px 32px;
}
.entry-social .gplus a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNVQqOen9EubSvZLgilsZzwXgXpg-TE-RkPDCgU_yGVQz9OyQ9U31BD1jYZb_bVQA5k_BUMGrQd3xdvLcTPGuMd7woQ5h2Q2qfvt8_TECTem9-fE21EtOTX5e-L-wTg2k-HX46S-a-Ivm_/s1600/gplus14.png") no-repeat scroll 10px center #BA3227;
}
.entry-social .linkedin a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkUo6XPQ3jpq4ctModE3tYNimZlIV25XKutZw5D9SyhoTCO7ZbMXHYZU9QfLdyjGDUj2G-4KANVy72LjxBCSzmqEMgOvJcqpU9qv6t6JyZ4p3L-8UvM8xT1ZnJCLnVjANQGSpbQ4UlQPCC/s1600/linkedin14.png") no-repeat scroll 10px center #167FB1;
padding: 7px 10px 7px 35px;
}
.entry-social .linkedin a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkUo6XPQ3jpq4ctModE3tYNimZlIV25XKutZw5D9SyhoTCO7ZbMXHYZU9QfLdyjGDUj2G-4KANVy72LjxBCSzmqEMgOvJcqpU9qv6t6JyZ4p3L-8UvM8xT1ZnJCLnVjANQGSpbQ4UlQPCC/s1600/linkedin14.png") no-repeat scroll 10px center #136F9B;
}
.entry-social .pinterest a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYCOLznPu_PWzt-jY6iJ2RHW_5pIC_HY4DUe3zEtZH2se1zuuFYL_y7XMKmyOKOUEaE0t5lU1Hh6Gg9DHre9MgLFTAIMdYzoh46HMLXoBVpKyEmez2Nv_1AOd3KYr4NDwrstfBB1mrfd9n/s320/pinterest14.png") no-repeat scroll 10px center #CB2027;
padding: 7px 10px 7px 32px;
}
.entry-social .pinterest a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYCOLznPu_PWzt-jY6iJ2RHW_5pIC_HY4DUe3zEtZH2se1zuuFYL_y7XMKmyOKOUEaE0t5lU1Hh6Gg9DHre9MgLFTAIMdYzoh46HMLXoBVpKyEmez2Nv_1AOd3KYr4NDwrstfBB1mrfd9n/s320/pinterest14.png") no-repeat scroll 10px center #B01C23;
}
.entry-social .delicious a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOhXk-9lU8hn5_ABB_dOlzMPMd6QhGYispky7EGF_5RyT9YIX1jJApFIYWsdUdBAKXwP2zUm-82pCQR5G4fJWlSbMj8czWoKogegTqbc5_JAXrDzRvN-wKLIIq4DpjRun-3IKzqOATM7nv/s320/delicious14.png") no-repeat scroll 10px center #3173D1;
padding: 7px 10px 7px 32px;
}
.entry-social .delicious a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOhXk-9lU8hn5_ABB_dOlzMPMd6QhGYispky7EGF_5RyT9YIX1jJApFIYWsdUdBAKXwP2zUm-82pCQR5G4fJWlSbMj8czWoKogegTqbc5_JAXrDzRvN-wKLIIq4DpjRun-3IKzqOATM7nv/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;
}
</style>

We are done here now just replace the highlighted text with your image,your Bio, Author Name,
Replace the highlighted red colour text with your social media profile link,

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Add Author Box With Stylish Social Media Buttons in Blogger
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://androidbackupapps.blogspot.com/2014/01/add-author-box-with-stylish-social.html. Terima kasih sudah singgah membaca artikel ini.