2009 ~ Bloggers Corner

How to Add Social Bookmark Buttons

4:18 AM Emely 9 comments

Adding social bookmark buttons every after your post give higher chances to increase visitors to your blog. Here's how you gonna add those buttons below your post:

1. Log in to Blogger.
2. Go to Dashboard> Click Lay out
3. Click Edit HTML
4. Check mark the box "Expand Widget Templates"
5. Find the <head> of your template.

6. Just add the following code next to the above code:

<script src='http://free.blogger.help.googlepages.com/socialbookmarks.js'></script>

7. Now it looks like this:

<head><script src='http://free.blogger.help.googlepages.com/socialbookmarks.js'></script>

8. Next, find the following code:

<p class='post-footer-line post-footer-line-3'>

9. Add these code:

<style type='text/css'>
.bookmark img { border: 0;
padding:0px; }
.bookmark a:hover {
position: relative;
top: 1px;
left: 1px; }
</style>
<span class='bookmark'>
<table align='left' border='0' cellpadding='0' width='100%'>
<tr>
<td style='vertical-align:middle' valign='middle' width='30%'>
<div expr:id='"sbtxt"+data:post.id'>Bookmark this post<a style="text-decoration:none;" href="http://free-blogger-help.blogspot.com">:</a></div><script type='text/javascript'>showsbtext("sbtxt" + "<data:post.id/>",0)</script>
</td>
<td>
<a rel="nofollow" expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",19);"' target='_blank'><img alt='StumpleUpon' src='http://files.bloggerplugins.org/icon_sb_stumb.gif'/></a> <a rel="nofollow" expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",6);"' target='_blank'><img alt='Ma.gnolia' border='0' src='http://files.bloggerplugins.org/icon_sb_mag.gif'/></a>
<a rel="nofollow" expr:href='"http://digg.com/submit?phase=3&url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"' target='_blank'><img alt='DiggIt!' src='http://files.bloggerplugins.org/icon_sb_dig.gif'/></a> <a rel="nofollow" expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' target='_blank'><img alt='Del.icio.us' src='http://files.bloggerplugins.org/icon_sb_del.gif'/></a> <a rel="nofollow" expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&Title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"' target='_blank'><img alt='Blinklist' src='http://files.bloggerplugins.org/icon_sb_bli.gif'/></a> <a rel="nofollow" expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"' target='_blank'><img alt='Yahoo' src='http://files.bloggerplugins.org/icon_sb_yah.gif'/></a> <a rel="nofollow" expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&t=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"' target='_blank'><img alt='Furl' src='http://files.bloggerplugins.org/icon_sb_fur.gif'/></a> <a rel="nofollow" expr:href='"http://www.technorati.com/cosmos/search.html?url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",9);"' target='_blank'><img alt='Technorati' src='http://files.bloggerplugins.org/icon_sb_tec.gif'/></a> <a rel="nofollow" expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"' target='_blank'><img alt='Simpy' src='http://files.bloggerplugins.org/icon_sb_sim.gif'/></a> <a rel="nofollow" expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",11);"' target='_blank'><img alt='Spurl' src='http://files.bloggerplugins.org/icon_sb_spu.gif'/></a> <a rel="nofollow" expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",17);"' target='_blank'><img alt='Reddit' src='http://files.bloggerplugins.org/icon_sb_red.gif'/></a> <a rel="nofollow" expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title="+data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",20);"' target='_blank'><img alt='Google' src='http://files.bloggerplugins.org/icon_sb_goo.gif'/></a>
</td>
</tr>
</table><br/>
</span>

10. Click Save Template.

It's Done. Cheers! Please Leave Comment.

How to Make a Horizontal Menu for Blogger

3:10 AM Emely 1 comment

Creating horizontal menu will give advantage to link to your other blogs or sites. Link back to one blog to other has advantage.

Here's a simple steps to add your horizontal menu:

1. Log in to Blogger.
2. Go to Dashboard, click Layout> Edit HTML.
3. Check the "Expand Widget Templates" box.
4. Find the code: /*Header*/.
5. Add this code below /*Header*/.


#menu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#menu li a{
color:#dfffed;
}

#menu li a:visited {
color: #57E964;
}

#menu li a:hover {
color: #F88017;
background: #ffff66;
}

6. Find b:section class='header' id='header' maxwidgets='1' showaddelement='no'

7. Change to b:section class='header' id='header' maxwidgets='4' showaddelement='yes'

8. Click Save Template.

Next, we have to add some page element to our header. As you notice, you can now add page element to your header.

1. Click Lay out> Add Page Element
2. Do not put title. Then add the following code:


<div id='menu'>
<ul>
<li><a href="Your URL">Home</a></li>
<li><a href="Your URL">Advertise</a></li>
<li><a href="Your URL">About Me</a></li>
</ul></div>

3. You can edit and add your desired URL on the field mark in red.

NOTE: You can edit the codes we inserted on Number 5 on whatever color or background and the margins of your menu to fit on your blog.

Cheers! Its Done. Leave comment.

How to Create Expandable "Read More" on Blog

8:09 AM Emely No comments

Creating expandable "read more" on blog has advantage over longer post. This can save space and let readers only read the initial content about the post and if the content interest them, they only click the "read more" in order to read the entire content of the post.

Here's the very easy steps to create the tweak:

1. Log in to Blogger account.
2. Go to Dashboard and click Layout.
3. Click Edit HTML
4. Check mark the "Expand Widget Templates"
6. Press CTRL+F and find the code below:


<p><data:post.body/></p>

7. Replace the above code with the following code:


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p> 
</b:if>

8. Click Save. Done for the First Step.

Next, we need to add few codes to blogger settings.

1. Click Settings.
2. Click Formatting.
3. Go to lower portion and look for "Post Template" and paste the code below inside the blank box:


<span class="fullpost"> 


</span>

4. Click Save Settings.

We're almost done. Next is how to post the content of your blog so that the Read More will take effect.

1. When you compose your post, make sure to select "Edit Html" tab/mode and not Compose mode.

2. You will notice the following code:


<span class="fullpost"> 


</span>

3. Post the initial content you want to display above the code:

<span class="fullpost">

4. Post the remaining content of your post below:

<span class="fullpost">

and above:

</span>

Publish your post. It's Done. Cheers! Please leave comment.

How Pictures on Blog Optimize your Search Engine?

10:47 PM Emely 3 comments

Web crawlers and search engines cannot determine the actual image we posted on our blog or site. The pictures can be recognize through the code. Thus, if you want that the image or picture you post in your blog can help increase visibility and traffic, you need to do simple tweaks.

I will explain how we gonna do the simple steps:

When you upload the image to blogger, the title of the image is not actually included in the code. I try to emphasize the ALTERNATIVE TEXT "alt" and the image title. Once you uploaded the image, try to view the HTML code. Switch from "compose" mode to "Edit HTML".

Sample:


href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd761W81MLAzP1UO9qMGtbs_2q5hmI87PgXkdUc5FxO-4lUnB-LwuoHP-UbBM72IZXEYXqEOd8N1hVv-4IWE9bO2CTduRouvfdi28KOG6AQ9hT4_9d7OZUQ8b34OGmacdgDgOe2nnEbJM/s1600-h/lion_king_ver1.jpg"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 224px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd761W81MLAzP1UO9qMGtbs_2q5hmI87PgXkdUc5FxO-4lUnB-LwuoHP-UbBM72IZXEYXqEOd8N1hVv-4IWE9bO2CTduRouvfdi28KOG6AQ9hT4_9d7OZUQ8b34OGmacdgDgOe2nnEbJM/s320/lion_king_ver1.jpg" alt="" id="BLOGGER_PHOTO_ID_5337929060092999490" border="0" /></a><span

You will notice the alternative text highlighted on red color. You can add picture name and the title of the picture you have uploaded.

href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd761W81MLAzP1UO9qMGtbs_2q5hmI87PgXkdUc5FxO-4lUnB-LwuoHP-UbBM72IZXEYXqEOd8N1hVv-4IWE9bO2CTduRouvfdi28KOG6AQ9hT4_9d7OZUQ8b34OGmacdgDgOe2nnEbJM/s1600-h/lion_king_ver1.jpg"><img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 224px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd761W81MLAzP1UO9qMGtbs_2q5hmI87PgXkdUc5FxO-4lUnB-LwuoHP-UbBM72IZXEYXqEOd8N1hVv-4IWE9bO2CTduRouvfdi28KOG6AQ9hT4_9d7OZUQ8b34OGmacdgDgOe2nnEbJM/s320/lion_king_ver1.jpg" alt="lion king"title="lion king pictures" id="BLOGGER_PHOTO_ID_5337929060092999490" border="0" /></a><span

In that way, the image you have uploaded will be visible to the web spider.

Please leave comments and questions about my post. Cheers!

How to Remove Borders on Pictures on Your Blog

9:27 AM Emely 1 comment

Once you insert pictures on your blog, you will notice the border line around the picture. If you want to remove this eye catching thin line as to give attraction to the blog, you have to delete some HTML codes.

Here's how we gonna do the tweak on your blog:

1. Log in to your blogger account
2. Click Layout>Edit HTML and check the box "expand widget templates".
3. Find the following code:


.post img {
    padding:4px;
    border:1px solid $bordercolor;  
      }

4. Delete the code colored in red.
5. It's done. Click save.

But if you don't want to delete the border but rather change to something colorful lines, you only need to add some HTML color codes.


.post img {
      padding:4px;
      border:1px solid FF9900;
      }

You can change anytime the color of your border and its border thickness and style.

Leave comment or questions. Cheers!

How to Add META TAG to Blog or Site

8:36 AM Emely No comments

Adding META TAG to blogs or web pages will determine its ownership or authenticity. When you submit sitemaps to search engines like yahoo, google, MSN or other SEO, adding META TAG is required for authentication purpose.

The following are the steps for adding META TAG to blog or website:

1. Log in to Blogger
2. Click Lay-out>Edit HTML
3. Click the box expand widget.
4. Look for the code <head> and insert the META TAG right next to the code.

NOTE: Do not delete the meta tag after the authentication.

5. On your SEO, click authentication button to validate ownership on your blog or site.

Submit Blog to Index to Yahoo

7:58 AM Emely No comments

One way to increase traffic and visitors to your site or blog is to submit a sitemap to index to yahoo. Submitting blogs to search engines like yahoo helps exposure of the site. Higher tendency for web browser to land on your blog. Here's how you submit your site to yahoo:

First: Go to Yahoo Site Explorer

Second: Click Log In (NOTE: Make sure that you have yahoo account. Otherwise make one for you to log in.)

Third: Once Log in, type your blog URL or Site URL on the box provided (Before the button ADD MY SITE)

Fourth: After adding your site, you need to verify ownership or authenticate your blog.

Fifth: Add the META TAG to your site or blog and after adding the tag, click "ready to authenticate".

How to Make a 2 Column Header

2:49 AM Emely No comments

Below is a short tutorial on how you make your blog header into 2 columns. We notice that some bloggers are able to add page element beside the header. It is possible by splitting your header into two columns.

First, click Layout>Edit HTML. Check the box Expand Widget.

Find the code below:



/* Header
===================================

*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

Second, replace the above code with the code below:


/* Header

===================================

*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

Third, you need to find this code:


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>

Fourth, replace the above code with the code below:

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Its Done. But before you save the template, preview your blog first to make sure that you have properly parse the HTML codes.

CHEERS! Very easy.

Title Tags Modification on your Blog

7:52 PM Emely No comments

By default on blogger, the display would be BLOG TITLE + POST TITLE. What we are trying to do is to interchange the two, POST TITLE first then followed by the BLOG TITLE in order to increase traffic.

For customize templates, we need to change the tag <data:blog.pageTitle/> to

  <data:blog.pageName/>

so that the changes will take effect.

Step 1:

Go to Lay out then click edit HTML in your dashboard.

Step 2:

Search the tag <data:blog.pageTitle/>

Step 3:

Replace it with the following code:

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

Click save template.

It's Done. Cheers! It will improve your Traffic.

Hide your Blogger Navbar

7:03 PM Emely No comments

Some bloggers ask on how to delete the navbar on blogger. If fact, it can be done but the downside is it might violet the TOS of blogger. To be safe, it might be best to only hide the navbar rather to delete. Here's a very easy steps:

Step 1:

Login to Blogger

Step 2:

Go to Lay-out then click edit HTML.

Step 3:

Back-up your template. Click "donwload full template". (Very Important)

Step 4:

Find the code below. Just focus on the body {.


        body {
background: #8F8E8E;
width: 100%;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px auto 0px;
padding: 0px;
}

Step 5:

Copy the following code above the body {.


     #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}

#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Click save template. View your blog for the result. Very Easy.

Cheers! Leave comment.

How to make a 3 Column Footer

6:13 PM Emely No comments

Making your blog footer into 3 columns is very easy in just few minutes. Maybe you wonder how bloggers made such tweak to their blogs. Here's the simple steps to follow:

Step 1:

If you have already added widgets on your footer, temporarily transfer it to the sidebar.

Step 2:

Go to Edit HTML. Check the box "expand widget templates". Press CTRL+F and search the code below:

    <div id=’footer-wrap’>
<b:section class=’footer’ id=’footer’/>
</div>

Step 3:

Replace the above code with the following:

       <div id=’footer-wrapper-container’>

<div id=’footer1′ style=’width: 32%; float: left; margin:0; text-align: left;’>
 <b:section class=’footer-col’ id=’col1′ preferred=’yes’ style=’float:left;’/>
 </div>

 <div id=’footer2′ style=’width: 32%; float: left; margin:0; text-align: left;’>
 <b:section class=’footer-col’ id=’col2′ preferred=’yes’ style=’float:left;’/>
 </div>

 <div id=’footer3′ style=’width: 32%; float: right; margin:0; text-align: left;’>
 <b:section class=’footer-col’ id=’col3′ preferred=’yes’ style=’float:right;’/>
 </div>
 <div style=’clear:both;’/>
 <p>
 <hr align=’center’ color=’#c2c2c2′ width=’90%’/></p>
 <div id=’footer-bottom’ style=’text-align: center; padding: 10px;’>
 <b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
 <b:widget id=’Text99′ locked=’false’ title=” type=’Text’/>
 </b:section>
 </div>
 <div style=’clear:both;’/>
 </div>

Step 4:

Add style to your footer.

           #footer-wrapper-container {
  clear:both;
  }

  .footer-col {
  padding: 10px;
  }

Cheers! Done. Any questions? Leave comments.

How to add HTML codes to Blog Post?

11:48 PM Emely 1 comment

Here's a short discussion on how HTML codes will appear on your blog post. As you notice that if you directly write HTML codes on your blog post, it will not appear on your post.

You need to replace some special characters. Here's how we gonna do some tweak:

< replace with <
> replace with >
& replace with &
" replace with "
space replace with  

Another important thing you should not forget is to add <pre><p> from the beginning of codes in order to determine that you are writing an HTML code. Add also </p></pre> at the end of your HTML codes.

In order to move to the next line add <br/> before each line of the codes. And lastly, you make sure to select EDIT HTML mode and not COMPOSE MODE.

Still Confuse? To illustrate more, here's a sample on how the tweak will work. Below is the sample of HTML codes you want to post.

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>

If you want to post the above code, it will look like this: Make sure that you are on EDIT HTML mode.

<pre><p>&lt;b:includable id='post' var='post'&gt;
<br/>&lt;div class='post uncustomized-post-template'&gt;
<br/>&lt;a expr:name='data:post.id'/&gt;
<br/>&lt;b:if cond='data:post.title'&gt;
<br/>&lt;h3 class='post-title'&gt;
<br/>&lt;b:if cond='data:post.link'&gt;</p></pre>
Cheers!  Very Easy.  Leave a comment or any questions on my post.
Another simple way and hassle free, Go to Simplebits and just copy and paste the HTML.

Adsense Section Targeting for Bloggers

10:51 PM Emely 1 comment

The purpose of adsense section targeting is to suggest sections of your text and HTML content that you'd like Adsense to emphasize what matching ads to your site's content. It will direct to the relevant ads to be displayed on your website or blog.

You need to add a set of special HTML comment tags to your code in order to take effect. These tags will mark the beginning and end of whichever section you'd like to emphasize or de-emphasize for ad targeting.

You need to insert the code before and after post titles and post content to get relevant ads. See sample below and take note the inserted code mark in red:

ADD THE CODE TO POST TITLE

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><!-- google_ad_section_start --><data:post.title/><!-- google_ad_section_end --></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><!-- google_ad_section_start --><data:post.title/><!-- google_ad_section_end --></a>
<b:else/>
<!-- google_ad_section_start --><data:post.title/><!-- google_ad_section_end -->
</b:if>
</b:if>
</h3>
</b:if>
ADD THE CODE TO POST CONTENT

<div class='post-body'>
<p><!-- google_ad_section_start --><data:post.body/><!-- google_ad_section_end --></p>
<div style='clear: both;'/>:<!-- clear for photos floats -->
</div>

Leave a comment if you think this post is helpful.