Social Bookmarking Site List with Text Links Added Under the Post Title

Filed Under : ,

Hi bloggy readers,
In my previous post about -

Twitter Retweet Button from Addthis Widget

I've already gave you a trick to add a social bookmarking site list using AddThis button. That is a great tool to use in your blog if you want to spread out your articles to social media sites, Facebook and Twitter. But how if the visitors of your blog don't understand about the function of that tool? It certainly becomes a problem whereas we will need them to spread our blog out to the world in order to gain a potential traffic in the future.

In this post, i would like to discuss about adding a social bookmarking site list by only using text links contain many famous social bookmarking site list (such as Stumble Upon, del.icio.us, Digg, etc) which makes it simple for the readers to understand the function of that tool, and also a strong technique in increasing the popularity of our blog articles. Many professional bloggers i've met around the blogosphere have also used this kind of technique. This technique maybe has been one of the keys for their succeed blogging and has become the most popular technique for bloggers all across the world.

This social bookmarking site list has a clear message to the readers to share the article they are currently reading to other people. So, if you are even a super duper newbie, you will get the message and understand the function of that tools. Interested to apply this social bookmarking site list on your blog? Okay, let's start the tutorial!

1. Log in to Blogger
As a starter, now head on to Blogger.com and sign in to Dashboard.

2. Go to Edit HTML
In Dashboard, press the option Layout/Design > Page Element > Edit HTML.

Anyway, before doing any kind of customization, i strongly suggest you to save your current template if you don't want to lose the current configuration of your blog template, you might also need it if later you did something wrong with the template, so you can easily re-upload back the current template to your blog. Now click at the link Download Full Template.

save blogs templates
3. Give a tick at the Expand Template widget box.
In the Edit HTML Page, give a tick at the Expand Widget Templates, and then find the code below (Ctrl + F):
<div class='cover'>
<div class='cahayaentry'>
<p><data:post.body/></p>

4. Copy the social bookmarking site list codes
Now copy the code of social bookmarking site list below and then paste it before the code on number 3 above:
<div style='border: 1px solid rgb(225, 119, 30); background: #ffffcc;'><span style='font-weight: bold; color: rgb(204, 0, 0);font-size:100%;'>Hi bloggy, Help this blog growth by sharing this article to:</span>
Del.icio.us <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Add to del.icio.us</a>
| Digg <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>DiggIt!</a>
| Reddit <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Reddit</a>
| Stumbleupon <a expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Stumble This</a>
| Technorati <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Add to Technorati Faves</a>
| Slashdot <a expr:href='&quot;http://slashdot.org/bookmark.pl?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Slashdot it</a>
<div style='text-align: right;'><span style='font-weight: bold; color: rgb(153, 0, 0);'>Thanks!</span>
</div>
</div>

5. Find the code
Now find the code with CTRL + F being pushed at the same time, and then paste the code on number 4 inside the code below.
<span class='clock'>
<b:if cond='data:post.dateHeader'>
<b:if cond='data:post.url'>
<data:post.dateHeader/>
</b:if>
</b:if>
</span>
</div>


</div><!-- title -->
<div class='cover'>


Paste the code here...

If you are having a problem to locate the code above, you can also embed the social bookmarking site list code before the code below:
Paste the code here...

<div class='post-header-line-1'/>

6. Save the Change
Now Save the Template and you can see the result directly in your blog. As you can see in your blog article page, the social bookmarking site list has been successfully added into your blog.

The configuration of the social bookmarking site list message

Anyway, if you don't like the sentence "Hi bloggy, Help this blog growth by sharing this article to:" on the widget, you can edit that sentence with anything that suits you well. For Example, "Feel free to share this article to:" or "Submit this article to:"

Hope this social bookmarking site list works perfectly on your blog, stay tune at my next tricks. Anyway, if you find this article useful, feel free to share it.

Good luck bloggers!

You might also like to read :


Share This Article to Other People Across the World !
Thanks!
Get the fresh update from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
edit post

1 comments:

Post a Comment

Browse Daniel's Designs

Revoluzine Template

Revoluzine Template
Designed by Daniel Likin

Subscribe Now To Get Update!

Want to Get The Update From Whatmakesblog.com to Your Email Inbox? Just Type Your Email Address Below and Press Subscribe...
Your email address will not be shared..
Delivered by FeedBurner

Last Posts

Site Info