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

Devil's Workshop Template Customization - Part 2

I'm overwhelmed with the response for Devil's Workshop Blogger Template. Missed it? Then, take a look at it - DW Blogger Template. I received lot of emails appreciating my efforts to create the template. With that being said, I do receive mails about the various bugs/errors in the template. So, this article deals in solving those issues.

ISSUE WITH READ MORE HACK

Many people emailed me stating that the read more hack is not working on the template. The read more hack is installed, by default, in the template. You just need to enable it in every article you post. In other words, it's a manual read more hack which works using the "Insert jump break" option available on the blogger post editor. If you are using the very old post editor, then you need to update the same and look for the icon shown below.

Position your cursor at the end of the first paragraph in your article - not necessary the first paragraph. Hit the "Insert jump break" icon available on the post editor. Later, publish your article to see the read more hack working on your template. Remember that you need to repeat the same procedure before you publish each article to make the hack work.

ISSUE WITH GOOGLE PLUS ONE BUTTON

The second issue deals with the Google Plus One Button installed to the right of post title on homepage. The plus one button, when shared, incremented the counter for the entire blog rather than incrementing it for each article on the homepage. Quite annoying for a reader to see simultaneous increment for the entire blog when he/she tried to just plus one the article. Well, don't worry! I've fixed this issue now.

To add Google Plus One Button to individual article, or in other word, to increment the count for each article on homepage, follow the steps mentioned 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, expand your template and search for the following block of code.

<div style='float:right; margin-left:8px; margin-top:-5px;'>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='box_count' send='false' show_faces='false'/>
</div>
<div style='float:right; margin-left:0px; margin-top:-3px;'>
<g:plusone size='tall'/>
</div>

2. Replace the code highlighted in blue with the following piece of code.

<div style='float:right; margin-left:0px; margin-top:-3px;'>
<g:plusone expr:href='data:post.url' size='tall'/>
</div>

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

Now, try to plus one each article individually and you'll see that they increment as they should! Let me know the other errors or bugs associated with the template. I'll try to fix each one of them. If not, post why they can not be done:) Nevertheless, I hope you enjoyed this update. Share your opinions via comments below:)

Click4more... 46 Comments

YouTube Introduces Video Edits With Cool New Features

YouTube has introduced new editing features this week. This allows users to edit their already uploaded videos and the videos will retain the same video IDs so that the counts and comments are not lost. All the links remain the same as well. The user has to click on the “Edit Video” button on his video’s page or the My Videos page. This feature enables the user to edit the videos in a shorter time frame.

YouTube wants that, the users be given the ability to polish their videos and the edit feature is part of that initiative. A majority of the YouTube videos are rough amateur footage and this will give the amateur enthusiasts to add a touch of professionalism to their work.

The Edit option enables the user to stabilize hand-held footage, rotate the videos and enhance the colors and contrast. There is an “I’m Feeling Lucky” feature as well that enables one click color correction. Moreover, you can easily convert your 2D videos into 3D with just a click. There are lots more features apart from those mentioned here. So, login to your You Tube account and look for the Edit option on your dashboard.

The team has worked with the Picnik (the online image editing tool) team which Google acquired last year to add artistic effects that enable the user to add filters such as black and white and cartoon effects to the videos. The user can even swap the audio and can chose from a selection of available tracks. The user has the option of trimming the video as well if it is too lengthy at the beginning or the end.

Once the editing is complete, the user can click on the save button and the processing will start. If you are not happy with the results, you can go back to the original version. There is an option to of saving multiple versions as well. But videos that have more than 1000 views or third party content, can only be saved in the new version.

Click4more... 11 Comments

Queryads Review – Another Adsense Alternative

People say, days of Pay Per Click (PPC) ads are gone but I personally feel that, even those who say that make the maximum out of PPC ads only. In other words, it is still the best method to make money online – predominantly using Adsense or other alternatives to Adsense. So, I sat down last night to find a quality Adsense Alternative and I ended up with this website called “Queryads”.

Queryads provides publishers PPC ad block similar to Adsense to make money online. From the reviews around the web, I found that their ads are relative to a website’s content unlike other alternatives. For example, if you run a website about food, the ads are predominantly oriented to food. Well, this is the most important criteria that a publisher should look out for.

Secondly, as a publisher, you should look out for the speed with which the ad blocks load and I feel it is certainly quick when compared to other alternatives. Moreover, it is compatible with Google Adsense. In fact, you can insert your Adsense ID to avoid repetition of advertisements – something that many alternatives do not care about.

You earn 70% of the revenue that you generate – the remaining 30% is absorbed by query ads as commission. The minimum payout to withdraw your earnings is $10.00 (seriously way too low) and you can maximize your earnings via affiliate sales by referring, both advertisers and publishers. You’ll earn 10% as a commission for every amount that the advertiser (the one you referred) spends on queryads or when a publisher generates income via queryads.

As an advertiser, I don’t have much expertise about the same. However, from the perspective of an observer on their site (watching the video and other stuffs), I feel you might get quality publishers to advertise your product. Moreover, you get 100 free visits initially – so, you may give them a try. You may refer to the FAQ page for further details - Queryads FAQ.

To wrap up, as a publisher, I feel this is a better alternative to Adsense - definitely not the best. Nevertheless, it's free! So, what you waiting for? Just sign up for free and try their service. Later, share your opinions via comments below.

Click4more... 25 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

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