Image Bubbles using CSS3 transform and transitions Image Bubbles using CSS3 transform and transitions

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-moz-transition:-moz-transform 0.1s ease-in; /*animate transform property */
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

<ul class="bubblewrap">
<li><a href="#"><img src="http://dynamicdrive.com/cssexamples/media/stumbleupon.png" title="Add to Stumbleupon" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/digg.png" title="Add to Digg" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://logcyber.blogspot.com/"><img src="http://dynamicdrive.com/cssexamples/media/rss.png" title="Add RSS Feed" /></a></li>
</ul>

demo

JS Page Peel Effect JS Page Peel Effect

taruh kode dibawah diatas kode </head> :

<script type="text/javascript">
var tujuan ='http://blogger.com/'</script><script src="https://sites.google.com/site/cuerosbhelatos/pagefell.js" type="text/javascript">
</script>

demo nya di sudut kanan ya....

Cloud Zoom Is A Popular Fly-Out jQuery Cloud Zoom Is A Popular Fly-Out jQuery

DEMO

CSS:

    <style type="text/css">
    .section {min-width:100%;max-width:100%;
    _width:100%;}

    .cloudzoom-lens-thick {border:5px solid #eee;width:125px;height:125px;border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;box-shadow:-0px -0px 5px rgba(0,0,0,0.50);-moz-box-shadow:-0px -0px 5px rgba(0,0,0,0.50);-webkit-box-shadow:-0px -0px 5px rgba(0,0,0,0.50);cursor:crosshair;}

    .cloudzoom-zoom-thick {border:7px solid #fff;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:-0px -0px 10px rgba(0,0,0,0.20);-moz-box-shadow:-0px -0px 10px rgba(0,0,0,0.20);-webkit-box-shadow:-0px -0px 10px rgba(0,0,0,0.20);}

    .cloudzoom-zoom-inside {cursor:pointer;}

    .image-wrap {border:1px solid #eee;display:inline-block;line-height:0;margin-top:20px;margin-bottom:10px;}

    #fullsize img {border:1px solid #eee;}

    .left-half {
        width:50%;
        float:left;
        padding:0;
        display:inline-block;
    }

    .left-in {
        margin-left:5px;
        margin-right:5px;
    }
    .right-in {
        margin-right:5px;
        margin-left:5px;
    }
    .right-half {
        width:50%;
        float:right;
        padding:0;
        display:inline-block;
    }
    .middle-in {
         margin-left:5px;
         margin-right:5px;
    }

    a.starzoom-gallery  img {
        border:1px solid #ccc;
        margin-right:5px;
        width:70px;
    }

    a.starzoom-gallery  img:hover {
        border:1px solid #f60;
    }


    .starzoom {
        cursor:pointer;
        cursor:-moz-zoom-in;
        cursor:-webkit-zoom-in;
        background-image:url('http://www.starplugins.com/sites/starplugins/images/viewport-bg.png');
    }

    #ipadzoom.starzoom {
        background:none;
    }


    fieldset {
        border:1px solid #ccc;
        border-radius: 5px;
        margin-bottom:20px;
    }


    #addthis-wrap {
        position:absolute;
        top:-41px;
        right:190px;
        width:140px;
        height:32px;
        padding:3px;
    }


    .highlight {
        border-radius:5px;
        -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
        background-color:#f60;
        color:#fff;
        padding:15px 15px 15px 15px;
        font-size:16px;
    }




    /*************** TABS ******************/
               
    /* root element for tabs  */
    ul.tabs {
        list-style:none;
        margin:0 !important;
        padding:0;
        border-bottom:1px solid #666;
        height:30px;
    }

    /* single tab */
    ul.tabs li {
        float:left;
        text-indent:0;
        padding:0;
        margin:0 !important;
        list-style-image:none !important;
    }

    /* link inside the tab. uses a background image */
    ul.tabs a {
        background: url(http://www.starplugins.com/sites/starplugins/images/tabs.png) no-repeat -420px 0;
      
        font-size:11px;
        display:block;
        height: 30px;
        line-height:30px;
        width: 134px;
        text-align:center;
        text-decoration:none;
        color:#333;
        padding:0px;
        margin:0px;
        position:relative;
        top:1px;
    }

    ul.tabs a:active {
        outline:none;
    }

    /* when mouse enters the tab move the background image */
    ul.tabs a:hover {
        background-position: -420px -31px;
        color:#fff;
    }

    /* active tab uses a class name "current". its highlight is also done by moving the background image. */
    ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
        background-position: -420px -62px;
        cursor:default !important;
        color:#000 !important;
    }

    /* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


    /* width 1 */
    ul.tabs a.s { background-position: -553px 0; width:81px; }
    ul.tabs a.s:hover { background-position: -553px -31px; }
    ul.tabs a.s.current  { background-position: -553px -62px; }

    /* width 2 */
    ul.tabs a.l { background-position: -248px -0px; width:174px; }
    ul.tabs a.l:hover { background-position: -248px -31px; }
    ul.tabs a.l.current { background-position: -248px -62px; }


    /* width 3 */
    ul.tabs a.xl { background-position: 0 -0px; width:248px; }
    ul.tabs a.xl:hover { background-position: 0 -31px; }
    ul.tabs a.xl.current { background-position: 0 -62px; }


    /* initially all panes are hidden */
    .panes .pane {
        display:none;
    }
    </style>

    <link href="http://www.starplugins.com/sites/starplugins/js/prettify/prettify.css" type="text/css" rel="stylesheet" />

    <link href="http://www.starplugins.com/sites/starplugins/js/starzoom.css" type="text/css" rel="stylesheet" />

    <link href="http://www.starplugins.com/sites/starplugins/js/jetzoom/jetzoom.css" type="text/css" rel="stylesheet" />

    <link href="http://www.starplugins.com/sites/starplugins/js/cloudzoom/cloudzoom.css?v=1" type="text/css" rel="stylesheet" />

    <link rel="stylesheet" href="http://www.starplugins.com/sites/starplugins/js/fancy/jquery.fancybox.css??v=1" type="text/css" media="screen" />

SCRIPT:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <!-- UI Tools: Tabs, Tooltip, Scrollable and Overlay (4.45 Kb) -->
    <script src="http://cdn.jquerytools.org/1.2.7/tiny/jquery.tools.min.js"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/jquery.mousewheel.js"></script>
           
    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/starzoom.js?v=1"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/jetzoom/jetzoom.js?v=3"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/cloudzoom/cloudzoom.js?v=20"></script>

    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/prettify/prettify.js"></script>
           
    <script type="text/javascript" src="http://www.starplugins.com/sites/starplugins/js/fancy/jquery.fancybox.js?v=1"></script>

    <script type="text/javascript">
        $(function(){
            $('#zoom1').bind('click',function(){
                var jetZoom = $(this).data('JetZoom');
                $.fancybox.open(jetZoom.getGalleryList());
                return false;
            })
        })
    </script>

    <script type="text/javascript">
                 $(function(){
                     $('pre').addClass('prettyprint'); // Add pretty print to pre elements.
                     prettyPrint();
                    // setup ul.tabs to work as tabs for each div directly under div.panes
                    $("ul.tabs").tabs("div.panes > div");
                 });
                 StarZoom.quickStart();
                 JetZoom.quickStart();
                 CloudZoom.quickStart();
    </script> 

HTML:

<br />
<div class="left-half">
<div class="left-in">
<div style="text-align: center;">
<div style="border: 1px solid #ccc; display: inline-block; line-height: 0;">
<span class="cloudzoom-caption" id="cap1">.</span>
   
            <img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
                        &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg&quot;,
                        &quot;zoomMatchSize&quot;:true,
                        &quot;tintColor&quot;:&quot;#000&quot;,
                        &quot;tintOpacity&quot;:0.25,
                        &quot;captionPosition&quot;:&quot;bottom&quot;
                        }" id="zoom1" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" title="Cloud Zoom has many configuration options to match the look and feel of your website" />
                 <br />
<div class="cloudzoom-caption">
<br /></div>
</div>
<div style="margin-top: 10px;">
<a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg">   
                <img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
                     &quot;useZoom&quot;:&quot;#zoom1&quot;,
                     &quot;image&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg&quot;,
                     &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg&quot;}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" title="Cloud Zoom has many configuration options to match the look and feel of your website" width="64" />
            </a>
          
            <a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg">
                <img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
                     &quot;useZoom&quot;:&quot;#zoom1&quot;,
                     &quot;image&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg&quot;,
                     &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg&quot;}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg" title="Works great with iPad and other touch-enabled devices" width="64" />
            </a>

            <a class="thumb-link" href="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image3.jpg">
                <img alt="Jet Zoom thumb image" class="cloudzoom-gallery" data-cloudzoom="{
                     &quot;useZoom&quot;:&quot;#zoom1&quot;,
                     &quot;image&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg&quot;
                     }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg" title="Regular free updates and new features with technical support" width="64" />
            </a>
        </div>
</div>
</div>
</div>
<br />
<div class="left-in">
<h2>
Gallery Elements</h2>
<br />
<div style="text-align: right;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                     zoomImage: 'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg',
                     zoomPosition: 12,
                     zoomSizeMode: 'image',
                     zoomOffsetX: -15" id="zoom1" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" />

            </div>
</div>
</div>
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Lens and Zoom CSS</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                     &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image4.jpg&quot;,
                     &quot;lensClass&quot;:&quot;cloudzoom-lens-thick&quot;,
                     &quot;zoomClass&quot;:&quot;cloudzoom-zoom-thick&quot;
                     }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg" />
            </div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Single Image Mode</h2>
<br />
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="zoomPosition:12, zoomOffsetX:0, uriEscapeMethod:'encodeURI'" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg" width="300" />
        </div>
</div>
</div>
</div>
=========
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Tints</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
                         &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image6.jpg&quot;,
                         &quot;tintColor&quot;:&quot;#f90&quot;
                         }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg" />
                </div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Inner Zoom</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                         &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image7.jpg&quot;,
                         &quot;zoomPosition&quot;:&quot;inside&quot;
                         }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg" />
                </div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Captions</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                             &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image6.jpg&quot;,
                             &quot;captionSource&quot;:&quot;#caption1&quot;,
                             &quot;captionType&quot;:&quot;html&quot;
                             }" id="zoom2" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg" />
                    </div>
<div class="cloudzoom-caption" id="caption1">
This is an <span style="color: #ffcc00; font-weight: bold;">HTML</span> type caption. You can include <i>any</i> type of content in here!</div>
</div>
</div>
</div>
<div class="right-half">
<div class="right-in">
<h2>
Position</h2>
<br />
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Jet Zoom small image" class="cloudzoom" data-cloudzoom="{
                             &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image7.jpg&quot;,
                             &quot;zoomPosition&quot;:&quot;#zoom2&quot;,
                             &quot;captionPosition&quot;:&quot;bottom&quot;

                             }" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg" title="This position was defined by a selector." />
                    </div>
</div>
</div>
</div>
</div>
<br />
<div class="section">
<div class="left-half">
<div class="left-in">
<h2>
Modal Pop-up Window (e.g. Fancy Box)</h2>
<br />
<div class="right-in">
<div style="text-align: center;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="{
                             &quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image9.jpg&quot;,
                             &quot;zoomPosition&quot;:&quot;inside&quot;
                             }" id="myFancyCloudZoom" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image9.jpg" title="The image title will also be passed to Fancy Box" />
                    </div>
</div>
</div>
</div>
</div>
</div>
=========
<br />
<div class="section" style="width: 100%;">
<!-- div class="left-half" -->
    <br />
<div class="middle-in">
<h2>
Cloud Zoom in Tabbed Content</h2>
<br />
<div class="panes">
<div style="width: 100%;">
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg',zoomSizeMode: 'image'" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg" />
                </div>
</div>
<div>
<br />
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image2.jpg', zoomPosition:4" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg" width="150" />
                </div>
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image3.jpg', zoomPosition:4" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg" width="150" />
                </div>
</div>
<div>
<div style="width: 100%;">
<br /></div>
<div class="image-wrap">
<img alt="Cloud Zoom small image" class="cloudzoom" data-cloudzoom="
                         zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image4.jpg',
                         zoomPosition: 'inside', zoomFlyOut:false" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg" />
                </div>
</div>
</div>
</div>
</div>
<br />
<div class="section" id="fullsize">
<div class="left-half">
<div class="left-in">
<h2>
Full Size Zoom</h2>
<br />
<img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image1.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image2.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image2.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image3.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image3.jpg" />
                <br />
<img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image4.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image4.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image5.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image5.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image6.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image6.jpg" />
                <br />
<img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image7.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image7.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image8.jpg&quot;, &quot;zoomSizeMode&quot;:&quot;full&quot;, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image8.jpg" />

                <img class="cloudzoom" data-cloudzoom="{&quot;zoomImage&quot;:&quot;http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image9.jpg&quot;, &quot;zoomFullSize&quot;:true, &quot;zoomPosition&quot;:&quot;#fullsize-pos&quot;, &quot;zoomFlyOut&quot;:false}" src="http://www.starplugins.com/sites/starplugins/images/jetzoom/size81/image9.jpg" />

            </div>
</div>
</div>

Cara Membuat Efek Salju di Blog Cara Membuat Efek Salju di Blog

Untuk membuat efek salju, pertama-tama masuklah ke tab Rancangan kemudian tambahkan sebuah elemen halaman HTML/JavaScript.
Salin script ini, kemudian letakkan di dalam formulirnya:

<script src="http://hompimpa.googlecode.com/files/efeksalju.js" type="text/javascript"></script>

Klik Simpan.

JavaScript Kursor Bintang Berjatuhan JavaScript Kursor Bintang Berjatuhan

Efek gerakan kursor cantik dan ganteng yang diikuti oleh bintang-bintang berjatuhan dapat dibuat dengan cara memasang script ini:

<script type="text/javascript">
var colour="#FA128C";// tentukan warna bintang
var sparkles=80;// tentukan jumlah bintang
var x=ox=1000;
var y=oy=1000;
var swide=800;
var shigh=600;
var sleft=sdown=0;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/hujanbintang.js"></script>

Tambahkan sebuah elemen halaman HTML/JavaScript lalu letakkan kode tersebut di dalam formulirnya.
Klik Simpan.

Sumber: Masih Meragukan

Efek Daun Berguguran dengan JavaScript Efek Daun Berguguran dengan JavaScript

Sebenarnya JavaScript ini tidak digunakan untuk menciptakan efek daun berguguran, melainkan untuk menciptakan efek salju. Versi asli dari script ini bisa kamu pelajari di sini. Saya hanya mengganti gambar saljunya dengan gambar daun:

Tambahkan sebuah elemen halaman HTML/JavaScript kemudian salin kode ini dan letakkan di dalam formulirnya:

<script type="text/javascript">
var snowsrc      = "http://2.bp.blogspot.com/-6yjsKoliL_Q/TwlTuQtV3WI/AAAAAAAAB6k/VyKxfGKFBpM/s1600/daun-kecil.png";  // Tentukan URL gambar daun/salju
var no           = 10;  // Tentukan jumlah daun/salju
var hidesnowtime = 0;  // Menentukan apakah daun/salju harus menghilang setelah x detik (0 = tidak pernah)
var snowdistance = "pageheight";  // Menentukan berapa banyak daun/salju yang harus jatuh sebelum akhirnya menghilang ("windowheight" atau "pageheight")
</script>
<script type="text/javascript" src="http://hompimpa.googlecode.com/files/snow.js"></script>

Tentukan jumlah daun = var no           = 10;

Tentukan kapan daun menghilang = 

var hidesnowtime = 0;

efek JavaScript Bubble Cursor efek JavaScript Bubble Cursor

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian letakkan script ini di dalamnya:

<script type="text/javascript">
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung
var bubbles=100; // jumlah maksmal gelembung
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}

function bubble() {
var c;
if (x!=ox || y!=oy){
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;

function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown;
}

window.onresize=set_width;

function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}

window.onscroll=set_scroll;

function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

</script>

Atau kamu juga bisa meletakkannya di atas kode </head>.

Simpan Pengaturan dan lihat hasilnya:

Membuat Efek Zoom Pada Gambar Dengan jQuery Membuat Efek Zoom Pada Gambar Dengan jQuery

Bismillah
Sobat bingung apa itu dan bagaimana kegunaannya, nah menurut saya pribadi Membuat Efek Zoom Pada Gambar adalah keuntungan 40% dari blog yang mungkin dapat menyempurnakan gambar apabila bentuk dari gambar itu kecil, tutorial ini menggunakan kode jQuery maka efek yang ditampilkan pun cukup bagus dan indah dan berikut tutorialnya

---

Membuat Efek Zoom Pada Gambar

---

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatasnya

/* Zoom Image ------------------------------- */ div.jquery-image-zoom { line-height: 0; font-size: 0; z-index: 10; border: 5px solid #fff; margin: -5px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } div.jquery-image-zoom a { background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat; display: block; width: 25px; height: 25px; position: absolute; left: -17px; top: -17px; /* IE-users are prolly used to close-link in right-hand corner */ *left: auto; *right: -17px; text-decoration: none; text-indent: -100000px; outline: 0; z-index: 11; } div.jquery-image-zoom a:hover { background-position: left -25px; } div.jquery-image-zoom img, div.jquery-image-zoom embed, div.jquery-image-zoom object, div.jquery-image-zoom div { width: 100%; height: 100%; margin: 0

Langkah 3
Selanjutnya cari kode </head> kemudian sisipkan kode berikut diatasnya

<!-- Zoom Image code script --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script src='http://koderator.googlecode.com/files/zoom.js' type='text/javascript'/><script type='text/javascript'>jQuery(document.body).imageZoom(); </script>

Langkah 4

Semoga bermanfaat, selamat mencoba dan semoga berhasil....

Membuat Link Bergoyang / Nudging jquery Membuat Link Bergoyang / Nudging jquery

Dalam tutorial kali ini mengangkat tema jquery, yaitu cara untuk membuat link bergoyang, cara kerjanya simpel kita tinggal mengarahkan crusor pada link blog yang kita tuju dan lihat perubahan linknya, link tersebut pada goyang dan tutorial ini dapat sobat praktekkan untuk memperindah tampilan blog sobat, setelah saya parktekin gambar juga bisa bergerak

---

CARA MEMBUAT LINK BERGOYANG / NUDGING

---

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 4
Masukan (copypaste) kode dibawah ini pada bagian konten:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><br /> <script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); }); </script>

Langkah 5
Klik simpan dan lihat hasilnya.....

Fly And Slide Out Menu Css3 Fly And Slide Out Menu Css3

Memasang menu dengan tampilan fly dan slide out menu dengan css3, efek dari menu ini sangat cantik, selain menunya slide out ketika kita mengarahkan mouse ke arah salah satu menu, tampilan menu ini juga menarik karena datangnya berjalan dari arah kanan ke kiri dan berhenti pada jarak yang telah kita tentukan.

Dengan penggunaan efek css menurut saya tidak terlalu memberatkan dalam loading blog, itu alasan saya kenapa menggunakan Fly and Slide Out Menu dalam blog saya, Script asli fly and slide menu ini merupakan buatan saudara tom, jika tertarik menggunakan fly and slide menu pada blog, kalian bisa mengcopy script dibawah ini.

Copy paste script css dibawah ini dan letakan diatas kode ]]></b:skin> :

ul#navigation { position:fixed; margin:0px; padding:0px; top:0px; right:10px; list-style:none; z-index:999999; width:820px; font:normal 11px Arial,Sans-Serif; -webkit-animation:2s fxhompinav ease-in-out; -moz-animation:2s fxhompinav ease-in-out; -ms-animation:2s fxhompinav ease-in-out; animation:2s fxhompinav ease-in-out; } ul#navigation li { width:103px; display:inline; float:left; margin:0 0 0 2px; } ul#navigation li a { display:block; float:left; margin-top:-78px; width:100px; height:22px; background-color:#9E242C; background-repeat:no-repeat; background-position:50% 150px; border:3px solid #303030; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -khtml-border-bottom-right-radius:10px; -khtml-border-bottom-left-radius:10px; border-radius:0px 0px 10px 10px; color:#ccc; text-decoration:none; text-align:center; text-shadow:0 1px 1px #000; padding-top:85px; -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; } ul#navigation li a:hover { margin-top:-3px; background-position:50% 10px; color:#fff; position:relative; } ul#navigation li a:hover:after { content:""; width:0px; height:0px; position:absolute; top:100%; left:45%; margin-top:-10px; border-width:5px; border-style:solid; border-color:transparent transparent #e6e6e6 transparent; } ul#navigation li:nth-child(1) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXDJlqjo8EGD1RU4k01DnyojB8cvGRgN2oYkbFS_s0Yubatk7klVxvUgXdcN36YA2sjM05sVUCFceT4-aaRjvtV8FypEiJfeOHDPbkyFw1TQZ_bDYAWaHTlEgXenyIusH3ChI0OXSsTvE/s1600/home.png); } ul#navigation li:nth-child(2) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutBHFChdVXmPE3Ri-QmM2KGxZQmZaTsy63zhfa0_mHd6p_gM_CLROwsNekRFWrvv9dujeby462i5zzwpM8K5-G9DG8WGynYAp8OjyABYVsUXmDmJTFqAgF47x4iESezzLS-LmS5ppcyo/s1600/user.png); } ul#navigation li:nth-child(3) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGYgSa07pAKFOH2B0wMAuJC8PQHio8PtI3dtEM-ZdD176PKZLqw0jPhYWUzPAa7eRIRhTkJw9wpv5eZQAg_2nZQd504k3_jG7JdQxkbBEsvVWyD766eoFPQsEjbc6PNGFif2iZxntoU8k/s1600/mail.png); } ul#navigation li:nth-child(4) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBMLaqxlIwHMZG-H5VUP2zGg2k3vNFDaSRkIq4FBzTDYubHMy5V5vadWvSeeHwBkWHyAeB0wvDF6q0mqw21WBZNwZWkOaOc7Wblfbk5-Zhb9o9asJlFsasKZj9RgbPAHatRUBUH2tjhM/s1600/rss.png); } ul#navigation li:nth-child(5) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknb9tReGhpCZYaML4FXb7WrHsNQVIBBieFSU_7S-ZUMG59BY8yL-okmukiErj6cm0d_70JXfphe36wwsWPlSnlmCKfewADbNdlkAquV1zz1R4KdOPproBqWirvPULCOhrgW07r3V5CqM/s1600/link.png); } ul#navigation li:nth-child(6) a { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmNtAqyxB1yx6aGBKqAvKbCTKnBVqNGa00dPWUYGYznrG5I6vSRjWh4HULRbuX1Xn6jDYnlWRUXFgtv97Z7EDbHueNpyE1hBK_Lf_QfkDkhgAOFhoxPBdVMyJOGCchUsMLyBfBoYGqfLA/s1600/color.png); } @-webkit-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-moz-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} }

Selanjutnya cari kode </body> dan letakan kode dibawah ini dan letakan diatasnya :

<ul id='navigation'> 
<li><a href='Alamat Url'>Home</a></li> 
<li><a href='Alamat Url'>About Me</a></li> 
<li><a href='Alamat Url'>Contact</a></li>  
<li><a href='Alamat Url'>Rss Feed</a></li> 
<li><a href='Alamat Url'>Link Exchange</a></li> 
<li><a href='Alamat Url'>Color Tools</a></li> 
</ul>

Save template kalian dan menu fly and slide out menggunkan efek css3 sudah terpasang pada blog kalian.