Program Square: Blogging Tip

Showing posts with label Blogging Tip. Show all posts

May 20, 2011

How to Insert Page Number Instead Older/Newer Page Navigation in Blogger/Blogspot

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.)

]]></b:skin>

5. Insert following CSS code into just above the found expression.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

6. Using the find function of your browser(in most case, ctrl+F), find following expression.

</body>

7. Insert following Javascript code into just above the found expression.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>

8. Customize post numbers displayed per page.

var pageCount=3;
// This code determines the number of posts that would be displayed per page.
var displayPageNum=3;
// This code determines the number of additional page navigation numbers that will be displayed on the page.

9. 'Save Template' before going to next step.

10. Expand Widget Templates by checking Expand Widget Templates check box located in right-top side of template script box. Then, find following expression.

'data:label.url'

11. Replace that code with following code.

'data:label.url + "?max-results=6"'

In fact this is about 'How to Limit the Number of Pages in Labels Page'. See the page for detail.

Done. Enjoy Blogging!

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!

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.

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.

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 == "index"'>
<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,

Done. Enjoy Blogging!

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 == "item"'>
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!

Read More [...]

Posted in Adsense, Blogger, Blogging Tip, Blogspot

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'>

<b:if cond='data:title != ""'>
<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]"'>

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.)

5. Replace the line with following:

<b:if cond='data:blog.pageType == "index"'>
<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 == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/>: <data:blog.title/></title>
</b:if>

How to Limit the Number of Pages in Labels Page

When clicking a label, lots of posts are appeared in one page if you posted a lot with the label. By limiting the number of pages in labels page, the page loading time will be reduced and the scroll thumb will be larger.

In Blogger (Blogspot), the number of pages appearing in your first (home) page can be limited by setting in Dashboard>>Settings>>Formatting, the labels page can't be limited.

Check out following 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. 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.)

expr:href='data:label.url'

6. Replace that line with following line. 5 means that the number of pages limited by 5. You may change it you want. You may find upper line more than 1 time. Just replace all of them with the following.

expr:href='data:label.url + "?max-results=5"'

YOU DONE.

If you use menu tabs to link to label pages, there is an easier way. Your link may be look like: ([blogname] and [label] is your blog name and label)

http://[blogname].blogspot.com/search/label/[label]

Just appending '?max-results=5', limit the pages showing in one page.

http://[blogname].blogspot.com/search/label/[label]?max-results=5

You can see just 5 pages in Labels Page, if you didn't change the limit number. Next or previous 5 pages will be shown when pressing older-post or newer-post link in pager section in bottom of pages.

How to Install Twitter Widget to Your Web Sites and Blogger

Over the world,many blogs today have a twitter page as well to allow their readers to have another source of the daily updates on your blog. IF you want to get it, just check following simple steps out.

1. You can sign in/up here: http://www.twitter.com/.

2. Directly jump to https://twitter.com/about/resources/widgets. And click 'My Website' sub-menu on left. You can choose one of 4 types of widget.

3. For example, you can add twitter profile widget by selecting profile widget. Your username is already typed in the input box.

4. Click preference menu on left and change items you want

5. Click appearance, and then decorate the widget for matching your blog's color theme. Don't forget 'consistency' of color or other theme one every page element in your blog.

6. Set dimension of your twitter widget. The width should be smaller than your sidebar's width. If you are not sure, just check 'auto width' check box. Then the width of the widget is automatically decided.

7. Test your widget before getting codes. Click Test Setting button in bottom of then page.

8. Click Finish & Grab Code. Just copy the script and paste it into your web page. You are on 'blogger' and not familiar with javascript and html, then click 'add to blogger' button. Then blogger API leads you to install the twitter widget.

{ Program Square }

Home Racing Girls Blogger Tips Programming