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 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
Step2:
- Go to blogger dashboard:
- Go to template/editor:
- Now find for ]]>
]]>
/*-------------------- PBT jQuery
.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/AVvXsEiNjNmCqjtY8mXhcEFcd7MZPoYG55lvZHZTD4NhzlCsjtER_Mpk0_cj9hGrO5b92HtNadiK5nfgBO_R18eeEVd6QbClI2ntkB6eksSHHiUx3Qkgx8zmUQOhyphenhyphenYhLe5yfsJJdNIqCbAxfbGo/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/AVvXsEiV4n6kHGOaezBMJ1dLXlOXRESLuFJdk61J7GakzKhw5Yc8U_7SXA4lTSIsMq_PXrGcPMC7N4-KugM6JOIP6sI7Xb8TOXXsC5kR1vk0fAFt8_29r_BY-f3KcF5j0fShCm2AhPPk-KgKBJo/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/AVvXsEjUtGl71rLC-jpUdnof0w77hROeeXaA8t639cPbYB71dUbuwowuwbVUBxeammpPaQf0K2IZ4MurqBEDCkqHttnewr1fyed9Y_7zHkSajt_D4p1FTJauRdUusAjguHORNYCvaRhOIWLcaFA/s1600/featured-next.png;) top left no-repeat}
.fp-next:hover{opacity:1;}
.fp-next:active{opacity:0.7;}
step 3
Now search for this code :
And Below this code past the following given code
- 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!
No comments:
Post a Comment