In this Image Slider yous tin privy add together five images amongst at that spot respective Titles, Descriptions, Images together with Post URL. This slider has a forwards together with backward tool which allows your visitors yous cause got quick hold off at the featured posts.So instead of chatting, permit us start rolling our fingers on Attractive jQuery Image Slider For Blogger. But showtime I know yous would dear to preview The Widget so showtime run into the demo
Adding jQuery Of Image Slider inwards Blogger:
To insert slider inwards your weblog practice equally follows.- Go To Blogger.com >> Your Blog
- Now Template >> Back up your Template incase whatsoever affair goes wrong
- Now afterward taking Backup >> Edit Html >> Proceed
- Now Search For </head> (You tin privy search past times pressing CTRL+F)
- When yous observe it Just higher upward it Paste the JQuery Code >> Download Code From Mediafire Or Download Jquery Directly
- Now afterward pasting the jQuery Code Press Save Template button
Adding Style Sheet Css Of Image Slider inwards Blogger:
Now nosotros volition insert Style sail CSS inwards blogger template.
- Go to Blogger.com >> Your Blog
- Now Template >> Edit Html >> Proceed
- Now Search for ]]></b:skin> together with just higher upward it glue the next code.
/*-------------------- MBL jQuery Image Slider -------------*/.featuredposts{border:1px company #E9E7DE;width:608px;background:#FFF;margin:0 0 10px 0;height:400px;overflow:hidden;} .fp-slides{} .fp-post{padding:13px;} .fp-thumbnail{border:3px company #dddddd; width:580px;height:266px;margin-bottom:10px;overflow:hidden;} .fp-thumbnail:hover{border:3px company #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/AVvXsEhyJpIPdNKMK3goW0GiPWF56uU3HiZ-1CYmYTBIX4mxIr9KFI68KZ_eNDE9e69kQO0jOMtVsWpopaZbtDNM2jHOIUuAvguBd-rNPavLx4x5jkyNKmmsiRiknvmz9Xf6p78IE-7U3_aJ4d0/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/AVvXsEikJpeV8g_DCDnOxfYpF_CtcYljwks6wsc2aN0-rjLuy1eUvLJy3qe8ga3LGFRNOLr6Nu24dQOwQWhhro4KZupl-tE-MC5KSui7DembXFfAMFkpZdmU-ojI08c-kQNSqbfUFU9mIqnF6Oo/s1600/featured-prev.png) plough over 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/AVvXsEhN0rTUIIAfzdhGG1OLaxWiuEwaU8tueUmm0ROQhUwQ5NqAs2dMcJq7ZEqybqPLknS2Yrm75tQ-AUw9beaw0Bjj4suTuzc3mVZtdtGE6294kBNMB-npUBtgy2Opl1WMUYZA1SuUd71LUWU/s1600/featured-next.png;) plough over left no-repeat} .fp-next:hover{opacity:1;} .fp-next:active{opacity:0.7;}
- Now After pasting the mode sail code just press Save Template.
Adding The Slider To Blogger Template:
Now nosotros volition insert the Slider inwards our blogger template.
- Now Go To Blogger.com >> Your Blog
- Then Template >> Edit Html >> Proceed
- Now inwards the template search for
<div id='main-wrapper'>
Hint:In the Template yous tin privy Find this code near <div id='content-wrapper'>
Note: This is the nearly of import business office of our tutorial if yous confront whatsoever occupation together with so just piece of work out your weblog url inwards comment below together with nosotros volition solve your problem
- And Just below it <div id='main-wrapper'> paste the next code
- Just below it <div id='main-wrapper'> paste the next code
<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'><a href=' ADD-POST-URL-1-HERE '><img src=' ADD-IMAGE-1-LINK-HERE '/></a></div><h3 class='fp-title'><a href=' ADD-POST-URL-1-HERE '> POST-TITLE HERE-1 </a></h3> <p> POST-DESCRIPTION-HERE-1 </p> </div><div class='fp-post'> <div class='fp-thumbnail'><a href=' ADD-POST-URL-2-HERE '><img src=' ADD-IMAGE-2-LINK-HERE '/></a></div> <h3 class='fp-title'><a href=' ADD-POST-URL-2-HERE '> POST-TITLE HERE-2 </a></h3> <p> POST-DESCRIPTION-HERE-2 </p> </div>
<div class='fp-post'> <div class='fp-thumbnail'><a href=' ADD-POST-URL-3-HERE '><img src=' ADD-IMAGE-3-LINK-HERE '/></a></div> <h3 class='fp-title'><a href=' ADD-POST-URL-3-HERE '> POST-TITLE HERE-3 </a></h3> <p> POST-DESCRIPTION-HERE-3 </p> </div>
<div class='fp-post'> <div class='fp-thumbnail'><a href=' ADD-POST-URL-4-HERE '><img src=' ADD-IMAGE-4-LINK-HERE '/></a></div> <h3 class='fp-title'><a href=' ADD-POST-URL-4-HERE '> POST-TITLE HERE-4 </a></h3> <p> POST-DESCRIPTION-HERE-4 </p> </div>
<div class='fp-post'> <div class='fp-thumbnail'><a href=' ADD-POST-URL-5-HERE '><img src=' ADD-IMAGE-5-LINK-HERE '/></a></div> <h3 class='fp-title'><a href=' ADD-POST-URL-5-HERE '> POST-TITLE HERE-5 </a></h3> <p> POST-DESCRIPTION-HERE-5 </p> </div></div>
<div class='fp-nav clearfix'> <span class='fp-pager'/> <a class='fp-next' href='#fp-next'/> <a class='fp-prev' href='#fp-prev'/> </div> </div>
</b:if></b:if>
Customization:
For First Image Slider:
Replace ADD-POST-URL-1-HERE with the URL of your post
Replace ADD-IMAGE-1-LINK-HERE with the picture link of your post
Replace POST-TITLE HERE-1 with the championship of your post
Replace POST-DESCRIPTION-HERE-1 With the description of your post
For Second Image Slider:
Replace ADD-POST-URL-2-HERE with the URL of your post
Replace ADD-IMAGE-2-LINK-HERE with the picture link of your post
Replace POST-TITLE HERE-2 with the championship of your post
Replace POST-DESCRIPTION-HERE-2 With the description of your post
For Third Image Slider:
Replace ADD-POST-URL-3 HERE with the URL of your post
Replace ADD-IMAGE-3-LINK-HERE with the picture link of your post
Replace POST-TITLE HERE-3 with the championship of your post
Replace POST-DESCRIPTION-HERE-3 With the description of your post
For Fourth Image Slider:
Replace ADD-POST-URL-4-HERE with the URL of your post
Replace ADD-IMAGE-4-LINK-HERE with the picture link of your post
Replace POST-TITLE HERE-4 with the championship of your post
Replace POST-DESCRIPTION-HERE-4 With the description of your post
For Fifth Image Slider:
Replace ADD-POST-URL-5-HERE with the URL of your post
Replace ADD-IMAGE-5-LINK-HERE with the picture link of your post
Replace POST-TITLE HERE-5 with the championship of your post
Replace POST-DESCRIPTION-HERE-5 With the description of your post
- Now afterward personalizing your slider relieve your template past times pressing Save Template button.
If yous confront whatsoever occupation during the implementation of this widget experience gratis to ask. Just piece of work out your comment below together with I volition seek my best to resolve your problem. Till together with so peace, blessings together with happy optimizing.
Credits:www.MyBloggerTricks.com
Credits:www.MyBloggerTricks.com
No comments:
Post a Comment