Friday, January 24, 2014

Advanced Slideshow

 This is tricks which is give how to create slideshow of your blog
Some people have reported problems viewing the slideshow on their computers once it is created. The first 1-2 buttons scroll fine, then skip and return to the first button. If my sample slideshow does that for you and does not scroll the right way after refreshing your screen, then I would suggest that you not follow this tutorial. If you do choose to try making a slideshow,
I would make sure it will work for you with just a couple of buttons before investing all of the time it takes to create a full slideshow. Be sure to refresh your screen a couple of times before chalking up your efforts as unsuccessful.
1. Find which buttons you'd like to use.

2. Copy their HTML codes into an easy to find list. Make sure to put spaces between the codes so that you can easily tell them apart. You can find these codes in the little grab boxes underneath the buttons on the blogs that they are on.

3. Go to customize-->add gadget-->HTML/Javascript.

4. Copy and paste the following code (the exact code used to make the slideshow above) into the big box.

<center><span ><span class="Apple-style-span" style="FONT-WEIGHT: bold"></span></span>
<marquee direction="up" onmouseover="this.stop()"
onmouseout="this.start()" scrollamount="3" bgcolor="#ffffff">

<center><a href="http://www.bdwebrong.blogspot.com"
target="_blank"><img border="0" alt="BD Web Rong"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8K0kaZlAHUho2SAUSQRy2E-K4xTbkb5QvRUc0Q9dyZabsAsop1bzsVMQn9DrdtDJ6iEpLAgK_7dDrDBlfBB41MBKT2Pl9mi0hXbgVATrZ-Wr3Pk0q9cGBfyBDl9qadzAG-nqgJ8niVcU/s640/Capture.jpg"/></a></center>

<center><a href="http://www.bdwebrong.blogspot.com"
target="_blank"><img border="0" alt="BD Web Rong"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8K0kaZlAHUho2SAUSQRy2E-K4xTbkb5QvRUc0Q9dyZabsAsop1bzsVMQn9DrdtDJ6iEpLAgK_7dDrDBlfBB41MBKT2Pl9mi0hXbgVATrZ-Wr3Pk0q9cGBfyBDl9qadzAG-nqgJ8niVcU/s640/Capture.jpg"/></a></center>


</marquee></center>



5. Replace my button's codes with each button that you would like to include in your slideshow. If you would like to add more buttons, simply add the button's code to the list, making sure to put it before </marquee></center>.
Ex: The HTML of one of my buttons looks like this:

<center><a href="http://www.bdwebrong.blogspot.com"
target="_blank"><img border="0" alt="BD Web Rong"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8K0kaZlAHUho2SAUSQRy2E-K4xTbkb5QvRUc0Q9dyZabsAsop1bzsVMQn9DrdtDJ6iEpLAgK_7dDrDBlfBB41MBKT2Pl9mi0hXbgVATrZ-Wr3Pk0q9cGBfyBDl9qadzAG-nqgJ8niVcU/s640/Capture.jpg"/></a></center>

You'll notice I repeated it several times so that you could see the slideshow effect. Just highlight my code and paste each button you want into your slideshow once.

6. Save.

You may have to go in to the code and delete the spaces in between the buttons, depending upon the desired effect. You can insert &nbsp in between each button to add a space.

You can change the background color of your slideshow to match your blog. Simply change the #ffffff (at the top) to whatever you wish it to be. You can find a hex code for just about any color by clicking here or by installing ColorZilla if you have Firefox.

Are some of your buttons not centered? Add <center>to the beginning of the individual button's code and </center>to the end of each button code. Most buttons are automatically centered.

This can be a little complicated, so take your time. Remember, if you don't get this on the first try, delete everything and start fresh. It's so much easier to begin again than to scrutinize every character trying to discover what was left out.

No comments:

Post a Comment

Thanks