Showing posts with label Blogspot. Show all posts
Showing posts with label Blogspot. Show all posts

May 01, 2011

How to Increase Blog Width Beyond 1000 Pixels in Blogger

The maximum width that you can increase in template designer in Blogger is 1000 pixels. So,if you want to have 1024*768 size, popular size today, you can't by template designer.

However, in Edit HTML mode, you can.

1. Sign-in your blogger account.

2. Go to Dashboard << Design << Edit HTML

3. Backup / Restore current template (use button in top of the showing page). Whenever you change the HTML template, DO Backup before begin.

4.Find following code. Just use the find function of your browser(in most case, Ctrl+F).
<b:template-skin>

5. You may see portion of codes as follows:
<b:template-skin>
      <b:variable default='930px' name='content.width' type='length' value='1000px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='150px'/>
      <b:variable default='360px' name='main.column.right.width' type='length' value='270px'/>

The variable in second line, content.width, specifies total width of your blog. So, you modify the value (orange box), then your blog width increase as much as you want. Note that, the incremental affects to only post area, not side bars. As you see in third and forth line, sidebar width is set as specified value (green boxes). But, posting area width is not. Accordingly, posting area width will increase as the total increased width. Of course, you can increase sidebar width by modifying the values in third and forth line.

Good Luck!

Posted in , , , ,

How to Make Links Open in New Tab In Blogger

Whenever you insert links into your posts in blogger, your reader's browser will open them on current tab or window that your post is displayed. Sometimes, it leads to reduce average time readers stay on your post and it may be not you want.

Blogger editor does not support to specify location where links display. By default, it will open in current tab. If you want to change it, you should insert target property into your anchor tags in 'Edit HTML' mode. For example,
<a href="YOUR LINK URL" target="_blank"> YOUR ANCHOR TEXT </a>

In situation where your post has lots of links, you may be easily tired. We need a fancy method.

Here we go.

1. Sign-in your blogger account.

2. Go to Dashboard << Design << Edit HTML

3. Backup / Restore current template (use button in top of the showing page). Whenever you change the HTML template, DO Backup before begin.

4.Find the begin tag of <head>. Just use the find function of your browser(in most case, Ctrl+F) with "<head>".

5. Insert following code after the <head> tag.
<base target='_blank' />

Since, the <base> tag specifies a default address or a default target for all links on a page, all links in your blog will now open on new tab or windows. The <base> tag actually as no end tag (i.e. </base>) as HTML document, but you must have end tag or slashed end (/>) because blogger template is based on XHTML.

Posted in , , ,

April 26, 2011

How to List Only Post Titles when Click Label in Blogger

Your blog has lots of posts with a label, you may want to show only post titles to your readers. Actually it'a way web sites do.

When you are ready, just follow simple steps.

1. Sign-in your blogger account.
2. Go to Dashboard >> Design >> Edit HTML
3. Backup / Restore current template (use button in top of the showing page). Whenever you changes the HTML template, DO Backup before begin.
4. Check the 'Expand Widget Templates' box (in top-right of the template script box)
5. Find line below. Just use find function on your browser (CTRL + F)
<b:include data='post' name='post'/>

6. Replace the line with

<b:if cond='data:blog.homepageUrl != data:blog.url'>
   <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <div>
         <a expr:href='data:post.url'><data:post.title/></a>
      </div>
   <b:else/>
      <b:include data='post' name='post'/>
   </b:if>
<b:else/>
   <b:include data='post' name='post'/>
</b:if>
7. You can do styling your post titles by inserting style property on <div> tag. Of course you can use another tag, for example <span> and <p> surrounding <a>...</a>. For instance,
<div style="color:red;padding-left:20px;">
<a expr:href='data:post.url'>
<data:post.title/></a> </div>
Done. Enjoy Blogging!

Posted in , , ,

April 20, 2011

How to Insert Adsense Just Below Post Title in Blogger

Adsense is usually placed below post titles, because it is the position with the highest CTR (click-through rate).  Right figure shows the heat map provided Google Adsense Team. The dark color has more hitting score.

You can place adsene below post title by inserting adsense code first in every posts. When you are writing, you shouldn't forget it. It's possible, but it seems not fancy.

Yes, you don't need to do it. Just once insert adsense cone into proper location in your blogger HTML template.

First, you should get adsense code from your adsense account. I recommend 336x280 or 300x250 rectangle unit for best result. When you get code, you should convert it the escaped code so that Blogger interpret correctly. Use this site.

When you are ready, just follow simple steps.

1. Sign-in your blogger account.

2. Go to Dashboard << Design << Edit HTML

3. Backup / Restore current template (use button in top of the showing page). Whenever you changes the HTML template, DO Backup before begin.

4. Check the 'Expand Widget Templates' box (in top-right of the template script box)

5. Find following code using the find function of your browser(in most case, ctrl+F). You can just look up the codes to find it.
<data:post.body/>

6. Finally, insert following code just above the line you found (above <data:post.body/>)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   place your escaped adsense code
</b:if>

the conditional tag <b:if...> and </b:if> will make the adsense appear only on post pages. If you want the adsense to appear on all pages, just remove the two lines.

Good Luck!

Posted in , , ,

April 19, 2011

How to Display a Widget Only on Certain Pages In Blogger

Sometimes, you may or may not want to display a widget on a certain page. For instance, I don't like display the adsense widget on a main page and archive page.

By using conditional statement in HTML template, you can get it. You should add widgets which you want to display so that Blogger detect the widget. You can add, modify, and remove widgets in Dashboard >> Design >> Page Elements page.

When you are ready, just follow simple steps.

1. Sign-in your blogger account.

2. Go to Dashboard >> Design >> Edit HTML

3. Backup / Restore current template (use button in top of the showing page). Whenever you changes the HTML template, DO Backup before begin.

4. Check the 'Expand Widget Templates' box (in top-right of the template script box)

5. Find you widget section code. If your widget has a title, then find the title using the find function of your browser(in most case, ctrl+F). If your widget has no title, then think about proper term. For example your adsense widget can be found by your ad-name or 'google_ad'. Of couse, you can just look up the codes to find it.

For example, following widget code is used for display gap between widgets. The red-colored lines make the widget to display only on main (home) page. All you have to do is just insert two lines after making conditional sentence.

<b:widget id='HTML3' locked='false' title='' type='HTML'>
   <b:includable id='main'>
     <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <!-- only display title if it's non-empty -->
     <b:if cond='data:title != &quot;&quot;'>
       <h2 class='title'><data:title/></h2>
     </b:if>
     <div class='widget-content'><data:content/></div>
     <b:include name='quickedit'/>
    </b:if>
   </b:includable>
</b:widget>

If you want to display the widget everywhere, but not homepage, then use next code instead
<b:if cond='data:blog.url != data:blog.homepageUrl'>

Only display on archive page, use next code instead
<b:if cond='data:blog.pageType == "archive"'>

Only display on specified page on you blog, use next code instead
<b:if cond='data:blog.url == "http://[your-page-url]"'>

Posted in , , ,

How to Remove Blog Title from Page Title

By default, when you publish your post, the page title of the post becomes 'Blog Title : Post Tile". For example, the title of this post 'How to Remove Blog Title from Page Title' changes to 'Program Square: How to Remove Blog Title from Page Title'.

It seems not bad. But in situation where your posts are automatically linked to social network sites such as delicious.com, digg.com, and stumbleupon.com, it becomes little bit serious. All of my posts start with same words. Search engine as well as people think the posts are very similar or do not have good contents.

You can remove the blog title from the page title. It's too easy.

1. Sign-in your blogger account.

2. Go to Dashboard >> Design >> Edit HTML

3. Backup / Restore current template (use button in top of the showing page). Whenever you changes the HTML template, DO Backup before begin.

4. Using the find function of your browser(in most case, ctrl+F), find following expression. (You can just look up the codes to find it.)

<title><data:blog.pageTitle/></title>

5. Replace the line with following:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <title><data:blog.pageName/></title>
</b:if>

Done.

Alternatively, following code changes order of page title and blog title. If you want to keep your blog title in page title, just replace upper code with following:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <title><data:blog.pageName/>: <data:blog.title/></title>
</b:if>

Posted in , , , ,

Subscribe to: Posts (Atom)

Recent Posts

Archives