Hello friend!Our previous article is on How to add notification bar on blogger So today our article is on How to add author bio widget under every post of your blogger blog.This widget is made up of HTML and Css.Many Bloggers wants the new and fresh widgets of blogger and most of the saying we want new author bio widget So i designed this widget This widget is for Blogger users only as WordPress has various plugins to deal with author boxes.I am happy to develop this author bio profile widget for bloggers. You have seen this widget in many WordPress blogs but implementing on blogger is very difficult. I was busy in this widget for last 20 hours to give a cool and Simple stylish look. Now, I have developed this author bio widget for your blogger blog. As my coding skills, i has tried to minimized the style sheet code.
HOW TO ADD THIS AUTHOR WIDGET TO BLOG:-
Login to Blogger > Dashborad
Click on Drop Down Menu and select Template
Backup your Template before making any changes to your blog
Press CTRL+F and search the code shown below.
]]></b:skin>
. Paste below code just above it.
.authorbox {
font-size:12px;
margin:0 auto;
padding:10px 0 5px;
width:auto;
background:#2aa4cf;
border-radius:10px;
border: 4px black solid;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
height:200px;
color:black;
}
.h1 {
border-bottom:2px solid black;
font-size:25px;
margin:-2px auto;
text-align:left;
}
#authortext {
float:right;
width:80%;
font-size:16px;
text-align:justify;
color:white;
margin:0;
padding:10px;
font-family:Helvetica,Arial,sans-serif;
}
.authorpicture {
padding:15px;
float:left;
width:110px;
height:100px;
margin:25px 15px auto;
opacity: 1;
}
.Now Search for below code once again
"<div class='post-footer-line post-footer-line-1'>"
.Paste below code just after it.
<div class="authorbox">
<div class="author">
<img class="authorpicture" src="YOUR PIC URL">
<h1 class="h1">About Editorial Team</h1>
<p id="authortext">
"YOUR TEXT HERE"
<a href='YOUR ABOUT US PAGE URL' rel='nofollow'>Readmore</a></p>
</div></div>
.Now Save Your Template
IF you have any Problem regarding this Widget then ask me in Comment section.
Enjoy
You are Done!!
Please Give Us Your 1 Minute In Sharing This Post!
Related Posts:
how to
WIDGETS
