This script helps in presenting the image in a very beautiful way in your blog.

It helps to present images with size more than the post area in a smaller size and then magnify it to see its enlarged view.

This script is given by Dynamicdrive so you can find its original at the site.
Here’s the demo of the script


This is the script for the magnifier.Just place it above the </head> tag

<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://www.yourjavascript.com/560192341/magnifier.txt.js">
</script>

Now to use this script with the images just use the class magnify.See example below.

<img class="magnify" magnifyby="3" style="width: 200px; height: 250px;" src="http://i48.tinypic.com/e9heux.jpg" alt="" id="BLOGGER_PHOTO_ID_5361650096596248578" border="0" /> 

Share

• 0 komentar »

This is a rotating or you can say animated sharing option by Tutorialzine that you can add to your blog. See the demo to have a basic idea about this sharing box. 

sharing box.

• Demo
• Source

To install this animated sharing box add this CSS file above ]]></b:skin>. Also don’t forget to check the expand widget templates box.

/* The code for the share box starts here: */

    #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(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/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(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/digg_reflection.png) no-repeat -4px bottom;}
    .reddit{    background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/reddit_reflection.png) no-repeat -4px bottom;}
    .facebook{    background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/facebook_reflection.png) no-repeat bottom center;}
    .tweetmeme{    background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/twit_reflection.png) no-repeat -5px bottom;}
    .dzone{    background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/dzone_reflection.png) no-repeat -7px bottom;}

    .thanksto{
        position:absolute;
        bottom:2px;
        right:110px;
        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;
    }

Install these jquery scripts above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/5718110189/rotating%20social.js' type='text/javascript'/>

Now to show the plugin below every post install this HTML below <data:post.body/>

<div id="share">
<div id="stage">

<div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div>
<div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div>
<div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div>
<div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div>
<div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div></div>

</div>

<div id="share-label">
<!-- This is where the share some love image appears -->
</div>

</div>

Now save your template and its done.

Share

• 0 komentar »