Hi Visitors!! After the success of our previous template "Skillmag". As you know that the templateis very unique in its feature and it contains many unique widgets. So we are going to publish its widgets individually. The first widget that we have published earlier,i.e. "Stylish all in one social widget with hover effect for blogger" and now we are going to publish a awesome and stylish author box, taken from this template. As you can see above in the screenshot, the widget contains some cool features like social links, admin tag and hover effect on the thumbnail. the widget is purely based on css so it will not affect your blog speed.the width of the widget is responsive so you can place the widget anywhere you want but we highly recommend that to put the widget just below the post in post pages only.So, at first lets see the demo of the widget.
Features of this widget:-
- Supports almost every browser
- Super Fast Loading,loads in split seconds
- Very easy coding and easy to install
- It will not affect the blog speed
- looks cool and stylish
How to install the widget:-
These steps are so simple and easy that every new blogger will not face any kind of problem to install it in their blog.
- Go To Blogger.com >> Your Blog >> Template
- Now Backup your template.
- Then select Edit HTML >> Proceed
- Don’t forget to Click/Tick the Expand Template Widgets box.
- Search for ]]></b:skin> and just above it paste the following CSS code.
/*****************************************
PostAuthor Box by skillblogger.com
******************************************/
.sbpostauthorbox {
position: relative;
margin: 5px auto;
padding: 15px;
width:100%;
min-height: 160px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
color:#1f1f1f1f;
border: 2px solid #c4c4c4;
border-radius: 5px;
-moz-box-shadow:0 0 0 4px rgba(100,100,100,0.1);
box-shadow:0 0 0 4px rgba(100,100,100,0.1);
-webkit-box-shadow:0 0 0 4px rgba(100,100,100,0.1);
}
.sbpostauthoravatar {
background: #cccccc;
border: 1px solid #555;
float: left;
height: 128px;
width: 128px;
padding: 5px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 5px;
-webkit-box-shadow: 0 0 4px 0 #d9d9d9;
-moz-box-shadow: 0 0 4px 0 #d9d9d9;
box-shadow: 0 0 4px 0 #d9d9d9;
}
.sbpostauthoravatar img {
height: 128px;
width: 128px;
border-radius: 5px;
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.sbpostauthoravatar:hover img {
opacity: 1;
}
.sbpostauthorlabel {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjZyVpGTRb7EBgu0wznUxd6baPQN71Q2FPDFCIfMHVhV_-mZcMh8V1JKJIndRdj5IYikbkr74o5Yj_HfQom2mV8v0TQ9euURrYj16BwRDuM5YBwqfiRlmaZQlHSw2F4ExtwU999MPI2D6p/s1600/admin.png") no-repeat center transparent;
display: block;
height: 25px;
position: absolute;
bottom: -30px;
width: 128px;
}
.sbpostauthorcontent {
margin-left: 160px;
}
.sbpostauthorhead {
border-bottom: 1px solid #c4c4c4;
margin-bottom: 5px;
padding: 0 0 10px 0;
position: relative;
}
.sbpostauthorbox h5 {
font-family: Trebuchet MS;
color: #302E29;
font-size: 25px;
font-weight: normal;
line-height: 30px;
margin: 0;
border: none;
text-transform: none;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sbpostauthorbox h5 a {
color: #302E29 !important;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sbpostauthorbox h5 a:hover {
color: #E65002 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.sbpostauthorbox p.postAuthorbio {
line-height: 18px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
color:#111;
}
.sbpostauthorbox p a {
color: #E65002;
}
.sbpostauthorbox-footer{
padding:10px 0 10px;
font:bold 14px Trebuchet MS;
}
.sbpostauthorbox-footer a:hover{
color:#9df200;
}
Now let’s add the final and important part of the widget, Search for <data:post.body/> and just below/after it paste the following coding.
<b:if cond='data:blog.pageType == "item"'><div class="sbpostauthorbox"><div class="sbpostauthoravatar"><img alt="Team SB" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyQd0pUrNMrmXDQo9smLn9cfbhyphenhyphenP6xo4V3VrpBsBmtQVFPtCDrupc9o9zWqvl77GknsYE6gTiS2GrH4Alop46n9qYxE6vg02LECuH06WhX0PWdn8cYWTr8VYf_Jtei0NPBMz21WeJMUYZ6/s207-p-no/" /><br /><div class="sbpostauthorlabel"></div></div><div class="sbpostauthorcontent"><div class="sbpostauthorhead"><h5>Posted By: <a href="http://www.blogger.com/blogger.g?blogID=6059621468094446007#" title="Team SB"><b><i>Team SB</i></b></a></h5></div><div class="postAuthorbio">Deep is a 17 year old young Blogger, currently living in West Bengal, India. He is Founder cum editor-in-chief of SkillBlogger He is not a professional. But Still he can play with BloggerTemplate Codes, Web Developing, Graphic Designing, Html, Css, Jquery,logo Designing and Blogger Widgets.He can also clone blogger templates,and he came in lime light by cloning some famous and difficult templates of some famous blog's. </div><div class="sbpostauthorbox-footer"><div style="float: left; text-align: left;">Join Us On: <a href="http://www.facebook.com/Reloaded.Deep" rel="nofollow" target="_blank"><span style="color: #egc6d6; font-weight: bold;">Facebook</span></a> | <a href="http://twitter.com/Antichandu" rel="nofollow" target="_blank"><span style="color: #9ae4e8; font-weight: bold;">Twitter</span></a> | <a href="https://plus.google.com/117216612617753427570" rel="nofollow" target="_blank"><span style="color: #d34836; font-weight: bold;">Goole Plus</span></a></div></div></div></div></div></b:if>
All Done : Now everything is completed just Save your Template by pressing Save templatebutton.
Spread The Love, Share Our Article
0 comments:
Post a Comment