Add 3D Text Effect Using CSS On Blogger

Inspired by the effect on David DeSandro's footer, I worked out the CSS behind his three dimensional text effect. Well, in this article, you'll be able to get a similar effect on your blogspot blog. The normal state shows the text with a black shadow and on hover, you get to see a colorful text with colorful shadow. Take a look at the live demo using the link below to better understand about the same.

3D TEXT EFFECT ON BLOGGER - LIVE DEMO

ONE-CLICK INSTALLATION TOOL FOR NEWBIES

The recent entries on my blog had the one click installation tool and I've incorporated the same in this article as well. I recommend the newbies to follow this method whereas the experts/webmasters can follow the detailed procedure. Firefox 3.0+, IE 9.0 and Opera are some of the browsers that support the one-click installation method. So, make sure your browser is one among them and hit the following button to install the 3D text effect on your blog.

DETAILED PROCEDURE FOR WEBMASTERS

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. Paste the code present in this text document - CSS FOR 3D TEXT EFFECT, just above/before the the line mentioned at step 1.

3. Now, paste the following codes anywhere in between the opening and closing of body tags on your template.

<div id="animationWrapper">
  <a href="EXAMPLE URL">
    <span class="span1">Sample</span>
    <span class="span2">Example</span>
    <span class="span3">Effects</span>
    <span class="span4">Blogger</span>
  </a>
</div>

Ideas: You may add this 3D effect to display your blog title or post title or show off your links at footer similar to DeSandro's blog. The choice is left to the individual.

4. That's it! Save your template.

CUSTOMIZATION COMMON TO NEWBIES AND WEBMASTERS

Replace EXAMPLE URL in the coding with the URL of your choice and correspondingly, replace the text that runs between the span tags with that of your choice. Further customizations include changing the font size, color and its type - just play around with the CSS to change these customizations. Hit me via comments if you need assistance in doing so. 

The above effect was tested to work perfectly fine on all the major browsers that includes, but not limited to, Firefox 3.0+, IE 9.0, Opera and Safari. I hope you enjoyed this tutorial. Share your opinions via comments!

Click4more... 22 Comments

Devil's Workshop Template Customization - Part 1

I've been receiving a lot of positive reviews and feedback about the Devil's Workshop blogger template - the load time being appreciated the most. If you did not find to check out the template, then I highly recommend you to spare some time to check it out - DW Blogger Template. I've planned to share the "Stay Connected" widget code in this article.

This widget namely "Stay Connected" is a subscription box that is most essential for any blog . The widget is a slightly modified version from the original one. I've tried to add the latest networking icons like Google+ to stay updated and to better connect with the users. You may preview the same on the demo blog by hitting the following link - DW Template Live Demo (or) just take a look at screen shot posted below.

ONE CLICK INSTALLATION

Just install the widget "Stay Connected" using the install button below, provided your browser is either one of these - Firefox 3.0+, IE 9.0 (or) Opera. I'm not sure about Chrome and Safari, because I heard that it works for few, whereas it shows an error for the rest.

THE USUAL PROCEDURE
If you are unable to install the widget using the button, then navigate to "Design >> Page Elements" page from your blogger dashboard. Choose "Add a Gadget >> HTML/JavaScript" and just paste the entire code in this text document - STAY CONNECTED WIDGET CODE, on the new window that pops up. Name the title of the widget as "Stay Connected". That's it!

COMMON CUSTOMIZATION
Once you've installed the widget on to your sidebar - be it via one click installation method or the usual procedure, make sure you customize the widget as per the instructions given below, before you save them.

1. Replace FEEDNAME at various instances (5 instances) in the code with your feed name. The title of your FeedBurner feed serves as the feed name of your feed. So, login to your feedburner account and look for the feed title.
2. Replace TWITTER-NAME at one instance in the code with your twitter user name.
3. Replace FACEBOOK-URL at one instance in the code with your fan page URL on Facebook.
4. Replace GOOGLE-PLUS-URL at one instance in the code with your Google+ Profile URL.
Note: If you don't have one, then leave your email via comments asking for an invite and I'll invite you to Google+ so that you can enjoy the new social networking, just as we do.
5. Replace HOMEPAGE-URL at two instances in the code with the home page URL of your blog.

I'll continue to post other tutorials about customizing Devil's Workshop Blogger Template in the upcoming weeks. Stay tuned to my blog so that, you don't miss out any customization.Do share your opinions about this article via comments:)

Click4more... 10 Comments

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