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.
1:Go to Blogger → Layout → "Add a gadget" → click on HTML/JavaScript
.
Now place one of the following code of the style of your choice and save.
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.
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.
Like Us on Facebook if this article is useful: facebook.com/graspinfo
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
.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbBURWgoJNwtpZWIHbEp8GWOWE84NnxZgVi_-0O9MP3RSnmovvk4t4l1uI5_GGOs4cY0cnxpQiU9JkdqOSvUtwCHAivktz5KoT7-e4ihy3b1XOwEwubM1ZRKYLTV-KhevbPUUPuSp7vqw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbBURWgoJNwtpZWIHbEp8GWOWE84NnxZgVi_-0O9MP3RSnmovvk4t4l1uI5_GGOs4cY0cnxpQiU9JkdqOSvUtwCHAivktz5KoT7-e4ihy3b1XOwEwubM1ZRKYLTV-KhevbPUUPuSp7vqw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbBURWgoJNwtpZWIHbEp8GWOWE84NnxZgVi_-0O9MP3RSnmovvk4t4l1uI5_GGOs4cY0cnxpQiU9JkdqOSvUtwCHAivktz5KoT7-e4ihy3b1XOwEwubM1ZRKYLTV-KhevbPUUPuSp7vqw/s1600/photo.jpg" alt="Author" style="width:100px;height:125px; -moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;" />
</!doctype>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbBURWgoJNwtpZWIHbEp8GWOWE84NnxZgVi_-0O9MP3RSnmovvk4t4l1uI5_GGOs4cY0cnxpQiU9JkdqOSvUtwCHAivktz5KoT7-e4ihy3b1XOwEwubM1ZRKYLTV-KhevbPUUPuSp7vqw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbBURWgoJNwtpZWIHbEp8GWOWE84NnxZgVi_-0O9MP3RSnmovvk4t4l1uI5_GGOs4cY0cnxpQiU9JkdqOSvUtwCHAivktz5KoT7-e4ihy3b1XOwEwubM1ZRKYLTV-KhevbPUUPuSp7vqw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbBURWgoJNwtpZWIHbEp8GWOWE84NnxZgVi_-0O9MP3RSnmovvk4t4l1uI5_GGOs4cY0cnxpQiU9JkdqOSvUtwCHAivktz5KoT7-e4ihy3b1XOwEwubM1ZRKYLTV-KhevbPUUPuSp7vqw/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 followingRed 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 Suleman Dawood
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