Monday, 22 August 2011
How to make Latest Magic Slideshow™ for blogger/blogspot
Do you like this story?
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.
This post was written by: kashif
For Suggestions and complains email us at pakcompany@yahoo.comTwitter
Subscribe to:
Post Comments (Atom)
0 Responses to “How to make Latest Magic Slideshow™ for blogger/blogspot”
Post a Comment