Wednesday, 15 May 2013

Add Stylish About Author Widget Below Blogger Post.

Filled under:



Dear loyal readers hope that you all are better with the mercy of omnipotent creator. I'm also better and today i think you'd be great happy having a nice blogger tactical widget which will stay below the footer section of post and is capable to show your authors details to your loyal readers. I exacted this widget from CSS script and later made workable on Blogger and HTML as well. This widget is fully customizable and stylish and over more stylizeable. You just need to do following to be handled out with this fascinating tutorial. Live demo you might see right here

Prepare Your Template

1. First of all go to Blogger and log-in with your account
2. Go to template section and download a copy of it unless you don't have anyone
3. Now seek for ]]></b:skin> and add the following code just above it

.profile-author {margin-bottom:10px; height:115px; background:transparent; padding:5px; border:1px solid #ccc;  -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;box-shadow: 1px 1px 1px #CCCCCC;font: normal 12px georgia,arial !important;}
.profile-author img {width:70px;height:70px;padding:5px;border:1px solid #ddd;-moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; margin:0px 5px 0px 0px;cursor:pointer;}
.profile-author p {color:#666; text-align:justify;}
.profile-author p a {color:#666; text-decoration:none;}
.profile-author p a:hover {color:#ddd; text-decoration:underline;}
.profile-author hover {border:1px dotted #333;}
.profile-author t3{font: bold 14px georgia,arial !important;margin:9px 0px !important;color:green !important;border-bottom:1px solid green !important;border-top:0px !important;}

4. Save your template

Adding Final Script

Now go to post new one and below of your text simply add the following script and after customization publish it
<div class="profile-author">
<t3>About Author:</t3>
<img align="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLO7hc3KEOF_vxfrf5qT1PL38-C2RivQiIMuVspCmdwgelRoYkS8nz9fNVaLEVQbn4LMgesCFxLbXgn_1a8_VksA6ZdIXQPRN8fbKxn2V8MPs_40nF2kTf0ptsWgDmV8wCmvRojAy9czAO/s1600/photo.jpg" style="margin: 10px 10px 20px 0px; padding: 10px 10px 20px 0px;" />
<div style="text-align: justify;"><br/>
<div style="color: black; text-align: justify;">AUTHOR TEXTS GO TO HERE</div>
<div style="text-align: justify;">
<span style="color: black;">Follow him @</span> <a
href="GOOGLE PROFILE LINK"target="_blank">Google+</a> | <a href="FACEBOOK PROFILE LINK" rel="nofollow" target="_blank">Facebook</a>
</div>
</div>
</div>
</div>

Customization Guidance

1. Add Author texts by developing author text goes to here
2. Change Author Google profile link by changing google profile link
3. Change Author Facebook profile link by changing facebook profile link

How To Offer An Author As To Be A Contributor

It's simple to offer an author just do the following

1. Go to Settings>Basic later
2. Click on +Add a Author link and insert any favorite guy's email address to offer to be contributor of you blog
3. Then Google will send a link to that mail address by clicking on that link the provider could contribute posts on your blog and he could see that blog live on his account.
4. You could even cancel him from your author lists

3 comments:

  1. Its very helpfull for me thanks to share.

    Education Help

    ReplyDelete
  2. Your Work is exellent it's helpful for me also check my post!!!

    Academic Papers

    ReplyDelete
  3. It is really different and fancy widget for blogger users. Thanks for sharing with us.
    website design

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...