Blogger navbar peekaboo: Hide and have it reappear on hover

Share

This tutorial will show you how to make Blogger navbar invisible and have it reappear when you mouse over the top of your blog.

The end result of this hack is slightly is different from other navbar peek-a-boo hacks available on the net. Most hacks will:

• Hide the navbar, but leave it’s footprint visible in normal view, or
• Look good during normal view, but push the rest of you blog page downward when hovered.

This hack won’t do either of that. The navbar will simply appear on a different layer, floating on top of your blog header. Visit my widget showcase blog for the demo. Here are the screenshots of how your  navbar area will look like once you’ve applied the hack:

Normal view

Hover view

Note: This hack should work in Firefox, Chrome and Opera. It won’t work on Internet Explorer.

1. Go to Dashboard > Design > Edit HTML.
2. If you had previously removed the navbar, then you need to undo that first before proceeding. Refer to How to remove or restore Blogger navbar.
3. Look for ]]></b:skin> line in your HTML code and add the following CSS code snippet right before it:

#navbar {opacity:0;filter:alpha(opacity=0);position:relative;margin-bottom:-30px;z-index:10;} 
#navbar:hover {opacity:0.7;filter:alpha(opacity=70);}

You can change the hovered navbar transparency by decreasing the value of opacity property in line 2. The value of 0 makes it completely transparent and 1(100) makes it completely opaque.

(For Designer template, you can also add the snippet without leaving Template Designer)

Enjoy!

Read more ...

How to put Adsense on Blogger

Share

Google Adsense in one of the more popular ways to monetize your blog. When implemented, Adsense will display targeted Google advertisements on your blog. The content of the ads is often relevant to your blog page’s content and audience.

This tutorial will show you the three ways how you can add Adsense ads to your blog. Of course to be able to do all this, you have to Sign up to Adsense first.

Note: Adsense allows only up to 3 ad units, 3 link units and 2 search boxes per page. Keep that limit in mind when adding your ads.

 

1. Inline ads

Inline ads put an ad unit at the end of each blog post.

1. Go to Design > Page Elements and click the edit link in Blog Posts gadget box.
2. Tick the Show Ads Between Posts checkbox.
   
3. Configure your ad frequency, ad format, and colors. Live preview is provided beneath the settings.
4. Click Save when done.

 

2. Adsense gadget

Use this method to add ad unit as a widget, in places outside the blog post area. You can control the placement and on which pages it appears just like any other widget.

1. Go to Design > Page Elements and click an Add-A-Gadget link.
2. Select Adsense Gadget
   
3. Configure your ad format and colors.
4. Click Save when done.

 

3. Adsense code

This method is not as easy to implement, but it gives you more control. The most notable benefits of using this method are:

• Place ad anywhere in your blog
  You can place the code anywhere in your blog template, accessing locations otherwise impossible with inline ad or Adsense gadget. You can even place it in your blog post or page.
• Monitor your ad performance  (channel monitoring).
  Where is the best location to put an ad on your blog? Which format performs the best? Find out by yourself by assigning a channel/channels to an add. You can then monitor the ad performance through the channels. If you are serious about monetizing with Adsense, the this feature is a must use. 
• Not limited to ad units.
  You can choose types other than ad unit i.e. link unit, search box.

 

Here’s a the procedure for creating an ad and adding it to your blog:

1. Create an ad in Google Adsense website.
2. Click AdSense Setup tab and then select Adsense For Content.
   
3. Choose your ad type, choose format and colors and assign channels.
4. When the setup is completed, you will be given a code. To add the ad into your blog, you can either:
   • Paste the code in a HTML/Javascript gadget, or
   • Paste the code in a blog post or page, or
   • Paste the code direct in your template (code have to be escaped first), giving you total control on the placement of the add . You can also use conditional tags to target on which pages the ad appears.

Enjoy!

Read more ...

Import multiple blogs into Facebook via NetworkedBlogs

Share

Sharing your blog posts/entries on Facebook is a great way to increase your online presence. If you had a Facebook share button installed, sharing a post is just a couple of clicks away. Easy right?

Yet here I am telling you there is an even easier way to share your blog posts on Facebook. It’s a “set it once and forget it” kind of way -by importing your blog feeds into Facebook, using Networked Blogs. Once set up, NetworkedBlogs will update your profile, fan page and even group page with your latest posts, automatically.

This tutorial will show you how to register your blogs with NetworkedBlogs and then import them into Facebook.

And if you already importing your blog using Facebook Notes application, you too should consider switching to NetworkedBlogs. Here’s why:

1. NetworkedBlogs supports multiple blogs.
2. NetworkedBlogs not only imports to your personal and fan page, but can also import to your group page as well.
3. Each post snippet comes with a thumbnail image (pulled from your blog post) and a link to the original post on your blog.
4. The import actually works. Your blog’s latest post will be posted on your wall automatically. (Facebook Notes claims to do this too, but the auto-updates never come).

 

I. Register your blogs with Networked Blogs

1. Go to NetworkedBlogs facebook application.
2. Click the Allow button when Networked Blogs requests for permission to allow it to access your information.
   
3. Select some blogs to follow. You have to follow at least one blog before you could register yours.
4. Then go back to NetworkedBlogs to add your blogs.
5. Click Register a Blog button located on top of news feed.
   
6. Fill in all the necessary details and then click Next button at the bottom of the page.
7. When asked if you are the owner of the blog, click YES.
8. In the next screen, choose Use widget to verify ownership as the method of verification.
   
9. Copy the code given and paste it in HTML/Javascript widget. (you can remove it later if you want to).
   
10. Once you Save the gadget, click Verify Widget button.
11. Click NEXT button when you receive the green “Verification successful” message.
12. (To register another blog, repeat steps 4 to 11.)

 

II. Importing your blog

Now you are taken to a page containing your blog info and feed. On the top of the page, under the search box you will see “Syndication” link.

1. Click the link, and then choose a blog to syndicate.
2. Your Personal profile, Fan page and Facebook groups will be listed under Publishing Targets tab. Beside each tab is a Auto-publish checkbox.
   
3. Tick the checkbox to auto-publish your blog feed to its wall. 
4. Choose Allow when Networked Blogs requests for permission to post to your wall.
5. Click Publish a Test Post.
   
6. When the button changes to “Message posted, check page wall”, go to the wall to see if the test post comes out. If it does then your work is done. The next time you publish a post, it will be posted automatically on the wall.

Enjoy!

Read more ...

Install LinkWithin Related Posts with Thumbnails

Share

Keep your readers engaged with LinkWithin related posts with thumbnails widget. The related posts thumbnails will appear under each post, linking to related stories from your blog archive. It will make your old posts accessible to new or casual readers of your blog, thus increasing traffic.

This tutorial will show you how to install LinkWithin widget to a Blogger blog. I’m splitting this tutorial into two sections -one is for installing default widget and another one is for installing custom widget.

 

a) Installing default LinkWithin widget

Adding a default widget is actually pretty straightforward.

1. Go to LinkWithin.
2. Enter your email address and blog URL.
3. Select Blogger for the platform and select the number of stories.
4. Click Get Widget! and the widget will be added to your blog.
5. Done! The related posts thumbnails and links should appear under each post now.

 

b) Installing custom LinkWithin widget

If you would like to customize the widget, proceed with the rest of this tutorial. You can change the placement of the related posts thumbnails and the phrase that appears above them. You can also specify on which pages they should appear.

Here we go,

 

I. Get your Site Id

1. Go to LinkWithin.
2. Perform the same steps (steps 2 to 4) as in a) above, except this time choose Other for the platform.
3. You will be given a code snippet, similar to the snapshot.
4. Don’t copy the code. Just jot down or copy the Site Id number for later use. 
   

 

II. Adding in the widget code

1. Login to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Copy the code below and paste it right before </body> tag in your template:
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <script> 
   var linkwithin_site_id = SITE ID NUMBER; 
   linkwithin_text='YOUR CUSTOM PHRASE';
   </script> 
   <script src="http://www.linkwithin.com/widget.js"></script> 
   <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>
   </b:if>

   • Put your Site Id number in code line 3.
   • Change the “You might also like:” phrase with your own phrase in code line 4.
   • The code above will make the related posts appear only on post pages. If you want to display them on all pages, just remove code line 1 and 8.
5. Save and view your blog.

 

III. Repositioning related posts display (optional)

By default the related posts thumbnails will appear after each post body, ABOVE the post footer. That means it appears (in most cases) above your labels, comments link and timestamp.

A few users mentioned that they prefer the thumbnails to appear BELOW the post footer, and asked me how can they make it so.

So here it is folks. Follow these steps to place the related posts at the very end of your post section:

1. In Design > Edit HTML, with Expand Widget Templates checkbox ticked, find the following code:
   

   <b:include data='post' name='post'/> 

2. Add <div class="linkwithin_div"></div> right after the line, like so:
   

   <b:include data='post' name='post'/> 
   <div class="linkwithin_div"></div>

3. Click Save. You're done!

Enjoy!

Read more ...

Targeting specific pages with conditional tag

Share

Conditional tags are Blogger template tags that allow you to specify parts of your template to appear only under certain conditions. One particularly useful application of conditional tags is in specifying on which page or pages a HTML element should appear.

Ever wish you could display only relevant widgets onto a page, hide sidebars on certain pages, display different buttons on different pages, or apply a meta tag only to selected pages? Well, if applied properly, conditional tags can make all that happen.

 

Conditional tag syntax

The syntax is like this:

<b:if cond='PUT_CONDITION_HERE'>
</b:if>

It is made up of a <b:if> tag, with a  cond attribute added. Condition is entered as the value of the cond attribute. Each (opening) <b:if> tag need to be closed with a closing </b:if> tag.

 

List of conditional tags

Below is a list of conditional tags that target specific pages. I only list the opening tags here. Just make sure you include the closing </b:if> tag when applying a conditional in your template.

1. Index (list) pages
   Index pages include homepage, labels page and yearly archive page.
   

   <b:if cond='data:blog.pageType == "index"'>

2. Post (item) page
   

   <b:if cond='data:blog.pageType == "item"'>

3. Static Page
   

   <b:if cond='data:blog.pageType == "static_page"'>

4. Archive page
   

   <b:if cond='data:blog.pageType == "archive"'>

5. Homepage
   

   <b:if cond='data:blog.url == data:blog.homepageUrl'>

6. Specific page/url
   

   <b:if cond='data:blog.url == "PUT_URL_HERE"'>

 

Applying conditional tags

To apply a conditional tag to a content, simply put the content between the opening <b:if cond…> and the closing </b:if>, like so:

<b:if cond='data:blog.pageType == "item"'> 
CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
</b:if> 

In the example above, the content will appear only on post pages.

If you want to specify a alternate content (if the condition is false), you need to insert a <b:else/> tag followed by the content, like this:

<b:if cond='data:blog.pageType == "item"'> 
CONTENT 1 (TO BE EXECUTED IF CONDITION IS TRUE)
<b:else/>
CONTENT 2 (TO BE EXECUTED IF CONDITION IS FALSE)
</b:if> 

 

To reverse the condition, change the comparison operator from == (is equal to) to != (is not equal to).

You can place the conditional anywhere in your template HTML, except inside a section or inside a widget content box. The content can be a div, a section, a style tag, another conditional tag etc.

 

Application examples

Below are some examples of what you can do with conditional tags:

• Display widgets on specific pages
• Applying different styling to static pages
• Adding description and keyword meta tags

 

Enjoy!

Read more ...

Using custom/nonstandard fonts with Google font API

Share

Let’s face it, the choice of fonts you can use in your blog or web page is rather limited. While you may have tons of fonts installed in your computer, that doesn’t mean you can use all of them. Well, technically you can apply them in your blog, but what your readers see is limited to only the fonts installed in their computers.

That is why Blogger plays it safe by integrating only (web-safe) fonts commonly available in most computers -Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet and Verdana.

Now that’s not much of a choice isn’t it?

Well that's about to change, with Google font API. What fonts your readers have or do not have in their computers no longer matter. The API uses fonts that are hosted by Google. This paragraph shows what it can do. Just so you know, I use a font called Reenie Beanie.

Applying Google’s web font is easy: just add a special stylesheet link in your blog template, then use the font in a CSS style.

Here’s how you can apply a font to your blog:

1. Go to Google font Directory for a list of available fonts.
2. Click on a font to view the font details.
   • Go to Font Previewer if you want to test the effect of various text properties (font-size, spacing, caps, shadow etc.) on the font.
   
3. To get the code, click blue Get the Code tab on the right.
4. Tick the checkboxes for the variants (if the font has variants that is) you want to use before copying the code. The looks something like this:
   

   <link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

5. Before using the code, add a slash right before the closing bracket, like this:
   

   <link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'/>

6. Then copy the code and paste it right before the </head> tag in your template.
7. To apply the font, just go to Design > Edit HTML and insert a CSS code snippet right before ]]></b:skin> line in your template. This snippet: 
   

   .post-title { font-family: 'Reenie Beanie', verdana, arial !important;}

   for example, will apply Reenie Beanie font to your post titles.
   

   (For Designer template, you can also add the snippet from within the Template Designer.)

8. Preview before saving.

Only add the fonts you plan to use. Adding unused fonts would burden your blog with an unnecessary load.

At the time of writing this post, Google font Directory has 18 font families
-Cantarell, Cardo, Crimson Text, Droid Sans,Droid Sans Mono, Droid Serif, IM Fell, Inconsolata, Josefin Sans Std Light, Lobster, Molengo, Nobile, OFL Sorts Mill Goudy TT, Old Standard TT, Reenie Beanie, Tangerine, Vollkorn and Yanone Kaffeesatz.
Let us hope more will be added in future.

To use custom fonts for short texts i.e. for headings, you can also use another method -create a image of the text, then embed it in your template HTML.

Enjoy!

Read more ...