Hello friends, today i am back with about the Author box widget for your blog like the Author box style in SpiceUpYourBlog.
Benefits Of this Widget
- Fast loading.
- SEO optimized.
- Customizable.
- User friendly colour theme.
How to Add Author box for Blogger
- Login to your Blogger Dashboard.
- Then go to Template –> Edit HTML.
- Now find the below code.
<head>
- Now paste the following code below <head> tag.
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'/>
- Now Find this code.
]]></b:skin>
- Paste the code given below exactly above the ]]></b:skin> tag.
.nibauthor-box {
background-image: linear-gradient(bottom, rgb(232,245,250) 0%, rgb(173,229,255) 50%);
background-image: -o-linear-gradient(bottom, rgb(232,245,250) 0%, rgb(173,229,255) 50%);
background-image: -moz-linear-gradient(bottom, rgb(232,245,250) 0%, rgb(173,229,255) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(232,245,250) 0%, rgb(173,229,255) 50%);
background-image: -ms-linear-gradient(bottom, rgb(232,245,250) 0%, rgb(173,229,255) 50%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(232,245,250)),
color-stop(0.5, rgb(173,229,255))
);
border-bottom: 3px solid #D4E2E8;
font-size: 14px;
font-family:Ropa Sans;
font-weight:400;
line-height: 1.5em;
margin: 0 0 20px;
padding: 10px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
min-height: 70px;
}
.nibauthor-box img {
border: 2px solid #9ED0DE;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
border-radius: 20px;
display: inline;
float: left;
margin: 0 15px 0 0;
max-height: 64px;
resize:auto;
}
- Now save your template and tick the Expand Widget Templates box.
- And find for the following code.
<div class='post-footer'>
- Now paste the following code above the <div class='post-footer'> tag.
<div class="nibauthor-box">Important Note :-
<img alt="Author" border="0" height="64px" src="Your Image URL Goes here" style="float: left; margin-right: 5px;" /><b>Author - </b>My name is <a href="YOUR SOCIAL PROFILE URL GOES HERE" rel="nofollow" target="blank">Rakshith Daniel</a>SOMETHING ABOUT YOU.<br />
- Replace “Your Image URL Goes here” with your Image URL.
- Replace "YOUR SOCIAL PROFILE URL GOES HERE" with any of your social profile either it might be Google+/Twitter/Facebook/LinkedIn etc.
- And don’t forget to write about yourself.
- Save the Template.
- That’s it you are done.
No comments:
Post a Comment