Bloggr tutorials and HOW TOs: jquery

Showing posts with label jquery. Show all posts

How To Manage External Links Using JQuery

Posted by SoMeOnE at 4:03 AM Labels: jquery

In this tutorial I am going to show how to style your external links differently from the other links using Jquery.Also after adding this trick to your blogger blog or web site,all external link of your site will open in new window.This is very easy to do and you can view a DEMO HERE.If you want to know further details about this trick you can read this : http://www.madeincima.eu/blog/jquery-tutorial-external-links/

Now to add this jquery external links effect to your site follow the steps given below.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now save your template.

You are done.Now all of your external links open in new windows and can identify external links from other links.

How To Add Smart Jquery Featured Slider to Blogger/Websites

Posted by SoMeOnE at 4:32 AM Labels: html, java script, jquery, widget

This is a another tutorial about, how to add great featured jquery content slider to your blogger blog or other website.Read the instruction given below to add this featured content slider to your blog with in few minutes.Remember to use 307px width and 254px height images for this slider.I recommend to DOWNLOAD java script files and host it yourself.Also you can see the DEMO of this slider HERE.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:

NOTE : Replace,

SLIDE-X-LINK-HERE with your real featured posts links.

SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

Look at the example below:

You are done.

How To Create JQuery Featured Content Slideshow

Posted by SoMeOnE at 1:50 AM Labels: html, java script, jquery, widget

In this tutorial I am going to explain,how to create a slideshow to show your featured content to visitors.This is very easy to add and configure.This slideshow is working using jquery.You do not want to host any java script file yourself to add this slideshow to your blog.So you can add this slideshow to your site with in few minutes.Default width=600px and height=240px.But you can change it easily to match it for your website.

If you like add this slideshow to your blogger blog or website,then follow the steps given below.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghfZjFsTGaMvEVtgrM96bRu5foDGoKPHq5K0t2i_mOwNwRHZ3yHnBDaTFgxW_OJ4APx81yXEq01uKi-Es5hFyYlNQBOIny815XIXtHKfhXSMfnCKbORR-6pvW_UVlZHZt6-HrWKpwa6dI/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." />


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiigY2MZW_5fl2sLVEPNJBMQjCBSKVoi5UeJ67Uw6pMK-p4V1snFFK-_4eov5ntDQqYQI-qctxXt6XcJqL4sqNYGM8rbWK1uyPe4KtPyRAjwINpZoy90pmPqknE1r9xa7x2HbBE-1z9yJA/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." />


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX4K-FzViOCrvIz4iuEZ7zVDP3Xo8f1Pvkdqv_n6i9IT-aUrSFW0dhrUOfEuMcMIIu9QXlDNZTYVy-MbHval6YfH6NADnGlR1Yx58ZVQVb2MZrz9oapRlVTDiRoqGueBIJjwzxaYVavLc/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." />


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQrEdAY0fDBsL5tZxgDbcpiXhnsXsk7OPhkkAXID2RqRuOzKlJbzWMTZntbhVUu9ra4aCh8xOB7DgYVtoHxV0aaRHZUWLSjkM6t1RMcANYFJjUrWrxWa-X-u9pByteIKQC1Ja3cAxe-F8/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." />

You can add more slides as you like.

Note : Replace images URLs,"This is featured post X title","Replace This Text With Your Featured Post X Description" with your content.

You are done.

How To Add JQuery Fade Effect to Blogger / Website

Posted by SoMeOnE at 7:12 PM Labels: image, jquery

This quick tutorial explains how to add jquery fade effect to your images in blogger or any other web site.This is very easy and you can do this less than a minute.But this effect will add some attractive appearance to your blog or web site.You can look at the DEMO page of this tricks from here.Now follow the steps below to do this.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now save your template and you are done.

How To Add JQuery Lazy Load Plugin to Blogger

Posted by SoMeOnE at 6:44 PM Labels: image, java script, jquery

This post will explain to you how to add JQuery Lazy Load Plugin to your blogger blog or any other website easily.If you have a blog or website containing many images, this tricks will be very helpful to you.It can reduce the page loading time of your site.You can see more details about this JQuery Lazy Load Plugin from here: http://www.appelsiini.net/projects/lazyload.Look at the DEMO page to see the result.

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

To add JQuery Lazy Load Plugin to your blogger blog or any other website follow the steps given below:

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

Note : You can download javascript files from here if you want to host above files yourself.

4.Now save your template and you are done.Refresh your site to see the result.

Smooth Jquery Featured Post Slideshow For Blogger

Posted by SoMeOnE at 12:19 AM Labels: java script, jquery, widget

This tutorial will shows you how to add featured content slideshow to show your featured post to your readers.This slideshow is very easy to setup and can easily manage width and height to match your template.Not only that you can change the speed of this slideshow easily.Default width is 550px and Default height is 200px.I think you will love this slideshow.You can see the DEMO of this widget from here.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

NOTE : To change the speed of slideshow, change the value 4000.

4.Save your template.

5.Now go to Layout-->Page Element and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.





YOUR-LINK-HERE">
Crysis : Download Full Version



YOUR-LINK-HERE">
Halo 3 : Play Game Online



YOUR-LINK-HERE">
Avatar : Watch Movie Now !!!



YOUR-LINK-HERE">
Call Of Duty 4 : Get Here

NOTE : Replace YOUR-LINK-HERE and images with your content.

Now you have successfully installed this slide show to your site.

How To Add Featured Auto Content Slider to Blogger

Posted by SoMeOnE at 7:35 PM Labels: css, java script, jquery, widget

This tutorial will explain to you how to create a auto featured content slider for your blogger blog or website.I found this content slider from Florance wordpress theme(Created by Web2feel.com) and I think, it will be useful to your blogger blog.Before adding this widget to your site look at the DEMO from here.

If you like to add this beautiful auto slider to your blog then follow steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

Note : Host trans.png yourself.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.












YOUR-POST-1-LINK-HERE">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8GvvAmG_O0xmaGpk_lfFedddgYElXm75jisy2rJUIWFm_7M1GZMUl_B9Km13dMjyrc_eZwme6krxVWO_0fsBFZQKRV3uAshWNGezDN4BgGVsbL5Pyw5kkcB8DN-ZIPdJYUUZ9BHjhyDwO/" alt=""/>


YOUR-FEATURED-POST-1-SMALL-DESCRIPTION-HERE [...] 










YOUR-POST-2-LINK-HERE">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6NzIaOcaMyt9Xm1f8-wKTjfBC6QjJw-IPAginY2MckeC006gVnrgRufrzmORx4hdkCMY1w7n5uksYRCQNJX1ugZN1MMpyYIpvjK3kJYgE1Hj72n3v5s1ctw3933rjGuegAl3rVydLlgvo/" alt=""/>


YOUR-FEATURED-POST-2-SMALL-DESCRIPTION-HERE [...] 










YOUR-POST-3-LINK-HERE">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW65hELBFKaz4hPXv_ukpAJlNZeSWLkHG53T_IccwPAH2mHegt-quQM4Qztt5t_Aoa_jJMXbCwUISHHD6team4Wc7-_8RdCznXqi19omCrdjN5IHoaF-eX7YeRkKjjnmzpHs9K6tJsPW6G/" alt=""/>


YOUR-FEATURED-POST-3-SMALL-DESCRIPTION-HERE [...] 










YOUR-POST-4-LINK-HERE">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ZpXiaf-SApfk-PZOoVxw0casiO69ubD4gPqCLmMHnzoE4VDMdQQhjhRCfjw6EastVttdrFPfCDasTXZzJSebZVGnObI9O4qdDw6inQIwhfzgkkUSfZrsQYjwk81WYA0BwpkjyN07Ezvm/" alt=""/>


YOUR-FEATURED-POST-4-SMALL-DESCRIPTION-HERE [...] 










YOUR-POST-5-LINK-HERE">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi44WmnTwaJfnO55rQmovRlGVAc45cx_KZmb6tb3SgXuqU9zhhg1mxTZTL-8IaqevGH3q60gZFwq1qM5E8EzsPNj_qV52JjAPONHVxUsrSTMqaurfiB4AY5OFD4MPvczeBEF4jfv_cw8aXa/" alt=""/>


YOUR-FEATURED-POST-5-SMALL-DESCRIPTION-HERE [...] 










YOUR-POST-6-LINK-HERE">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBudDx9sI6xboQv952YZo4-7zxvkYUe1C4pKIcJ_N_2jWNsoYXTk63CLr085VOI-TpmtIUUTiZnhcM2AZOwrrx9AVWqu2_5lTt-ttqdN7imyF1VmeYy2eP1jlVf23iOAuobUvv_qW1RrT4/" alt=""/>


YOUR-FEATURED-POST-6-SMALL-DESCRIPTION-HERE [...]

Note : Replace YOUR-POST-x-LINK-HERE, YOUR-FEATURED-POST-X-SMALL-DESCRIPTION-HERE [...] and Images Links with your content.

Look at the example below:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem [...]

Now save your template and you are done.Don't forget to leave a comment,if you have any problem.

12 Amazing jQuery Accordions Menus Collection

Posted by SoMeOnE at 5:05 AM Labels: java script, jquery

I listed below useful JQuery Accordion Menus collection for your website.These menus will be very useful for your site or next project.All of these menus are worked by using jquery.If you like to add these accordion menus to your site,choose your menu from the below list.

1 . Dynamic Drive Accordion

Group contents together and reveal them on demand when the user clicks on their associated headers, with Accordion content script! Specify whether only one content within the group should be open at any given time, style the headers depending on their content state, and even enable persistence so the state of the contents is preserved within a browser session. The script enlists the help of the jQuery library for its engine. There are lots of configurable options,.........

Article & Demo : http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

Download : http://www.dynamicdrive.com/dynamicindex17/ddaccordion.js

2 . JQuery Accordion Menu - Lateralcode

This tutorial will take you through the creation of a jQuery accordion menu. There is a little twist to this: the menu contains content. Instead of it being links to multiple pages, it is a choice of what content should appear.

Article : http://www.lateralcode.com/jquery-accordion-menu/

Demo : http://demo.lateralcode.com/accordion-menu/

Download : http://www.lateralcode.com/wp-content/uploads/accordion-menu.zip

3 . Stupid Simple jQuery Accordion Menu

For a jQuery beginner the first thing you need to do is to include the jQuery library. Google hosts the library so you can link to it there. This can be done by putting the following code in the head of your............

Article : http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/

Demo : http://www.stemkoski.com/downloads/jquery-accordion-menu/example.htm

Download : http://www.stemkoski.com/downloads/jquery-accordion-menu.zip

4 . Accordion using jquery and css

Collipsible accordion using jQuery.An accordion is a toggle pane where one pane slides down the other pane slides up.

Article : http://roshanbh.com.np/2008/03/make-accordion-using-jquery.html

Demo : http://roshanbh.com.np/examples/accordion/

Download : http://roshanbh.com.np/codes/accordion-jquery.zip

5 . jQuery UI Accordion

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.

Article : http://bassistance.de/jquery-plugins/jquery-plugin-accordion/

Demo : http://jquery.bassistance.de/accordion/demo/

Download : http://jquery.bassistance.de/accordion/jquery.accordion.zip

6 . jQuery - Horizontal Accordions

An Xbox-like horizontal accordion that would look really good being used as a featured content slideshow .

Article : http://www.portalzine.de/index?/Horizontal_Accordion--print

Demo : http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html

Download : http://www.portalzine.de/index?/Downloads/1/agree/aWQtMjct/

7 . JQuery HoverAccordion

This plugin was inspired by the Accordion menus on the Apple Mac website as well as Jörn Zaefferer's Accordion plugin.

Article & Demo : http://berndmatzner.de/jquery/hoveraccordion/

Download : http://berndmatzner.de/jquery/hoveraccordion/jquery.hoveraccordion.min.js ,
http://berndmatzner.de/jquery/hoveraccordion/jquery.hoveraccordion.js

8 . Accordion Madness

Another good and simple accordian menu for you.

Article & Demo : http://www.learningjquery.com/2007/03/accordion-madness

Download : http://www.learningjquery.com/scripts-used-on-this-site

9 . Accordion menu using jquery

Fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

Article & Demo : http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

Download : http://roshanbh.com.np/codes/accordion-menu.zip

10 . Simple JQuery Accordion menus - Redux

This is a simple menu done in JQuery.This new version is rather flexible and caters to various needs people may have when building a website. It also allows multiple instances of the menu on the same webpage.

Article : http://www.i-marco.nl/weblog/archive/2008/05/08/simple_jquery_accordion_menu__

Demo : http://www.i-marco.nl/weblog/jquery-accordion-menu-redux/

Download : http://www.i-marco.nl/weblog/jquery-accordion-menu-redux/demo.zip

11 . Simple horizontal jQuery accordion

This is another great accordian menu created by using jquery.

Article & Demo : http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html

Download : http://projects.sevir.org/storage/haccordion/jquery.haccordion.js

12 . Simple JQuery Accordion menu

Simple JQuery Accordion menu is a best handy tool to show and hide information as needed. It also feel like a flash menu.

Article : http://sks.com.np/article/10/simple-jquery-accordion-menu.html

Demo : http://sks.com.np/download/jquery-accordion-menu/jquery-accordion-menu.html

Download : http://sks.com.np/download/jquery-accordion-menu.rar

Bloggr tutorials and HOW TOs