TTI Bio Author Box with Hover Social Media Subscription
Whole I day I have worked very hard to make this Author Box, before I have also share an Author Bio Box widget for blogger, but this time I have personally made it and working about 5 to 6 hours and finally get result in the shape of Best and Beautiful Bio Author Box with Hover Social Media Subscription Following Buttons below every blogger post. Before I have share another Hover Social Media Widget for BloggerDon’t forget to check that one. In this Author Bio Box there are 6 different types of Social Media Following and Subscription Option such as Facebook, Twitter, Google Plus, Linkedin, Youtube, Pinterest andRSS Subscription and from which your visitors can easily follow your social media pages.
HOW TO INSTALL TTI BIO AUTHOR BOX TO BLOGGER
For shortage of time I have not create widget generator for this because I am much tired whole day working on this.. so you have to install in manually.
|
1
|
<div class='post-footer-line post-footer-line-1'>
|
May be you fine above code more than 1 time so you have to try in both . Now paste the below script and code after <div class=’post-footer-line post-footer-line-1′> code
|
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
|
<style>
.authorbox {
border: 3px solid #CF152A;
border-radius: 10px;
padding: 10px;
width: 625px;
font-family: Times New Roman;
background:black;
text-align: left;
}
.avatar {
float: left;
line-height: 1;
-moz-box-shadow: 0 0 10px #FFFFFF;
-webkit-box-shadow: 0 0 10px #FFFFFF;
box-shadow: 0 0 10px #FFFFFF;
border: 3px solid blus;
border-radius: 5px
}
.authorinfo {
font-family: courier,"courier new",monospace;
color: #8CC8FF;
font-size: 14px;
text-align: justify;
letter-spacing: 1.2pt;
word-spacing: -1.4pt;
line-height: 1.2;
margin:0 0 0 3.5cm;
}
.icons a {
display: inline-block;
width: 50px;
height: 50px;
margin: 15px;
-moz-box-shadow: 0 0 10px #FFFFFF;
-webkit-box-shadow: 0 0 10px #FFFFFF;
box-shadow: 0 0 10px #FFFFFF;
border: 3px solid blus;
border-radius: 5px
-o-transition: all .2s;
-moz-transition: all .2s;
-webkit-transition: all .2s;
-ms-transition: all .2s;
}
.icons a.ttitwitter { background: url("http://2.bp.blogspot.com/-j6_19DWmeEc/UcVbvKB9hxI/AAAAAAAACxg/ui24lXBSHyI/s1600/twitter.PNG") left top no-repeat; }
.icons a.ttirss { background: url("http://2.bp.blogspot.com/-EP8hhOU_o10/UcVbuBOk0zI/AAAAAAAACxE/NKHlrb8ubAE/s1600/Rss.PNG") left top no-repeat; }
.icons a.ttipinterest { background: url("http://2.bp.blogspot.com/-T6N_-Fsrn9s/UcVbuy_Df6I/AAAAAAAACxc/ll8-CuGfAeU/s1600/pinterest.PNG") left top no-repeat; }
.icons a.ttifacebook { background: url("http://1.bp.blogspot.com/-FgXl1EUCTIw/UcVbuEmz6LI/AAAAAAAACxA/7LpSviorIOg/s1600/facebook.PNG") left top no-repeat; }
.icons a.ttiyoutube { background: url("http://1.bp.blogspot.com/--MHBHNo8P48/UcVbvnqJZ9I/AAAAAAAACxo/f2Feey0Ch0E/s1600/youtube.PNG") left top no-repeat; }
.icons a.ttigoogleplus { background: url("http://2.bp.blogspot.com/-MzYAAE_0DHg/UcVbuCDmyrI/AAAAAAAACxI/kc7cB8goiAk/s1600/googleplus.PNG") left top no-repeat; }
.icons a.ttilinkedin { background: url("http://4.bp.blogspot.com/-aTOsv0U71aE/UcVbu8ZrQrI/AAAAAAAACxU/ui-nPjZ6xcc/s1600/linkedin.PNG") left top no-repeat; }
.icons a:hover { background-position: left -50px; }
</style>
<div align="center">
<a href="https://plus.google.com/107999810544634403869"><img alt='author-avatar'
src='https://lh4.googleusercontent.com/-nUtDxubKxOk/AAAAAAAAAAI/AAAAAAAABXs/guSuYBr1hF8/s120-c/photo.jpg' class='avatar' height='auto' width='auto'/></a><h2
align="center" style="margin:0 0 0 3.5cm; background:white;">
<u><i>About WebMaster</i></u></h2><br />
<div>Hi ! This is Muhammad Ehsan Qureshi, WebMaster of the TipsTricksIsland.com. Blogger and SEO Expert from Thatta Sindh Pakistan, Loving to serve myself
for sharing Tutorials, Tips Tricks about Internet, Computer Search Engine Optimization, Blogging Ideas.</div>
<div align="center" >
<a href="http://facebook.com/RazBlogs" target="_blank"></a>
<a href="http://twitter.com/RazBlogs" target="_blank"></a>
<a href="https://plus.google.com/u/0/101599591590694433398/posts" target="_blank"></a>
<a href="http://pinterest.com/ehsan92110" target="_blank"></a>
<a href="https://youtube.com/thzzahsan" target="_blank"></a>
<a href="http://pk.linkedin.com/in/ehsan92110/" target="_blank"></a>
<a href="http://feeds.feedburner.com/RazHackingTricks" target="_blank"></a>
</div>
<div style="text-align: right;">
<span style="background-color: white;"><span style="font-size: x-small;"><span style="font-family: "Courier New",Courier,monospace;"><a
href="http://www.tipstricksisland.com/2013/06/tti-bio-author-box-with-hover-social-media-subscription.html" target="_blank">+Get This</a></span></span></span>
</div>
</div></div>
|
Change the necessary fields as per your id as I have highlighted all the changeable codes.
Save your template and see what is new today..
Tips & Tricks:-
BOTTOM LINES
Hope you will find my this creation because first time I have made anything and worked hard whole day waiting for your feedback and also follow us and get updates from us.
Comments