Saturday, January 29, 2011

Blogspot How to: Add Adsense Below Post Titles

How to Add Adsense Below Post Titles in Blogspot Blogs


Google Adsense is the most popular ad network on the planet. A lot of Blogger users also use it. It's an endless discussion where to place these ads on your blog for maximum exposure. The best ad places are around the header or above the posts or below the post titles. You can easily add adsense in your sidebar as a gadget. But Blogger doesn't allows us to directly place the ads below post titles. The ads below post titles have proven to be one of the most successful money making positions. So, what are you waiting for? Follow this tutorial to add your Adsense ads below post titles.

Please Note: I'm assuming that you're using the new Adsense interface.


Steps!

  1. Log in to your Google Adsense account by going to https://www.google.com/adsense/
  2. Go to My ads tab and open Ad units from the left side by expanding Content link.[View Screenshot for Help]
  3. Click new ad unit to create a new ad.[View Screenshot for Help]
  4. Select the size, type and color of your ad. For best results chose either 300x250 medium or 336x250 large rectangle.[View Screenshot for Help]
  5. Give your ad a remember-able name and ad a custom channel to track the ad performance. If you don't know anything about channels then leave that option.
  6. After filling required information, click save and get code button at the bottom of the page.[View Screenshot for Help]
  7. A pop-up window will appear with the ad code. Copy that code.[View Screenshot for Help]
  8. Before pasting the ad code in Blogger, we must make it compatible with Blogger format. So go to http://www.hacktrix.com/adsense-code-converter/ paste the ad code and convert it. You'll find the converted ad code in the bottom box there. Copy the converted ad code.
  9. Open your Blogger account and go to Design then Edit HTML tab and check Expand Widget Templates option.
  10. Press Ctrl + f & find <data:post.body/> you'll see some code like this:
  11.     <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
  12. Paste the converted ad code just before the above code. The result would look something like this:
  13. <script type="text/javascript"><!--
    google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
    /* my ads */
    google_ad_slot = "xxxxxxxxxx";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
  14. Click the PREVIEW button to see the result. Thought you might not see ads below post titles instantly because sometimes Adsense ads take some time to display.
  15. After that save your template by clicking the SAVE TEMPLATE button.

Tip: Make Ads Appear Only on Post Pages


Usually, users don't like to see too many ads on a single page. So, we can hide the ads under post titles on main page. These ads will appear only when users will click the post title and go to the post page. To do that follow the steps above but after step 8 you have the converted ad code. Ad some more code in that converted code so that it should look like this:
<b:if cond='data:blog.pageType == &quot;item&quot;'><script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
/* my ads */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></b:if>

What I did here is that I've added an if condition to make the ads appear only on post pages. After that, follow the steps above to complete the tutorial.

Saturday, January 22, 2011

Blogspot Video Tutorial: How to Create a Post in Blogger

Hi guys, this is the 2nd part of my video tutorials series "Blogging for Beginners". In this part, I've explained how you can create a post on Blogger. Please watch this video and share it with your friends.



You can subscribe to my YouTube channel for further video updates:

http://www.youtube.com/user/BloggerEngineer

Thursday, January 20, 2011

Blogspot Video Tutorial: How to Create a Blog With Blogger

Hi guys! I've started a series of video tutorials for beginners. This is the 1st part in which I've explained how you can create your first blog on Blogger. Please watch it and feel free to visit my YouTube channel. You can subscribe to my YouTube channel and post your comments there.



Please post your comments on video page (right click on video and chose "Watch on YouTube"). Also subscribe to my YouTube channel because I'll be posting more tutorials for beginners. Your feedback will be appreciated, thanks :-)

Saturday, November 6, 2010

Blogger Templates: Versatility Lite

Versatility Lite Premium Quality 2 Columns Blogger XML Template

Versatility Lite is a 2 column Blogger template with a "Featured Post" section, CSS navigation menus & premium quality layout. [How to Setup]

Features: 2 columns, grunge theme, white layout, top menu, 3 columns, search box, minimal.


Friday, November 5, 2010

Blogspot How To: Center Post Title in New Blogger Templates

In this tutorial, I'll explain how you can change the alignment (position) of the post title. By default, post title aligns to left but you can change it to center as well. Currently, Blogger (Blogspot) offers 6 default templates in the Template Designer. This tutorial will work on all those templates.

Just open the Template tab -> Edit HTML button.

Then find (Ctrl + f) the following code:
]]></b:skin>

and REPLACE it with the following one:
h3.post-title { text-align:center; }

]]></b:skin>

Click the PREVIEW button and you'll see that the post title is now centered. After that save your template and enjoy :)

Help BetaTemplates!


You can help betatemplates.com by adding a link anywhere on your blog. The link code is available from the bottom of this page.

Wednesday, November 3, 2010

Blogspot How to: Make Images Not Clickable (No Enlarge)

By default, images in Blogger are linked to their full size which means if someone clicks on an image, the same image is opened in full size. This is confusing for blog visitors and it also takes the visitors away from your blog. If you want to make your uploaded images not click-able then I'll tell you a simple trick to do that.

Note: Before reading the tutorial, make sure you know the type of your post editor. If you don't know the type of your editor then simply go to Settings | Basic and at the end of the page, you can see the type of your post editor. Anyways, I'll explain the trick in both old and new post editors.



1- Make Images Not Clickable in Old Post Editor


Make sure you're working in Edit HTML of the old post editor. You can change the editing mode from top right of the post editor. So, upload your image as you normally do. After the image is uploaded, you'll see some code in the post editor. This code is actually the HTML of your uploaded image and it will look something like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy673m_qkdaTemflSE85rLPM4cbCMlX2Yu-7rVqFPWSyHqvfnkAjh09brmt2LH1fIiE1Dqf4k3w2GjCvK8N_l1xaztQfZcFgm0scBnDzaQOGZ3PkZXRNdC40wlug58hlk9Yt3kZjA6Vq0/s1600/This+is+an+Image.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 259px; height: 194px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy673m_qkdaTemflSE85rLPM4cbCMlX2Yu-7rVqFPWSyHqvfnkAjh09brmt2LH1fIiE1Dqf4k3w2GjCvK8N_l1xaztQfZcFgm0scBnDzaQOGZ3PkZXRNdC40wlug58hlk9Yt3kZjA6Vq0/s400/This+is+an+Image.jpg" alt="" id="BLOGGER_PHOTO_ID_5536049028840403346" border="0" /></a>

The code for my image is divided in Red and Green parts. The Red part is responsible for making the image a link and green part displays the image. So, you need to delete that part of your image which is marked red in my image and leave the Green part as it is.

1- Make Images Not Clickable in New Updated Post Editor


So, if you're using the new updated post editor then the code for uploaded image will be a little different. Just make sure you're working in the Edit HTML mode. In Edit HTML mode of the post editor, you'll see the code of the uploaded image instead of the image itself. So, upload an image and you'll see some code like this:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3IFKxALXjk0XYR4ou-VSbmtNxI4jLV7jRz6JCDtz9H5XYdXWFv-IYwV-sSeX502N3pyWDlKUwYY59q2VwsMyf25ooiD3V1Z7cZO9eBtky2slVYYu8u78gf2aCJreW0gQWUjCVlYPVISA/s1600/This+is+an+Image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3IFKxALXjk0XYR4ou-VSbmtNxI4jLV7jRz6JCDtz9H5XYdXWFv-IYwV-sSeX502N3pyWDlKUwYY59q2VwsMyf25ooiD3V1Z7cZO9eBtky2slVYYu8u78gf2aCJreW0gQWUjCVlYPVISA/s1600/This+is+an+Image.jpg" /></a></div>

As you can see that the code is divided in Red, Green and Blue parts. reen part displays the image, Red makes it a link and Blue is responsible for the alignment of the image. So, just delete the red part from your image and it will not be click-able.

Friday, August 13, 2010

Blogspot How To: Add the Official Twitter Tweet Buttons in Blogger

Blogspot How To: Use the Official Twitter Tweet Buttons

Twitter is the most popular social networking site on internet. People share links on Twitter which receive a lot of traffic. You can also add the official Twitter tweet button with or without counter. This button will enable your blog visitors to easily share useful links on their Twitter accounts.

Get the Button Code!


First of all go to http://twitter.com/goodies/tweetbutton. Now follow these steps to get the code:

  1. Select the button from 3 available choice.

  2. If you've a Twitter account then enter your username in the second field. By doing this, whenever someone will share your blog post on Twitter, your username will also be added to that tweet. If you don't have a Twitter account, I strongly recommend to make one but, for now, you can skip this option.

  3. Copy the code from the box.


Add the Code in Your Blog!


Now we need to add the Twitter tweet button code in our Blogger blog. So, go to Design and then Edit HTML tab. Check Expand Widget Templates box. Search for this code:
<data:post.body/>

Place Twitter tweet button code immediately after the above code. You can also place the Twitter tweet button code immediately before the above code but then the Twitter button will appear between the post title and body.

Add Custom Text in the Twitter Tweet Button!


You can also add your own message in the Twitter button. For example if you want to add Hey, check it out: THE POST TITLE then you need to change expr:data-text='data:post.title' to expr:data-text='“Hey, check it out:“+data:post.title'.

Display Twitter Button Only on Post Pages!


If you want the tweet button to appear only on post pages then you need to change the button code. Now, your code will look something like this:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Twitter Tweet Button Code HERE
</b:if>