How to Add Element under Header in Blogger Blog

Usually, when you are new to the World of Blogging, you start from scratch. You use on of the default templates offered by Blogger on their site. Little-by-little, you realize that there are so many blogs in blogospere that look like yours, and you want to distinguish you blog from others. You can choose one of the free or paid templates available online to change the blog interface. Later on, you can experiment even more, tweaking the GUI to your particular needs. The following simple tweak will show you how to add an extra element under your blog Header in 9 steps. The credit goes to BlogSpotTutorial:

1. Login to Blogger with your ID.
2. Click Layout.
3. Click tab Edit HTML.
4. Click sentence Download Full Template, it is very important for you to backup this!
5. Copy the code below, then paste it before code ]]></b:skin>

#under_header{ margin:10px 0; padding:1%; width:98%; }
6. Find out code which look exactly like this :
<div id=’header-wrapper’> <b:section class=’header’ id=’header’ maxwidget="1" showaddelement="no"> <b:widget id=’Header1’ locked=’true’ title=’test (Header)’ type=’Header’/> </b:section> </div>

7. Copy the code below, and paste it exactly after that code :
<div id="under_header"> <b:section class=’header’ id=’underheader’ preferred=’yes’/> </div>

8. Click SAVE TEMPLATE buttons, and wait until your template saved.
9. Now you already have an element which placed exactly below your header. Feel free to add any elements do you wanted to. Want some Google Advertise, or maybe some photos, it’s all up to you!

Read More

How to Put a Widget on a Specific Page of your Blogger Blog

Widgets are short and handy small computer programs that can add more functionality to any Blog platform. In Blogger, where standard set of features and embedded plugins is rather limited, adding extended capabilities with third-party widget might help to spice up your blog and increase its attractiveness. It can be added as an extra code behind the new Page Elements through the Page Elements subtab of the Template tab.

In brief, to add widget or page elements to your blog login at Blogger.com and click on Layout link on Dashboard. Then click the Add Page Element link in the sidebar.

After adding a Page Element to your blog it can be seen on all your blog pages by default, unless you wrap the widget in conditional tags. In this publication, we will present you the way on how to put selectively widgets on particular blog pages. You really can decide on which pages or a single pagethe widget should appear.

WIDGET ON POST PAGES ONLY

If you want to put the widget only on the post (item) pages then paste this line :

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

immediately after the main includable line of code in the widget :

<b:includable id=’main’ var=’top’>

For this login at Blogger.com and click on Layout link on Dashboard. Then click Edit Html subtab of Template tab. Put a check in the Expand Wdgets Template checkbox at the top of the Template code box and scroll down to the widget code. Lastly in the widget code add a </b:if> before the immediate next </b:includable>. This is how the whole widget code will look like after the change :

<b:widget id=’HTML1’ locked=’false’ title=’’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.pageType == "item"’>

WIDGET CODE

</b:if>
</b:includable>
</b:widget>

This widget will only appear on the Post Pages.

WIDGET ON MAIN PAGE ONLY

If you want the widget to appear only on the Main Page of the blog use the code below :

<b:widget id=’HTML1’ locked=’false’ title=’’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>

WIDGET CODE

</b:if>
</b:includable>
</b:widget>

This widget will appear only on the Main Page.

WIDGET ON SPECIFIC BLOG PAGE

There are some cases in which you may want the widget to appear only on a specific page of your blog. For example, there might be some pages on your blog with heavy traffic where you plan to put some special ads or particular content. Create the widget by pasting the HTML in the new widget. Then modify the code as shown below :

<b:widget id=’HTML1’ locked=’false’ title=’’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.url == "BLOG_PAGE_URL"’>

WIDGET CODE

</b:if>
</b:includable>
</b:widget>

Replace the CAPS : BLOG_PAGE_URL with the permalink of your post.

WIDGET ON SPECIFIC LABEL PAGE

You can specify a widget to appear only on specific label pages. This is useful when you want to represent your labels with icons. For example, you may have posts on books and when the label books are clicked in your blog the sidebar will show a book icon. For such widgets, you can use the following code:

<b:widget id=’HTML1’ locked=’false’ title=’’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.url == "http://BLOG_NAME.blogspot.com/search/label/LABEL_NAME"’>

WIDGET CODE

</b:if>
</b:includable>
</b:widget>

Replace BLOG_NAME and LABEL_NAME with actual.
Source: http://betabloggerfordummies.blogspot.com/2007/12/put-widget-on-specific-page-or-url.html

Read More

Improving Blog Placement Optimizing Title

In one of my previous publications, I have presented a way to swap parts of the blog post title the way that the post name will go before the blog name, as it is setup by default in the Blogger templates. There are multiple advantages of this simple transformation, both from aesthetical and Search Engines Optimization point of views. Your posts will be less competitive in respect to each other for a descent space on the search page for the particular search items. It is always good to have your main keywords (introduced in your Post title) of a specific blog post at the start rather than placing your blog title at the start. The situation improvement is even more significant, if the blog post title is very long. The method offered was tested, and its works on my Blogger blog posts.

This time, I want to present one more way to reach the same, or almost the same outcome (the only difference is a separation sign between blog post title and blog title). However, there is always good to have a choice. This time, credit goes to BloggerTricks blog.

Let’s make the process more visual.

Before the trick:

After the trick:

How to change:

As usual, Sign in to Blogger » Layout » Edit html and find this line in the current blog template:
<title><data:blog.title/></title>

Now, replace that line with the following code:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/>
<data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>

Save the Changes.
The method has been also tested on this blog, and it worked for me.

Read More