Sunday 12 August 2012

Latest Magic Slideshow™ for blogger/blogspot ! Very Nice

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.

No comments: