Tutorials, tips and tricks about Blogger

09 Jul

Social Bookmarking on Blogger

2 Comments | by in Tips and Tricks | 2009

Español Português

Maybe you wonder how to put some social bookmarking icons on every post, so the readers can add this to their favorites, if they use one of these services.

You don’t need to subscribe your blog to any of these services. The links are for the users, so they can subscribe and access to your post anytime.

Now let’s see how to get them:

  1. Go to “Layout” tab, then to “Edit HTML”, and check the “Expand Widget Templates” box.
  2. Search for the following code:
  3. <p class='post-footer-line post-footer-line-3'/>
  4. Replace that line with the following code:
  5. <p class='post-footer-line post-footer-line-3'>
    
    <div class='rsociales'>
    Add to Bookmarks:
    <ul>
    <li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='rsociales-sobre' src='http://bp1.blogger.com/_Zuzii37VUO4/Rjl62eMBQ0I/AAAAAAAAAto/zkas68GmVFk/s1600/technorati.gif'/></a></li>
    <li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='http://bp3.blogger.com/_Zuzii37VUO4/Rjl68-MBQ1I/AAAAAAAAAtw/Mftx1_Bi_oY/s1600/delicious.gif'/></a></li>
    <li><a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='rsociales-sobre' src='http://bp2.blogger.com/_Zuzii37VUO4/RjlY7uMBQrI/AAAAAAAAAsg/ov73dLSsrtA/s1600/digg.png'/></a></li>
    <li><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='http://bp1.blogger.com/_Zuzii37VUO4/RjlZLeMBQtI/AAAAAAAAAsw/bNmkgSj_jj0/s1600/yahoo.png'/></a></li>
    <li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='rsociales-sobre' src='http://bp3.blogger.com/_Zuzii37VUO4/Rjl6z-MBQzI/AAAAAAAAAtg/-13NieAS3J8/s1600/google.gif'/></a></li>
    <li><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Meneame' class='rsociales-sobre' src='http://bp3.blogger.com/_Zuzii37VUO4/Rjlct-MBQyI/AAAAAAAAAtY/UtGxUlBA7mc/s1600/meneame.png'/></a></li>
    <li><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Furl' class='rsociales-sobre' src='http://bp3.blogger.com/_Zuzii37VUO4/Rjlaa-MBQuI/AAAAAAAAAs4/7hoQkbJNkUw/s1600/furl.png'/></a></li>
    <li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='rsociales-sobre' src='http://bp2.blogger.com/_Zuzii37VUO4/RjlbHuMBQvI/AAAAAAAAAtA/L0TsC3OUUyI/s1600/reddit.gif '/></a></li>
    <li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' class='rsociales-sobre' src='http://bp2.blogger.com/_Zuzii37VUO4/RjlbWuMBQwI/AAAAAAAAAtI/Vy_xjt3iY80/s1600/magnolia.gif'/></a></li>
    <li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='rsociales-sobre' src='http://bp2.blogger.com/_Zuzii37VUO4/RjlbjuMBQxI/AAAAAAAAAtQ/WDlHSsaO_m4/s1600/blinklists.gif'/></a></li>
    <li><a expr:href='"http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='http://bp0.blogger.com/_Zuzii37VUO4/RjlQzOMBQoI/AAAAAAAAAsI/qt5x09fQvNo/s1600/blogmarks.gif'/></a></li>
    </ul>
    </div>
    
    </p>
    

    These are the most popular social bookmarking sites.

  6. Now search for the following code:
  7. ]]></b:skin>

    And just before it paste the following:

    .rsociales ul {
    display:inline;
    margin:0pt !important;
    padding:0pt !important;
    }
    .rsociales li {
    background:transparent none repeat scroll 0%;
    display:inline;
    list-style-type:none;
    margin:0pt;
    padding:2px;
    }
    .rsociales img {
    border:0pt none;
    float:none;
    margin:0pt;
    padding:0pt;
    }
    .rsociales-sobre {
    opacity:0.4;
    }
    .rsociales-sobre:hover {
    opacity:1;
    }

    These are the styles for the icons of every social network. You can modify them according to your blog.The lats two styles give the icons a transparency effect, wich work fine with Firefox, Opera, Safari and IE7.

  8. Now save the changes, and that’s it.

Lee este artículo en español: Redes Sociales en Blogger.

Comments

2 Comments, leave a reply · Feed
  1. Ahmad Nazir March 5, 2010

    I want the simple one like yours… got 5 big buttons of RSS, Facebook Share, Twitter retweet, Delicious Save & Stumbleupon Vote Up… you know… just under this post

  2. very helpful aarticle

Reply

You must be logged in to post a comment.

Tutorials, tips and tricks about Blogger