Create A Simple JQuery Image Slideshow For Your Blog


Image slideshow can give a glance of the site featured contents in your blog. With featured contents appear at the first time visitors open your homepage, Clicks on your featured posts will be increased because people will have a chance to see them before the other posts.

Please do the following steps to create this slideshow :

1. Inserting CSS and scripts using the template's HTML editor. 

  • Go to Dashboard > Template. 
  • Click Edit HTML > Proceed. 
  • Use Ctrl + F to search for this code :
]]></b:skin>
  • Copy and paste the below codes BEFORE it : 
/* Start Slider Code From http://www.digita7seven.blogspot.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.digita7seven.blogspot.com/ */
  •   Now use Ctrl + F again to search for this code : 
</head>
  • Copy and paste the below codes BEFORE it :
<!-- Start Slider Code From http://www.digita7seven.blogspot.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(){
$(&#39;#my-slideshow&#39;).bjqs({
&#39;width&#39; : 940,
&#39;height&#39; : 340,
&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- End Slider Code From http://www.digita7seven.blogspot.com/ -->
* Want to animate your blockquote like this? Create one using the codes from this post : Create Blockquote With Animated Mouse Hover Effect

  • To remove the number button, Change this code to FALSE : &#39;showMarkers&#39; : true
  • To remove the next/prev button, Change this code to FALSE : &#39;showControls&#39; : true
  • Save your template.

2. Go to LAYOUT - Click ADD A GADGET - Choose HTML/Java Script widget.

Copy paste the below codes into the HTML/Java Script widget box :

<div id="my-slideshow">
<ul class="bjqs">
<li><img title="YOUR TITLE" src="YOUR IMAGE LINK"/></li>
<li><img title="YOUR TITLE" src="YOUR IMAGE LINK"/></li>
<li><img title="YOUR TITLE" src="YOUR IMAGE LINK"/></li>
<li><img title="YOUR TITLE" src="YOUR IMAGE LINK"/></li>
<li><img title="YOUR TITLE" src="YOUR IMAGE LINK"/></li>
</ul>
</div>

    • Replace the above marked with red and Save your widget. 


Also from Amazon :   
      1,000 Creative Writing Prompts : Ideas for Blogs, Scripts, Stories and More
      When you finally have the opportunity to sit down and write, you want absolutely nothing to get in your way. In an ideal world, the ideas would flow from head to pen quickly and easily. You would have thousands of ideas at your fingertips. This new idea-generating book makes that dream a reality.

      Becoming A Blogger: How to Start a Blog This Afternoon and Make Money From Home For Years to Come (Make Money Online)
      Some bloggers make small, part-time incomes that supplement their full-time job. Others are making blogging their sole pursuit and earning a huge income each month. Blogging can be a big thing or a small thing depending upon how much time and energy you invest into your new venture.

      Other Great Stuffs : 

      Celebrity Blogging
      Discover The Secrets To Setting Up Your Own Personal Blog For MASSIVE Brand Building... And Build A Name For Yourself That People Will Know, Like And Trust!

      If You Have A Few Hours Per Week, Then We Can Show You How To Earn Significant Income With Your Own Blog! Step by Step. Click to find out !
      Know how to find a great market niche and write a successful blog? Great, you don’t need the steps within each of these components. Know how to design the web page and overcome technical difficulties? No? No problem, Here is a deeper level of instruction for that!

      Struggling to make money online? It's about to get quicker and easier than ever before...Click here !
      How JUST One Of The Blogs I Create During By The Forth Month Has Already Netted Me $2,537.29

      1500 MB of disk space, 100 GB of data transfer, PHP and MySQL support with no restrictions, cPanel control panel, Website Builder, Absolutely no advertising ! Join now : CLICK HERE !

      Read books on your computer or other mobile devices with FREE Kindle Reading Apps.



      ?max-results=10"> ');

      ?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");