Monday, 5 January 2015

Different About Author Widget For Blogger

11:20

According to the trend of Blogging and to introduce the author of posts from readers bloggers are using "About Author"gadget. This widget contains some information about author and a read more link which redirects on some other page having a complete information about author. A Blogger must use about author gadget in his blog to meet the standard of blogging. It's other benefit is that you are highlighted in the sight of other bloggers. Hence if your articles are good they will read the articles by seeing your name.


What Will You Get In This Article?

In this article I will get
  • Tutorial about "How to Place this Gadget In Blogger"
  • Gadgets of About Author having different styles
  • Learning of Customization of this widget
  • Suggestion about "Where to Place this widget"


How to Place Gadget In Blogger

To place the widget in your Blog follow these steps:
1:Go to  Blogger Layout  "Add a gadget" click on HTML/JavaScript Add.
 
 

 Now place one of the following code of the style of your choice and save.



Different Style of About Author gadget


1: Simple About Author Widget with avatar and Italic writing

Widget Code

    <!doctype html>


    <style>
    p.one {
        border-style: solid;
        border-width: 5px;
    border-color: Black;}

    </style>



    <p class="one"><span style="font-style:italic;">ADD YOUR BIO HERE <b><a href="http://graspinfo.blogspot.com/p/about-author.html"><span style="color: #38761d;">Read More. .</span></a></b></span><img src="http://2.bp.blogspot.com/-zMZH6CO3CSQ/VKgUqrdDMXI/AAAAAAAAAV8/_fg5w4GXsUs/s1600/photo.jpg" alt="Author" style="width:100px;height:125px;" />

    </!doctype>



2: About Author Widgets with Margin and styled avatars.

 Style 1: Avatar with cutting edges


Widget code:


<style>
p {
    border: 1px green;
    outline: green dotted;
}
</style>



<p><span style="font-style:italic;"><img src="http://2.bp.blogspot.com/-zMZH6CO3CSQ/VKgUqrdDMXI/AAAAAAAAAV8/_fg5w4GXsUs/s1600/photo.jpg" alt="Author" style="width:100px;height:125px; moz-border-radius: 35px;border-radius: 35px" />YOUR BIO. <a href="http://graspinfo.blogspot.com/p/count-word.html">Read More. . .</a></span>
</p>

 Style 2: Avatar with folded side


Widget code:

    <!doctype html>


    <style>
    p.one {
        border-style: solid;
        border-width: 5px;
    border-color: Black;}

    </style>



    <p class="one"><span style="font-style:italic;">ADD YOUR BIO HERE <b><a href="http://graspinfo.blogspot.com/p/about-author.html"><span style="color: #38761d;">Read More. .</span></a></b></span><img src="http://2.bp.blogspot.com/-zMZH6CO3CSQ/VKgUqrdDMXI/AAAAAAAAAV8/_fg5w4GXsUs/s1600/photo.jpg" alt="Author" style="width:100px;height:125px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
" />

    </!doctype>


 Style 3: Leaf styled Avatar

Widget code:

 <style>
p {
    border: 1px green;
    outline: green dotted;
}
</style>



<p><span style="font-style:italic;"><img src="http://2.bp.blogspot.com/-zMZH6CO3CSQ/VKgUqrdDMXI/AAAAAAAAAV8/_fg5w4GXsUs/s1600/photo.jpg" alt="Author" style="width:100px;height:125px; -moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;" />YOUR BIO. <a href="http://graspinfo.blogspot.com/p/count-word.html">Read More. . .</a></span>
</p>


 3:About Author Widget with Radius Top-Right-Radius Line and Round Avatar


Widget Code:

 <style>
div {
    border: 2px solid;
    padding: 10px;
    background: #dddddd;
    border-top-right-radius: 2em;
}
</style>
</head>
<body>

<div><p><span style="font-style:italic;"><img src="http://2.bp.blogspot.com/-zMZH6CO3CSQ/VKgUqrdDMXI/AAAAAAAAAV8/_fg5w4GXsUs/s1600/photo.jpg" alt="Author" style="width:100px;height:125px; -moz-border-radius: 35px;
border-radius: 35px;" />YOUR BIO. <a href="http://graspinfo.blogspot.com/p/count-word.html">Read More. . .</a></span>
</p>.</div>

</body>

Amendment

In all widgets Replace the following
Red Color "YOUR BIO" with the words you want to write in widget.
Pink Color image link with the link of your Image.
Blue Color link with the link of your page which contain complete information about the author.


Place It on your Blog

After amendment place the code in Html/Java Script as told in First step of this article.

Customization in All widgets

You can customize all of gadgets as a choice of your own. Let's observe all widget codes. All are almost same. We just customize a bit and made another widget style. For example:- we add "-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
" this code to make border of image radius from right down bottom. If we change pixels it will adopt another style. Similarly you can customize outline color, can convert line into dotted line, can adjust width of image etc.


Where You Should Place About Author Widget?

If Your Blog has a footer with 3 or 4 widget places then you should place this gadget in extreme right or extreme left portion of footer. If your Blog's footer does not contains 3,4 or footer and has 1 side bar then place it in the middle of right side bar. It will give professional look.



Like Us on Facebook if this article is useful: facebook.com/graspinfo

Written by

Dawood Bukhari is a young blogger and passionate researcher. He writes articles on bloggging,SEO,Hacking and Computer Technology Follow him @ Twitter | Facebook

0 comments:

Post a Comment

 

© 2013 Grasp Info. All rights resevered. Designed by Graspinfo

Back To Top