In this Image Slider you lot tin privy add together v images amongst at that spot respective Titles, Descriptions, Images in addition to Post URL. This slider has a forwards in addition to backward tool which allows your visitors you lot cause got quick await at the featured posts.So instead of chatting, permit us start rolling our fingers on Attractive jQuery Image Slider For Blogger. But commencement I know you lot would dear to preview The Widget so commencement run across the demo
Adding jQuery Of Image Slider inwards Blogger:
To insert slider inwards your weblog practise every bit follows.- Go To Blogger.com >> Your Blog
- Now Template >> Back up your Template incase whatever matter goes wrong
- Now afterwards taking Backup >> Edit Html >> Proceed
- Now Search For </head> (You tin privy search yesteryear pressing CTRL+F)
- When you lot observe it Just higher upwards it Paste the JQuery Code >> Download Code From Mediafire Or Download Jquery Directly
- Now afterwards pasting the jQuery Code Press Save Template button
Adding Style Sheet Css Of Image Slider inwards Blogger:
Now nosotros volition insert Style canvas CSS inwards blogger template.
- Go to Blogger.com >> Your Blog
- Now Template >> Edit Html >> Proceed
- Now Search for ]]></b:skin> in addition to just higher upwards 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) hold out yesteryear 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;) hold out yesteryear left no-repeat} .fp-next:hover{opacity:1;} .fp-next:active{opacity:0.7;}
- Now After pasting the agency canvas code but 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 you lot tin privy Find this code near <div id='content-wrapper'>
Note: This is the close of import business office of our tutorial if you lot confront whatever occupation in addition to so but exit your weblog url inwards comment below in addition to 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 ikon 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 ikon 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 ikon 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 ikon 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 ikon 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 afterwards personalizing your slider relieve your template yesteryear pressing Save Template button.
If you lot confront whatever occupation during the implementation of this widget experience costless to ask. Just exit your comment below in addition to I volition movement my best to resolve your problem. Till in addition to so peace, blessings in addition to happy optimizing.
Credits:www.MyBloggerTricks.com
Credits:www.MyBloggerTricks.com
No comments:
Post a Comment