Adsense Revenue Sharing Option in Blogger using widgets

This is a cool trick of HTML to implement Google Adsense code by sharing right next to the post just according to the blogger who writes it and get the money for that blogger rather than all other bloggers who writes at the same site. Before sharing the Adsense revenue I would ask someone to read these conditions that Adsense Team have made.
Click here to know more about that. This method helps someone who has a blog where multiple users write there as guest post, solving a problem between the writes managing a single site.

First Of all, we need to know what Adsense Revenue Share is.

Click4more... 1 Comment

How to add Facebook like box to blogger blogs

Well I think there are many bloggers who doesn't even know who doesn't even know how to place a like box of their fan page at Facebook promoting it at their blog to get more fans/likes so that even from the status of the page make the blog get visitors too. So here is the simple tutorial with images so that it makes easier to understand.
Before you do this you have to make sure that the border color suits your blog template whether it is light/dark etc Then whether you want the  feeds, the people who liked your page. Also collect the URL of the page you want to show the ad of.

Click4more... 0 Comments

How to use permalink option in blogger blogs to create custom URLs

A permalink, or permanent link, is a URL that points to a 
specific blog or forum entry after it has passed from the 
front page to the archives. Blogger has now also introduced 
this most awaited SEO option to all its users. With the help 
of this option at blogger you can edit the way that you want
for your blog post to be set by you, with an option to write 
this as Custom URL at blogger. This option can only be 
accessed by going to the URL draft.blogger.com

Click4more... 2 Comments

Get Mashable Sharing Widget For Free with Google+ and new search box for blogger blogs

click to enlarge

Hi guys as every one knows these days the Mashable sharing widget or subscriber widget for the blogs are very hot to be seen and look well equipped social box with some cool subscription rates going high well with this post you can also get the same kind of sharing widget as shown in the image beside even at your blog.

To do this you just need to follow these two below steps to get the box live at your blog.

Click4more... 0 Comments

How to get great traffic from US, UK etc

Hi guys I am here, today with a cool trick of the HTML codes which may help you get great kinda traffic to your site from a particular country without any defects to your site/blog for sure. But this trick has also got some effects to your blog and keep this in mind that this not not any kind of sh!t fake traffic generators or online traffic exchange program that are used in PTC and other traffic exchange site only. But  this directly works with all the search engines (even Google, Yahoo) in which your site has been indexed.

Click4more... 0 Comments

Top 5 Blogging Platform which I recommend

Blogging Platform are those site which help you to implement  and run a successful blog for you. Today, in this world I am using blogger/blogspot platform which is also used by most of the bloggers, which now stands at second place due to some of it's errors at SEO. But at first Wordpress which help the bloggers get one of the best SEO for their blog with some of the meta's stuff, etc.

Click4more... 0 Comments

How to submit blog/link to technorati

Hi guys I know technorati is a best directory where a blog can be listed and can easily get free traffic from them and the PR is 7 and alexa rank is around 1363 when I wrote this post.

But the thing is all blogger try to get a easy button to add the blog in their directory but never finds (in technorati),

Click4more... 0 Comments

Add your own ads for RSS feed

Hi dear readers, after my recent post Adsense revenue sharing sites, in that post I even added Shoutmeloud so I just went to the 'Advertise' Tab at that site and saw that a RSS feed advertisement for just 25 words was a worth of  $1000 per month, which will be sold at that rate per month by ShoutMeLoud.

Click4more... 0 Comments

Install Adsense With Search On Blogger

I hardly get time to publish articles on my blog these days. Nevertheless, I found sometime today to write a quick article about integrating Adsense on your search results page for blogs run on blogger. If you aren't able to understand about what I mean, then type some text on the search bar at the top right corner of this blog and hit the "Enter" tab (look out for the Adsense Ads on top of the search results).

To install a similar search engine on your blog, just follow the instructions given below.

1. Go to the following link - Google Custom Search. Hit the tab that says "Create a Custom Search Engine" and fill the form that appears. Ensure you fill up the column that says "Sites to search:" with your blogger URL.

2. Once you fill the up form, choose the layout for your search bar. Click next and your done with creating your custom search engine. Do not copy the code that is shown to you. Rather navigate to the following link - Manage Custom Search Engine.

3. You should be able to see your custom search engine name listed under the column that says "Search Engines I've created". Hit the control panel link and you will be navigated to a page with options to customize your search bar.

 4. Choose "Make Money" from the options listed under the left sidebar and select the option that says "I already have an Adsense Account". Fill the required details and your done. Now, your search results page will run with Adsense Ads.

5. To get this search engine on your blog, you need to follow the rest of the steps as well. Choose "Look and feel" options from the left sidebar and select the option that says "Two page" and click the tab "Save & Get Code".

 6. Just leave the page intact. Open a new window or tab in your browser. Login to your blogger dashboard and click on "Edit Posts". Now, click on the option "Edit Pages" and create a new page called "Search Results". Shift your tab to the "Edit HTML" mode from the "Compose" mode on your post editor. 

7. From the previous window/tab (the one which I said to leave intact), copy-paste the second block of code to your blogger post editor (currently operated in the Edit HTML mode). Just publish the page. Open the new page which you have created and look out for the URL of the page. It should be something similar to the one shown below.

http://www.newbloggingtipz.com/p/your-search-results.html

8. Now, copy this URL and paste it below the blank space/box (on the custom search engine page as shown in the screen shot) that asks for " Specify the url in your site where you want the search results to appear".

 9. After pasting the URL, copy the first block of code and paste it anywhere on your Blogger template - either parsing it and pasting it on your template or just adding them as a Gadget using "Page Elements" page. Both the methods will work. That's it!

You can verify your search results page now. When you type in a query on the search bar, your results shall appear on the page that your created with the Adsense Ads on top - sometimes I see them on the right. I tried to keep the article simple. If you need assistance in installing the same, then leave a comment and get it clarified! Share your opinions about the article via comments:)

Click4more... 28 Comments

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

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

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

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

Collapsible Message Panels On Blogger

When I was browsing a design blog called "impressivewebs", I found a header that could collapse itself. Impressed by the effect, I sat down to work out the logic and it was pretty simple to achieve it on blogger. In this article, I'll illustrate the collapsible effect with simple message panels while you may apply the same logic to your header or post area or to any widget of your choice.

COLLAPSIBLE MESSAGE PANELS ON BLOGGER - LIVE DEMO

So, take a look at the live demo by hitting the link above. I guess you liked it... Interested to add this on your blog, as well? Then, follow the steps below.
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 paste the following piece of code above the line mentioned at step 1.

.message_list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 383px;
}
.message_list li {
    padding: 0;
    margin: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWSiLK7l2NazLVhKXgLHgeHNrHruSmDh04FLTY0sznAmCbw1kLblruqtP-JvZlixX0v9zXt_BaQz1pL39ydKI0q3KyftuGaOddPAGgv3p-EyrlHtBkZQAcBd6ZRG01mMPaFyyOkn963LWj/s800/message-bar.png) no-repeat;
}
.message_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
}
.message_head .timestamp {
    color: #666666;
    font-size: 95%;
    position: absolute;
    right: 10px;
    top: 5px;
}
.message_head cite {
    font-size: 100%;
    font-weight: bold;
    font-style: normal;
}
.message_body {
    padding: 5px 10px 15px;
}
.collapse_buttons {
    text-align: right;
    border-top: solid 1px #e4e4e4;
    padding: 5px 0;
    width: 383px;
}
.collapse_buttons a {
    margin-left: 15px;
    float: right;
}
.show_all_message {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJrd_F3LSpO_LY5FBT4B8va0UUl45rH5w6LIaEOw1HFGWeU09nWF33naWG7R2hSbIclXit1IutinwEtb4RqbGQ1RD8VfnjY3pb_s_dLee1FRyCwld3oh0oDIB0Psk7kT8yOaPgfSWhtf8q/s800/tall-down-arrow.png) no-repeat right center;
    padding-right: 12px;
}
.show_recent_only {
    display: none;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZjQIx9NzlPrJg-bKSLjOhjZUfB2LF5DFaQDXTzZW890Qyzzl_WG1MOCEgRxvgCH4izFkrQ0l9ZYcdcp25deHgsDMLV21GzzjdF-zvf8WnonER5On90yOTEbMlqwb7XfIazp3ASJf2XIz/s800/tall-up-arrow.png) no-repeat right center;
    padding-right: 12px;
}
.collpase_all_message {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5SMPx00QZ67Vp89VuV1Vwxq0nmjYNW8H1KhPT3nAVkfiuYQ4OsGYVSj1OeTX8_FkM6jUv-bz0AepdlFT40BfKI1cqx6M6dy9oHRVzP7DqExM_Szvs9DoUYMK1vefnaHJPI-vV9avwlWei/s800/collapse-all.png) no-repeat right center;
    padding-right: 12px;
    color: #666666;
}

Note: I've used an image for the title part of the image. You may replace the same with gradient colors using CSS. Refer the following article to do the same - Cross-Browser Gradient Effect Using CSS.
3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    //hide message_body after the first one
    $(&quot;.message_list .message_body:gt(0)&quot;).hide();
    //hide message li after the 5th
    $(&quot;.message_list li:gt(4)&quot;).hide();   
    //toggle message_body
    $(&quot;.message_head&quot;).click(function(){
        $(this).next(&quot;.message_body&quot;).slideToggle(500)
        return false;
    });
    //collapse all messages
    $(&quot;.collpase_all_message&quot;).click(function(){
        $(&quot;.message_body&quot;).slideUp(500)
        return false;
    });
    //show all messages
    $(&quot;.show_all_message&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_recent_only&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideDown()
        return false;
    });
    //show recent messages only
    $(&quot;.show_recent_only&quot;).click(function(){
        $(this).hide()
        $(&quot;.show_all_message&quot;).show()
        $(&quot;.message_list li:gt(4)&quot;).slideUp()
        return false;
    });
});
</script>

Note: Do not include the first line in the script mentioned above if you've already added the latest jquery file on your blog.
5. Now, paste the following piece of code in the document - HTML FOR COLLAPSIBLE EFFECT, anywhere inbetween your <body> and </body> tags - probably within the post editor (or) below <div class='main-wrapper'> (or) <div class='columns fauxcolumns'>.
6. That's it! Save your template or publish the article and view the same to enjoy the effect.

HTML CUSTOMIZATION - FOR CODE MENTIONED IN STEP 5
If you wish to generate the time for your messages (displayed at the top right) by default, then change the text that appears in between  <span class="timestamp"> and  </span> tags. Similarly, you can change the text from "NAME" and "CLIENT" with your names and clients respectively. I've added my name and a small message in the first few div tags for reference. Check the same (code mentioned in text document at step 5) for your reference.

I've tested the above effect on all the major browsers which includes, but not limited to, IE, FF, Chrome, Safari and Opera. Let me know if you find some bugs with the above coding. If you need assistance in extending this effect to other elements on your blog, then leave a comment below and I'll help you out when I'm free:) Do share your opinions about the article via comments!

Click4more... 18 Comments

Shutter Effect Image Slider/Gallery On Blogger

I've been constantly trying to pull out unique articles for blogs run on blogger. I'm sure you would have noticed the same provided you are a constant follower of my blog. So, we've yet another interesting article based on jQuery, called the "Shutter Effect for the Images On Blogger", inspired from tutorialzine. Just take a look at the live demo of the effect by hitting the link below and we'll get started...

SHUTTER EFFECT ON BLOGGER - LIVE DEMO

Interesting effect... Isn't it? I would suggest the above effect for blogs based on photography. While, webmasters and web designers can use the above effect to showcase their portfolios. I'm sure there are lots more places wherein you can use the above effect. So, I'm open to your suggestions... Well, let's get started with the tutorial.

JAVASCRIPT/JQUERY

1. Navigate to "Design>>Edit HTML" and click on the "Download full template" link at the top of the page. Once the back up is over, search for the following code in your template.

</head>

2. Paste the code present in the following text document - Jquery For Shutter Effect, just above the line mentioned in step 1.

3. That's it! Save your template temporarily.

HTML

1. Look out for any one of the following codes in your template.

<div id='content-wrapper'>
(or)
<div class='columns fauxcolumns'>
(or)
<div id='main-wrapper'>

2. Paste the following code just below the code, you searched for, in step 3.

<div id='container' style='position: relative;'>
<ul>
<li style='display: none;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: none;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: list-item;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
<li style='display: list-item;'>
<img height='450' src='IMAGE URL' width='600'/>
</li>
</ul>
<div class='shutterAnimationHolder' style='width: 600px; height: 450px; display: none;'>
<div class='film' style='height: 15000px; width: 1000px; margin-left: -500px; top: -300px;'>
<canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/><canvas height='1000' width='1000'/>
</div>
</div>
</div>

(Note: It is not necessary that you place the above code below those lines mentioned in step 3. You can place them anywhere in your template. If you end up with some layout issues or bugs, then leave a comment below.)

3. Replace "IMAGE URL" with the URL of your images - image dimensions shall be 600x450px. Save your template again.

4. If you wish to change the width and height of the images (600x450px), then you need to change the codes highlighted in blue mentioned at step 2.

CSS

1. Search for the following code in your template. 

]]></b:skin>

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

#container{
    width:600px;
    height:450px;
    margin:0 auto;
    border:5px solid #fff;
    overflow:hidden;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin-bottom:5px;
}

#container ul{
    list-style:none;
    margin-top:0px;
}
.shutterAnimationHolder .film canvas{
    display: block;
    margin: 0 auto;
}
.shutterAnimationHolder .film{
    position:absolute;
    left:50%;
    top:0;
}
.shutterAnimationHolder{
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
    z-index:1000;
}

3. Save your template and we're done. 

Just in case you customized the image or in other words, followed the step 4 in HTML part, then change the codes highlighted in green mentioned at step 2. If not, just neglect this step and check out the stunning effect on your blog.

The above effect was tested to work perfectly fine on all the major browsers that include, not limited to, FF, Chrome, Opera and Safari. If you find the HTML part difficult to customize, then you may refer to the following text document for the coding that I used on the demo blog - Reference for Shutter Effect. Share your opinions via comments!

Click4more... 15 Comments

Cool Image Hover Effect On Blogger - Popout Details

I recently came across a cool image hover effect on a WordPress blog which made me to work out the codes for achieving a similar effect on blogger. The idea behind this effect is to display a short snippet/detail about the image on hover using only CSS. Many had already seen the demo on my test blog while those who did not, just take a look at the live demo by visiting the link below.

POPOUT DETAILS EFFECT ON BLOGGER - LIVE DEMO

Cool... Isn't it? Just follow the instructions given below to get a similar effect on your blog as well. Just create a back up in case something goes wrong. To do so, navigate to "Design>>Edit HTML" and click on the "Download full template" link at the top of the page. That's it!

1. Once the back up is over, paste the following piece of code anywhere between the 'body' tags on your template - probably below <div id='content-wrapper'> (or) <div class='columns fauxcolumns'>.

<ul class="columns">
 <li>
  <a href="#"><img src="IMAGE URL" /></a>
    <div class="info">
      <h2>TITLE</h2>
      <p>DESCRIPTION</p>
    </div>
 </li>
</ul>

2. Replace '#' with the link you wish to point to and 'IMAGE URL' with the URL of your image, probably with the following dimensions - 220x200px. Similarly, replace 'TITLE' and "DESCRIPTION' with the title and description you wish to have on hover, respectively. Repeat the codes within 'ul' tags for adding multiple images.
You may download the reference code, which I used on the demo site, here - Reference.
3. Let's style the above HTML with some CSS. To do so, search for the following code on your template.

]]></b:skin>

4. Paste the following piece of code just above the line mentioned in step 3.

ul.columns {
width: 480px;
list-style: none;
padding:0px;
margin-left:10px;
}
ul.columns li {
width: 220px;
float: left; display: inline;
margin-top:15px;
margin-left:7px;
margin-right:7px;
margin-bottom:7px; padding: 0;
position: relative;
}
ul.columns li:hover {z-index: 99;}
ul.columns li img {
position: relative;
filter: alpha(opacity=30);
opacity: 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
ul.columns li:hover img{
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
ul.columns li .info {
position: absolute;
left: -10px; top: -10px;
padding: 210px 10px 20px;
width: 220px;
display: none;
background: #fff;
font-size: 1.2em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family:Georgia,"Times New Roman",Times,serif;
text-align:justify;
}
ul.columns li:hover .info {display: block;}
ul.columns li h2 {
font-size: 1.2em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px 0;
font-family:Georgia,"Times New Roman",Times,serif;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}

5. You need not modify anything the codes above except for the margin positions to best fit your blog. That's it! Save your template and take a look at the cool effect on your blog.

The above effect worked successfully on the major browsers which includes, but not limited to, IE, Firefox, Chrome, Opera and Safari. So, give them a shot on your blog and let us know whether you enjoyed this cool effect via comments! See you soon with another interesting tutorial. You may check out the other image hover effect here - Shadow Effect.

Inspiration for the above article - Sohtanaka.

Click4more... 4 Comments

Changing Backgrounds Dynamically On Blogger Using Jquery

I've been quite busy over the past few weeks with my clients and articles on SML. Today, I found sometime to work out a simple trick based on Jquery - Changing Backgrounds Dynamically. Well, I hope you read the article about "Adaptable View On Blogger" wherein, I mentioned we can tweak the design of our blog dynamically. We'll be using the same concept in this article as well...

I don't want to take too much of your time. So, I'll just explain the basics about the working of the script. The script will add or remove classes to the body element based on what list item the user clicks on. That's it. So, take a look at the demo of this simple effect by visting the link below and we'll get started...

CHANGING BG COLOR DYNAMICALLY - LIVE DEMO

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 step 1.

.bg1 { background: url(BG IMAGE URL) repeat-x; background-color: #6c0000; }
.bg2 { background: url(BG IMAGE URL) repeat-x; background-color: #5A2A00; }
.bg3 { background: url(BG IMAGE URL) repeat-x; background-color: #00345B; }

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

        $(&quot;li.one&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&#39;bg2 , bg3&#39;).addClass(&quot;bg1&quot;);
    });

    $(&quot;li.two&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&quot;bg1 , bg3&quot;).addClass(&quot;bg2&quot;);
    });

    $(&quot;li.three&quot;).click( function(){ $
        (&quot;body&quot;).removeClass(&quot;bg1 , bg2&quot;).addClass(&quot;bg3&quot;);
    });

});
</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.

5. Now, insert the following tags anywhere in your template - may be within the post editor or on  the sidebar or below the content wrapper.

<ul>
<li class="one"><a href="#">Red</a></li>
<li class="two"><a href="#">Brown</a></li>
<li class="three"><a href="#">Blue</a></li>
</ul>

6. That's it! Save your template or publish the post. 

Just hit the text of your choice - Red or Brown or Blue and enjoy the changing environment on your blog. You may change from the default colors (Red, Brown, Blue) to the ones you like, by just altering the color codes (highlighted in blue) mentioned in step 2. In fact, you can alter between your background images. To do so, just replace "BG IMAGE URL" with the URL of your background image.

I hope, I kept the logic as well as the post simple. The above code was tested to work fine on all major browsers including, but not limited to, IE, FF, Opera, Chrome and Safari. If you find any difficulties in installing the above effect, then leave a comment or ping me on gtalk. I'll help you out! Do share your opinions about the article via comments:)

Click4more... 17 Comments

Photo Stack Effect Using Only CSS3

There's a lot of buzz around the web about Google plus! I'm sure many, including me, are fascinated about circles! Well, did you find time to check out the other sections - albums on Google+? If not, try it now! You'll find a cool transition effect on hovering your mouse over the albums! Inspired by this, I googled about the same & found a solution to get it work on Blogger. Take a look at the demo here.

PHOTO STACK EFFECT - LIVE DEMO (LOOK AT THE SIDEBAR ON DEMO BLOG)

The main advantage with the above hack is that it works purely with CSS3. No Javascript nor Jquery - only CSS! However, there is one main disadvantage working with pure CSS3 - browser compatibility issues! The above hack works only on browsers that support CSS3! I'll try to get the same effect working on all browsers, with a gradual transition rather than the abrupt change, using Jquery in the upcoming weeks! Anyway, let's get started with this tutorial now...

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. Download the following text document - CSS FOR PHOTO STACK EFFECT and paste the code present in it just above the line mentioned step 1. 

3. Save your template. To realize the stack effect, declare image tags with class="photo1", class="photo2" and class="image3" respectively. Then, wrap them with an anchor tag using class="album". That's it! Difficult to understand?  Then, paste the following code anywhere on your template to realize the final effect.

<a class='album' href='#'>
<img class='photo1' src='IMAGE URL'/>
<img class='photo2' src='IMAGE URL'/>
<img class='photo3' src='IMAGE URL'/>
</a>

Note: Replace IMAGE URL highlighted in blue with your image URLs to realize the stack effect on your blog. If you wish to extend the same effect for more than 3 photos, then ping me via gtalk or leave a comment, I'll help out to achieve the same!

4. Save your template and view the same on a browser that supports CSS3 - possibly using FF3+!

Over the past few weeks, I've been trying to post articles that are pretty unique on blogger. I would like to receive your opinion about the same. I hope you enjoy the articles on my blog including the one above! Please share your views about the same via comments:) Check out the other interesting tutorials on CSS here - CSS Tricks

Click4more... 16 Comments

Simple Slide Effect On Blogger Using Jquery

I've got another interesting tutorial using jQuery - four in a row. However, it's very important to note that all these effects are possible with the inclusion of one single jQuery file on your template which means no additional time to load your site. In this article, I'll teach you another simple slide effect or in other words, an up/down slide panel effect using jQuery. Take a look at the demo below...

SLIDE PANEL EFFECT ON BLOGGER USING JQUERY - LIVE DEMO

Interesting? Well, I have implemented the hack within the article on the demo blog whereas you can implement the same anywhere on your blogger template. Few examples include adding it to the sidebar with facebook like box, adding the hack to wrap the featured section, add the effect below your articles to show the share icons/author info widget, etc... So, let's get started.

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 step 1.

#panel {
background: #D3D3D3;
height: 190px;
color:#000;
display: none;
margin-top:15px;
}
.slide-panel {
margin: 0;
padding: 0;
border-top: solid 0px #422410;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXnssFHhP35djP8H7JjqKbErsHRlRcXvNcjEffuGuu2_aGHtTo3g-tE5E183KoBt2yqApvW9eMMLFXNLyiYzPJ0GNd_z7M6c5LaK_sMmB3sz3WbO4R4hSW2Uc97IJkU8R_0x7HZfAtTQDe/s144/orange-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEB98jgC_T-9fK9P6SHJkkbJSPcTFFwLjEtIG5Lm4UM0WI-vNtNCjMphXPAcB6FHbUQq2H82Nd8f8tpqfo7oI8Q29hbvznV-8ubQSAX1rG3FmCyxV3iDfusS7myvDARhm-0-94KUGvf2Pk/s800/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 8px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}

Note: You may replace the color code highlighted in blue to change the background of the panel. Similarly, the text color by varying the code highlighted in green. To change the height of the panel, vary the code highlighted in orange. You can also change the color of the slide button by varying the URL highlighted in pink. We have provided six different buttons below. Pick one from the slot that interests you!

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

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

<script type='text/javascript'>

$(document).ready(function(){

$(".btn-slide").click(function(){

$("#panel").slideToggle("slow");

$(this).toggleClass("active"); return false;

});

});

</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog.
5. Now, insert the following tags anywhere in your template - may be within the post editor (or) on your template. Replace YOUR CONTENT HERE with any content you want - it can be a script or an image or a link, anything under the earth... lol....

<div id="panel">
YOUR CONTENT HERE
</div>
<div class="slide-panel">
<a href="#" class="btn-slide">Slide Panel</a>
</div>

6. That's it! Save your template just in case you made use of the code on your template else, publish the post  with codes mentioned in step 5 and you're done!

The above slide panel effect was tested to work on all major browsers - IE, Firefox, Chrome, Opera. We are happy to inform our readers that some of my design articles have started to appear on the famous design site - Design News. I hope we'll be able to provide such quality articles in the future as well! Share your opinions via comments!

Click4more... 20 Comments

Simple Disappearing Effect Using Jquery

We can tweak our blogs run on blogger/blogspot with simple jQuery scripts to make it more unique and attractive. One such attractive effect is the disappearing effect. In this article, I'll explain a simple disappearing effect that you can apply to any widget on your blog. So, let's get started. Just click on the link below to see a live demo of the hack.

SIMPLE DISAPPEARING EFFECT - LIVE DEMO

Interesting, is it? Let's see how it works! Before I start off, I would like to inform you that this tutorial is just an example to illustrate the disappearing effect. You may apply the same to any widget on your blog provided the code is wrapped with a div tag that calls the class 'pane'.

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 step 1.

.pane { margin:0; padding:0; }
.pane .delete { position: absolute; padding-left:560px; cursor: pointer;}

Note: You may change the padding as per your wish.

3. Next, search for the following piece of code.

</head>

4. Paste the following piece of code just above the line mentioned in step 3. Save your template.

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

<script type='text/javascript'>
$(document).ready(function(){$(".pane .delete").click(function(){$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");});
});
</script>

Note: You need not paste the first line (highlighted in orange) in the above coding if you already have the jquery file running on your blog. I suggest you to use the Google hosted jQuery files as mentioned in the coding above for better loading time.

5. Now, just insert the tag class="pane" with any div tag on your blog. Next, include a tag say class="delete" with your image or anchor tags and save your template. To better understand what I blabbered in the last line, take a look at the following example (the code which I used on the post editor to show you the live demo).

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="pane" style="border: 1px solid rgb(9, 68, 136); padding: 5px;">
<img class="delete" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm6Chr6NKQKYPNErSE6MFXuRN09_wkG0C-awVGR-CRtliOOORN1mI13UUaxTF9iT73_6tCplDm1q7ZhOsRZtFw8t2cBV6sotYAVeCY4XwjKCY02jXm3H0GMIOqGfS_7flC4O9xUpyzIWWs/s1600/btn-delete.gif"/>
<h3>Sample Heading</h3>
<div style="text-align: justify;">
This is just a sample post to check out the disappearing effect on blogger. If you like this effect, then read the tutorial on www.newbloggingtipz.com! We've more interesting tutorials out there! So, go check out the site right now!!!!</div>
</div>

Note: You may use the above coding in your post editor and realize the same effect on your blog, as well. To change the border color, change the color codes (highlighted in green). Change the heading (highlighted in blue) and content part (highlighted in pink) as you want! I guess the other customizations are pretty self-explanatory. So, give it a shot & I bet you'll like it!

I used the disappearing effect for the subscription box on my demo blog. Where do you intend to use this on your blog? Let us know via comments! Let's see the creativity in you:)

Click4more... 11 Comments