Thursday, April 16

Adding Social Bookmark Button On Blogger

Sister Pauline noticed there's changes below my blog labels -'Sharing Is Caring'. It's actually Social Boomarking Buttons which I have just added into my blog last night.
Social bookmarking is a method for Internet users to store, organize, search, and manage bookmarks of web pages on the Internet with the help of metadata, typically in the form of tags that collectively and/or collaboratively become a folksonomy. Folksonomy is also called social tagging, "the process by which many users add metadata in the form of keywords to shared content".
Social Bookmark button allows others to bookmark your blog post to websites such as facebook, twitter, negaraku.net etc. It helps you to get lots of quality traffics too.

Step to step installing Social Bookmark Button into your blog.

1) Go to Layout->Edit Html and then click Expand Widget Template.

Search(Ctrl+F) for ]]></b:skin>

2) Add the following codes before it.

.social-bookmark-v1 {

padding-top: 3px;
}
.social-bookmark-v1 .label {
font-weight: bold;
}
.social-bookmark-v1 ul.links {
margin:0;
padding:0;
}
.social-bookmark-v1 ul.links li {
background: none;
display:inline;
list-style-type:none;
padding: 0;
}
.social-bookmark-v1 ul.links li img {
border: none;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
padding: 3px;
}
.social-bookmark-v1 ul.links li img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
}
.social-bookmark-v1 ul.links li a {
border: none;
text-decoration: none;
}

3) Search for this code : <div class='post-footer-line post-footer-line-3'>

4) Add the following after it.

<div class='social-bookmark-v1'>
<div class='label'>Bookmark and share: </div>
<ul class='links'>
<li class='social_links_negaraku'>
<a class='social_links_negaraku' expr:href='&quot;http://negaraku.net/submit.php?url=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title' rel='nofollow' title='Bookmark this post on negaraku.net.'>
<img alt='Negaraku' src='http://tinyurl.com/cdjfcu'/>
</a>
</li>
<li class='social_links_digg'>
<a class='social_links_digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;amp;amp;amp;url=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title' rel='nofollow' title='Digg this post on digg.com.'>
<img alt='Digg' src='http://tinyurl.com/d3wazp'/>
</a>
</li>
<li class='social_links_stumbleupon'>
<a class='social_links_stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title' rel='nofollow' title='Bookmark this post on StumbleUpon.'>
<img alt='StumbleUpon' src='http://tinyurl.com/cxc5au'/>
</a>
</li>
<li class='social_links_delicious'>
<a class='social_links_delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title' rel='nofollow' title='Bookmark this post on del.icio.us.'>
<img alt='Delicious' src='http://tinyurl.com/cqoy6x'/>
</a>
</li>
<li class='social_links_reddit'>
<a class='social_links_reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title' rel='nofollow' title='Submit this post on reddit.com.'>
<img alt='Reddit' src='http://tinyurl.com/cgpppu'/>
</a>
</li>
<li class='social_links_newsvine'>
<a class='social_links_newsvine' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;amp;amp;amp;save?u=&quot; data:post.url &quot;&amp;amp;amp;amp;h=&quot; data:post.title' rel='nofollow' title='Submit this post on newsvine.com.'>
<img alt='Newsvine' src='http://tinyurl.com/djn4ph'/>
</a>
</li>
<li class='social_links_facebook'>
<a class='social_links_facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; data:post.url &quot;&amp;amp;amp;amp;t=&quot; data:post.title' rel='nofollow' title='Share on Facebook.'>
<img alt='Facebook' src='http://tinyurl.com/crhurk'/>
</a>
</li>
<li class='social_links_google'>
<a class='social_links_google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;amp;amp;amp;bkmk=&quot; data:post.url &quot;&amp;amp;amp;amp;title=&quot; data:post.title' rel='nofollow' title='Bookmark this post on Google.'>
<img alt='Google' src='http://tinyurl.com/ca6aal'/>
</a>
</li>
<li class='social_links_yahoo'>
<a class='social_links_yahoo' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; data:post.url &quot;&amp;amp;amp;amp;t=&quot; data:post.title' rel='nofollow' title='Bookmark this post on Yahoo.'>
<img alt='Yahoo' src='http://tinyurl.com/d9s2mr'/>
</a>
</li>
<li class='social_links_technorati'>
<a class='social_links_technorati' expr:href='&quot;http://technorati.com/cosmos/search.html?url=&quot; data:post.url' rel='nofollow' title='Search Technorati for links to this post.'>
<img alt='Technorati' src='http://tinyurl.com/cno3dq'/>
</a>
</li>
<li class='social_links_twitter'>
<a class='social_links_twitter' expr:href='&quot; http://twitthis.com/twit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' rel='nofollow' title='Twit this.'>
<img alt='Twitter' src='http://tinyurl.com/dzlvd5'/>
</a>
</li>
</ul>
</div>


Special credit to Abang Marzuki for this tutorial. According to him, these 10 social bookmark websites are the basic and best for beginners like me.

7 comments:

Pauline @ Jc said...

I understand what you mean.But...still...Have problem with that.

After I saved it...I can't see my post anymore.

Hemsem Ahmike said...

Pauline : Just look through it again. Very easy one :D

Partner Issues &amp; Ideas said...

nope, didnt work for me, my posts disappeared

Lesley said...

me neither.

Little Red Bus said...

me neither. :( too bad, it looked very nice.

shraqs said...

Hi Ahmike, can you please fix it. Everyone is complaining.

shraqshaq said...

It's okay now. Found the way to add the button. Read the tutorial from this link : http://adsthemes1.blogspot.com/2009/06/how-to-add-auto-hiding-social.html

 
Copyright 2012 AHMIKE DOT NET