This blog has moved here: blog.Dreamcss.com

Dynamic social bookmarking widget tutorial

Posted by ravindra | on May 8, 2009 6:31 AM
This tutorial explains how to develop dynamic social bookmarking widget tutorial . It’s important to make it as easy as possible for your visitors to bookmark your site and add you to there friend list . - both so they can find it again, and also so they can share it with their friends.
The final result is something like this:
dynamic social bookmarking widget
Step 1: HTML page:
Create a new HTML page and copy and paste the following code inside <body> tag:
<div class="leftBoxHeading_Off">
<a href="#" id="mc" class="mca" onclick="mc.toggle(1);return false;"><img src="images/left-box-heading-off.png" /></a>
</div>
<div id="media-centre-holder">
    <div id="media-centre">
         <div id="media-centre-controls">
       <script type="text/javascript">if(window.mc){mc.auto_open=false;}</script>
<div id="content">
                <h2>Networks</h2>
                <ul class="node" id="networks">
                    <li>
                        <a href="Add your link here " rel="me">
                            <img src="images/delicious_48.png" width="48" height="48" alt="Delicious" />
                            <strong>Delicious</strong>
                            delicious.com/ravindra1982                        </a>                    </li>
                    <li>
                        <a href="Add your link here" rel="me">
                            <img src="images/facebook_48.png" width="48" height="48" alt="Facebook" />
                            <strong>Facebook</strong>
                            facebook/Ravindra-Misal                        </a>                    </li>
                    <li>
                        <a href="Add your link here" rel="me">
                            <img src="images/mixx_logo_48.png" width="48" height="48" alt="Mixx" />
                            <strong>Mixx</strong>
                            mixx.com/ravindra1982                        </a>                    </li>
                    <li>
                        <a href="Add your link here" rel="me">
                            <img src="images/twitter_icons_48.png" width="48" height="48" alt="Twitter" />
                            <strong>Twitter</strong>
                            twitter.com/ravindra1982                        </a>                    </li>
                    <li>
                        <a href="Add your link here" rel="me">
                            <img src="images/digg.png" width="48" height="48" alt="Digg" />
                            <strong>Digg</strong>
                            www.digg.com/rajuworld                        </a>                    </li>
                    <li>
                        <a href="Add your link here" rel="me">
                            <img src="images/reddit.png" width="48" height="48" alt="Reddit" />
                            <strong>Reddit</strong>
                            reddit.com/rajmalhotra1982                        </a>                    </li>
                    <li>
                        <a href="Add your link here" rel="me">
                            <img src="images/stumble-upon.png" width="48" height="48" alt="Stumble-UpOn" />
                            <strong>Stumble-UpOn</strong>
                            rajthecoolperson                        </a>                    </li>
                    <li>
                        <a href="Add your link here" rel="me">
                            <img src="images/technorati.png" width="48" height="48" alt="Technorati" />
                            <strong>Technorati</strong>
                            <br />
                             Raj on Technorati                    </a>                    </li>
                </ul>
      </div>
    </div>
   </div>
</div>
  </div>
Step 2: CSS file
Create a new CSS file and copy and paste the following code for Dynamic social bookmarking widget  (remember to link this file in your HTML page):
* {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    outline: none;
    font-size: 1em;
    text-decoration: none;
}
body {
    background-color: #FFFFFF;
    padding-top: 5px;
    font: 11px/16px "Lucida Grande", Verdana, sans-serif;
    color: #999;
    text-shadow: #fff 0 1px 0;
    overflow: -moz-scrollbars-vertical;
    overflow: -webkit-scrollbars-vertical;
    -webkit-text-size-adjust: none;
}
a {
    color: #666;
    text-decoration: underline;
}
a:hover {
    color: #000;
}
h2 {
    height: 40px;
    font: 20px/40px Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #FFFFFF;
    padding: 0 25px;
    clear: both;
}
.leftBoxHeading_Off {
    position:absolute;
    width: 295px;
    height: 35px;
    color: #94c93d;
    font-size: 100%;
    cursor: pointer;
    left: 350px;
    top: 26px;
    }
div#top div#nav a.mca{
   float:left;
   width:118px;
   height:28px;
   text-indent:-9999px;
   margin:11px 10px 0 0;
  }
div#media-centre-holder{
z-index:50;
width:700px;
height:419px;
overflow:hidden;
position:absolute;
margin:0 0 0 10px;
}
div#media-centre-holder div#media-centre{
  top:0;
  left:0;
  width:550px;
  height:419px;
  position:absolute;
}
  div#media-centre-holder div#media-centre-controls{
  top:8px;
  right:5px;
  width:550px;
  height:400px;
  position:absolute;
}
#content {
    padding: 0 20px;
    overflow: hidden;
}
div#content div.wrap{
  min-height:550px;
  padding-top:15px;
}
  div#content h2{
  float:left;
  width:400px;
  height:16px;
  display:inline;
  line-height:16px;
  margin:5px 0 0 5px;
  text-indent:-9999px;
  background-position:0 0;
  background-repeat:no-repeat;
}
#networks {
    width: 650px;
    float: left;
}
#networks li {
    width: 235px;
    height: 60px;
    float: left;
}
#networks li a {
    width: 225px;
    height: 45px;
    padding: 10px 0 5px;
    text-decoration: none;
}
#networks li a:active {
    padding: 12px 0 3px
}
#networks li a img {
    float: left;
    margin: 0 10px 0 15px;
    -webkit-transition: margin-left 0.25s linear;
}
#networks li a strong {
    color: #000;
    font: 18px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
    float:left;
    height:24px;
    display:inline;
    margin:11px 15px 0 0;
   }
    div#header div#slide-holder div#slide-controls p#slide-nav a{
     float:left;
     width:24px;
     height:24px;
     display:inline;
     font-size:11px;
     margin:0 5px 0 0;
     line-height:24px;
     font-weight:bold;
     text-align:center;
     text-decoration:none;
    }
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
     background-position:0 -24px;
    }
div#top div#nav a.mca{
   float:left;
   width:249px;
   height:37px;
   display:inline;
   text-indent:-9999px;
   margin:10px 20px 0 0;
  }
div#media-centre-holder{
left:27%;
top:75px;
z-index:50;
width:550px;
height:419px;
overflow:hidden;
position:absolute;
margin:0 0 0 10px;
}
div#media-centre-holder div#media-centre{
  top:0;
  left:0;
  width:550px;
  height:419px;
  position:absolute;
}
div#media-centre-holder div#media-centre-controls{
  top:8px;
  width:550px;
  height:400px;
  position:absolute;
} 
Step 4: Link jquery.js, scripts.js file to your html pages
Download the jquery.js , scripts.js file and link this file in your HTML page inside <head> tag.
Save and test the result!
download_box[1]
Download the Article
video[10][8]
View theDemo
2 comments

blog comments powered by Disqus

  1. Toma___o__ May 20, 2009 12:46 PM  

    Hello,I want to know how you made the links of social bookmark before the article (those who are on-line)

    Do you have a link towards a tutorial to realize it?
    Thx

  2. raj May 21, 2009 7:14 AM  

    @Toma___o__ thanks for comments but i m sorry to say that i can't understand your question please can you explain it....

Subscribe to: Post Comments (Atom)