.

Tuesday, September 3, 2013

Advance Author Box Widget For Blogger



beautiful author box
Showing a small info about the author at end of article will be more useful for readers. When readers (visitors) liked the article very well, they might have to know about the author who wrote? from where?. Therefore blog's author have to add author info box below every blog post. Even it can create a good affability with  readers well.

Did you think info about the person who gave you any valuable thing that you have expected for a long time? You might say Yes. Because it is our pleasure to know about those person who gave us valuable

things. So In case of reading article, Readers should have a tasty to know about the author after reading the article.

Advance author box is an widget which show small info of blog author or writer with profile image and social icon. This widget is developed by me. Absolutely It's free of charge. You can use in your blog very easily. Only few simple codes have to add in your blog. It look elegance and premium. Even blog author can gain social media followers through this widget.
I would recommend to add this author box below every blogger post. You can add anywhere, no problem! Below article is best place. Go through steps given below to add Advance Author Box in Blogger.

1. Go to Blogger → Select a blog  Template  Edit HTML.
2. Find (Ctrl + F)  <data:post.body/>  and add the following HTML code after it.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="about-author">
<h3 class="boxtitle">About Author</h3>
<div class="authorbox">
<div class="authorsocial">
  <li><a class="fb" href="http://facebook.com/SoftGlad" rel="nofollow"></a></li>
  <li><a class="twitter" href="http://twitter.com/soft_glad" rel="nofollow"></a></li>
  <li><a class="google" href="https://plus.google.com/114636838169087641091" rel="author"></a></li>
  <li><a class="in" href="http://sa.linkedin.com/in/ashiqhassan" rel="nofollow"></a></li>
</div>
  <div class="authorinfo">
<img src="profileimg.png" />
<p>He known as Ashiq Hassan, is the founder and the brain behind SoftGlad. A 16 
year old teen from kerala, India. He provides high quality tutorials about latest 
web design and technology trends. He loves music and likely to be a musician in 
Vstars Band. <a href="#">Read More</a></p>
</div>
</div>
</div>
</b:if>
Customize: you have to change few things from above HTML code. Replace all social media site URLs with your social media profile URLs (line #5, 6, 7 and 8). Replace profileimg.png (line #11) with your photo URL. Add your own info in between two <p> </p> tag.

3. Now we have to style the author box by adding CSS code. Again Find  ]]></b:skin>   and add following code before or above  it.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
.about-author {
    width: 100%;
}
.authorbox {
    overflow: hidden;
    padding: 0;
    background: #333;
    color: #ccc;
}
.authorbox .authorinfo {
    color: #ccc;
}
.authorbox .authorsocial {
    float: left;
}
.authorbox .authorsocial li {
    list-style: none;
    margin: 0;
    position: relative;
}
.authorbox .authorsocial li a {
    width: 32px;
    display: block;
    height: 32px;
    margin: 0;
}
.authorbox .authorinfo img {
    float: left;
    margin: 4px 10px 4px 5px;
    border-radius: 100%;
    width: 17%;
    background: #fff;
    padding: 5px;
}
.authorbox .authorinfo p {
    margin: 0;
    font-size: 18px;
    padding: 0 5px;
    line-height: 25px!important;
    font: 15px "Armata", Arial;
    text-align: left;
}
.authorinfo p a {
    text-decoration:none;
    color:#fff;
}
.authorbox h3 {
    margin: 0;
    display: inline-block;
    background: #333;
    color: #fff;
    font: bold 20px Arial;
    padding: 5px 10px;
}
h3.boxtitle {
    background: #333;
    color: #fff;
    margin: 0 auto;
    width: 25%;
    padding: 2px 10px;
    font: bold 16px "Armata", Arial
}
.authorbox .authorsocial li .fb {
    background-position: 0px 0px;
}
.authorbox .authorsocial li .twitter {
    background-position: 0px -32px;
}
.authorbox .authorsocial li .google {
    background-position: 0px -64px;
}
.authorbox .authorsocial li .in {
    background-position: 0px -96px;
}
.authorbox .authorsocial li .in:hover {
    background-position: -32px -96px;
}
.authorbox .authorsocial li .google:hover {
    background-position: -32px -64px;
}
.authorbox .authorsocial li .twitter:hover {
    background-position: -32px -32px;
}
.authorbox .authorsocial li .fb:hover {
    background-position: -32px 0px;
}
.authorbox:hover img {
    background: #1BC3F8;
}
.authorbox .authorinfo img, .authorbox .authorsocial li a {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
@font-face {
    font-family: 'Armata';
    font-style: normal;
    font-weight: 400;
    src: local('Armata'), local('Armata-Regular'), 
url(http://themes.googleusercontent.com/static/fonts/armata/v3/FG9R9aX-RIX_AvJI8USOWg.woff) format('woff');
}
4. Save Template.  That's all.

I hope you like this widget. Do post your feedback in comment below and if you get any error tell me in comment. Do Share with your friend and enjoy.
Spread The Love, Share Our Article

0 comments:

Post a Comment

 

 about US


SoftGlad is a leading blog which providing Latest News, Social Media, Web Design, Blogging, PC tutorials and many other stuffs. We will always trying to relate with our valuable readers by updating the quality contents. There are millions of blogs which providing technological knowledge but our goal is to provide dainty articles and useful technological knowledge.
See More

RECENT POSTS


RECENT Comment