Page peel effect using jQuery

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:

3. Just before copy and paste this script:

4. Then before ]]> (CTRL + F to find it - if necessary, click on the left arrow) paste these styles:

/* Page Flip
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Change to 30px if you have the navbar (navigation bar) */
float: right;
z-index:9;
}
#pageflip img {
width: 50px;
height: 52px;
z-index: 99;
position: absolute;
right: 0;
top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
background: url(http://oi44.tinypic.com/2hheno6.jpg) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}

5. Finally, paste after tag or if you can't find it, after this code:

The following code:

- In blue you will see a URL - this is the URL of the image that, in this case, is an invitation to subscribe to the feed. You can change it later to another (should be of the same size).
- You need to replace the url in red with the address of your blog, that will be the link to the blog's feed when the user clicks on the image behind, but you can put any URL in case you want to link to another page.

6. And that's it. To save the changes, click the Save template button.
Remember that this Page Peel effect uses jQuery, so you should only have one version of it, and if you use Scriptaculous or Mootools, you should apply some changes.

Customize the scroll bar (scrollbar) with JScrollPane

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 paste this code:

2. Then locate this tag:

Or this line:

Under any of these two add this:

3. Finally search for the and above it paste this:

Using Guest Bloggers To Make Your Blog Better

Guest Post - Our host is Amy Merrill, who takes a fresh look at using guest bloggers on your blog.See How To Become a guest author on Spice Up Your Blog.

Using guest posters and article submissions has become fairly common practice in the blogging sphere. Let’s face it, in the cyber-world where new, fresh content is essential to a successful blog, blog owners simply can’t do it all on their own.

Guest bloggers can lend fresh voice and even spunk to a blog when they’re utilized correctly, but blog owners need to be aware; just as guests bloggers can be a saving grace, they can also be a blogs downfall.

Think before you post

Click Here To View Full Post >>

Customizing Numbered Lists in Posts + 3 Examples

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:

  

1. The content of the 1st. element


2. The content of the 2nd. element


3. The content of the 3rd. element


4. The content of the 4th. element

    etc...
 

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. It is ideal for cooking blogs where the steps in a recipe has to be numbered, or in those blogs that share tutorials... but can be used in any type of blog that need to number something.

By default, when using this tool, the numbered elements will look like:

1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
3. Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 

However, we can customize the elements on the list with CSS. To achieve this, we will rely on this interesting tutorial from 456 Berea ST, that explains a technique in which using some key properties of CSS, we could customize both the numbers of each element in the list, also the content of each element.
The trick basically involves canceling the default numbering with "list-style: none", and then use automatic numbering properties: "counter-reset" and "counter-increment". Then the property "content" is added to the index of the counter that is created using the previous two properties.

How to Add Some Amazing Styles to Blogger ordered lists

Simply choose one of the styles below, then copy and paste the CSS code by going to Template > Customize > Advanced > Add CSS.

Some Blogger templates might not allow adding CSS in that location. In that case, for adding the CSS style you need to access the Template's HTML - from your Blogger Dashboard, go to Template > Edit HTML and paste the code just above the ]]> tag (press the CTRL + F keys to find it - you might need to click on the arrow to expand the code and after that search it again)


Examples

Here are three examples that I have prepared for those of you who want to customize numbered lists:
 
Style 1

1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
3. Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
*padding: .4em;
margin: .5em 0;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:hover:before{
transform: rotate(360deg);
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;  
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff; /* text color of numbers */
background: #FA8022; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}

Style 2

1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
3. Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 

.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #e2e3e2; /* bottom border of each element */
background:#f2f2f2; /* background color of each element */
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
font-family:'Oswald', serif;
font-size:14px; /* size of the numbers */
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#A5A5A5; /* color of the numbers */
text-align:left;
background:#e2e2e2; /* background color of the numbers */
text-indent:6px;
text-shadow: 1px 3px 2px #fff;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #aeaeae; /* color of the triangle behind */
}

Style 3

1. Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. 
2. Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. 
3. Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. 
4. Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. 

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 4.5em;
text-decoration: none;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;  
left: -30px;
top: 50%;
margin-top: -1em;
background: #bada55; /* background color of the numbers */
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:after{
position: absolute;
content: '';
left: -5px;
margin-top: -.7em;  
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #bada55; /* background color of the right arrow*/
}

Note: In blue are highlighted the values that can be edited in the CSS of these three examples, and added some comments highlighted in /* green */, so that you can know what each thing does.

Compatibility:

This will work in all browsers including IE8 - in the case of Internet Explorer 7, the number' styles will not be seen as it does not support the :before or :after pseudo-elements. However, I have added a line in the CSS that's specific for that browser and will bring up the default numbering of the ordered list.

Hopefully this will be useful for you ;)

4 Different Styles For the Popular Posts Widget

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 the "Popular Posts" gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on "Add a Gadget".

2. Configure the widget to show only the post titles. You can do this by clicking on the "image thumbnail" and "snippet" checkboxes, as shown in the following image.

3. After configuring the widget, save the changes by clicking on Save, and then Save arrangement.

How to add the CSS to create the style of the Popular Posts widget

1. Choose a style, then copy the CSS that appears below the image that shows the style.

2. Select the "Template" tab, then click on Customize > Advanced > Add CSS and then paste the CSS style that you like the most.

3. Once you add the CSS, Save changes by clicking on the "Apply to Blog" button.

Note: Some Blogger templates might not allow adding CSS in that location. In that case, for adding the CSS style you need to access the Template's HTML - from your Blogger Dashboard, go to Template > Edit HTML and paste the code just above the ]]> tag (press the CTRL + F keys to find it - you might need to click on the arrow to expand the code and after that search it again)

And that's it! You've already customized the popular posts widget when it shows only post titles.

Styles

Here is the CSS of each style, just choose the one you like the best and put it on your blog. You can see each of these styles in action in the following demo blog:

http://demo-blog343.blogspot.com

Style 1:

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;  
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;  
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);  
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Style 2:

#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none;  
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; /* Background color on mouseover */
}  
#PopularPosts1 ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}

Style 3:

#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000;
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; /* Arrow background color on the left */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}

#PopularPosts1 ul li a{
display:block;
font-size:16px; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

Style 4:

#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* Style of the numbers */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; /* Text color */
border: 2px solid #ddd; /* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* color of the links */
text-decoration:none;
font-size:14px; /* Font size of the links */
font-style: italic;

}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}

Final Notes

All the CSS is valid. I just have to mention that the numbering is not visible in Internet Explorer 7, since that version of the browser does not support properties that make the numbers appear. For example in the 4th style, the circles look squared in IE8 and earlier versions since, these versions do not support a property that makes them look as circles.

Adding a Youtube Video in the Background of a Blogger blog

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 tag, this script:

And this one too:

2. Then locate the > tag (CTRL + F)
Or if you are using a template from Template Designer, find this line:

3. Under either of these two, add this:

4. Now search for the tag, and before it put this:

Create a Background Slideshow for Blogger

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 add the following code:

Here add the URLs of the images that will be the background of your blog.
If you would like to add more pictures, just add after the var images = [ another line like this:

 "Image URL",

The images will be changing in the order you have added them, if you want these to appear in a random order, then change the second part of the code with this:

You can also add more pictures by adding a line like this:

images[ 6 ]="Image URL";

But you will see that in this case there are some consecutive numbers in blue, so if you add another such as 6, then the next one should be 7, etc..

In both cases you can change the duration of each image which is in the 5000 value that is at the end of the script.
The advantage of this slideshow in the blog's background is that images are automatically resized to the size of the monitor, so that, no matter of the resolution, it should look good.

It is worth remembering that if you are using Scriptaculous, you have to make some changes, and if you already use jQuery, should leave only one version.

Author page | Backstretch

Rounded Corners and Shadows for Images using CSS

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 ]]> (CTRL + F to find it)

.post-body img {
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
background:#FFF; /* background color around the image */
padding:15px; /* space between border and image */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 0% 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
background:#FFF; /* the background color around the image */
padding:15px; /* The Space Between Border and Image */
border-radius: 50% 0; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Shadow */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* This removes the border roundness (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 50%; /* Rounded border */
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* With this we remove the shadow (value 0) */
border-radius: 0; /* This removes the border roundness (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
border-radius: 45% / 20%; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Shadow */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* This removes the roundness of border (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

So these effects will apply to all images uploaded to your Blogger posts. But if you want to apply them only on certain pictures then change .post-body img with .rounded  and .post-body img:hover with .rounded:hoverThen add the rounded class selector in the image's code:

class="rounded" src="Image URL"/>

These are just some examples, however, you can modify them anytime by adding or deleting more CSS styles, it depends on everybody's tastes or needs. But as you have seen, we can make the images look way more attractive and this has been done only with CSS ;)

How to make the background image of the blog fill the entire screen

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 that this property is supported only by modern browsers, so in the case of Internet Explorer, it will only be seen for version 9 and above, in other browsers there shouldn't be any problem.
The method is very simple, just go to Template - Edit HTML, locate the background that is within body { and replace it with this:

background: url(Image URL) no-repeat center center fixed;
background-size: cover;

Note: to find the body { tag, click anywhere inside the code area then press the CTRL + F keys and paste it inside the search box. If you can't find it, remove the space between "body" and "{" then search again.

It would look something like this:

body {
background: url(URL of the image) no-repeat center center fixed;
background-size: cover;
margin:0;
}

Just put the URL of the image and that's it.

jQuery

With this method we will use jQuery with BackStretch plugin, the advantage is that it works in all browsers, including IE7 and above. And if you already use jQuery, you don't have to worry about the loading time of your blog, because the plugin is actually small.

To use this method in your blog, go to Template - Edit HTML and before paste this script:

Put the URL of the image where indicated and ready.

As you can see both options are easy to apply, each with its pros and cons, but the result is the same, stretching the background image to fit the screen of any monitor regardless of the resolution of it.

Remember that in the case of jQuery method, you should verify that you are not using Mootools or Scriptaculous, and if you already have it, you will have to implement some changes in the script to make it compatible. And if you already use jQuery remember having only one version - the last one.

Vertical drop down menu with jQuery

jGlideMenu is a vertical menu that can be dragged and dropped so that the reader can place it anywhere, and 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 if we want.

To understand this menu better and to see it in action, visit this demo blog. There we can drag the menu, navigate through its tabs or close.

To add this vertical menu on your blog, just follow these steps:

1) From your Blogger dashboard, go to Template > Edit HTML and before the tag, add these scripts:

2) Now paste before ]]> these styles:

.jGM_box {
position: absolute; /* Change absolute with fixed if you want it to float */
top: 50px; /* Distance from above */
right: 760px; /* Distance from right */
width: 227px;
height: 317px;
background: #fff; /* Background color */
margin: 0;
padding: 0;
border: 1px solid #ccc; /* Border */
overflow: hidden;
}
.jGM_header {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 227px;
background: #d1d1d1; /* Background color for the up bar */
color: #fff;
text-align: right;
vertical-align: middle;
line-height: 18px;
cursor: move;
}
.jGM_header a {
margin-right: 12px;
text-decoration: none;
color: #000 !important;
cursor: pointer;
}
.jGM_wrapper {
position: absolute;
top: 19px;
left: 0;
width: 2270px;
height: 288px;
margin: 0;
padding: 0;
border: 0;
}
.jGM_tile {
position: absolute;
top: 0;
left: 7px;
width: 213px;
height: auto;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
display: block;
}
.jGM_cats {
width: 100%;
height: 64px;
overflow: hidden;
vertical-align: middle;
text-align: left;
}
.jGM_cats h4 {
font-family: Verdana,Arial,serif;
font-size: 1.8em;
margin: 0;
padding: 2px 0;
line-height: 1.8em;
color: #414141;
font-weight: normal;
}
.jGM_cats p {
font-family: Verdana,tahoma,arial;
font-size: 1em; /* Font size of the description */
margin: 0;
padding: 0;
line-height: 1.2em;
color: #858585; /* Description color */
font-weight: normal;
}
.jGM_pager {
height: 18px;
width: 213px;
line-height: 18px;
margin: 0;
border: 0;
padding: 0;
background: #f6f6f6;
text-align: center;
vertical-align: middle;
}
.jGM_pager a {
text-decoration: none;
font-weight: bold;
text-decoration: none;
display: block;
}
.jGM_pager a:hover { background: #d1d1d1; }
.jGM_pager img { border: 0; margin: 6px 0; }
.jGM_content {
width: 213px;
height: 150px;
margin: 1px 0;
padding: 0;
border: 0;
overflow: hidden;
}
.jGM_content a {
font-family: Tahoma,arial;
text-decoration: none;
color: #333 !important;
height: 18px;
width: 100%;
display: block;
line-height: 18px;
padding: 0 0 0 10px;
background-color: #e6e7e9;
margin: 1px 0;
}
.jGM_content a:hover {
color: #fff !important;
background-color: #4D4E67; /* Bar color on mouseover */
}
.jGM_more {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB0NkUkLGlIQuv__oqxjm40I0ZYkZn68_uFExxN-Z-ZaT3p8sWaWHLsn_K1u7JMxVgOe1rBvI2ggB9hibQxQ9a40qeNSCpb_kJdJGvNfhYmRNqw80dBYuR_sM0h2xD_HAN4MhUH37HOCw/s1600/arrow.gif);
background-repeat: no-repeat;
background-position: 203px 50%;
}
.jGM_back {
position: absolute;
top: 255px;
right: 0;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_back a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color of the "Back" link */
display: block;
}
.jGM_back a:hover {
color: #fff !important; /* Color of the "Back" link on mouseover */
background: #4D4E67;
}
.jGM_reset {
position: absolute;
top: 255px;
right: 62px;
height: 18px;
width: 52px;
background: #d1d1d1;
line-height: 18px;
vertical-align: middle;
text-align: center;
margin: 10px 0 0 0;
padding: 0;
border: 0;
z-index: 99;
}
.jGM_reset a {
height: 100%;
width: 100%;
text-decoration: none;
color: #000 !important; /* Color of the "Home" link */
display: block;
}
.jGM_reset a:hover {
color: #fff !important; /* Color of the "Home" link on mouseover */
background: #4D4E67;
}

3) Now go to Layout and paste the structure of the menu inside a HTML/Javascript gadget:

• Link 1


• Link 2


• Link 3


• Link 4


• Link 5


• URL address">Link 6


• URL address">Link 7


• URL address">Link 8


• URL address">Link 9


• URL address">Link 10


• URL address">Link 11

• Link 1.1


• URL address">Link 1.2


• URL address">Link 1.3


• URL address">Link 1.4

• URL address">Link 2.1


• Link 2.2


• URL address">Link 2.3

• URL address">Link 3.1


• URL address">Link 3.2


• URL address">Link 3.3

• URL address">Link 4.1


• URL address">Link 4.2


• URL address">Link 4.3

• URL address">Link 5.1


• URL address">Link 5.2

• URL address">Link 1.1.1


• URL address">Link 1.1.2

• URL address">Link 1.2.1


• URL address">Link 1.2.2

Add the URLs of the links and the names of the tabs and that's it.
If you want to add more links to the first level, then add another line like this:

URL address">Link 12

If you want to add another level to the link, then the line should be like this:

rel="tile_0010">Link 5

Then in the area of ​​the second or third level, add a piece like this:

id="tile_0010" class="jGlide_001_tiles" title="Menu" alt="Description of the second level">

• URL address">Link 5.1


• Url address">Link 5.2

Here you should keep something in mind, if you look closely the link takes the REL attribute which must be the same as the ID we put on the second level, these IDs should not repeat and always be unique.
Yes, it sounds complicated, but once you understand the concept, you'll see that is actually pretty simple.
In the area of ​​the styles, there are the parts that can be customized. If you want the menu to be static, let's say you want to add it in the sidebar, then delete the first code of the script that is in italics. And in the CSS styles, remove this part:

position: absolute; /* Change absolute with fixed if you want it to float */
top: 50px; /* Distance above */
right: 760px; /* Distance to the right */

When there are many links then, there will be showing some arrows, so when you mouseover them, it will show the rest of the links either up or down.

Throughout the menu structure we can change the Menu name and the descriptions as well.

As this menu is made with JQuery, it is recommended to verify to have only one version of it.