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 Blogger Don'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 and
RSS Subscription and from which your visitors can easily follow your
social media pages.
Social Media Plugins for Blogs:-
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.
LIVE DEMO
Go to Blogger Dashboard >> Template >>
Backup Your Blogger Template And find the following code
<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
<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzBV8s_8V5UO8EsQQAt6fsOiJa3XtD53QTYQUha2C0n_txoGR7GmDswaY0XjLVrarSoll0CQxJBDhJNX8T8QeAjy38QX86NZMh_eGMzmtnlIdvMvGsjApXCABfGum5-A3Yl-2KjghH-I/s1600/twitter.PNG") left top no-repeat; }
.icons a.ttirss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxJO0ueZK9NoRPoaDQ1lnLC7ZNv4mOYl7PFDu8LoLCdt4f5vgTJTZDz3nmRCoqqz4Fb8rB0GAP-9fSDDvohozWTZtZ-5fkQnFexwHMIB12v5VnOHNwensARgPgoToOHJPyqU2ZVqvC-Y8/s1600/Rss.PNG") left top no-repeat; }
.icons a.ttipinterest { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgktOfkGcp7arsvPXzX8MS9q_47_LuZeROCN51wiEVt3oLTEt-uXUIFqum_94oijqyv-LMU1zOwoVztI79Ua-OzKN3ktsYzIfwiLdgpoqMfE3GJPyq6DYKnNhq5H1wb3qoR920l_GKbjG4/s1600/pinterest.PNG") left top no-repeat; }
.icons a.ttifacebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheF7LPeoqsxbArdqs6SvlkOyL9TBwU3lr8zgbSplMVofeKUjG-ATmZFeacstX9dDXmB2puj_PUp_hRyfSe86z4wBpuVovJ_VkOQRarKcbfIE5_YWvqLhQOGTvDyC8fKtGHnHziDZI5BN8/s1600/facebook.PNG") left top no-repeat; }
.icons a.ttiyoutube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHDT7dpSmITsRzi1AK2cMG0h5nK9NfdhNHerJ8kWbmVo9rZ0WMmNIk8cgHPRpVJKVhpIYXONBTjepp3Oyp1Py_3sb07XZMG4tWXAfLvjlhT3MRj1vCXJKiTh8fh6S-zy7rrOVhpKJq3V4/s1600/youtube.PNG") left top no-repeat; }
.icons a.ttigoogleplus { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz8KqrAtuLaQBRQdiLjfh1EcYYcjbgUKKuJ6U3AACBxeWqlWhWql6p_73u-aDAj4hZgtUSzJLr_lOOIUsxroXuowrhNOTwwcb385DtA-GJNuzkrSb8eAwvoCr0VQPCNJ-5i-Ob9Gb081c/s1600/googleplus.PNG") left top no-repeat; }
.icons a.ttilinkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlZVnPnYlYATZ00dffwmh3VIiPGYAF0dccHwrqyGRUcpMKyQlgZEwrvKNYAiL8Oa1igUH_wA1rAxa5Vf1fSQE512CItea-pws0sZIlzgdz_ulcJKXVfXJ41sESAwQoCh9VORPgpAVzwM/s1600/linkedin.PNG") left top no-repeat; }
.icons a:hover { background-position: left -50px; }
</style>
<div align="center" class="authorbox">
<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 class="authorinfo">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" class="icons" >
<a class="ttifacebook" href="http://facebook.com/RazBlogs" target="_blank"></a>
<a class="ttitwitter" href="http://twitter.com/RazBlogs" target="_blank"></a>
<a class="ttigoogleplus" href="https://plus.google.com/u/0/101599591590694433398/posts" target="_blank"></a>
<a class="ttipinterest" href="http://pinterest.com/ehsan92110" target="_blank"></a>
<a class="ttiyoutube" href="https://youtube.com/thzzahsan" target="_blank"></a>
<a class="ttilinkedin" href="http://pk.linkedin.com/in/ehsan92110/" target="_blank"></a>
<a class="ttirss" 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:- 
No comments:
Post a Comment