In my previous tutorial, I shared an article about automatic scrolling recent post widget in blogger wherein you can customize on your likenss, Today I will show you another trick of showing it and that is through a slide show. There is no need for you to add text, images or even links for it will work automatically. You can also customize this according to your preferences. So let us now go to the tutorial.
Live Demo
Note: Always back-up your template before editing
Step 1. Go to Blogger Dashboard >> Template >> Edit HTML
Step 2. Look for the code ]]></b:skin> and just above it paste the code below,
Step 3. Let us now install a Javascript in your template. Copy the code below and paste it above </body> tag,
Step 4. Save your template. Your halfway done!
Step 5. Again go to Blogger Dashboard >> Lay-out >> Add Gadget
Step 6. Scroll down and hit HTML/Javascript. Inside the empty box, paste the code below
Step 7. A.Replace yourblog.blogspot.com with your own blog URL,
B. Replace 6 to change the number of posts to show in the slider.
C. Replace 150 to change the number of texts to appear in the description.
Step 8. Save your work and see your new widget.
If you have some suggestions queries or additional information regarding this post, feel free to write it our contact page or to the comment box below.We will be glad to hear your side.
Good Day!
Source: Helperblogger
Sliding Recent Post Widget in Blogger with Jquery
Step 1. Go to Blogger Dashboard >> Template >> Edit HTML
#slide-container {
height: 360px;
position: relative;
width: 480px;
}
#slider {
height: 360px;
left: 25px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 480px;
font-family: calibri;
}
.slide-desc {
background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0px;
text-align: left;
top: 0;
width: 200px;
z-index: 99999;
}
.slide-desc h2 {
display: block;
}
.crosscol .widget-content {
position: relative;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li {
margin: 0;
padding: 0;
list-style: none;
}
#slider2 {
margin-top: 1em;
}
#slider li, #slider2 li {
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width: 480px;
height: 360px;
overflow: hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev {
display: block;
width: 30px;
height: 77px;
position: absolute;
left: -30px;
text-indent: -9999px;
top: 71px;
z-index: 1000;
}
#nextBtn, #slider1next {
left: 520px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display: block;
height: 77px;
left: 0;
position: absolute;
top: 132px;
width: 30px;
z-index: 1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a {
display: block;
position: relative;
width: 30px;
height: 77px;
background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a {
background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls {
margin: 1em 0;
padding: 0;
height: 28px;
}
ol#controls li {
margin: 0 10px 0 0;
padding: 0;
float: left;
list-style: none;
height: 28px;
line-height: 28px;
}
ol#controls li a {
float: left;
height: 28px;
line-height: 28px;
border: 1px solid #ccc;
background: #DAF3F8;
color: #555;
padding: 0 10px;
text-decoration: none;
}
ol#controls li.current a {
background: #5DC9E1;
color: #fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
outline: none;
}
/* END EasySlider By bloggingtipsandtrix.blogspot.com */
Step 3. Let us now install a Javascript in your template. Copy the code below and paste it above </body> tag,
<!-- Start easy content slider by bloggingtipsandtrix.blogspot.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<!-- End easy content slider by bloggingtipsandtrix.blogspot.com -->
Step 4. Save your template. Your halfway done!
Adding the Gadget in your Blogger Lay-out Page
Step 5. Again go to Blogger Dashboard >> Lay-out >> Add Gadget
Step 6. Scroll down and hit HTML/Javascript. Inside the empty box, paste the code below
<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script>
<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
Step 7. A.Replace yourblog.blogspot.com with your own blog URL,
B. Replace 6 to change the number of posts to show in the slider.
C. Replace 150 to change the number of texts to appear in the description.
Step 8. Save your work and see your new widget.
If you have some suggestions queries or additional information regarding this post, feel free to write it our contact page or to the comment box below.We will be glad to hear your side.
Good Day!
Source: Helperblogger
