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

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

Text With Moving Background On Blogger

Inspired from the tutorial written by "GayaDesign" about text with moving background, I wanted to write an article so that, users on blogger/blogspot can enjoy the same effect. The article will guide you to create a text mask using PhotoShop and use the same to realize the final effect with some CSS and Jquery. I suggest you to take a look at the live demo by using the link below.

TEXT WITH MOVING BACKGROUND ON BLOGGER - LIVE DEMO

Cool... Isn't it? Well, let's get this installed on our blogs as well. I've split the tutorial in 4 parts - Photoshop, HTML, CSS and Jquery. The article is quite big. So, without wasting time, let me dive into the first phase of the tutorial straight away.

USING PHOTOSHOP TO CREATE THE MASK

1. Open a new file with the following dimensions: 600x100px (width - 600px and height - 100px). Now, pour some color using the paint brush tool. You may add some gradient shades, like I did, if you wish to make it more appealing.
2. Now, create a new layer using the icon that appears on the layers panel. I suggest you to take a look at the screen shot shown below. Now, hit the "Text/Horizontal Type Tool" and type the text of your choice on the canvas.

3. Just move to the layer's panel and select the newly created text layer by holding "CTRL" key on your keyboard. You'll notice the text layer alone being selected. Just go to "Select > Inverse" using the menu-bar at the top or simply hold the keys "Shift+Ctrl+I" to select the inverse layer. You should probably have a selection similar to the one shown below.

4. Now, simply select the other layer (Layer 1) in the layers panel and hit the icon that says "Add Mask Layer". Just refer to the following screen shot to better understand about the same.

5. Next, hide the text layer - remove the eye icon from the layers panel. Refer to the screen shot below.

6. Now, you should be able to see your masked text image as shown below. Save this image in PNG format. and upload the same to your picasa album or any image hosting site. I've saved it using Mask. So, when I refer to Mask.png anywhere in the article, it refers to this mask image.

Note: The mask which you've just created using PhotoShop (Mask.png) will be used in the HTML part. It is not necessary that you maintain the image dimensions as mentioned in step 1. However, when you vary the image dimensions, you should make the corresponding changes in the CSS part as well.

HTML

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:section class='main' id='main' showaddelement='no'>

2. Paste the following piece of code just above the line mentioned in step 1.

<div class='scrollBg'>
<a href='http://www.newbloggingtipz.com/'><img src='Mask.png'/></a>
</div>

3. Replace "Mask.png" in the above code with the URL of the uploaded image Mask.png as mentioned earlier in the tutorial and save your template. Similarly, replace the URL pointing to my website  in the anchor tag with the one of your choice.

Note: You can add the HTML codes anywhere in your template - not necessary that you add it above the line mentioned in step 1.

CSS

1. Search for the following code in your template.

]]></b:skin>

2. Paste the following piece of code just above the line mentioned in step 1.

.scrollBg {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyabrkBnmLA5Ib-D1_5HEaTYP1uQp91vwYF5ftEaorX594wYfI7kF8bDVp9ZFAwO5a2Nl9Y25tzeWfL3IvFyxSR4o9OzMQW4V0Mc3t3XB7AMlHsu4B5d4o9Y5Bxo2HAoIVQ6gNU5jvctSx/s800/love-pattern-new.png);
background-color: #000000;
width: 600px;
height: 100px;
}
.scrollBg img {
display: block;
border:2px #000 solid;
}

3. Save your template. 

Note: You may change the background image by changing the URL highlighted in green - try to maintain the image dimension as mentioned in the CSS to avoid confusions.

JAVASCRIPT/JQUERY

1. Search for the following code in your template.

</head>

2. Paste the following piece of code present in this text document - SCRIPT FOR TEXT WITH MOVING BACKGROUND, just above the line mentioned in step 1.
Note: You may omit the first line the script mentioned above provided you have the latest jquery file running on your blog.

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

If you are a person obsessed with page speed of your blog but you like this widget, then ping me via gtalk and I'll help you out. I'll just tell you to define the JavaScript internally than fetching it from Google Sites where I hosted it. That's it:)

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

Click4more... 7 Comments

Tips To Reduce Your Blog Bounce Rate

Every blog that exists on the blogosphere, has some motive behind it. Some bloggers may want to share their ideas with the world, some just want a medium to write, and few write on a mission to help others with their own experience. However, there's one thing common between the blogs i.e. to attract as many as visitors to the blog.

To increase the number of followers who come and read what you have written. One should keep track of the blog’s visitors which gives you an idea of how many people are visiting your blog per day or in a month. This will also give you an insight on the traffic which is bouncing off i.e. the bounce rate of the blog.

For that, we need to know what exactly this Bounce Rate means? Everyday some new visitors come to the blog, some come through search engines and some come through links or references. However some or most of the visitors leave your blog as they land on it. They leave your blog by simply closing it down or by hitting the back button.

What can be the reasons for it?

1. The content is not relevant to the search term that brought them to your blog.


2. The information provided on the site is not that useful.


3. The site is not appealing enough to grab the attention of the visitor.


4. The load time of the site is very slow.

HOW TO TRACK THE BOUNCE RATE

One can track the blog’s bounce rate by signing up for Google Analytics. They will provide you with the tracking code which you need to add to all the blog pages. This will provide you with all the tracking data in your analytics account dashboard.

The formula used for calculating Bounce Rate is

Bounce Rate = Total single page view visits / Total number of visits.

So, what do you do to reduce the bounce rate i.e. the number of people leaving the blog. Try some tips and tricks to make your blog more practical and useful to the visitors. Improve the blog quality to persuade people to spend time on your blog. Each and every single visitor is important and valuable for your blog and your blogging business. Mentioned below are few tips, which might be useful to make your blog effective and valuable for your visitors.

KEEP IT SIMPLE

Keep your blog post content simple and use apt and clear titles for them. Provide the information in most simple way. Support it with auxiliary images. If the visitor gets what they want in first glance, then there is less chance of them bouncing out.

MAKE YOUR BLOG USER FRIENDLY

Make the navigation system of your blog simple. The design should be easy and user friendly so that users can find what they want in two to three clicks. This will make it easier for the visitors to get what they are searching for; that is all they really want, so chances are they will come back the next time too.

FOCUS ON YOUR BLOG USP

Highlight your popular post which can help you to target those repeat visitors as well as target the new ones. Try to focus on the topics which have exhibited a good response in the past.

ANALYZE THE DATA

Analyze the Google analytics data of your blog, study the behavior of the visitors i.e. know which page they are visiting the most. Study which page has the highest bounce rate. On analyzing the data, you'll probably be able to understand which keyword has brought the maximum visitors to your blog.

GIVE MORE THAN WHAT THEY ASK FOR

Provide complete information about the topic that you are discussing in your article. If you don’t offer an option for your readers to look for more, they will most probably leave your site.

USE PROPER CATEGORIES FOR YOUR BLOG POST

Using categories in your blog, gives your visitor a sort of menu to your blog. It becomes easy for them to choose the category they most desire and probably read articles that are of their interest than just hopping around your blog for no use.

USE HIGHEST QUALITY CONTENT

Content is what makes a blog good or bad. There is nothing more important than quality content in a blog which makes a visitor interested in your blog. Always come up with creative ideas to share with your readers. Be unique and useful. Don’t try to be just “different” in your niche. Make your niche by providing quality content.

SPEED UP YOUR BLOG

Keep the technical stuff up to date. Use the latest technology in your blog. Everyone is busy in their life, so no one has the time to wait for the blog to load. Keep the loading time some where between 5 to 10 seconds at the max. Your page should load in fractions of seconds. Make sure your blog code is clean and clutter free. I recommend you to read the following articles to speed up your blog - Speed Up Your Blog : Tips And Tools.

So, use these tips to improve your blog’s bounce rate. If you have something to add to the list, then share it via comment. You might be interested to read the following articles as well - How To Reduce Your Blog's Bounce Rate?

Click4more... 10 Comments

Add An Animated Tabbed Widget To Blogger

Well, we've seen so many blogs come up with tabbed widgets for blogger. What if we add some simple animations to such widgets using Jquery. Will it not make the widget and blog, more attractive and unique? I feel it should. So, in this article, I'll teach you about adding one such animated widget with ease on blogger. Take a look at the demo using the link below and we'll get started.

ANIMATED TABBED WIDGET FOR BLOGGER - LIVE DEMO

Pretty interesting, isn't it? Well, let's dive into the tutorial straight away. I'll split the article into three parts - HTML, CSS and JavaScript so that you can rather take a break as and when you need, than working out the complete tutorial at a stretch. Well, so follow these steps to get the animated tab working on your blog.

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. Paste the following piece of code just above the line mentioned in step 1. Save your template.

.tabbed_content {
background-color: #000000;
width: 620px;
}
.tabs {
height: 62px;
position: relative;
}
.tabs .moving_bg {
padding: 15px;
background-color:#7F822A;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-u30qJqRpR_FMgxyjvDCq6jcyqZS2doWEP-e3Yh_fUNyItLUzmY67qKGJwmodq1OWQ4LXuhT-txM9t_ddVA_1rU2J2XFh7o7L7iiTds8qJTrkU99y4sz9UlGxhi59RLEC2LHIflJGPSps/s800/arrow_down_green.gif);
position: absolute;
width: 125px;
z-index: 190;
left: 0;
padding: 25px 15px;
background-position: bottom left;
background-repeat: no-repeat;
}
.tabs .tab_item {
display: block;
float: left;
padding: 15px;
width: 125px;
color: #ffffff;
text-align: center;
z-index: 200;
position: relative;
cursor: pointer;
}
.tabbed_content .slide_content {
overflow: hidden;
background-color: #000000;
padding: 10px 0 10px 20px;
position: relative;
width: 600px;
}
.tabslider {
width: 5000px;
}
.tabslider ul {
float: left;
width: 560px;
margin: 0px;
padding: 0px;
margin-right: 40px;
list-style-type:none;
}
.tabslider ul a {
color: #ffffff;
text-decoration: none;
}
.tabslider ul a:hover {
color: #aaaaaa;
}
.tabslider ul li {
padding-bottom: 7px;
}

Possible customizations include changing the list-style for the elements, background color, text color and the spacings. Please note that, I've used an image for the arrow mark. So, if you change the background color, ensure that the image showing arrow mark is also changed to match with that of the background.

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

<b:section class='main' id='main' showaddelement='no'>

2. Paste the following block of code just above the line mentioned in step 1.

<div class='tabbed_content'>
<div class='tabs'>
<div class='moving_bg' style='left: 155px;'/>
<span class='tab_item'>TAB TITLE</span>
<span class='tab_item'>TAB TITLE</span>
<span class='tab_item'>TAB TITLE</span>
<span class='tab_item'>TAB TITLE</span>
</div>               
<div class='slide_content'>                       
<div class='tabslider' style='margin-left: -600px;'>
<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>

<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>

<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>

<ul>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
<li><a href='#'>LINK NAME</a></li>
</ul>
</div>
<br style='clear: both;'/>
</div>
</div>

3. Replace # at every instance with the links you wish to point to. Similarly, replace LINK NAME  at every instance with the name of your links - probably post titles. Don't forget to replace TAB TITLE with the your title for the tabs. Save your template temporarily before we add the final jquery magic.
You can add the HTML codes anywhere in your template - not necessary that you add it above the line mentioned in step 1. But, when you place them elsewhere, you need to adjust the width of the widget correspondingly in the CSS part to fit your layout.

JAVASCRIPT/JQUERY
1. Search for the following piece of code in your template.

</head>

2. Paste the following piece of code in the text document - SCRIPT FOR ANIMATED TABBED WIDGET, just above the line mentioned in step 1.
Note: You need not include the first line in the script mentioned above (the one in the text document), provided you already have the latest jquery file running on your blog.
3. Save your template and check out the animated tab running on your blog.

I've tested the above widget to work fine on all the major browsers which include, but not limited to, IE, FF, Chrome, Opera and Safari. If you need assistance in adding the same, then leave a comment below and get it clarified. Do share your opinions about the article via comments.

Click4more... 14 Comments