Add The Stylish About The Author Widget Below Of Your Posts | Tech Blog Guide - The Ultimate Guide To Technology World! Tech Blog Guide - The Ultimate Guide To Technology World!: Add The Stylish About The Author Widget Below Of Your Posts
Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

LiveZilla Live Help

Tamanna

Wednesday, June 12, 2013

Add The Stylish About The Author Widget Below Of Your Posts

Hello Readers!!Today we are going to share a new awesome and stylish about the author widget below of your posts.This widget is simple and effective.Adding this widget sure many visitors will contact you.At that time you will be professional for him/her.readers can easily ask you anything by contacting through your author widget.This widget looks is great.I also like this widget.This widget background color is black and fonts color are orange.Every visitors want to know about the blog author.So, we have made this widget for blogger/Blogspot users.It's very easy to add it on your blog.Just follow the steps and you are done!

How To Add It On Your Blog?

Addind CSS
 Note:Always Backup Your Template

  • Log In To Blogger.com 
  • Go To Your Blogger Dashboard
  • Navigate To Template And Click on Edit HTML
  • Now Search For Below Code.
]]></b:skin>
  • After Finding Above Code Add The Below Code Just Above ]]></b:skin>
 #TechBlogGuideauthorbox {
background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author_TechBlogGuide.jpg) no-repeat scroll left top;
width:auto;
overflow:hidden;
color:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
margin:5px auto;
padding:40px 10px 10px 20px;
font-family:verdana;
}
#TechBlogGuideauthorbox:hover {
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}
#TechBlogGuideauthorbox h4 {
font-size:16px;
color:#fff;
clear:none;
margin:0;
padding:10px 10px 5px;
}
#TechBlogGuideauthorbox .author_small {
font-style:italic;
}
#TechBlogGuideauthorbox img {
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(1deg);
-moz-transform: rotate(1deg);
float:left;
border:4px solid #ff4408;
margin:10px;
padding:0;
}
#TechBlogGuideauthorbox img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(+9deg);
-moz-transform: rotate(-1deg);
}
#TechBlogGuideauthorbox p {
color:#ffffff;
margin:0;
padding:0 10px 10px;
}
#TechBlogGuideauthorbox a {
color:#ff4408;
text-decoration:none;
} 

Adding HTML

Again, 
  • Find For Below Code
<data:post.body/>
  • Now Paste The Following Code Just Below <data:post.body/> 
 <div id="TechBlogGuideauthorbox">      
<img alt="" src="http://lh5.googleusercontent.com/-og_gp1y7_oY/AAAAAAAAAAI/AAAAAAAAAeo/NkHUzrs2NbM/s512-c/photo.jpg" height="100" width="100"></img>
<h4><a href="http://www.Techblogguide.blogspot.com/" title="Posts by Md.Asad Reza" rel="author">Posts by Md.Asad Reza</a></h4>
 <p>Hi, Md.Asad Reza is The Author Of This Blog. He is computer master, web designer and student of 10th class.He love to share new things.</p> <p>Follow Me On <a href="http://www.twitter.com/AsadReza2006">Twitter</a> Or <a href="http://www.facebook.com/TechBlogGuide">Facebook</a></p></div> 
  • Change The HighLighted Text With Your Own Link Or Text.
  • Mission Completed.
 Happy Blogging:)


Like the Post? Share with your Friends:-

Team SB
Posted By: Team SB

0 comments:

POST A COMMENT

Contact Us

Name

Email *

Message *

 

About Author

Hello! This is Md. Asad Reza, the owner and administrator of this blog, who lives in Janakpur, Nepal.I am Part Time bogger and web designe.I've started blogging in 2012.I learned the important things on blogger.I loves to coding.

About Us

Recent Comment

Copyright © . SkillBlogger. All Rights Reserved.
Designed by :-Way2themes