Friday, 10 May 2013

Tagged under:

Slider About Author or About Me Widget for Blogger Blog

About me widget for blogger blog
Customize about me widget for blogger blog is one of the foremost jobs thats bring beauty in blog & websites. We see that most of ethic bloggers are using customize and stylishly about author widget for theirs blog & website. This is a very stylishly widget thats will give a new design to your blog & will make your blog attractive in the eyes of viewers. As normal every one place an about me bio widget at footer area with default gadget which have no attraction & have no delectable effects by the viewers. So it will be better more if we could make its design stylishly for better viewers then it will not only keeps our footer design eye-catchy but its will give a lot a new style to our blog website. So this tutorial guide us about how to customize and add a stylishly about author widget in blogger blog.

Does it increase blog loading Time By using About Me Widget ?

Absolutely No. IT will not compel your blog on loading time that is why because this widget is totally created in HTML & CSS3. By using such languages for widget or gadget it will never increase blog loading time. Our editorial team mostly focus on CSS3, JQuery & HTMl for creating an awesome widget

It might be happened & may increase your blog loading time if you are using so many java script gadgets in you blog. JavaScript is a heavy scripting language then all of others. So we are urging you never use too many java script gadget even if it could give awesome design to your blog.

How to Add About Author Widget in Blogger Blog

This a very simple process just follow the below simple steps
  • Go to blogger dashboard:
  • Go to Layout >> Add Html/javscript widget:
  • Add Past the below given code:

<h2 class="title">About Me</h2>
<div class="widget-content">
<!--[if !IE]> -->
<style>
}
#probloggertricks:hover
 {
border:2px solid #ccc;
cursor:pointer;
}
.opacity
{
opacity: 0.5;
margin-right: 50px;
-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;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
}
.opacity:hover
{
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

</style>
   <!--[endif]---->


<style>
#probloggertricks
{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileAditya:hover
 {
border:2px solid #ccc;
cursor:pointer;
}

.opacity:hover
 {
opacity: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

</style>

<img class="opacity" id="probloggertricks" src="http://3.bp.blogspot.com/-g_HuIQ1v4d4/AAAAAAAAAAI/AAAAAAAAADI/ss98iB4ADMY/s250-c-k/photo.jpg" width="100" />
<div style="font-family: Arial Tahoma Verdana; font-size: 13px; text-align: justify; ">
<b>Founder & Author:</b> Hi Friends, my name is Hafeez Ullah Khan student of computer science 18 year old blogger, certified SEO consultant & addicted web developer guru, the Entrepreneur of <a href="http://www.probloggertricks.com"> <b>ProBloggerTricks</b></a> who based out of the wonderful country name "Pakistan". He is a problogger & running a number of sites from his living room</div><a style="color:#5634;" href="http://www.probloggertricks.com/2013/01/something-about-admin-hafeez-ullah-khan.html" target="_blank">...Read More</a><!--![endif]---->
</div>


Following are the Possible Customizations

  • Replace Red color links with your own image
  • If you want to give your own blog text style just change the blue line code with specific text property
  • Replace Yellow Paragraph with your own Author Bio
  • Replace Green Color Code if you want to change Read more link color
  • Replace Purple Color links with your own blog about me page links
  • You almost done:


Floating Sharing Buttons widget for Blogger

Stylishly Popular Post Widget



Enjoy: Enjoy guys by using this slider stylishly about me widget for blog website. Thanks & stay for updates

32 comments:

  1. Thanks for provide great tutorial

    ReplyDelete
    Replies
    1. Thanks Awais Bro For your appreciations. We will publish some great tutorial more than this one keep visiting us. and hear for updates. Thanks Once again see you soon bro.

      Delete
  2. Great tutorial bro.. keep it up.

    ReplyDelete
    Replies
    1. Thank You Mohammad Yaqoob for encouregements. Good thumbing to PBT.
      Make a hands with PBT and be make a good community for our Teams.

      Delete
    2. Yes. It is really a nice tutorial. Liked it.

      Delete
  3. Awesome sharing bro. This widget is really cool that add more functionality to our blog.

    ReplyDelete
    Replies
    1. Thank you so much Ankit kumar to see you here. Thanks for appreciations. See you near.

      Delete
  4. Man Nice Work U R Doing Job Like MBT I Like It Thanks For The Great Tutorial

    ReplyDelete
    Replies
    1. Oh man We and doing work like MBT thats kidding Abdul Bro. By the ways many many thanks that you give a reward as MBT like. Thanks and see you soon bro in the next tutorial.

      Delete
  5. Really this was an awesome way to add Author Box Blogger Widget for the new blogger. It must be very easy to use any of the blog. Thanks for the sharing this useful things.

    ReplyDelete
    Replies
    1. Humbly Thanks Mr Shakeel Bro that you liked our jobs. This is indeed a very useful and attractive widget for blogger users. It will bring beauty in your blog. Many Many thanks and keep visiting us.

      Delete
  6. Hey bro, thank's for sharing this trick directly to me. I think author widget is good idea to make our blogger blog looks better.

    ReplyDelete
    Replies
    1. You are welcome Johny Bro. I think this your first land on PBT. Bundles of thanks to you man And be around with us & hear for updates in feature. Thanks once again.

      Delete
  7. hafeez brother aap eatne kam time me google ke first page me kese aa gaye what is secret of ur blog and seo please share...?

    ReplyDelete
    Replies
    1. Rajesh Patile Brother Please dont mind atleast try to leave your comments in English.
      Bro there is alot of things you should apply on your blog to bring your blog on first page. So we could not explain such big theory here. Join us at fb we will talk about its. See you soon.

      Delete
  8. A good script on the about me page - bravo

    ReplyDelete
    Replies
    1. Yap Peter Bro ITs indeed a very helpful and eye-catchy scripting Css3 widget for blogger blog. Bundle of thanks be around with us.

      Delete
  9. This is nice and great tips i used this on my blog www.bloggerheroe.com..

    ReplyDelete
  10. I certainly needed this widget.
    Now am on it..
    Bookmarked your website..
    Looking forward to customize my website by the tutorials given on your website..

    Fabulous work..

    ReplyDelete
  11. It is not appearing on my blog as yours :(

    ReplyDelete
    Replies
    1. it will definitely work just try once a again also try to copy the whole coding, any issue then feel free to ask

      Delete
  12. جزاك اللهُ خيراً for the worthy share brother, I am using all yours

    thanks again

    ReplyDelete
  13. oh really its awsm widget bro
    but bro this tool showing at last of the page
    how we can show it before comments box ?

    ReplyDelete
    Replies
    1. try to add the html code after post body tag.

      Delete
  14. Very nice guide indeed!
    You made it look very simple and straight.
    Good job !

    ReplyDelete
  15. Very very good widget and your theme totally rocks

    ReplyDelete
  16. Wow this is just awesome! Thanks a lot!
    But can I change the color of text "About Me", and the line beneath it from blue to red? I don't really know how to do it.

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism