Blogger Plug n Play - jQuery Tools and Widgets: Blogger Widgets

Showing posts with label Blogger Widgets. Show all posts

Using jQuery we can easily scroll to the required div by using any event like click , Mouse over etc. Same jQuery Function can be used to scroll multiple Divs. No change required in function during addition or removal of any div to scroll. Small Snippet jQuery's ScrollTo function alternative. See Demo for its Working and code

DEMO

jQuery Function Used. Complete code in demo link


$(document).ready(function (){
        $(".click").click(function (){
           var pos = $(this).attr("position");
                $('html, body').animate({
                    scrollTop: $("#"+pos).offset().top}, 2000);
        });
    });

Auto Image slider with great flexibility to re-size the total container and width and length of thumbnails or image. Very light with small code for execution.

See the DEMO for its working. And below CSS code to change container size and thumbnail size

                        #intro {
    width: 580px;
    margin: 0 auto;
   }
   .wrapper {
    background-color: white;
    width: 480px;
    margin: 40px auto;
    padding: 50px;
    box-shadow: 0 0 5px #999;
   }
   .list_carousel {
    background-color: #ffffff;
    margin: 0 0 30px 60px;
    width: 710px;
   }
   .list_carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
   }
   .list_carousel li {
    font-size: 40px;
    color: #999;
    text-align: center;
    background-color: #eee;
    border: 5px solid #999;
    width: 200px;
    height: 150px;
    padding: 0;
    margin: 6px;
    display: block;
    float: left;
   }
   .list_carousel.responsive {
    width: auto;
    margin-left: 0;
   }
   .clearfix {
    float: none;
    clear: both;
   }
   .prev {
    float: left;
    margin-left: 10px;
   }
   .next {
    float: right;
    margin-right: 10px;
   }
   .pager {
    float: left;
    width: 300px;
    text-align: center;
   }
   .pager a {
    margin: 0 5px;
    text-decoration: none;
   }
   .pager a.selected {
    text-decoration: underline;
   }
   .timer {
    background-color: #999;
    height: 6px;
    width: 0px;
   }

View Demo for complete code

This is a code for jQuery Toggle tool which can Show or Hide the specified text in a div and changed the text in the button accordingly with a smooth transition effect. First there is HTML code then the Script code which must be added with jQuery,js. Working can be seen on DEMO page.

<section class="round-border">
            <div>
                <button href="#collapse1" class="nav-toggle">Show</button>
            </div>
            <div id="collapse1" style="display:none">
                <p>Bla bla bla bla</p>
            </div>
        </section>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
                $('.nav-toggle').click(function(){
                    //get collapse content selector
                    var collapse_content_selector = $(this).attr('href');                    
                    
                    //make the collapse content to be shown or hide
                    var toggle_switch = $(this);
                    $(collapse_content_selector).toggle(function(){
                        if($(this).css('display')=='none'){
                            toggle_switch.html('Show');//change the button label to be 'Show'
                        }else{
                            toggle_switch.html('Hide');//change the button label to be 'Hide'
                        }
                    });
                });
                
            });   
</script>

DEMO

After a long gap I today I am going to publish this post I hope you will like this very much as I was also searching such a thing for a long time

This is a cool horizontal auto scroll image slider whose speed changes with the movement of cursor this is very flexible as we can change every property very easily , In this post I will not give tutorial But I will redirect you to the page where I found this thing so enjoy using it .

Don't forget to comeback and comment :)

Visit This Link

My Previous Post on drag able images now looks a little bit older in version as this new widget is much more exiting and more flexible.By using this you will be able to drag images up to any extent even beyond web page limitations :)As this is more easy to install and appears more cool just have a look Demo

We have seen many times a beautiful massage box in many Wordpress blogs.It appears between the title and body of post.It can be easily removed by simply clicking the close link.Here is a same massage box for blogger blogs also:) I want to clear here that this Massage box is More interesting then simple regular box.When we visit the page firstly it appears with fade in and fade out effect which easily attracts the attention of visitors.When after reading the massage he/she can make It runs out of the page .Just see the Demo Below ;)

Changing Opacity on hover is very old and common now.Here is a new jQuery based image effect.This gives a new life to images just see the demo below:)

Here is my First content slider with Tabs.The cool thing about this slider is that there is no need to click Tabs , Just hover with cursor to see content under that tab.Its Simple but powerful jQuery widget.Just see demo link below to see its working =)

One of the best Sliding Horizontal Navigation Menu i have ever seen.It is so smooth to navigate.I myself played with it for about 10 minutes before clicking the link.It will make your blog more playable and sticky :) .And yes how i can forgot it also have images which also add more charm to it. Just view its demo below .Then its simple Installation.

View Demo

ALSO VISIT:jQuery Horizontal Smooth Slider/Image Scroller with Next/Prev Button

Another Beautiful, clean Black Image Scroller.It scrolls your Image,Links,Text And Videos.It stops on hover.On hovering an image The Set of two Arrows appears in Right As well as Left direction.You can switch it on both directions.Just view its working and looks ! in Demo below : )

You may have seen on popular social news site Mashable,It uses a very cool Widget to distribute its post to social website.The user simply drags an image in the post and puts the image into a Social website icon.Here an easy tutorial blogger blogs.View its working on the Demo page given below.Just Drag the image.

You may have seen many sites having a widget installed on their sites to change or increase,decrease the size of text in the post.This widgets proves very helpful as it provides flexibility to visitors to read text or long posts without facing much strain in their eye.As visitors are like our friends so we must take care of them.So I found this great widget which can re size or change font size in a beautiful way( Credits are give below this post ).I agree this widget was not for simple sites like blogger,But after a long experimental period now this is also compatible with blogger blogs :).See the demo below to visualize its working.

View Demo

Also Visit :- Verticle Auto Scroll News Ticker Using jQuery For Blogger

Simple but effective news ticker that can be put to use in a variety of ways. When using text, like in this example, defining the headings and associated content sections within a definition list makes sense from a semantics perspective, and it’s easy to add any additional elements we may need as we go.You can Show Text,Images,Videos and Links see in Demo Below

It stops on Hover

Also visit

Horizontal auto Image strip Scroller/Slider with speed control based on jQuery

Image slider is a widget or a pluggin by using which we can show several images on a specified area.

Hi guys here is another beautiful jQuery widget .This is an auto + click able vertical scroll Image or picture slider in any direction ( right or left ) direction.Further by using jQuery we make it more beautiful and light.Author is very creative( Credits are given below) he has given us three type of such image sliders they are all very beautiful and i will definitely try to introduce tutorial; to install them in your blogger blog easily first of all see the demo page below

In this post we are going to create a small place/space on our website which will display links or text one by one in a cute manner using jQuery and CSS.It can be used to display hot content of your site,links to popular posts or recent posts or blog rolls etc.We can add Simple text,Links,Images to it.Before Installation have a look its Demo.

The text used in demo is bigger than tutorial(Its adjustable:)

Installation :

Scroll to top button is a link which appears to bottom of the page on clicking it the webpage scrolls back to top in beautiful manner.The Best thing is that it floats with page.And only appears when you are in middle or at bottom of page.Obviously we are using jQuery to make it more interesting.

Installation:

Related posts widget is very important for a blog as it increases the number of page views and also help the visitor to view other related posts on the blog.At present there are many types of related post widget like with thumbnails by using Java script Using HTML etc... Here i am going to show a method which is very easy to install.It will show only title of related posts using jQuery.It will look like an image below.

Installation:
Learn more »

Easy Image Preview with jQuery.This is a very Powerful and light jQuery widget .I really love this one Just see the Demo to see its working.By using this you can automatically view the original Image of a small thumbnail by simple hover over its thumbnail.

Installation:

A little ago i was desperately finding any service which can give a view to image whenever we hover over a link or image of our choice.Then i landed snapshot site which gives that service .BUT.. the drawback of that service was that it shows the thumbnail to each and every link which are also not required.After getting annoyed that one i found web .. oops i don't remember name he he.. the draw back of that site was that it keeps you in a QUE :( that it will show your image in a second after a minute i found the same folks all in vane.Then i found this method just have a look in DEMO it will definitely solve what we want is a Thumbnail of our choice in a second on any place where we want it to be.

Installation:

Navigation menu is very important part of a web page as it gives flexibility to navigate to different pages of a website.Here is a navigation menu which floats with the screen in a beautiful manner.Have a look in the demo.

javascript:void(0)

Installation:

Subscribe to: Posts ( Atom )