Adding Big social Bookmark Icon Manually

 
Welcome, Visitor. Subscribe to our RSS Feed and consider adding this article/site to your favorite social bookmark site if you find it useful. Thank you!

Last time i wrote a tips to show big social bookmark icon frombig-social-bookmark-icon sociable Plugin. But i was interested to add big social bookmark icon manually. Follow this steps to add big social bookmark icons on your web page or site :
1. Create or dowload Big, Eye-catching Social Bookmarking Icons. You can find good collection of big social bookmark icon from here.

2. Upload the images to your website. Now write down the image URL for later use. Exampe: www.example.com/example.jpg

3. Now add the css style code for the Bookmark image File. Here is an example code:

/* ... Big social bookmarks ... */
div.social{margin:16px 0}
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:#ffe; border:1px solid #ccc; 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:none; width:57px; height:70px; border:0; margin:0; padding:0}

Now save and upload your css code.

4. After adding CSS code add social bookmark code you site. For wordpress edit single.php file inside your theme directory and add this code.. to show your social bookmark icon
For WordPress Blog:

<div class="social">
  <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="<?php bloginfo('stylesheet_directory'); ?>/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></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="<?php bloginfo('stylesheet_directory'); ?>/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></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="<?php bloginfo('stylesheet_directory'); ?>/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></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="<?php bloginfo('stylesheet_directory'); ?>/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a></li>
  </ul>
  
  </div>
</div>

I added Digg, Stumbleupon, Technorati and del.icio.us. You can add more popular codes. Adding the popular social bookmark sites icon is the best thing to do. Have fun..

, , ,

No comments yet.

Leave a Reply

20 + 12 =