Saturday, 15 June 2013

Tagged under: ,

Add Best Jquery Slideshow To Blogger

Jaquery Slideshow For Blogger
Today we are going to present you an awesome & stunning out slideshow widget for Blogspot blog. However we know that you may familiar with this widget earlier but the biggest advantage of using this slideshow will never stay your blog on loading time. This slide gadget is totally created in jquery which is latest and lightest scripting language. By using jquery slide show in blogger blog you can easily get dozens of benefits. This slider will script one to one image which you can easily turnout to your latest post. You can easily show the latest & popular posts through this blogger slideshow. There are also uncountable features by using jquery slideshow in blog. Most of Pro blogger using it for Introduce theirs self. So you can easily use it for blog bio page. So in today article we will learn how to add professional jquery slideshow in blogger.

Slideshow Features For Blogger Blog

Here you will learn and know all the the major feature by using jquery slideshow 2013 in blogger blog. By using slider featured post slideshow in blogger blog you can easily attract visitors to your popular post or older posts and many mores. Besides, it could help to increase your pageviews and reduce blog bounce rate.
  • Helps in increasing pageviews
  • Attracted more & more visitors
  • Reducing blog bounce rate
  • Turning the blog into professional view
  • Show popular posts
  • Scripting Blog author Bio with Images




How Created This Widget ?

This Blogger slider show has been originally created by Mustafa Sir the owner of MBT earlier in 2011. If are interest to share this widget then do not forget to add the credit link back to MBT. Have a look into this widget.



Jaquery Slideshow For Blogger Blog


How to Add Jquery Slideshow In Blogger Blog

 Step1:
This is a very simple process just follow all the below given step carefully. Hope you will not face any difficulty one you follow all the steps correctly. Lets go to add this gadget to blogger.
  • Go to blogger dashboard:
  • Go to template/editor:
  • Now find for </head>:
  • Now Download the code from Jquery Slideshow and past before </head>

Step2:
  • Go to blogger dashboard:
  • Go to template/editor:
  • Now find for ]]></b:skin>
  • Now past the below given code before ]]></b:skin>

/*-------------------- PBT 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(http://4.bp.blogspot.com/-Bc53drZbsOc/TeDnc3a2_AI/AAAAAAAAHJ4/NlGJlRzJ3dE/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(http://2.bp.blogspot.com/-xrvnRlI02a8/TeDndJyHamI/AAAAAAAAHKA/VSA--b82v9w/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(http://1.bp.blogspot.com/-UzsUMLmRXT4/TeDnchM8AEI/AAAAAAAAHJw/pOOPL9dK6-g/s1600/featured-next.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}






Step3: 
       

Now search for this code
             <div id='main-wrapper'>
And Below this code past the following given code


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<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'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </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'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </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'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </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'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </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'>WRITE POST TITLE HERE...</a></h3> <p> WRITE POST DESCRIPTION HERE... </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>

Make All These Changes

  • Replace all these ADD POST URL-1, 2, 3, 4, 5 HERE with the URL of your blog post pages. Remember all These URLs will be added twice for each slides. Once for the image and second time for the Post title.
  • Replace all these ADD IMAGE-5 LINK HERE with Your Post Image link of the Featured post. Default all these images having width:580px; height:266px; You can easily edit these image size by do editing in the width and height in the CSS code which we shared in step#2. Remember: All your images having Same Size. otherwise it will not work well.
  • Replace this >> WRITE POST TITLE HERE... with the title of your own Blog Post Page
  • Replace all these >> WRITE POST DESCRIPTION HERE with Post Page Description. You can write 1 or 2  lines of your post here and  the readers could easily read full post by clicking on the title tag.
  • If you want to Change the Overall size of the slider widget then simply in step#2 change following two codes and give your own values width:608px and height:400px   
  • Now you done almost!

Need Help

If you have any question related to this widget or facing any problem in implementing this widget on your blog then do not hesitate leave a comments response will be back very soon. Hope guys all of you will love this slider widget. Thanks & Happy Blogging


Related Topics

 

17 comments:

  1. bro I think this slider widget is from Mybloggertricks right???

    ReplyDelete
    Replies
    1. Yes Mohammad Fazle Rabbi Bro we have already given MBT credit look at the "how create the widget" you will find MBT credit link. Any thanks for commenting here. Wanna see you all the time here. Bye Bye

      Delete
  2. Nice sharing Slideshow is giving us more futures in our blog visitors can see our popular posts latest updates and etc well nice topic u pick once again hafeez bro thanks for this post..

    ReplyDelete
    Replies
    1. Thanks Rizwan Bro for your valuable comments you always encouraging PBT authors thanks and hope to see you always here. Bundles of thanks.

      Delete
  3. Hafeez bro you really pick up a great topic from MBT.
    Bro I need your help regarding JQuery. Can you please help me to learn how we can convert JavaScript code into JQuery. As we know that JQuery is lighter than JavaScript. I need to convert some codes. Please tell me the solution if you know.

    ReplyDelete
    Replies
    1. Bro there is a possibilities to convert java script codes into jquery but there is alot functions then you will pick one by one. So it will be better for you to build a new one widget in jquery. In converting there is a wastage of time. But if you are still forcing me than then i will just say go these websites>> you may use W3School, or my favorite ( stock-over flow) website. hoep it cover your question.

      Delete
  4. very nice post thanks For Wounderful Share Joshpk

    ReplyDelete
  5. Really cool brother :) Keep writing

    ReplyDelete
  6. I have create this slider on http://www.aasifinterior.com/ ...
    thanks to share...

    Cheers!!
    Faiz Alam

    ReplyDelete
  7. I cant find below code on my template code
    "div id='main-wrapper"
    Give me any subjection please......

    ReplyDelete
  8. I had the same problem of balu....Any suggestion please...

    ReplyDelete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
  10. Thanks for sharing this sldeshow for blogger. This slider is fast loading.

    ReplyDelete
  11. I'm sorry I can't find "div id='main-wrapper" even when I click Blog1 from the dropdown menu....what should I do?

    ReplyDelete
  12. it does not work in all blogger templates

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism