blog mbokne ancok: Social Bookmarking

Showing posts with label Social Bookmarking. Show all posts

Saturday, 23 January 2010

Animated jquery sharing bar with 360 revolution

Today i am sharing with you an awesome animated sharing option (from Martin Angelov on tutorialzine) by using pure JavaScript with the jQuery framework.which will enable your website visitors to share posts on a number of social networks.Social networking place a very important role in the popularity of the blog,blogger that communicate better and understand the power of social media are generally the most popular ones.
Before we start you make also like to look at some of my previous posts:Tiny facebook gadget (add to your blogger)Another social bookmarking using image swapping
Now,Installing it to the blogger below every post is like every other social bookmarking bar ,there is an Html with a css supporting it, on the top of it working the Jquery.

Copy this CSS code and paste it above ]]></b:skin> in your template code ,no need to expand widget template.

#share{ /* The share box container */ width:500px; background:#ececec; height:220px; margin:60px auto; overflow:hidden; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;}#share-label{ /* The image on the right */ background:url(img/share.png) no-repeat 50% 50%; float:left; height:220px; width:200px;}#stage{ /* This is where the animation takes place */ position:relative; border-right:1px solid #DDDDDD; width:290px; height:220px; background:white; float:left; border-bottom-left-radius:12px; border-top-left-radius:12px; -moz-border-radius-bottomleft:12px; -moz-border-radius-topleft:12px; -webkit-border-bottom-left-radius:12px; -webkit-border-top-left-radius:12px;}.btn{ /* This class is assigned to every share button */ background-color:white; height:90px; left:0; top:0; width:60px; position:relative; margin:20px 0 0 10px; float:left;}.bcontent{ /* Positioned inside the .btn container */ position:absolute; top:auto; bottom:20px; left:0;}/* Individual rules for every share button */.digg{ background:url(img/digg_reflection.png) no-repeat -4px bottom;}.reddit{ background:url(img/reddit_reflection.png) no-repeat -4px bottom;}.facebook{ background:url(img/facebook_reflection.png) no-repeat bottom center;}.tweetmeme{ background:url(img/twit_reflection.png) no-repeat -5px bottom;}.dzone{ background:url(img/dzone_reflection.png) no-repeat -7px bottom;}.thanksto{ position:absolute; bottom:2px; right:4px; font-size:10px;}.thanksto a,.thanksto a:visited{ color:#BBB;}/* Customizing the facebook share button */span.fb_share_no_count { display:block;}span.fb_share_count_top.fb_share_no_count { line-height:54px;}span.fb_share_count_nub_top.fb_share_no_count{ display:none;}span.fb_share_no_count span.fb_share_count_inner { background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px; display:block;}

For get this working we need to install these two JavaScript between head sections :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ikb.fileave.com/rotating%20social.js"></script>

First one includes jquery library from google's CDN and the second one is rotating social file.

To show the code below every post paste this HTML code below <data:post.body/>

And save your template Click on view blog to see it working.

Friday, 1 January 2010

Social media character set

Social Bookmarking Character Icon Set for your websites, blogs and profiles. The set contains: RSS, Facebook, Twitter, StumbleUpon, Youtube, Digg, Delicious, Technorati and LinkedIn.

Monday, 7 December 2009

Social bookmarking widget - Using image swapping

This image swapping actually use a image rollover technique , when you move your mouse to any image it grows and shrink back when the mouse is removed.This effect is based on Lam Nguyen bubble effect with css i have simplified it to make it easier to implement to blogger.

Download images icon set 'large' and 'small' and upload to any free hosting and take account of the urls.

1.HTML part
Let Us first look at the html part of the widget which contains two classes of images 'small' and 'large'.Small for initial stage and large for active state.

    <ul id="bubble2">
      <li>
        <a href="http://feeds2.feedburner.com/funwithblog" title="Full RSS Feed">
            <img class="small" src="images/feed.png" alt="Full RSS" />
            <img class="large" src="images/feed_large.png" alt="Full RSS" />
        </a>
      </li>
      <li>
        <a href="http://feedburner.google.com/fb/a/mailverify?uri=funwithblog&loc=en_U" title="Feed via Emal">
            <img class="small" src="images/email.png" alt="Feed via Emal" />
            <img class="large" src="images/email_large.png" alt="Feed via Emal" />
        </a>
      </li>
      <li>
        <a expr:href='" http://twitthis.com/twit?url="   data:post.url   "&title="   data:post.title' target='_blank'/>
            <img class="small" src="images/twitter.png" alt="Follow me on Twitter" />
            <img class="large" src="images/twitter_large.png" alt="Follow me on Twitter" />
        </a>
      </li>
      <li>
        <a href="<a expr:href='" http://www.facebook.com/sharer.php?u="   data:post.url   "&title="   data:post.title' target='_blank'/>
            <img class="small" src="images/facebook.png" alt="I'm on Facebook" />
            <img class="large" src="images/facebook_large.png" alt="I'm on Facebook" />
        </a>
      </li>
      <li>
        <a expr:href='"http://del.icio.us/post?url="   data:post.url   "&title="   data:post.title' target='_blank'/>
            <img class="small" src="images/delicious.png" alt="Save me" />
            <img class="large" src="images/delicious_large.png" alt="Save me" />
        </a>
      </li>
      <li>
        <a expr:href='" http://technorati.com/faves?add="   data:post.url   "&title="   data:post.title' target='_blank'/>
            <img class="small" src="images/technorati.png" alt="Fave me on Technorati" />
            <img class="large" src="images/technorati_large.png" alt="Fave me on Technorati" />
        </a>
      </li>
    </ul>

Do not forget to replace large and small images with their respective urls.
2. CSS part

#bubble2 {
    list-style: none;
    margin: 20px 0px 0px;
    padding: 0px;
}
#bubble2 li {
    display: inline-block;
    margin: 0px 5px;
    padding: 0px;
    width: 72px;
    height: 72px;
}
#bubble2 li a img {
    position: relative;
    border: none;
}

#bubble2 li a img.large {
    display: none;
}

#bubble2 li a:hover img.small {
    display: none;
    z-index: 0;
}

#bubble2 li a:hover img.large {
    display: block;
    margin-top: -28px;
    margin-left: -28px;
    z-index: 1000;
}

Adding to blogger
Search for <p><data:post.body/></p> or <data:post.body/> in your template.
And place HTML part below it.

Add Css Part of the code to your css of your template which is generally between the skin tag.
<b:skin> and ]]></b:skin>

Wednesday, 7 October 2009

Add jQuery Social Bookmarks icons after every posts[cool one]

Step 1:login to your Dashboad.click Layout then edit HTML and tick Expand Widget.
Before starting you nay like to see (DEMO),scrool till end to see effect.
Step2:Press cntrl+F Search for ]]></b:skin>
Step 3.Copy the below code and paste it just before(above) ]]></b:skin>

/* SocialBookmark
*/

#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}

ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
ul.sharebox li a { margin:0 0 0 -24px; display:block;}
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}

Step 4:press cntrl+F and search </head>
Step 5:paste the below code just before(above) </head>

<script src=' http://myfundoo.fileave.com/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;

$(element).find("li").each(function(i){
$(this).css("z-index", 10- i);
if (i>0)
$(this).css("left", i * 24 100);
});

}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#sharebox").sharebox();
});
</script>

Step6:Again press cntrl+F and serach for <p><data:post.body/></p> or <data:post.body/> and paste the following code just after(below) it.

<li><a expr:href='" http://digg.com/submit?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://lh5.ggpht.com/_dfnTVAxeWMI/Smktud4qk8I/AAAAAAAABmk/z5vZVjTmD7k/s800/digg_48.png'/></a></li>

<li><a expr:href='" http://www.stumbleupon.com/submit?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuLCBTubI/AAAAAAAABm4/KwVHDJnT-EQ/s800/sumbleupon_48.png'/></a></li>

<li><a expr:href='"http://del.icio.us/post?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmktubnHpoI/AAAAAAAABmg/b31Po_kEbnc/s800/delicious_48.png'/></a></li>

<li><a expr:href='" http://technorati.com/faves?add="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuK1y0_cI/AAAAAAAABm0/C8EExNM-xjE/s800/technorati_48.png'/></a></li>

<li><a expr:href='" http://www.reddit.com/submit?url="   data:post.url   "&title="   data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smkturrni-I/AAAAAAAABmw/AbGticB0wAs/s800/reddit_48.png'/></a></li>

</ul>

Step7:Click save template and it will look like this.

If u like my post ,subscribe to
MY feeds and recieve
latest update directly in mailbox.

Subscribe to Comments
Subscribe to Posts

blog mbokne ancok