Blogger Buzz: slideshows

Scriptaculous image slider/carousel for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Image galleries, sliders and slideshows have become increasingly popular within web pages and more and more developers have been creating these amazing powerful, versatile and sleek galleries. In this tutorial, I will show you how to display the relevant content in an attractive and usable manner, by adding this beautiful carousel slideshow made by <a href="http://miedlar.com/dev/carousel" rel="nofollow" target="_blank">Brian R. Miedlar</a> which will display a gallery of images with a cool sliding effect. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD270LKiGRW4rVlNUHEofV0AmPhe3_aTU8HywdS8JuYvtvhfSY8vPUUa4qhCuyCN8vNc-e7WCgcmL625_rcfS4D-GV-uJSE8jqYw6PwkCux7UWQ51orUDNJxbHjd0lwusLWbuWV8CYZXo-/s1600/image-carousel-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="image slider for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD270LKiGRW4rVlNUHEofV0AmPhe3_aTU8HywdS8JuYvtvhfSY8vPUUa4qhCuyCN8vNc-e7WCgcmL625_rcfS4D-GV-uJSE8jqYw6PwkCux7UWQ51orUDNJxbHjd0lwusLWbuWV8CYZXo-/s1600/image-carousel-for-blogger.png" title="image slider for blogger" /></a></div>
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOthF1yAy6LSSUmTGDshkbEqHGLRLqqE4rmM56VYgw-PusBLjIWgJg5MGIgu5rZyme7QVfn3HZ72h_wZsG2jPlLyTlNwMrTSxsf5HHQ_jKKMY6Q5td8C9cqMzx83AwCmXX9QtOXCyYUlax/s1600/image-carousel-for-blogger-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger widgets, blogger slider" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOthF1yAy6LSSUmTGDshkbEqHGLRLqqE4rmM56VYgw-PusBLjIWgJg5MGIgu5rZyme7QVfn3HZ72h_wZsG2jPlLyTlNwMrTSxsf5HHQ_jKKMY6Q5td8C9cqMzx83AwCmXX9QtOXCyYUlax/s1600/image-carousel-for-blogger-2.png" title="scriptaculous image carousel or slider for blogger" /></a></div>
 
If you need to see this carousel in action, please visit this demo blog. 
 
 
<h3>
How to Add the Scriptaculous Image Slider on Blogger</h3>
 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
Step 1. Log in to your <a href="http://blogger.com/" rel="nofollow">Blogger Dashboard</a> and select your blog 
 
Step 2. Go to Template and click the Edit HTML button: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s320/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></a></div>
 
Step 3. Click anywhere on the code area and press the CTRL + F keys, then search this tag: 
<blockquote class="tr_bq">
</head> </blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2aDChV3oOE4XdlJ0m_BmVIHocSk3h-Nv_gJVgvoNW8z_4p7xGrtY6ePTSsJNh8ibBdlkm_rE6YNqwunU45kVK_XhikHXAjYpjbUgSXysLcncUTNEAhIHZowxANprewWMRe5GihMASwJbQ/s1600/screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2aDChV3oOE4XdlJ0m_BmVIHocSk3h-Nv_gJVgvoNW8z_4p7xGrtY6ePTSsJNh8ibBdlkm_rE6YNqwunU45kVK_XhikHXAjYpjbUgSXysLcncUTNEAhIHZowxANprewWMRe5GihMASwJbQ/s400/screenshot.png" width="400" /></a></div>
 
Step 4. Just above the </head> tag, add this code: 
<blockquote class="tr_bq">
<script src='http://www.google.com/jsapi'></script> <script> google.load("prototype","1.7.0.0"); google.load("scriptaculous", "1.9.0"); </script> 
 
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/os.js' type='text/javascript'/> 
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/carousel.js' type='text/javascript'/> 
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/application.js' type='text/javascript'/></blockquote>
Note: If you already have Scriptaculous and Prototype, it's not necessary adding the code in red. 
 
Step 5. Now search for the following code (take a look at the screenshot for more details): 
<blockquote class="tr_bq">
]]></b:skin></blockquote>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvhyphenhyphenZ-bl4cnLFp6gK31LKL3nbM8gK8yQkUYl9D2HU7y38zGGZZPEPAIGoQSIjBNoaUVuBl3iYtee1cJLEyimKShQZEJ4w6eddANYl_-gpqcLPihUGZbNrPqyZquSMEOBaQncWLCwQnyho/s1600/blogger-template-b-skin.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="image carousel, blogger image slider, blogger widgets" border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvhyphenhyphenZ-bl4cnLFp6gK31LKL3nbM8gK8yQkUYl9D2HU7y38zGGZZPEPAIGoQSIjBNoaUVuBl3iYtee1cJLEyimKShQZEJ4w6eddANYl_-gpqcLPihUGZbNrPqyZquSMEOBaQncWLCwQnyho/s1600/blogger-template-b-skin.png" title="image carousel or slider for blogger" width="510" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr>
</tbody></table>
Step 6. Just above it, add the code below: 
<blockquote class="tr_bq">
.carousel { 
position:relative; 
clear:both; 
left:20px; /* Distance from left */ 
margin-top:10px; 
margin-bottom:20px; 
border:2px solid #000; /* Carousel border */ 
background-color:#333333; /* Background color */ 
} 
.carousel .navButton { cursor:pointer; display:block; 
text-indent:-9999px; 
background-repeat:none; 
z-index:10; 
} 
.carousel .container { 
position:absolute; 
overflow:hidden; 
} 
.carousel .items { 
position:absolute;  } 
#Carousel2 { 
height:88px; /* height of the container */ 
width:685px; /* width of the container */ 
} 
#Carousel2 .container { 
left:26px; 
top:12px; 
width:630px; /* width of the images container */ 
height:100px; /* height of the images container */ 
} 
#Carousel2 .items { top:0; left:2px; 
width:1700px; /* overall width of all the thumbnails */ 
} 
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; } 
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;} 
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; } 
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl3Kp5SW50Mgz1K4Fi3DoV-wyuyXt45VqvVgGhGCnY8fP3tqw6Zp5pBRRkCP6zA4ztcxCPgCID-0DzHkd2ogBLRKlky8_xVl8x_FEvAVkjwaxzm88C2CnzU7bnNIAoelWm_U61dFs7tXo/s1600/button-left.png); } 
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZKGJbNTYj8kykr-RDddb-Zii3y2a3hiYyi1v-08Brkt-x4j_KDkZcy0DSuBuvAV81XqtakAJzfYEmIzCowXAHuTcgIl0ZA5x6fSos7aRejYuZOuPNgHce7hJVx48bFm7o2uODRIJFw_c/s1600/button-right.png); } 
#Carousel2 .item .key { display:none;} 
#Carousel2 .item .picture { display:none;}</blockquote>
Here, I have put some styles in green that can be customized as you want , such as the border color and the background color. The arrows are images, so if you want to change their color or use other pics, you have to change the two URLs in blue. 
The width of the carousel is of 685px, so below the header might look good. If you want to change the length, then you need to change the /* width of the container */ (which is the size of the entire carousel), the /* width of the images container*/ (which is the area that shows the thumbnails) and the /* overall width of the thumbnails */ which is the actual width that all the thumbnails occupy. 
 
Step 7. In order to save the changes, click the Save Template button 
 
Step 8. Finally, go to Layout and click the Add a Gadget link, then choose HTML/Javascript from the pop-up box and paste the structure of the carousel inside the empty box: 
<blockquote class="tr_bq">
<div id="Carousel2" class="carousel"> 
<div class="button navButton previous" style="display:none;">Back</div> 
<div class="button navButton next" style="display:none;">Forward</div> 
<div class="container"> 
<div class="items"> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> 
 
</div> 
</div> 
</div></blockquote>
Add the links and images addresses. The link URL is optional, so you can add the addresses only when if you want to link the images to some posts. 
 
If you add more images or remove some, you need also to change the width of the thumbnails, otherwise some pictures will appear behind the others. 
 
If you want to add more pictures, just add before the </div> tag, a piece of code like this: 
<blockquote class="tr_bq">
<div class="item"> 
<div class="key caption">Thumb</div> 
<div class="icon"> 
<a href="link URL"><img width="65" height="65" src="image URL" /></a></div> 
<div class="picture"></div> 
</div> </blockquote>
And in case you want to align the gadget, just change the part from Distance from the left to another value.</div>

Blog Design slideshows Widgets Scriptaculous image slider/carousel for Blogger

Image galleries, sliders and slideshows have become increasingly popular within web pages and more and more developers have been creating ...

Spacegallery: image gallery/slideshow made with jQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
There are many types of galleries for images that can be found on the internet, but we rarely find one showing images so differently like this one. Those using Mac OS X will surely notice a lot of similarity with TimeMachine and those who don't, for sure will enjoy this type of effect for viewing images. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHURJHTbnuyWUIfV1Dil36Vbfsl4F-_fNqST_vqLS0BRnkqr5y2KJhFhZwRsy8KksWmvHjYOzTgsBWZcS9R_IjI0VigJOuDTZBwa5MnvTOIhSYz3lz33dd-0RCoBKFoXaPclg74m1a0Jb-/s1600/create-image-gallery-slideshow-using-jquery-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="image gallery with jQuery for blogger" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHURJHTbnuyWUIfV1Dil36Vbfsl4F-_fNqST_vqLS0BRnkqr5y2KJhFhZwRsy8KksWmvHjYOzTgsBWZcS9R_IjI0VigJOuDTZBwa5MnvTOIhSYz3lz33dd-0RCoBKFoXaPclg74m1a0Jb-/s200/create-image-gallery-slideshow-using-jquery-blogger.png" title="create image gallery or slideshow in blogger with jQuery" width="200" /></a></div>
I'm talking here about Spacegallery, an image gallery done with jQuery in which images are being displayed one after another when clicking on them. Click on the pictures below to see how it works: 
 
<div class="spacegallery" id="myGallery">
<img height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxX_n1UKI1EUhPat38k9Ptm13SArP09JuAjJ8Ahyg7IIWbAdEyxUiUEiC3J4_pxOLQgeMe-PUx2GK7LMm77WAVQhryjuUHtGxPN-DhqkbYULjC2_MHAaHLJl87ot1aMVde5riuiRpPwRZ/s400/stonehenge-200578_640.jpg" width="400" /><img height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIiQTHtRdDm4POuwVCdZ9IQNiKjy5u-8UaKeKwfrrA_QxVMcBqaLjfG7ArgaF9DORj7vxnoGksPOvg63xcGxCVSKJGBfPZy7Czkm4nVZvwdVt4qBsF9dfl8VBjW38I_qo4fwREcyKklj4z/s400/field-196173_640.jpg" width="400" /><img height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXCcZlXgGdCgUWyq2UopoRj4OG6R4IRVzc9GyhXhg6_LhBV7L-sYkTVdYHLikRiA5uWQn4CDK5H4lCOaQMjh0yBIpqYQMW2v6-UK-5CO3TzzoEdD6zXipOE-k2B-ME2Y0OYqqhSgDymgV/s400/cat-93986_640.jpg" width="400" /><img height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitx-KKdzXLvzstFYn6pFA1bXWg9s92W6P28AT2IsjPTF65lhD7nc_uMMRBseZTr49zHexGsD8HSmDjjDq0eVr7szHbRNX-YY_YGI446zcrWtHd85f5pCQT50yfuJfOEVkAPC35_ZhJLJRs/s400/winter-20248_640.jpg" width="400" /><img height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixZ1PtV-ZdXW1pweR2xUo4peVdhJ_izGTulS96Db_GxjHkvhApKDoyuXivUGLkTgL1AmwILOpd8e9ihucwEmyhyphenhyphenv4RkwQWlmyE_ttPUqHy-6hCYKo5U3lVUB3lGqmFD0x-97wfFoRai0qe/s400/zen-178992_640.jpg" width="400" /></div>
 
<h3>
How to Add Spacegallery Image Slideshow to Blogger</h3>
To implement this gallery is very simple. Just follow the steps below: 
 
Step 1. Log in to your <a href="http://www.blogger.com/" rel="nofollow">Blogger Dashboard</a> and select your blog > go to Template and click the Edit HTML button. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s320/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></a></div>
 
Step 2. Click anywhere on the code area and search by using the CTRL + F keys for this tag 
<blockquote class="tr_bq">
</head></blockquote>
Step 3. Before the </head> tag, paste the following scripts: 
<blockquote class="tr_bq">
<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></blockquote>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjT91S98Dn6QbCrSYQKoFNRJxkp0wL3Cqzyf2FUgfWi2tttDBj700nHRECg1wgdm8c8NYGaLBBtJ9I44QchvHZKvY2mtrsXudZp0L6EdPuGiPz_cxNLlbdsy6Fldy1Su7ZVFDud0KLzff6/s1600/mouse-over-effect-for-blogger-blogspot.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjT91S98Dn6QbCrSYQKoFNRJxkp0wL3Cqzyf2FUgfWi2tttDBj700nHRECg1wgdm8c8NYGaLBBtJ9I44QchvHZKvY2mtrsXudZp0L6EdPuGiPz_cxNLlbdsy6Fldy1Su7ZVFDud0KLzff6/s640/mouse-over-effect-for-blogger-blogspot.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
Note: if you have already jQuery added in the template, then delete the line in red. 
 
Step 4. Next, search for ]]></b:skin> (CTRL + F) and when you found it, click on the arrow next to it: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPEPGt9CCXjpTkJ7fM9sKl0DFuTEcYsQWAwWzbQ1kangioVGEHlkjSzb9DjPXk9mESyfjVWij098F0Sqg2O3OAF8Lc9t4cW-Bgr32VPFtFXyusZEXXKdvysGuVe0ZEhu_KWfbj02hSCaY/s1600/css-rules-b-skin-blogger-new-template-editor-help.png" imageanchor="1"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPEPGt9CCXjpTkJ7fM9sKl0DFuTEcYsQWAwWzbQ1kangioVGEHlkjSzb9DjPXk9mESyfjVWij098F0Sqg2O3OAF8Lc9t4cW-Bgr32VPFtFXyusZEXXKdvysGuVe0ZEhu_KWfbj02hSCaY/s400/css-rules-b-skin-blogger-new-template-editor-help.png" width="400" /></a></div>
 
Step 5. Paste just above ]]></b:skin> the following CSS style: 
<blockquote class="tr_bq">
#myGallery { 
width: 100%; 
height: 400px; 
} 
#myGallery img { 
border: 2px solid #52697E; 
} 
a.loading { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDG_67ihDYSqUjVOeWWKVfRA8GB9bxg6-O23QxpkKBG1rag2g6f0EprtFQbd_4tB6bseTQ1orqXK5XL4veNlxky5iwlDWtun3InUEhGylvdcMna9wfIFgiL8wncvsl3RohF4sklGRKztqT/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%; 
}</blockquote>
Step 6. To save the changes, click the Save template button. 
 
Step 7. Finally, go to Layout > Add a Gadget > HTML/Javascript and copy-paste the code below: 
<blockquote class="tr_bq">
<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></blockquote>
Replace the Image URL text with the image addresses that you want to appear on the gallery, considering that the last image is the first to be displayed. And if you want to add this slideshow inside a post, just go to your dashboard and create a New Post, then paste the code in the HTML section. 
That's it! Now, 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.</div>

Blog Design slideshows Spacegallery: image gallery/slideshow made with jQuery

There are many types of galleries for images that can be found on the internet, but we rarely find one showing images so differently like t...