Hey guys, I found it from other web but it wasn’t working, because you have to upload it in your server, and probably most of don’t have it so I have hosted it on my web and I made such a beautiful slide show by using others script. Here is link to see an examples. http://indianmonsters-exampales.blogspot.com/
First of all, you have to upload your images. Before I have posted tutorial “How to Upload image on http://imageshack.us”
This is content # 1(this step are for content # 1, main steps are down)
1. Change pink color name with your choice name o give the name of Image
2. Change green color description with your choice description to describe your image
3. Blue color is link which will redirect visitor when they click on that image.
4. Red color is link of your image which you want.
<div id=”myGallery”>
<div class=”imageElement”>
<h3>Blogger</h3>
<p>Blogger Tutorial</p>
<a href=”http://indianmonsters.blogspot.com” class=”open” title=”Click here”></a>
<img src=”http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800” class=”full”/>
<img src=”http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800” class=”thumbnail”/>
</div>
<div class=”imageElement”>
<h3>Blogger Templates</h3>
<p>Get Blogger templates !</p>
<a href=”http://indianmonsters.blogspot.com” class=”open” title=”Click here”></a>
<img src=”http://img352.imageshack.us/img352/8232/paraheaderwv1.png?imgmax=800” class=”full”/>
<img src=”http://img352.imageshack.us/img352/8232/paraheaderwv1.png?imgmax=800” class=”thumbnail”/>
</div>
<div class=”imageElement”>
<h3>Software</h3>
<p>Get software for free here!</p>
<a href=”http://indianmonsters.blogspot.com” class=”open” title=”Click here”></a>
<img src=”http://img148.imageshack.us/img148/6201/gamheaderpf6.png?imgmax=800” class=”full”/>
<img src=”http://img148.imageshack.us/img148/6201/gamheaderpf6.png?imgmax=800” class=”thumbnail”/>
</div>
<div class=”imageElement”>
<h3>Wallpapers</h3>
<p>Nice wallpapers !</p>
<a href=”http://indianmonsters.blogspot.com” class=”open” title=”Click here”></a>
<img src=”http://img149.imageshack.us/img149/3273/gamesheaderpv6.png?imgmax=800” class=”full”/>
<img src=”http://img149.imageshack.us/img149/3273/gamesheaderpv6.png?imgmax=800” class=”thumbnail”/>
</div>
<div class=”imageElement”>
<h3>Blogging</h3>
<p>Learning</p>
<a href=”http://indianmonsters.blogspot.com” class=”open” title=”Click here”></a>
<img src=”http://img352.imageshack.us/img352/4818/pnggamesheaderze7.png?imgmax=800” class=”full”/>
<img src=”http://img352.imageshack.us/img352/4818/pnggamesheaderze7.png?imgmax=800” class=”thumbnail”/>
</div>
<div class=”imageElement”>
<h3>Blogger Hack</h3>
<p>Blogger Tricks!</p>
<a href=”http://indianmonsters.blogspot.com” class=”open” title=”Click here”></a>
<img src=”http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800” class=”full”/>
<img src=”http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800” class=”thumbnail”/>
</div>
<script type=”text/javascript”>
function startGallery() {
var myGallery = new gallery($(‘myGallery’), {
timed: true
});
}
window.addEvent(‘domready’, startGallery);
</script>
</div>
Content # 2:-
<script src=’http://www.thetricks.net/blogger/indianmonsters1.js’ type=’text/javascript’/>
Here step to do it.
1. Login to your blogger with your Google id.
2. Click Layout then click Edit Html.
3. find the following code. ]]></b:skin> and Copy blow code before it.
{width: 590px;height: 200px;z-index: 5;}
#flickrGallery
{width: 500px;height: 334px;}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{display: none;}
.jdGallery
{overflow: hidden;position: relative;}
.jdGallery img
{border: 0;margin: 0;}
.jdGallery .slideElement
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url(‘http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOO5Za74I/AAAAAAAAAbc/w1cX7FKk97Y/loading-bar-black_thumb%5B1%5D.gif?imgmax=800′);
}
.jdGallery .loadingElement
{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url(‘http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOO5Za74I/AAAAAAAAAbc/w1cX7FKk97Y/loading-bar-black_thumb%5B1%5D.gif?imgmax=800′);}
.jdGallery .slideInfoZone
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 50px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}
* html .jdGallery .slideInfoZone
{bottom: -1px;}
.jdGallery .slideInfoZone h2
{padding: 7px 10px 2px 10px;font-size: 12px;margin: 0;font-weight: bold;color: #ffffff;text-transform: uppercase;background: #111111;letter-spacing:0em;}
.jdGallery .slideInfoZone p
{font-size: 12px;margin: 2px 5px;color: #fff;padding: 0px 0px 0px 5px;font-family:arial;}
.jdGallery div.carouselContainer
{position: absolute;height: 135px;width: 100%;z-index: 10;margin: 0px;left: 0;top: 0;}
.jdGallery a.carouselBtn
{position: absolute;bottom: 0;right: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;}
.jdGallery .carousel
{position: absolute;width: 100%;margin: 0px;left: 0;top: 0;height: 115px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}
.jdExtCarousel
{overflow: hidden;position: relative;}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{position: absolute;width: 100%;height: 78px;top: 10px;left: 0;overflow: hidden;}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{position: relative;}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{cursor: pointer;background: #000;background-position: center center;float: left;border: solid 1px #fff;}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{margin-bottom: 10px;}
.jdGallery .carousel .label, .jdExtCarousel .label
{font-size: 13px;position: absolute;bottom: 5px;left: 10px;padding: 0;margin: 0;}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{font-size: 10px;position: absolute;bottom: 5px;right: 10px;padding: 1px 2px;margin: 0;background: #222;border: 1px solid #888;cursor: pointer;}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{color: #b5b5b5;}
.jdGallery a
{font-size: 100%;text-decoration: none;color: inherit;}
.jdGallery a.right, .jdGallery a.left
{position: absolute;height: 99%;width: 25%;cursor: pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;}
* html .jdGallery a.right, * html .jdGallery a.left
{filter:alpha(opacity=50);}
.jdGallery a.right:hover, .jdGallery a.left:hover
{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.jdGallery a.left
{left: 0;top: 0;background: url(‘http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOSD0HNeI/AAAAAAAAAbk/yGPQEEfCcDA/fleche1-1_thumb%5B1%5D.png?imgmax=800′) no-repeat center left;}
* html .jdGallery a.left { background: url(‘http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOSD0HNeI/AAAAAAAAAbk/yGPQEEfCcDA/fleche1-1_thumb%5B1%5D.png?imgmax=800′) no-repeat center left; }
.jdGallery a.right
{right: 0;top: 0;background: url(‘http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOUynKksI/AAAAAAAAAbs/v7o0XgwYdTg/fleche2-1_thumb%5B1%5D.png?imgmax=800′) no-repeat center right;}
* html .jdGallery a.right { background: url(‘http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOUynKksI/AAAAAAAAAbs/v7o0XgwYdTg/fleche2-1_thumb%5B1%5D.png?imgmax=800′) no-repeat center right; }
.jdGallery a.open
{left: 0;top: 0;width: 100%;height: 100%;}
.withArrows a.open
{position: absolute;top: 0;left: 25%;height: 99%;width: 50%;cursor: pointer;z-index: 10;background: none;-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.withArrows a.open:hover { background: url(‘http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOXmTl_xI/AAAAAAAAAb0/GLqpxNapKAg/open_thumb.gif?imgmax=800′) no-repeat center center; }
* html .withArrows a.open:hover { background: url(‘http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOXmTl_xI/AAAAAAAAAb0/GLqpxNapKAg/open_thumb.gif?imgmax=800′) no-repeat center center;filter:alpha(opacity=80); }
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{z-index: 15;position: absolute;top: 0;left: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #333;color: #fff;cursor: pointer;opacity: .4;-moz-opacity: .4;-khtml-opacity: 0.4;filter:alpha(opacity=40);}
.jdGallery .gallerySelector
{z-index: 20;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;}
.jdGallery .gallerySelector h2
{margin: 0;padding: 10px 20px 10px 20px;font-size: 20px;line-height: 30px;color: #fff;}
.jdGallery .gallerySelector .gallerySelectorWrapper
{overflow: hidden;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{margin-left: 10px;margin-top: 10px;border: 1px solid #888;padding: 5px;height: 40px;
color: #fff;cursor: pointer;float: left;}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{background: #333;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{background: #000;background-position: center center;float: left;border: none;width: 40px;height: 40px;margin-right: 5px;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;color: #aaa;}
.status-msg-wrap{
display:none;
}
–></style>
4. Copy the content # 2 and paste it immediately before </head>
5. Save templates.
6. Click layout and click page element then Add gadget.
7. Select HTML/JavaScript option.
8. Copy content # 1 and paste it in it.
9. Save it.
10. You are done
Good Luck…..!
{ 1 comment… read it below or add one }
thx. for the wonderful and easy installation tutorial, I really appreciate it. I just put it on one of my new blogs at: http://hypetrak.blogspot.com