Audrino

Page Peel is a popular page flip effect that when your cursor is passing over it, will show "what's behind" as if it would be a book. There are many ways to do this, many of them use flash files which makes it less customizable, however, the one that we will see in this post is made with jQuery. Usually, the content that is "behind", is an image for subscribing to feed, but you can put any image and link to any page. Demo You can see an example in this demo blog. How to Add the Page Curl Effect on Blogger 1. Log in to your Blogger dashsboard , select your blog > then go to Template > Edit HTML 2. Click anywhere inside the code area and search for the below tag by pressing the CTRL + F keys: </head> 3. Just before </head> copy and paste this script: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> <script> //<![CDATA[ $(document).ready(function(){ $("#...

JScrollPane is a jQuery script that allows you to change the blog' scroll bar, ie the browser scrollbar. Although we can use CSS to change it, the problem is that is not standardized, because with CSS we can make it work only in Chrome and Safari; and in the case of Internet Explorer it also has its own code but obviously it only works in that browser (I don't know which versions). So what we will do then is to give a new look to the scrollbar but by using jQuery, so the change will be visible in all browsers. Demo You can see an example in this test blog where the scroll bar has a different shape and color. How to change the scrollbar on Blogger 1. Go to Template > Edit HTML and before </head> paste this code: <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> <style> .jspContainer {overflow: hidden;position: relative;}.jspPane {position: absolute;} .jspVerticalBar {position: absolute;to...

From the Compose tab of a Blogger post, we can create numbered lists using the "Numbered List" tool. A numbered list is achieved through the HTML code of a "ordered list". You don't have to worry about adding the HTML, because the editor does it for you by using this tool. If you go to the HTML tab, you'll see that the list you created appears something like this:    <ol> <li>The content of the 1st. element</li> <li>The content of the 2nd. element</li> <li>The content of the 3rd. element</li> <li>The content of the 4th. element</li>     etc...   </ol> This tool will automatically number each element of the list taking an "order", hence the name "ordered lists in HTML". In each element a number is successively generated (from 1 onwards), though you can not see this in the HTML code. Using ordered lists in posts Creating numbered lists is very suitable for giving any instructions. ...

Blogger allows us to easily add a " Popular Posts " widget, that we select from its list of gadgets, and we can do that by going to the "Layout" of our Blog. This gadget, as the name implies, shows which are the most visited blog posts, and you can set it to display the info you want in four possible combinations : (1) only the title of the post, (2) a thumbnail of the image and the post title, (3) post title with a summary, and (4) post title with a thumbnail and a post snippet. This is an element that you shouldn't miss in your blog because it encourages your visitors to navigate through your content and that can result in higher income if you're monetizing your blog because it would generate an increase in the number of pages visited, and in turn, can attract the users' interest to subscribe to the blog and to read interesting content. Preliminary steps: Add the gadget, if you haven't done it yet. 1. Select the " Layout " tab and add th...

Some of you might have wondered how to put a video to play in the blog's background, so that instead of having just a color or an image, to have a video. We can do this thanks to the jQuery plugin Tubular that lets you use a YouTube video as a background of a web page. Although the result can be very original and attractive, I must say it has three drawbacks: they can not be silenced, if the video has ads, they will also appear, and it can slow the loading time of the blog, so if anyone wants to use it, may consider putting it only on special occasions, or on blogs that load very quickly. Also it can be done in HTML5, the problem with this method is that you need to load the video in 3 different formats (.mp4, .webm and .ovg) along with a picture for browsers that do not support them, so this YouTube option seems more practical to me, despite the drawbacks. You can see it working on this demo blog Steps  1. The first step is to just above the </head> tag, this script: <sc...

In the previous post we saw how to make the blog's background fill the screen regardless of the resolution of the monitor . The method that we'll use now with jQuery is a plugin called BackStretch which also has the option of creating a slideshow of pictures as a blog wallpaper without losing the property of adjusting to the width and height of the screen. What we will do in this entry is just this, try to make the blog's background to have some images that are changing, all with fade effect between each transition. You can see an example in this demo blog . To put this slideshow in the blog's background, just go to Template - Edit HTML and before </head> add the following code: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> <script> //<![CDATA[ /* * jQuery Backstretch * Version 1.2.8 * http://srobbin.com/jquery-plugins/jquery-backstretch/ * Add a dynamically-resized backgr...

Here are some unique border styles that you can apply to blogger images by using the border-radius property and defining either all four corners simultaneously or applying the rounded border only to some of them. One of the advantages of CSS3 is that we can apply rounded borders without complicating things too much and one of the options would be to use these edges or borders to images in the blog posts, to which we can also add some hover effects such as shading and rounded borders accompanied by transitions. Note: if you need more info about how to add rounded corners on images, follow these links: - CSS Basics. How to Apply Rounded Corners On Images #1 - CSS Basics. How to Apply Rounded Corners On Images #2 Below are a few examples of these borders and how the images behave when you hover over them. If you want to use one of these styles, just copy the code below the image, then go to Template , click on the Edit HTML button and paste that code before ]]></b:skin> (CTRL ...

A constant question is how to make the background image of the blog always fill the entire screen regardless of the resolution of the monitor. And that is when we put a background image as measured by our monitor forgetting that there are actually monitors of all resolutions, very small and very large. So if we put an image according to our screen, there will be someone with a bigger monitor that surely will not see the whole picture or it will be repeated, and in this case, using very small monitors, the image will be seen incomplete. Here I will talk about two solutions for this, one is using CSS3 , and another is using  jQuery . With either of these two, we'll make the background image of the page to fill the entire screen regardless of the resolution of it. CSS3 The first option is using CSS3, the advantage with this method is that we do not overload the blog with scripts, we use only the background-size property that is responsible for doing what we want. The disadvantage is ...

jGlideMenu is a vertical menu that can be dragged and dropped so that the reader can place it anywhere. In addition, he can browse through the tabs in a very peculiar manner that comes with a sliding effect giving a sexy touch. One of the advantages is that it can store a large number of links and can be removed anytime by clicking the 'Close' button. Vertical Dropdown Menu for Blogger Demo To understand this jQuery dropdown menu better and see it in action, please visit the demo blog below. There we can drag the menu, navigate through its tabs or close it. Demo blog How to Add Vertical Drop down Menu with jQuery in Blogger To add a vertical drop-down menu with jQuery in a Blogger blog, follow these steps: 1. From your Blogger dashboard, go to 'Template' and click the 'Edit HTML' button. Once the template editor opens, click anywhere inside the code area and press the CTRL + F keys to open the search box. Type </head> inside the search box and just before...