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: