Social bookmarking site like digg, stumbleupon, facebook, redd-it and others allow user to share the information of the website like articles, video and picture which helps to promote your blog as well as to attrack decent amount of traffic to your blog. Social bookmarking icon gives tremendous option to your readers to share your blog. In this tutorial I am going to show easy step to add social bookmarking icon in thesis theme without the use of any plugins.
1 Log in into your wordpress admin and go to custom file editor
2. Go to custom. php and paste the following code in custom.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | add_action('thesis_hook_after_post', 'sociable_links'); function sociable_links() { if (is_single()) { ?> <div class="share"> <h2><bold>Share this post!</bold></h2> </div> <div class="social_tagline"> <ul> <li><a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&url=<?php echo get_permalink()?>&title=<?php the_title(); ?>" title="Digg"><img src="http://cdn.freshtutorial.com/wp-content/uploads/2010/03/icon_digg_01.png" title="Digg" alt="Digg" rel="nofollow" /></a></li> <li><a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" title="StumbleUpon"><img src="http://cdn.freshtutorial.com/wp-content/uploads/2010/03/icon_stumble_01.png" title="StumbleUpon" alt="StumbleUpon" rel="nofollow" /></a></li> <li><a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" title="Technorati"><img src="http://cdn.freshtutorial.com/wp-content/uploads/2010/03/icon_technorati_01.png" title="Technorati" alt="Technorati" rel="nofollow"/></a></li> <li><a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=<?php echo get_permalink()?>&title=<?php the_title(); ?>"><img src="http://cdn.freshtutorial.com/wp-content/uploads/2010/03/icon_delicious_01.png" title="del.icio.us" alt="del.icio.us" rel="nofollow" /></a></li> </ul> </div> </div> <?php } } |
3. Now to to custom.css on custom file editor and paste the following code in custom.css
1 2 3 4 5 6 7 8 9 10 11 12 | div.social{margin:16px 0; background:#A8E0C6; border:1px solid #7EA895; color:black; line-height:1.25em} span.social_tagline{position:relative} span.social_tagline span{display:none; width:14em} span.social_tagline:hover span{position:absolute; display:block; top:-5em; background:#A8E0C6; border:1px solid #7EA895; color:black; line-height:1.25em} .social span{display:block} .social ul{display:inline; margin:0 !important; padding:0 !important} .social ul li{background:none; display:inline !important; list-style-type:none; margin:0; padding:1px} .social ul li:before{content:""} .social img{float:right; width:57px; height:70px; border:0; margin:0; padding:0} .share {float:left;} |
You are done you can see social bookmarking icon after the post in the thesis theme
Note: if you have knowledge of css u can customize it by changing the css code. The image is being hosted by freshtutorial. Please use the image in your own server.
Ubuntu 12.04 apha 2 released (major screenshots)
How to install firefox 10 in Ubuntu via ppa
Google earth 6.2 released and way to install it in Ubuntu
How to make your own calculator using shell script in Linux
Shell Script: Case structure and Select Statement
As usual a great tutorial dude!! When I used to use thesis I tried this many times but failed, many times I used to end with a error so I had to use my file manager to solve. That is why I gave up with Thesis.
Thanks Saugat great post! I was looking for a tutorial like that for my site cabinrentalsideas
nice sharing, I have implemented this, worked like a charm!
nice post. thanks.
Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!