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://lh6.googleusercontent.com/-d6KcE0bYt7g/TmB-678StqI/AAAAAAAABiQ/8HiKcJYL3RY/s800/face-icon.png) 0 0 no-repeat;
  display:block;
  z-index:2;
}
a#homeLogo span {
  float:left;
  display:block;
  background-image:url(https://lh6.googleusercontent.com/-d6KcE0bYt7g/TmB-678StqI/AAAAAAAABiQ/8HiKcJYL3RY/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

Blogger's Guide to Online Marketing - Darren's New ebook with 100% Money Back Guarantee!

Last night, I received an email from Darren Rowse regarding his new eBook launch about "Blogger's Guide to Online Marketing". He's been a great inspiration to me, as far as my blogging career is concerned. I have a copy of his first eBook. I enjoyed every bit of it - very useful to me and other budding bloggers. To be frank, the other releases did not impress me as much as the first one did. However, the recent one does. So, I'll soon get my hands on it. May be, you should try it as well...

WHAT'S NEW? WILL IT BE JUST ANOTHER EBOOK?

Darren has come up with a clear list of 31 chapters of his new eBook which provides a practical solution to convert your blog into a money making machine. Though I've not yet read the eBook, from the reviews I read, I feel this eBook would serve as a step-by-step guide for successful online marketing. Do you feel that's not enough for $49.99? Your pretty right! May be Darren felt the same too! 

To make your pennies worth, he provides an addition resource library that contains more than 20 documents, templates, worksheets and other examples to make you work on what you read. He provides you the resources that you need to work with. Ideally speaking, a spoon fed kit to create your own successful online business empire:) To get a detailed insight about the new eBook and the other features offered by Darren, just hit the following link - More About The Blogger's Guide to Online Marketing Kit. 

WRAPPING UP...

Well, as mentioned in the title of this article, the new eBook has a 100% money back guarantee offer - at the end of 60 days. Well, this clearly explains the amount of confidence on his material. So, you have nothing to lose. Just grab a copy of the new release either by clicking on the banner above or using the following link - Blogger's Guide to Online Marketing

The above discounted price is valid only till 23rd September, 2011. So, please grab your copies before he closes the (50% discount) offer.

Click4more... 2 Comments

Animated Bubble Buttons Using CSS3 On Blogger

I'm sure my last tutorial about "Text with Moving Backgrounds" was quite complex. It would have been very difficult for the newbies to get hold of. So, I thought I should come up with a simple, yet stunning design tutorial that even the newbies can enjoy about. Well, that idea drove to me to present you this tutorial about "Animated Bubble Buttons Using CSS3". Take a look at the demo below.

LIVE DEMO LIVE DEMO LIVE DEMO

Hit any of the buttons above to check the other styles as well. I think, I need not explain more about the effect that you'll be able to achieve on completing this tutorial. It's pretty clear from the demo button / link above. I wish to let you know that these effects are visible only on browsers that support CSS3. However, we've incorporated a fall back color with the bubble effect for browsers that do not support CSS3 thereby, preventing your design from causing various layout issues.

Enough of stories I guess! So, let me start with the tutorial. I'll split the tutorial into 2 parts - HTML and CSS. The HTML involved behind these buttons are very simple. You need to add a corresponding class (based on the size and the color of button) to the anchor tag. Just use the following tags anywhere in your template - anywhere between your body tags.

HTML FOR LARGE SIZED BUTTONS (USE ANYONE BASED ON COLOR)

<a class="button big blue" href="LINK">LINKNAME</a>
<a class="button big green" href="LINK">LINKNAME</a>
<a class="button big orange" href="LINK">LINKNAME</a>
<a class="button big gray" href="LINK">LINKNAME</a>

HTML FOR MEDIUM SIZED BUTTONS (USE ANYONE BASED ON COLOR)

<a class="button blue medium" href="LINK">LINKNAME</a>
<a class="button green medium" href="LINK">LINKNAME</a>
<a class="button orange medium" href="LINK">LINKNAME</a>
<a class="button gray medium" href="LINK">LINKNAME</a>

HTML FOR SMALL SIZED BUTTONS (USE ANYONE BASED ON COLOR)

<a class="button small blue" href="LINK">LINKNAME</a>
<a class="button small green" href="LINK">LINKNAME</a>
<a class="button small orange" href="LINK">LINKNAME</a>
<a class="button small gray" href="LINK">LINKNAME</a>

Note: Replace LINK with the link you wish to point to. Similarly, LINKNAME with the name/title of your link.

The CSS involved behind these buttons are pretty complex. I don't want to explain in detail about the same and confuse you - especially, if you are a newbie. So, just download this file -  CSS FOR ANIMATED BUBBLE BUTTONS, and paste the code present in it just above/before skin in your blogger template and save your template. That's it!

Well, if your a CSS geek, then you may tweak the CSS mentioned in the text doc above to add further effects. The content mentioned in the text document involves the CSS for all types of buttons - be it any size or color. If you are one, who is obsessed with reducing the load time of your site (like me), then define the CSS only for those buttons you intend to use. For further assistance or suggestions about this article, leave a comment below.
Design Inspiration - Tutorialzine.

Click4more... 30 Comments