We know social book marking plays major role for driving traffic to your blog. So we need to place social book mark icons in perfect place of thesis theme. Most of the blogs uses bookmark icons at the end of the post and some of them using tweet meme, digg button before the post it will appear horizontally. I used these icons appear at the right side of the post vertically.

The reason for this is while your readers studying the article if they want to bookmark or tweet that article no need to go to till end of the post. Icons can appear side of the post so they can easily share your article with social media.  In this tutorial I am going to explain about how to add social bookmark icons at the side of the post. You can add twitter, digg, delicious, stumble upon, face book and etc. i already explain about how to add bookmark icons in sidebar and below post.

Here I am using widgetized method to add social icons. First you need to create a widget by using thesis sidebar widget. Place the widget before the post text area by using the corresponding thesis hook. By using css you can exactly fix the width and location of the widget.

To create widget copy and paste the below code in custom_funcions.php file

/***BUILD bookmark WIDGET side of the post paste in custom_functiom.php***/

register_sidebars(1,
array(
'name' => 'bookmarkpost',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
function widgetized_icons() { ?>
<div id="post_icons">
<ul class="sidebar_list">
<?php thesis_default_widget(4); ?>
</ul>
</div>
<?php }

add_action('thesis_hook_before_post', 'widgetized_icons', '1');

The above code thesis_default_widget(4) you should replace the number 4 as you next widget in the sidebar of the wordpress dashboard. Example If you are having already 4 widget boxes in wordpress admin you should replace 4 as 5. To see the available widgets in wordpress dashboard Select ‘widgets’ under ‘appearances’ tab in the wordpress dashboard. Here you can see the number of widget boxes available in your site.

To style your widget box copy and paste the below code in custom.css file.

/*WIDGET side of the post paste in custom.css file***/
.custom #post_icons ul.sidebar_list li.widget h3 {text-indent:0; padding-top:0.2em; color:#111; font-size:15px; font-family:georgia; background:none;}
.custom #post_icons ul.sidebar_list { margin:0em;}
.custom #post_icons ul.sidebar_list li.widget  {font-size:1em;}
.custom #post_icons{ width:7em; float:right; }

The above css code you can change your width of the widget, position and padding as per your wish. Then Upload your bookmark icon image files into custom/images folder

The path is public_html/fourblogger.com/wp-content/themes/thesis_16/custom/images.

Now you have created your widget box which will available at ‘widgets’ under ‘appearances’ tab in the wordpress dashboard in the name ‘bookmarkpost’. Drag and drop a text widget inside newly created bookmarkpost widget. Leave title as blank.

Copy and paste the below code in the description area and save it.

/** social book mark links ****/
<a rel="nofollow" href="http://www.youtube.com/user/fourblogger">
<img src="http://fourblogger.com/wp-content/uploads/2009/12/Youtube-icon.png"
border="0" alt="" /></a>

<a rel="nofollow" href="http://twitter.com/fourblogger">
<img src="http://fourblogger.com/wp-content/uploads/2009/12/Twitter.png" border="0"
alt="" /></a>

<a rel="nofollow"  href="http://www.facebook.com/people/Pascal-Sundhar/100000574445431">
<img src="http://fourblogger.com/wp-content/uploads/2009/12/FaceBook.png"
border="0" alt="" /></a>

<a href="http://feeds.feedburner.com/fourblogger">
<img src="http://fourblogger.com/wp-content/uploads/2009/12/Feed.png"
border="0" alt="" /></a>

The above code you should replace your image uploaded path and social media links. Now check your site you are having social book mark icons at the side of the post.

Bookmark icons at right side of post

Share your experience in comment section. For more checkout our all Thesis theme tutorials..

Related Tutorials:

1. How to Add Floating Feedback Social Bookmarking Icons in Thesis Theme
2. How to Add Social Bookmarking Icons in widgetized Header of Thesis Theme
3. How to add your social bookmark icon into Thesis theme
4. How to Create Custom Social Bookmark Links Widget in Thesis Theme
5. How to Add Social Bookmark Button Links inside Posts in Thesis