Wednesday, December 9, 2009

Make Image Slider for Blogger


image-slider

Customize your blog to become more better than usual by adding Image Slider. The slider can make your blog trendy and stylish. This Image Slider also can make the visitors who come to your blog feel very attractive as it is one of the famous fashion for the blogger(blog). I bet you all will like this things after you make your own Image Slider after you follow the steps below.


1. Use Ctrl+F to find the </head> code.

2. Paste this code below the </head> code:




3. Then find this ]]></b:skin> code

4. Paste this code above the  ]]></b:skin>  code:




5. Then, click Add a gadget at the Page Elements and choose HTML/JavaScript

6. And add this code in it:

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- Picture 1 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-y_OIjOQyLRLb1ImgZsOXnZI0XSswLeFvDjS8CLsbaHu6bfiEIVzmMxpVwG1DIvkA73zlQfhAFHvvl4xieR0vP_GXPg20I6Lp0ajuwIjOQDKZo-W8f9T_L1GX_Nk5scWw-OTW5NTlYY/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
</div>
<!-- Picture 1 end -->

<!-- Picture 2 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3vO5qgK1AhQGqzyz-p-75fFVBo5dO2O4-8IDXcCqFaAtZTwVremYFNAPaiGJuVGD-dZsEe_adCEhA-eeAWUFMT8DEYaYyMMnHeu5f82Zs9IIX77DUQSi7ZROgO4vKJzAie09FC0J3Mg/s400/simple+Blog+Template.png" height="110"/> </a>
</div>
<!-- Picture 2 end -->

<!-- Picture 3 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="http://img2.pict.com/91/27/d5/ad3dbaa7835b554ec0d06a4e0c/XG7ZL/800/woork2520257c2520web2520design25.png" height="110"/> </a>
</div>
<!-- Picture 3 end -->

<!-- Picture 4 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WB76x3CEoAyg8MPTEWZAA_QfAUFZ7QmLDnD_0zpNhs5bK1HP3ctKqB3szz170RQKIo_osXp0R67Oy63SBVSzP7qcQDKOCbfFw4CA-HIs5MmqDaSN72u28l_dRVbg_fPKTwKM244ggpg/s400/Preview.jpg" height="110"/> </a>
</div>
<!-- Picture 4 end -->

<!-- Picture 5 -->
<div class="panel">
<a href="http://www.blogging-style.blogspot.com" target="blank" title="Blogging-style"> <img width="160" alt="Blogging-style" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WB76x3CEoAyg8MPTEWZAA_QfAUFZ7QmLDnD_0zpNhs5bK1HP3ctKqB3szz170RQKIo_osXp0R67Oy63SBVSzP7qcQDKOCbfFw4CA-HIs5MmqDaSN72u28l_dRVbg_fPKTwKM244ggpg/s400/Preview.jpg" height="110"/> </a>
</div>
<!-- Picture 5 end -->

</div></div></div>



Change the links, images url, the titles with yours...
  • Links = Red colour
  • Image url = Yellow colour
  • Titles = Blue colour
You just keep on adding links to in this format to any number you want as you can add thousand of images and posts in this format, no limit to it.

Please leave your comments on this post...

12 comments:

Fær.han/Unown F/Gyan on December 22, 2009 at 4:06 AM said...

hmmm lambat x loading kalo guna image slider nie?

Syarhan on December 22, 2009 at 7:18 PM said...

mana ada lambat...biasa jer bro..TQ kerana beri aku komen. komen la aku lagi bro

Unknown on December 31, 2009 at 2:13 PM said...

Nice info. Will be very useful for me

Syarhan on December 31, 2009 at 7:37 PM said...

to amrihdwf, thanks for your comment...

takycardia on April 29, 2010 at 2:56 AM said...

I've got problems with the css, it doesn't want to work. An invalid XML character (Unicode: 0x3) was found in the CDATA section.

takycardia on April 29, 2010 at 3:05 AM said...

Problem solved XD i had 2 copies of jquery...

Ateret Sonya on August 14, 2011 at 5:42 PM said...

it appears in a vertical of images how do i get to be horizontal?

Sangram Nandkhile on September 14, 2011 at 1:18 PM said...

Sorry, but this didnt work...
what can be the problem ?

petualang-web on October 13, 2011 at 11:40 PM said...

i will try thanks

صور فيس بوك on April 11, 2013 at 11:50 PM said...

that i amizing
can i add text on slider ?

TECH UPDATE on April 14, 2018 at 8:47 AM said...

very nice information and these information is also very useful to you How to create Banner with scrolling using Html in 1 minute

TECH UPDATE on April 14, 2018 at 8:48 AM said...

very nice information and these information is also very useful to you How to create Banner with scrolling using Html in 1 minute

Post a Comment

 

Blogger Tips and Style Copyright © 2009 Community is Designed by Free Blogger Template