|
Blogger is not a premium platform for blogging and therefore, several widgets and functions that are available in wordpress are unavailable for blogger. But as blogger is using the simple XML for it’s designing and creation, there is a hope that most of such widgets can be made with the help of some simple tricks, i.e, just by adding some codes to your default blogger template. From now onwards i will try my best to introduce WP style widget and themes to blogger too, even though I know that it’s impossible. Today, I’m going to introduce you, how to create an WordPress style ‘About the Author’ widgeat that contains a short Author-bio below the post body. Here is a screenshot of it…
Here is the way how to do it…..
How to create a wordpress style ‘About the Author’ Widget below post body on blogger ( blogspot )?[with image]
- Log on to blogger and navigate Layout –> Edit HTML
- Select the ‘Expand Widget templates’
- Now paste the following code just below the ]]></b:skin>
color: #666;
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 1px dotted #cc0000;
width: 600px;
padding: 15px;
margin-bottom:25px;
}
.biotitle {
width: 600px;
background: #CC0000;
width: 600px;
padding: 0px;
}
.biotitle h2 {
font-weight: bold;
color: white;
padding:10px;
}
.authbio a{
color:#cc0000;
text-decoration:underline;}[/css]
NB: Change the colours matching your template.
4. Now search your template and find the ‘<data:post.body> and paste the following code just below it
[xml]
<div class=’authbio’>
<div class=’biotitle’>
<h2> About the Author </h2>
</div>
<br/>
<div style=’float: left;’>
<img alt=” height=’75’ src=’http://www.Your-Avatar-pic.jpg/’ width=’75’/>
</div>
Your Short Bio here. You can add some info related to you including your personla info, occupation, hobbies, love to blogging….etc here. This will be displayed at the end of each and every post. It took me a little struggle and time for creating such a widget and so, if you liked this template, please share these on any social bookmarking sites and also please link to me from your blog
</div>
[/xml]Now your ‘About the Author’ Widget is ready and you have to replace the ‘your Avatar picture.jpg’ with the URL of your avatar picture and “<<your short……” with your Short Bio.
Now your widget will appear something like ;-
Remember that this box will be read by 90% of your blog readers and if your articles are interesting, then they will be trying to know more about you and your blog and this widget will be a great utility for them. Take a special care to edit the css as you like and make the widget more attractive and interesting. Also make the text inside the box too magical …..
How can I do this when I have several contributors on the same blog? This works fine for a single author but I want to show different “About Author” blurbs depending on who wrote the post.
Thanks in advance for your help.
Ya sure.
Just addd the codes between the ;
[xml]
<---widget code taken from here with the code for author-1---->
<------Widget code taken from here with the code for author-2---->
[/xml]
And replace the author 1, author 2 with the name of the authors
Rajeel,
I appreciate your quick response. However, your response is confusing and the code doesn’t work. Could you look it over carefully for me?
You say add the codes between the ; but where is the ;?
“And you say Widget code taken from here” which doesn’t make sense – taken? from where?
Thanks again for your help.
Sorry yaar,
Not so good in english. the word “ Widget code taken from here” just means that you have to add the xml code (4th section) for the widget in there.
NB : still have problems, just mail me you template code, i will do it for you 🙂
.-= Rajeel´s last blog ..How to post codes like HTML, XML, CSS…etc in wordpress WP post editor =-.
shows this error ‘Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The value of attribute “src” associated with an element type “null” must not contain the ‘<' character.'
.-= Victor´s last blog ..Facebook:How to block your friends from commenting on your posts =-.
Sorry yaar, just added a new plugin here. Try now. It will works…
Wondering why you’ve not implemented it in your blog
.-= TechGyo´s last blog ..How To Make Cool Manga Avatar For Your Profile ? =-.
This is not blogger, It’s WP. My previous theme did had this facility. That’s why i didn’t cared to add one. Thanks for notifying, will add it.
Could you please let me know the name of the plaugin you are using for social bookmarking below the post?
.-= TechGyo´s last blog ..How To Make Cool Manga Avatar For Your Profile ? =-.
It’s not a plug-in. It’s built in with this theme
I am kind of new to social bookmarking but social bookmarks presents great resource when doing research.”`.
I use Blogger but would like to do a novel. How do I edit the html? The usual templates are too confining, and I don’t know enough to make my own.
Editing HTML is easy. you can learn it by editing your own theme and studying from error or just learn i online from W3schools. Btw, if you are looking for a good blogger theme, have a look at Red Ink theme too
http://www.labofweb.com/red-ink-premium-seo-blogger-template/
hi i tried to find ‘ in my template but it says no such words found so please help me
Nice brief and this fill someone in on helped me alot in my college assignement. Thanks you seeking your information.
social bookmarking is very popular nowadays in the same way that social networking sites are also very popular”;~
Thanks dude, i was looking for these!
social bookmarking has been the trend in the last few years, Facebook really dominated Friendster, Myspace and others “.*
well this tip did not work for my blog at all, i did install all the code properly yet even after no errors the output did not come, what to do now..help please
I will do the same. i need to know more about this
Many thanks for taking the time to discuss this, I’m fervently about this kind of and i also get pleasure from researching this particular matter. Make sure you, when you obtain information, you should up-date this website with increased details. I have discovered that very helpful.
Extremely informative plus excellent bodily structure of written content , currently which is easy to use (.
Fantastic write-up, We believe online marketers should larn a good deal from that web webpage it has the really intuitive .
Hello, happy i ran across your website. It helped me to learn the topic slightly better.
I stumbled onto your web site, i believe your site is awsome, keep posting.