Today i need to bring you another
flawless Image slideshow for Blogger users. The slide show is easy to add to
your site/blogger blog, looks awesome and has some neat options. The width can
be re-sized to the zone's span you need it put on your blog, subtitles/captions
can likewise be included to the images. Once on your website/blogger blog it
will auto look through your pictures furthermore has controls for the client to
manually scroll images. This will look incredible on Photography Blogs,
Business Blogs or for anybody hoping to show some cool pics.
Keep in mind to Always Back Up Your
Template Before You Make Changes
Step 1. In Your (New Design)
Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template
> Then Edit Html > Now Proceed as demonstrated in the feature Below :
Step 2. Locate the accompanying bit
of code in your websites Html : (Click Ctrl and F for a search bar to help
discover the code
]]></b:skin>
READ: How To get .Gov / .Edu Links Backlinks Free DoFollow
Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>
/* Start Slider Code From http://www.9jaopoints.com/ */
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;} li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;} ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}
} /* End Slider Code From http://www.9jaopoints.com/ */
Step 4. Now simply find the piece of code in your blog HTML field by pressing CTRL F and for the search bar to helpfully find the code.
</html>
Step 5. Now simply copy the code below and paste it directly Above/Before </html>
<!-- Start Slider Code From http://www.9jaopoints.com/ --><script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/><script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $('#my-slideshow').bjqs({'width' : 940,'height' : 340,'showMarkers' : true, 'showControls' : true, 'centerMarkers' : false }); }); </script> <!-- End Slider Code From http://www.9jaopoints.com/ -->
Important - The line of code in
green is the jQuery script, in the event that you already added jQuery to your
layout forget it.
Simply Evacuate The Next/Prev And
Number Controls - You have the alternative to uproot the next/prev buttons,
Number catches or both. In the code above ''showMarkers' :
true,' change to false to remove the number buttons. Change
'showControls' : valid, to false to turn off the next/prev.On
the following line you can see the choice to center the numbers.
The two lines in red and the width
and height. The height is as of now 340px and the width is 940px change them as needed. Remember your pictures
should be the same size as the width and stature you pick here.
Step 6. Simply Save your layout.
That is the Css and Scripts added
now you have to include the html.To have the slider span over
Including
HTML For The Slides
The
HTML for the slides goes in a Html/Javascript device in the cross segment area
as indicated previously.
COPY AND
PASTE code below in your new gadget and save template
<div id="my-slideshow">
<ul class="bjqs">
<li><img title="This is a subtitle." src="http://1.bp.blogspot.com/ - 6VtyHuKWXec/T00nRHDBfKI/AAAAAAAAFwQ/FwyFSdzpq5I/s1600/slider-image1.jpg"/></li>
<li><img title="This is an another subtitle." src="http://1.bp.blogspot.com/ - PpkbSLY_9TQ/T00nR_BmGGI/AAAAAAAAFwY/B-WYpsKXJTM/s1600/slider-image2.jpg"/></li>
<li><img title="This is an another longer subtitle." src="http://2.bp.blogspot.com/ - iywK-OLiBio/T00nPynnhOI/AAAAAAAAFwI/Sic5_siiUb0/s1600/slider-picture 3.jpg"/></li>
<li><img title="This is an another any longer inscription." src="http://1.bp.blogspot.com/ - 07WMvWuPh28/T00nUTHpPZI/AAAAAAAAFwg/zQp89S1-5fY/s1600/slider-image4.jpg"/></li>
<li><img title="This is an another longer subtitle that can be the lenght of the picture or significantly more onto the following line." src="http://2.bp.blogspot.com/ - c5hZdFVFe1E/T00nVcWvScI/AAAAAAAAFwo/t7hX91c07Xc/s1600/slider-image5.jpg"/></li>
</ul>
</div>
drop your kind comment if you find any bug with any of the script
0 comments:
Post a Comment