Fixing Common Template Errors On Blogger

I realized that I had gone too much into designing widgets, losing track of the basic stuffs which drove a lot of traffic to my blog - those articles and tutorials which helped the newbies solve their common problems. With that being said, I plan to post articles and refresh on topics that are already existing on my blog with a better view and knowledge about them in the upcoming weeks.

In this article, I plan to provide solutions for the most commonly encountered template problems on blogger. I guess webmasters shall find this article way too silly but, I'm sure this is a life saver for many newbies out there. I'll just list out the problems, as it appears on the dashboard, when you try to make a change on your blogger template. Obviously, solutions shall follow below them:)

Most commonly encountered problem on blogger - "Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly." This error message is usually accompanied by another message that indicates the actual reason for this reason. Hence, you should watch out for the next statement which may be one among the following.

XML error message: The entity name must immediately follow the '&' in the entity reference.

SOLUTION: Just look out for the place where you modified the codes on your template. I'm sure you'll find the following symbol - &, somewhere in the newly inserted code. Just add amp; to the right of the symbol or in other words, suffix amp; with that symbol to fix the error.

XML error message: Open quote is expected for attribute "{1}" associated with an element type "href".

SOLUTION: The element type may be src or type or class or id or anything for that matter - not necessary that it should always be href. Well, it is pretty simple to solve this one! You just missed an a quotation mark some where in the code. Consider the example below.
<a href=http://abc.com">Example</a> should become <a href=''#">Example</a>

XML error message: The element type "img" must be terminated by the matching end-tag "</img>"

SOLUTION: This error occurs when you miss out a trailing slash ( / )that should appear before you close the img tag. This could be better explained with an example as shown below.
<a href=''source link"><img src="img link"></a> should be changed to
<a href=''source link"><img src="img link"/></a>

More than one widget was found with id: HTML1. Widget IDs should be unique.

SOLUTION: This occurs when the id name is found to the same at two instances. Just change the id name to solve this issue. For example, from id='HTML5' to id="HTML57" - a unique name that does not appear anywhere on your template.

We were unable to save your template. Please correct the error below, and submit your template again. There should be one and only one skin in the template, and we found: 2

SOLUTION: Simple! You defined two different skins on your template. Make sure you delete one and the problem should be fixed - occurs at very rare instances. But, it does happen:)

bx - xxxxxx error

SOLUTION: You'll find bx followed by some number when you try to save your template - usually occurs when you try to shift tabs between "Page Elements" and "Edit HTML". Just make sure you save your widgets at their respective positions before you shift the tabs to avoid this error. Clearing your browser cookies might help sometimes. Saving your template by manual deletion/removal of widgets using "Page Elements" section is better than using the wrench icon to delete them - avoids the errors.

Well, only few errors are mentioned in the article above. There are plenty of errors which you might have encountered. Just share them via comments - possibly with their solutions as well. If not, just post the error you encounter and I'll try to fix it up for you!

Click4more... 25 Comments

Increase or Decrease Your Font Size On Blogger Dynamically - The Text Resizing Widget

I've been constantly trying to provide unique articles for blogger/blogspot blogs. With the same motto in mind, I've got yet another interesting trick today wherein you can re-size (both increase or decrease) the size of your texts dynamically. I suggest you to take a look at the live demo using the link below to better understand about the same.

DYNAMICALLY RE-SIZE THE FONTS ON BLOGGER - LIVE DEMO

I guess you understood what do I mean changing layouts dynamically.Wondering, why should I use this? Pretty simple! Your blog shall be read by people from various age groups. Few might feel it comfortable to read the articles on your existing font/text size while few may find it difficult - especially the old age group. Hence, you shall add few lines of a JavaScript to satisfy every reader on your blog, by providing him/her the ability to customize the visual appearance of your blog. Interesting... Isn't it?

FOR NEWBIES - ONE CLICK INSTALLATION
Warning: The one click installation button works only on Opera, Firefox 3.0+ and IE 9.0! So, if you are using any other browser, then please skip this method and scroll down to install the widget using the alternate method - the one explained for web masters.

Without wasting your time, let me dive into the tutorial. I've created a simple one click installation button, as shown below, by which a widget shall be added to your blog so as to change the font size dynamically. It's specially targeted to newbies and those who hate playing with codes, unlike me! 

On installing the widget, you will notice the following text - CONTENT GOES HERE, appearing on your blog. Just replace CONTENT GOES HERE with the content of your choice and your done! You should be able to make your text bigger or smaller by clicking the respective links mentioned in the widget.

Note: By opting for this method, you will be able to increase or decrease the text that lies in the widget - those lines which you replaced with CONTENT GOES HERE. In other words, the content between the div id and div.

FOR WEBMASTERS - A LITTLE COMPLEX PROCEDURE
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over,  expand your blogger template and search for the following piece of code. Use CTRL+F to speed up the search.

<div class='post-body entry-content' >

2. Just add id='wrap-content' along with the div tag mentioned at step 1, that is, next to class='post-body entry-content'. So, your final tag should be similar to the one shown below.

<div class='post-body entry-content' id='wrap-content'>

3. Save your template and move to the "Design >> Page Elements" page.
4. Choose "Add a Gadget >> HTML/JavaScript". Now, paste the following codes in the text document  - TEXT RESIZING SCRIPT, in the window that pops up (fill the content part - not the title). You may add a title to the widget or you may leave it blank - the choice is yours.
5. Well, that's it! Save your widget and your done!

Note: By following the complex procedure, the font size of your articles, be it the one on the homepage or the post page, will increase or decrease unlike the ones using the widget version. To understand the difference, try both the methods:)

The biggest advantage with this script is that, it works independently and does not require a jquery library file, unlike the other tutorials on dynamically changing layouts on blogger - Changing Backgrounds and Adaptable View. Just few lines of script will do the magic. Tested to work on all major browsers. Compatible with all the blogger templates - be it the customized ones (or) the default blogger themes.

Well, I would like to know whether you enjoyed the one click installation tool in this tutorial or not? I'll probably try to use them more often than not in the upcoming articles so that, even the newbies can enjoy the various effects posted on my blog. Anyways, share your opinions about the article via comments! We love to hear from you:)

Click4more... 14 Comments

Download Devil's Workshop Blogger Template!!!

Today, I'm happy to release, yet another premium quality blogger template - "Devil's Workshop" for free. For those of you who missed the previous entries, please refer to the following link - Premium Blogger Templates. This template is used by the most popular tech community blog - "Devil's Workshop". I've converted it to a blogger template, whose live demo can be previewed using the buttons below.

LIVE DEMO DOWNLOAD

You might also like: iTemplates | Free blogger templates, widgets, tools and customization

I've tried to match the original template to the maximum extent possible. I do know that, there are spaces for improvement and these gaps/spaces shall soon be filled with further customizations in the upcoming weeks. So, stay tuned with the my blog - Subscribe via RSS. 

If you feel this template "Devil's Workshop Blogger Template" does worth few pennies, then donate them using the button on the demo link (look at the sidebar) or send them to the following PayPal ID smalwayz@gmail.com - simply, for the hard work that I put in. Your contributions, howsoever small, shall drive me to design unique blogger templates and provide them for free! So, please make one if you can:) Check out the screen shots using the buttons below.

HOME PAGE POST PAGE

Well, this template is equipped with enormous hacks and features. As mentioned earlier, the customization for each feature shall be explained in detail, in the upcoming weeks. Nevertheless, you can download the template and start playing around the same before we launch the customization series. 

FEATURES OF THIS TEMPLATE

Mentioned below are few features which you need to have a look at.

01. TOP NAVIGATION BAR WITH GOOGLE SEARCH.

02. HEADER WITH SPACE FOR DISPLAYING 468x60 BANNER ADS.

03. GOOGLE ADSENSE LINK UNIT TO MAXIMIZE ADSENSE REVENUE.

04. FEATURED CONTENT SLIDER (coding shall soon be posted).

05. SHARE COUNTERS NEXT TO POST TITLE ON HOMEPAGE.

06. CUSTOMIZED TEXT DISPLAY FOR COMMENTS BELOW POST TITLES.

07. READ MORE HACK INSTALLED BY DEFAULT.

08. SIMPLE FOOTER TO MATCH THE ORIGINAL THEME.

09. CUSTOMIZED SUBSCRIPTION BOX (coding shall soon be posted).

10. SHARE COUNTERS BELOW POST TITLES ON POST PAGE.

11. 336x280 ADSENSE BOX BELOW POST TITLES.

12. RELATED POSTS MATCHING THE ORIGINAL THEME.

13. TAG SECTION - LITTLE DIFFERENT FROM THE ORIGINAL.

14. SUPPORTS MULTIPLE AUTHOR INFO WIDGET - CODING INCLUDED.

15. SIMPLE COMMENT SECTION & SEO OPTIMIZED.

I might have missed few in the list above because the list is quite huge. So, I suggest you to give it a try to experience the other unknown features hidden in it:) If you feel, few areas in the template need an improvement (for example, adding a smooth sliding back to top button), then post them via comments! I'm open to your suggestions and queries!

LIVE DEMO DOWNLOAD

Note: The template is best viewed on Firefox. IE does not support CSS3. Although, there aren't too many CSS3 features involved in this template, I suggest you to view it on Firefox for a better view:)

Click4more... 60 Comments

Background Animations On Blogger Using Jquery

Recently, I came across a website in which the header had an animated background - dynamically moving image. I thought, why not try to achieve a similar effect on blogger. I worked out the codes, to be honest, it was quite simple. So, in this article, I've explained the basic idea behind animating backgrounds using jquery. If you intend to apply the same effect on your header, then reach us via the services tab.

BACKGROUND ANIMATION ON BLOGGER - LIVE DEMO

I suggest you to take a look at the demo, by hitting the link above, before we dive into the tutorial. I've personally test the above effect on all major browsers that include, but not limited to, IE, FF, Chrome, Safari and Opera which simply ensures a perfect browser compatible view. So, what you waiting for? Just follow the instructions below and get them installed on your blog.

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Just replace the above code with the following code present in the text document - SCRIPT AND CSS FOR BACKGROUND ANIMATION. The code in the text document contains the CSS and JavaScript required to run the animation. If you already have the main jquery file running on your blog, then remove the line which contains it from the text document. To remove it, just delete the following line from the text document.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>

3. Next, place the following HTML tags anywhere on your template - possibly before/above <div id='content-wrapper'> (or) <div class='columns fauxcolumns'> (or) you may use them in the blogger post editor, just like I did in the demo link.

<div id="animate-area">
</div>

4. That's it! Save your template and your done!

I hope the tutorial was pretty simple to understand and work on. If you find any difficulties in getting the animation working, then leave a comment below and get it solved. As usual, share your opinions via comments below.

Click4more... 9 Comments

Simple Tips to Get More Comments on your Blog

This is a guest article written by Michael Scottsdale. If you wish to write one for us, then check out this page for guidelines - Write For Us. Are you having problems getting people to comment on your blog posts? It’s either your comment box isn’t working (which is highly unlikely) or you’re not hitting the right buttons. One of the most ignored ways of building steady readership on a blog is through the use of comment box.

There’s simply no better way of gauging your blog’s health than by measuring the actual number of people who are not only reading your articles, but are actually providing comments and feedback. Below mentioned are few tips which might get your comment box going...

1. ASKING QUESTIONS

Good quality articles should be informative. But if it fails to tickle your reader’s imagination or leave them no avenue for questioning then your article has only been successful in educating which is good if you’re posting it on Wikipedia.

Asking questions at the end of the article is the most direct way of soliciting your reader’s comments or feedback. These should be easy to answer but refrain from using questions that could be answered by yes or no. Open ended questions offer your readers helps your readers express themselves more freely and is fosters a healthy environment for discussion.

2. QUALITY CONTENT

Everything starts with great content. Write on topics you feel strongly about or trending topics that elicit your reader’s opinions. However, this should be in line with your niche and placing political issues on a food blog is not a good idea.

Again, a little bit of creativity and research would help you come up with an interesting topic. Food blogs for example could talk about controversial diet programs or food cuisines that are entirely alien to their readers. The possibilities are limitless and only your imagination could stop you with coming up with a good topic. 

3. BEING PROACTIVE 

The best way to get the ball rolling is to open with your own comment. You could end the article with a question or immediately post a comment after the article giving your personal opinion on the subject. Other methods include sending emails to your readers informing them about the latest blog post and asking them how they feel about it.

4. MAKE COMMENTING EASY

Most of the websites that offer a comment box require readers to log in their personal information which could be a bit of a drag if you’re only planning to place a few words or phrases. Some blogs even oblige people to become fans or join the website before allowing them to comment.

Comments and feedbacks give you a deeper insight into what type of audience is reading your blogs. This is why making it easier for people to place their comments gives you a better look into what type of writing works for your blog. A simple opt-in box asking them their email address and user name is a good way of making commenting easier while protecting your blog from spam comments.

5. MAKE IT MORE REWARDING

Taking a hint from forums, making commenting worthwhile helps generate added interest among your readers. This could be done by allowing them to include links or a signature on their comments. Creating a top list of commenter’s and displaying it at the side bar for example is a wonderful way of showing that you appreciate and acknowledge their efforts. A personal email helps build trust and forge stronger relationships with readers.

6. COMMENT ON OTHER BLOGS

Another way of inviting people to write comments on your blogs and drive traffic is to become an active commenter yourself. Sharing your ideas with other blog owners and inviting them to visit and comment on your blog helps build stronger relationship with fellow bloggers.

So, let’s get the comment box working! Any more tricks to share?

Click4more... 17 Comments

Distortion Effect On Images Using CSS & Jquery

Inspired by few works from Ryan Florence - Mootools contributor and moo4q creator, I wanted to use few scripts from his animation library to create a stunning effect for users on blogger/WordPress(WP), namely "the distortion effect" on images using CSS and jquery. I've split the tutorial into 3 parts - HTML, CSS and JavaScript to keep it simple. So, take a look at the live demo using the link below.

DISTORTION EFFECT ON IMAGES - LIVE DEMO

CSS

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Add the following piece of code just above/before the line mentioned in step 1.

a#homeLogo  {
  width:300px;
  height:233px;
  text-indent:-3000px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzbqdpUyoOBzmKgM9oqAZGmgNbjcvz6HBbIIdz_lHrOLuXlJ9bLUYe34QABpXhcfmac4u377TjbXtoQB9-GAe-hU7Rt8__Yj22MUKYk3iXxUGJGMu9ErzisPxS6loVFMSqtGQpKmCrlDCr/s800/face-icon.png) 0 0 no-repeat;
  display:block;
  z-index:2;
}
a#homeLogo span {
  float:left;
  display:block;
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzbqdpUyoOBzmKgM9oqAZGmgNbjcvz6HBbIIdz_lHrOLuXlJ9bLUYe34QABpXhcfmac4u377TjbXtoQB9-GAe-hU7Rt8__Yj22MUKYk3iXxUGJGMu9ErzisPxS6loVFMSqtGQpKmCrlDCr/s800/face-icon.png);
  background-repeat:no-repeat;
}
.clear { clear:both; }

Note: Users on WP may add the above mentioned codes to their custom.css file and upload the same to their host servers.

3. Change the URL highlighted in green with the image URL of your choice. Please, try to maintain the image dimensions - 300x233px, to avoid layout issues and further complications arising out of the same:)

JAVASCRIPT

Users on blogspot/blogger may follow the following instructions. To avoid excessive time in loading your website/effect on blogger, you shall define the JavaScript internally on your blog rather than calling them from Google Sites where I hosted them.

1. Search for the following piece of code in your blogger template.

</head>

2. Paste the following piece of code mentioned in the text document - JAVASCRIPT FOR DISTORTION EFFECT, just above/before the line mentioned in step 1.

WP Users may download the files - CSSAnimation.js, CSSAnimation.jQuery.js  & Demo.js (you may define them internally) and upload the same to their host servers to include them before </head> as mentioned earlier (similar to blogspot users). I recommend you to read the following articles to better understand about adding custom defined JavaScript on WordPress - Adding JavaScript on WordPress. I'm not a WP expert. So, if there are any WP geeks out there, you may share a small tutorial about adding these scripts to their respective hosts - either via comments or via guest articles:) 

HTML

The HTML involved behind the distortion effect is pretty complex to understand. So, to keep them simple, I've just added them to a text file which you may download here - HTML FOR DISTORTION EFFECT. Now, paste the code present in the text document anywhere in your blogger template or WordPress theme - better to add them as widgets. That's it! Save your template and your done. Replace the link which points to my website (http://www.newbloggingtipz.com)with that of yours. It's pretty self-explanatory.

The above effect was tested to work on all major browsers including, but not limited to, IE, FF, Chrome, Safari and Opera. If you need any assistance in adding this effect on your blog, then leave a comment below and get it clarified. Do share your opinions about the article via comments.

Click4more... 21 Comments