Posts

Showing posts with the label jQuery

Add a Custom jQuery Lightbox To Blogger

-
Image
If you are not satisfied with the default Lightbox set up by Blogger, here's another amazing way to show off your pictures. If you've missed out, I have already shown in one of my posts how to customize the Blogger Lightbox by changing the background color, borders or the text color, but this tutorial will show you how to replace it entirely with a cool jQuery Lightbox plugin that is very popular among bloggers. What this Lightbox does, is to display larger versions of the images that will pop-up into a larger box once we click on them, and allows us to easily navigate through that set of photos by using the previous and next buttons. To see it in action, please visit the following demo blog and click on any picture to enlarge it. Demo Blog Adding jQuery Lightbox to Blogger Step 1. From your Blogger Dashboard , click on Template > Edit HTML Step 2. Click anywhere on the code area and press the CTRL + F keys to open the search box. Paste the following tag inside the searc...
Read more

Orbit - jQuery Image Slider Plugin For Blogger

-
Image
In this tutorial, you will see how to add another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This slider, called Orbit, is a lightweight jQuery plugin that will display multiple images in a limited space using navigation arrows (previous-next buttons). On the upper left of the Orbit slideshow, we have some small bullet icons indicating the current image that we are viewing and, on the upper right side, is the pause option and a timer letting us know when the next image will be displayed. If you want to see this cool image slider in action, please visit this demo blog: Demo Blog Related: Photo Gallery with Thumbnails using Javascript and CSS Spacegallery: A jQuery Time Machine-like Slideshow/Image Gallery Image Slider that Displays Pictures on Mouse Hover using only CSS The HTML markup is pretty clean, just an element that wraps multiple images where the captions are generated from the span tags of these images. How to Add the Orbit...
Read more

jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

-
Image
Many times when we think about making a blog, we want to put many gadgets, although many are not necessary, or perhaps only a few of them. But to add the gadgets that we want, we need to have enough space. A solution would be using an expanding/collapsing menu that is hidden and expands when the user clicks on it. Originally, this plugin called Sliding Login Panel was created so that users could register on the site, but as we know, in Blogger we don't have the option to add a user registration, however, that doesn't mean that we can't take advantage of this plugin and use it to add other elements, such as a menu, search box, social icons, feed subscription etc. You can find a demo of this panel in this blog - just click on the Open menu link on the top. Adding the jQuery Expand/Collapse Slider Panel to Blogger This sliding menu is made with jQuery, so the first thing is to add the script by pasting it just below the <head> tag: Step 1. From your Blogger dashboar...
Read more

How to add a thumbnail image/photo gallery in Blogger

-
Image
For those who would like to show pictures in an image gallery, here's a beautiful gallery made with JavaScript and CSS. This image gallery displays the available thumbnails either vertically or horizontally on top of the selected picture, thus making it easier for you to pick different images on mouse click. With the help of CSS, we can make the <img> element to display on same position with the rest of the thumbs and style the thumbnails as small blocks with a defined height/width. The script will add a click-event for each <li> object that changes it's child's <img> visibility and will assign an "active" class name to the <li>. Related: Image Slider with Mouse Hover Effect using only CSS Possibly the Most Simple jQuery Slider Spacegallery: A Time Machine-like Slideshow/Image Gallery  Demo blog How to Add Image Gallery with Thumbnails to Blogger Step 1. Log in to your Blogger account , select your blog and go to Template > Edit HTML S...
Read more