Attractive Jquery Image Slider Widget For Blogger Free Download andrey пятница, 24 апреля 2015 г. No Comment

Image slider is helpful for every successful blog to show their latest highlight by using images. In Image sliders you can display any related images to your blog which, given better effect on your blog also. Today I am going to share outstanding JavaScript Image Slider for blogger blog. Which is made by MYBLOGGERTRICKS.COM but I make some changes and customize it for using it on blogger easily. The main features of this slider is it has an image Automatic sliding effect which makes this slider beautiful and attractive. Another great feature of this slider is it is highly customizable so that to edit it as you wish and which will perfectly suit to your blog. In this Image Slider you can add 5 images with their respective Titles, Descriptions and post URL also. This slider is very easy to Install/Integrate on blogger blog. This is really an awesome image slidehow and work with all Blogger templates. Now You can use this slider on your blogger blog easily by following these steps below.

• Read Also : Best Blogger Widgets & Gadgets
• Read Also : On Page SEO Techniques
• Read Also : Best Link Building Strategies

1. Go To Blogger >> Template >> Edit HTML
2. Backup your template
3. Search for
4. Just above it pastes the jQuery code in this page -> Slider jQuery Code
5. Then search for]] >:skin>
6. Just above it paste the CSS code below

/*-------------------- MBT jQuery Image Slider -------------*/.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#787878;font:bold 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#000;text-decoration:none;}
.fp-title a:hover{color:#0080fF;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcHmJVn7k0FXcEnO_7ZuZoTK-wfJlNf9v66ZiOdEB14iZu4tmDoUllwxu8skLVTy0Ovr3YT-fEv_KZQsJwHnxOD1aBeDolHjBfkKDi-JR5e_pYrPhbOw0T0qmqCRsKrqybDF28715U9o/s1600/featured-pager.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;}
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JDrBuEPr59ck1nRRyEno_O5yrXKfKwerv32K_O60-nkCRwhyphenhyphenKpUyD5fZvcsq6v2CU5E0y5UYeWVJ1iBfNoGzJ-PPKe7Z3OtzYgK-xKf-t1GwpBTkVpFJxJj5tmva-z6ygcM-1CFkfgg/s1600/featured-prev.png) top left no-repeat;}
.fp-prev:hover{opacity:1;}
.fp-prev:active{opacity:0.7;}
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfhcS-g00X7nQ7Hoe5gnPf4UHOXsaA8u0Jnp01EkfMOEnntqtOnzZ5-5fZ50hOQOCsBAmkUKaNRawW6gRKMnMyWAkQKPTCz_OMiPe4-c88oCLLyV2-azjs-iOjbWsEIzpjSvu8UQmrvlo/s1600/featured-next.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}

 7.   Now Search for this,   

<div id='main-wrapper'>

Hint: This code is located near <div id='content-wrapper'>
PS: In this part most of you will appear problems as the coding for each template differ. If you could not find this code, then do not panic and simply post your Blog URL in the comments.
   8.   And just below it add the HTML code below,

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='featuredposts clearfix'><div class='fp-slides'><div class='fp-post'>
<div class='fp-thumbnail'><img src='ADD IMAGE-1 LINK HERE'/>div>

WRITE POST TITLE HERE...

WRITE POST DESCRIPTION HERE...

div>

<div class='fp-thumbnail'><img src='ADD IMAGE-2 LINK HERE'/>div>

WRITE POST TITLE HERE...h3> > WRITE POST DESCRIPTION HERE...

div>

<div class='fp-thumbnail'><img src='ADD IMAGE-3 LINK HERE'/>div>

WRITE POST TITLE HERE...h3> > WRITE POST DESCRIPTION HERE...

div>

<div class='fp-thumbnail'><img src='ADD IMAGE-4 LINK HERE'/>div>

WRITE POST TITLE HERE...h3> > WRITE POST DESCRIPTION HERE...

div>

<div class='fp-thumbnail'><img src='ADD IMAGE-5 LINK HERE'/>div>

WRITE POST TITLE HERE...h3> > WRITE POST DESCRIPTION HERE...

div>

      

<span class='fp-pager'/>           
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
div>
     
div>
b:if>:if>

Customize it : 

Replace ADD-POST-URL-1-HERE  with the URL of your post page
Replace ADD-IMAGE-1-LINK-HERE with the image link of your post page
Replace POST-TITLE HERE-1 with the title of your post page
Replace POST-DESCRIPTION-HERE-1 With the description of your post page

For Second Image Slider:
Replace ADD-POST-URL-2-HERE with the URL of your post page
Replace ADD-IMAGE-2-LINK-HERE with the image link of your post page
Replace POST-TITLE HERE-2 with the title of your post page
Replace POST-DESCRIPTION-HERE-2 With the description of your post page

For Third Image Slider:
Replace ADD-POST-URL-3 HERE with the URL of your post page
Replace ADD-IMAGE-3-LINK-HERE with the image link of your post page
Replace POST-TITLE HERE-3 with the title of your post page
Replace POST-DESCRIPTION-HERE-3 With the description of your post page

For Fourth Image Slider:
Replace ADD-POST-URL-4-HERE with the URL of your post page
Replace ADD-IMAGE-4-LINK-HERE with the image link of your post page
Replace POST-TITLE HERE-4 with the title of your post page
Replace POST-DESCRIPTION-HERE-4 With the description of your post page

For Fifth Image Slider:
Replace ADD-POST-URL-5-HERE with the URL of your post page
Replace ADD-IMAGE-5-LINK-HERE with the image link of your post page
Replace POST-TITLE HERE-5 with the title of your post page
Replace POST-DESCRIPTION-HERE-5 With the description of your post page

   9. Now Save your template

Image slider is helpful for every successful blog to show their latest highlight by using images. In Image sliders you can display any related images to your blog which, given better effect on your blog also. Today I am going to share outstanding JavaScript Image Slider for blogger blog. Which is made by MYBLOGGERTRICKS.COM but I make some changes and customize it for using it on blogger easily. The main features of this slider is it has an image Automatic sliding effect which makes this slider beautiful and attractive. Another great feature of this slider is it is highly customizable so that to edit it as you wish and which will perfectly suit to your blog. In this Image Slider you can add 5 images with their respective Titles, Descriptions and post URL also. This slider is very easy to Install/Integrate on blogger blog. This is really an awesome image slidehow and work with all Blogger templates. Now You can use this slider on your blogger blog easily by following these steps below.

• Read Also : Best Blogger Widgets & Gadgets
• Read Also : On Page SEO Techniques
• Read Also : Best Link Building Strategies

1. Go To Blogger >> Template >> Edit HTML
2. Backup your template
3. Search for
4. Just above it pastes the jQuery code in this page -> Slider jQuery Code
5. Then search for]] >:skin>
6. Just above it paste the CSS code below

/*-------------------- MBT jQuery Image Slider -------------*/.featuredposts{border:1px solid #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;}
.fp-slides{}
.fp-post{padding:13px;}
.fp-thumbnail{border:3px solid #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-thumbnail:hover{border:3px solid #CAC9C9; width:580px;height:266px;margin-bottom:10px;overflow:hidden;}
.fp-title{color:#787878;font:bold 14px  Arial, Helvetica, Sans-serif;padding:0 0 4px 0;margin:0; text-transform:uppercase;}
.fp-title a{color:#000;text-decoration:none;}
.fp-title a:hover{color:#0080fF;text-decoration:none;}
.fp-label{color:#504D4D;margin:15px 15px 0 15px;padding:0;text-transform:uppercase;font:bold 16px/16px Arial,Helvetica,Sans-serif;}
.fp-post p{color:#504D4D;padding:0;margin:0;font:10px Arial,Helvetica,Sans-serif;height:32px;overflow:hidden;}
.fp-more,.fp-more:hover{color:#F77C04;font-weight:bold;}
.fp-nav{width:590px;padding:0px 10px;height:14px;}
.fp-pager a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcHmJVn7k0FXcEnO_7ZuZoTK-wfJlNf9v66ZiOdEB14iZu4tmDoUllwxu8skLVTy0Ovr3YT-fEv_KZQsJwHnxOD1aBeDolHjBfkKDi-JR5e_pYrPhbOw0T0qmqCRsKrqybDF28715U9o/s1600/featured-pager.png);cursor:pointer;margin:3px 6px 0 0;padding:0;height:10px;width:10px;display:block;float:left;overflow:hidden;text-indent:-999px;background-position:0 0;}
.fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -110px;}
.fp-prev{float:right;margin-right:4px;width:15px;height:17px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JDrBuEPr59ck1nRRyEno_O5yrXKfKwerv32K_O60-nkCRwhyphenhyphenKpUyD5fZvcsq6v2CU5E0y5UYeWVJ1iBfNoGzJ-PPKe7Z3OtzYgK-xKf-t1GwpBTkVpFJxJj5tmva-z6ygcM-1CFkfgg/s1600/featured-prev.png) top left no-repeat;}
.fp-prev:hover{opacity:1;}
.fp-prev:active{opacity:0.7;}
.fp-next{float:right;width:15px;height:17px;margin-left:4px;opacity:0.7;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfhcS-g00X7nQ7Hoe5gnPf4UHOXsaA8u0Jnp01EkfMOEnntqtOnzZ5-5fZ50hOQOCsBAmkUKaNRawW6gRKMnMyWAkQKPTCz_OMiPe4-c88oCLLyV2-azjs-iOjbWsEIzpjSvu8UQmrvlo/s1600/featured-next.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}

 7.   Now Search for this,   

<div id='main-wrapper'>

Hint: This code is located near <div id='content-wrapper'>
PS: In this part most of you will appear problems as the coding for each template differ. If you could not find this code, then do not panic and simply post your Blog URL in the comments.
   8.   And just below it add the HTML code below,

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='featuredposts clearfix'><div class='fp-slides'><div class='fp-post'>
<div class='fp-thumbnail'><img src='ADD IMAGE-1 LINK HERE'/>div>

WRITE POST TITLE HERE...

WRITE POST DESCRIPTION HERE...

div>

<div class='fp-thumbnail'><img src='ADD IMAGE-2 LINK HERE'/>div>

WRITE POST TITLE HERE...h3> > WRITE POST DESCRIPTION HERE...

div>

<div class='fp-thumbnail'><img src='ADD IMAGE-3 LINK HERE'/>div>

WRITE POST TITLE HERE...h3> > WRITE POST DESCRIPTION HERE...

div>

<div class='fp-thumbnail'><img src='ADD IMAGE-4 LINK HERE'/>div>

WRITE POST TITLE HERE...h3> > WRITE POST DESCRIPTION HERE...

div>

<div class='fp-thumbnail'><img src='ADD IMAGE-5 LINK HERE'/>div>

WRITE POST TITLE HERE...h3> > WRITE POST DESCRIPTION HERE...

div>

      

<span class='fp-pager'/>           
<a class='fp-next' href='#fp-next'/>
<a class='fp-prev' href='#fp-prev'/>
div>
     
div>
b:if>:if>

Customize it : 

Replace ADD-POST-URL-1-HERE  with the URL of your post page
Replace ADD-IMAGE-1-LINK-HERE with the image link of your post page
Replace POST-TITLE HERE-1 with the title of your post page
Replace POST-DESCRIPTION-HERE-1 With the description of your post page

For Second Image Slider:
Replace ADD-POST-URL-2-HERE with the URL of your post page
Replace ADD-IMAGE-2-LINK-HERE with the image link of your post page
Replace POST-TITLE HERE-2 with the title of your post page
Replace POST-DESCRIPTION-HERE-2 With the description of your post page

For Third Image Slider:
Replace ADD-POST-URL-3 HERE with the URL of your post page
Replace ADD-IMAGE-3-LINK-HERE with the image link of your post page
Replace POST-TITLE HERE-3 with the title of your post page
Replace POST-DESCRIPTION-HERE-3 With the description of your post page

For Fourth Image Slider:
Replace ADD-POST-URL-4-HERE with the URL of your post page
Replace ADD-IMAGE-4-LINK-HERE with the image link of your post page
Replace POST-TITLE HERE-4 with the title of your post page
Replace POST-DESCRIPTION-HERE-4 With the description of your post page

For Fifth Image Slider:
Replace ADD-POST-URL-5-HERE with the URL of your post page
Replace ADD-IMAGE-5-LINK-HERE with the image link of your post page
Replace POST-TITLE HERE-5 with the title of your post page
Replace POST-DESCRIPTION-HERE-5 With the description of your post page

   9. Now Save your template

Tweet

by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

Tags: Без рубрики