Latest Magic Slideshow™ for blogger/blogspot ! Very Nice 7

| | , ,

Latest Magic Slideshow™ for blogger/blogspot ! Very Nice





















Follow simple and easy step to adding this slide show to your blog ---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code </head> by CTRL+F key easily.

* Copy below code and paste before </head>

<link rel="stylesheet" type="text/css" href="https://4636338866364619332-a-1802744773732722657-s-sites.googlegroups.com/site/mauganj1/magicslideshow.css" />
<script type="text/javascript" src="http://blogger9.googlecode.com/files/magicslideshow.js"></script>
<script type="text/javascript" src="http://blogger9.googlecode.com/files/magictabs.js"></script>
<style type="text/css">
/*<![CDATA[*/
.MagicSlideshow {
margin-bottom: 30px;
border: 1px solid #557493;
width:430px;
height:323px;
}
.MagicSlideshowThumbnailsContainer {
background-color:#91a1b1;
border-bottom:1px dotted #557493;
padding: 0 3px;
}
.MagicSlideshowThumbnailsContainerStyle {
background:transparent;
}
img.MagicSlideshowImage {
border: none;
}
img.MagicSlideshowThumbnail {
border: 3px solid #91a1b1;
margin: 4px 3px;
background:#3a5874;
}
img.MagicSlideshowThumbnail.highlight {
border: 3px solid #557493;
}
.MagicSlideshowDescription {
line-height: 15px;
background: #3a5874;
padding: 8px 3px 3px 10px !important;
border-top:1px dotted #557493;
}
.MagicSlideshowDescription b {
font-size:24px;
}

/*]]>*/
</style>

* Now find <body> by CTRL+F key.

* Copy below code and paste after <body>

 
<script type="text/javascript">
/*<![CDATA[*/
MagicSlideshow.options={'thumbnail-opacity':1,'effect':'fade','container-opacity':0,'width':430,'height':323}
/*]]>*/
</script>

* Now click to save your blogger Template.

* Again go to your blogger Dashboard and click in design tab.

* Now you are here --->>> Page Element.

* Click in add Gadget which is in your blog sidebar.

* When open new window choose HTML/javascript code from list.

* And when open new blank box copy below code and paste in blank box.

<div class="MagicSlideshow">

            <a rel="http://santabanta.mywapblog.com/files/forester.jpg"><img src="http://santabanta.mywapblog.com/files/forester-small.jpg" alt="TITLE1 HERE"/><span>ADD HERE SHORT DESCRIPTION.</span></a>
            <a rel="http://santabanta.mywapblog.com/files/q7.jpg"><img src="http://santabanta.mywapblog.com/files/q7-small.jpg" alt="TITLE2 HERE"/><span>ADD HERE SHORT DESCRIPTION</span></a>
            <a rel="http://santabanta.mywapblog.com/files/tiguan.jpg"><img src="http://santabanta.mywapblog.com/files/tiguan-small.jpg" alt="TITLE3 HERE"/><span>ADD HERE SHORT DESCRIPTION.</span></a>
            <a rel="http://santabanta.mywapblog.com/files/rx450.jpg"><img src="http://santabanta.mywapblog.com/files/rx450-small.jpg" alt="TITLE4 HERE"/><span>ADD HERE SHORT DESCRIPTION.</span></a>
            <a rel="http://santabanta.mywapblog.com/files/cayenne.jpg"><img src="http://santabanta.mywapblog.com/files/cayenne-small.jpg" alt="TITLE5 HERE"/><span>ADD HERE SHORT DESCRIPTION</span></a>

            <a rel="http://santabanta.mywapblog.com/files/xtrail.jpg"><img src="http://santabanta.mywapblog.com/files/xtrail-small.jpg" alt="TITLE6 HERE"/><span>ADD HERE SHORT DESCRIPTION</span></a>
            <a rel="http://santabanta.mywapblog.com/files/gl.jpg"><img src="http://santabanta.mywapblog.com/files/gl-small.jpg" alt="TITLE7 HERE"/><span>ADD HERE SHORT DESCRIPTION.</span></a>
            <a rel="http://santabanta.mywapblog.com/files/rangerover.jpg"><img src="http://santabanta.mywapblog.com/files/rangerover-small.jpg" alt="TITLE8 HERE"/><span>ADD HERE SHORT DESCRIPTION.</span></a>

        </div>

NOTE:- Remove Highlighetd text from above box with your own ok.

* Now click to save your HTML/Javascript and Drag and drop this box below header and again click to save button now you are done............CHEERS

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Latest Magic Slideshow™ for blogger/blogspot ! Very Nice ~ Twitter FaceBook

7 Responses So Far:

Akhil said...

how to add image in blogger ...before widget title like u r site

Akhil said...

how to add image in blogger befor widget title ....like u r site

Anil Kumar Singh said...

Give me your site template Give me your site template

Anonymous said...

this is very small.
width 430,no change.
how to change?

Anil Kumar Singh said...

Where is width:430px in first code change with your own as like that width:520px

Monk said...

thnx it worked

Monk said...

It just worked thanx by the way I couldn't locate the group of images on any image of my slider as you have.

Categories

Select Your Categories