There are many types of galleries for images that we find on the net, but we rarely see one showing images so differently like this one.

Those using Mac OS X will surely find a lot of similarity with TimeMachine and those who don't, I'm sure will enjoy this type of effect for viewing images.

I'm talking about Spacegallery, an image gallery done with jQuery in which images are being displayed one after another when you click on them.

To use this gallery follow the steps below:

Step 1. Log in to your Blogger Dashboard, click on your blog and then go to Template and click on the Edit HTML button.

Step 2. Search using CTRL + F keys for the </head> tag and before it paste the following:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/spacegallery.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

Screenshot

Note: if you have already added jQuery in your template, then delete the line in red.

Step 3. Search for ]]></b:skin> (CTRL + F) and when you found it, click on the arrow next to it:

Paste just above ]]></b:skin> the following CSS style:

#myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E;
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiZEaAbj3U4gIFZntPi-3o81270rlcpy2LxYLLsW0-LKt6McuB7fk58ZD1ug0_va5oAt7rA0nWLdaZitwCkfrX67SJ4b_KdYlsQgvfJ7VeHVVCGt54LUfVicdC30mAzvYbhMLmpgwGAHA/s1600/ajax_small.gif) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Step 4. Click on the Save template button

Step 5. Finally go to Layout > Add a Gadget > HTML/Javascript and copy-paste the code below:

<div class="spacegallery" id="myGallery">
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
</div>

Note: In case you want to add this slideshow inside a post, then create a new post and paste the code in the HTML section

Replace the Image URL text with the URLs of the images of your gallery, keeping in mind that the last image is the first to be displayed.

And so you can enjoy this simple image gallery on your blog, and although it has no display options or settings, is without a doubt a gallery that will draw the attention of your readers.

Blog CSS Gadgets SEO

6:30 AM

Tiny Circleslider is a small jQuery plugin that generates a circular carousel of images.

There is noting complicated about using this type of carousel, however when it's about customizing it, it's necessary to use a bit of arithmetic. All these details can be found in the author's homepage, so I'll just limit myself to show you the basics.
Obviously, we need to add the javascript jQuery library in our template:

Step 1. From your Blogger's dashboard, go to Template > press the Edit HTML button

Step 2. Search for the </head> (CTRL + F) tag and just above it, add the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src="http://helplogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"/>

We would lack the CSS styles that we need to add above the </head> tag as well:

<style>
  #rotatescroll { /* is the rectangle container */
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .viewport { /* is the rectangle containing the images */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
  }
  #rotatescroll .overview { /* is the list with the images */
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
  }
  #rotatescroll .overview li { /* each item of the list */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .overlay { /* the image with the circle overlapping the list */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CQuo8Gx_OCzh0LRIVDuvuQJ9PVKRui2Rs6CAthqhxsCqkG1XlI1ZpDnq-Of984XcryV3fk1fI0c8uQZJwIE4bU3XZls0yX2x1QmbXocCXWUYaVml0rWZtFm8lKMG_BneF4azvCD5Hp4/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
  }
  #rotatescroll .thumb { /* the red circle that allows us to navigate */
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw2sdKgvpdX761gSJB9sHtPi13L7US0L30VLij7wL6oh0HnVeVb0Cb84JbhbZ9pvzAiskWKleQeDBJoCn8iTMMIKjWF72NlWsOdZKvXjtEC_zf_FZE1JwytR2j5Tda0j2LzWXgtU18fs4/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
  }
  #rotatescroll .dot { /* the points indicating the position of each image */
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcl1rJb9uevsukwYwgCwF6Ur9hpIaPINMom3EpDba6N0lZ2wOpMFrQ9tGNGdV5NS-smakKOX9AV8NCgCnUdl6TpT9ZraN93emkyi73KWK2j9s_7ipDlUKrvG-KsK7fwBUrovqzG_ionCQ/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
  }
  #rotatescroll .dot span { /* are hidden by default */
    display: none;
  }
</style>

Screenshot

Step 3. Now here's the HTML that has to be added to where we want to display the carousel.
Create a New post and paste on the HTML section, the code below:

<div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
      <li><img src="imageURL" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>

<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
</script>

Screenshot

Note: replace the imageURL text with the URL of your images

and here are other options that could be added, separated by commas:

snaptodots - false if you want no dots to be shown when dragging them
hidedots - false if you want to display the internal points (by default is true)
intervaltime - is the time between slides (by default 3500)
radius - defines the size of the circle (by default is 140)

Blog CSS SEO

6:00 AM

For many of us the design and the template are the most important, making our readers be more interested and coming back to our blog. In this tutorial, I will show you how to create a keyboard keys effect only with CSS. It is not necessary to add an image, so that your blog will load faster.

How to Add Keyboard Keys to Blogger

Step 1: From Blogger Dashboard, go to Template > Edit HTML

Step 2: Look for this line (Ctrl + F)

]]></b:skin>

Screenshot

Click on the arrow to expand the code

Step 3: Just above ]]></b:skin> paste this CSS code:

kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Step 4: Save the change made.

Now the only thing left to do is adding the tags to the desired text to make it look as it would be inside of the keyboard keys.

For this you need to create a new post, write the text on which you want to apply the style and then switch to HTML - where you have to add before and after it, the following HTML tags:

<kbd>Ctrl</kbd> + <kbd>F</kbd>

Screenshot

And, it will be visible in your post as: Ctrl + F

Blog CSS

6:00 AM

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.

Regularly the content that is "behind" it is an image for subscribing to feed but you can put any image and link to any page.

To add this page curl effect on your blog: 

1. Go to Template > Edit HTML and before </head> paste the script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>

2. Then before ]]></b:skin> 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;
}

3. Finally, paste after <body> or:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

The following code:

<div id='pageflip'>
<a href='http://name-of_your_blog.blogspot.com/atom.xml'>
<img src='http://oi40.tinypic.com/10fqnav.jpg' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>

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) if you want.
In red you can see where the name of your blog should be added, that will be the link to the feed of your blog when the user is giving a click on the image behind, but you can put any URL in case you want to link to another page.

And that's it. Save the template.

Remember that uses jQuery, so you should only have one version of it, and if you use Scriptaculous or Mootools, you should apply some changes.

 8AAU2XTXFSX3

Blog CSS RSS Feeds

6:00 AM

As each day there are lots of new users joining the world of blogging, is necessary to discuss about some basic topics that bring up some recurring questions such as how we could get the URL of an image?

On the Internet there are many both free as well as paid web hosting where we can host images, but since we use Blogger then there is nothing better than using the same hosting service that Google gives us and that is Picasa.

The fastest way to upload an image is by going to the Blogger post editor. From your Blogger Dashboard, go to your blog, then click on the New post button. And preferably from the Edit HTML tab, click on the image icon.

Blog CSS Google

6:00 AM

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.

Blog CSS

6:30 AM

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.

Blog CSS

6:30 AM

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.

Blog CSS

6:30 AM

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, which 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.

Blog CSS Gadgets

6:00 AM

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.

Blog CSS

6:30 AM

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.

Blog CSS

6:00 AM

This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again.

Inside of the navigation there are some links, a search input and a top and bottom button that allows the user to navigate to the top or bottom of the page.

 

Blog CSS Gadgets

7:43 PM

To change your blog's date header color and font style, you can do it with a very simple CSS adjustment that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance.
See the result in the image below:

Blog CSS

7:40 PM