Over the last few weeks i have published some cool jQuery Gadgets and Widgets for your Blogs.In this post i have taken the jQuery Easy Slider, a stylish slide show with some neat options and turned it into a kinda mini slider with the option to go large.We previously published the
Blogger jQuery Anything Slider that had the option to add videos or images as slides and a
Simple But Stylish Blogger Featured Posts Slider.So i wanted to continue with a slide show that could be easily re sized from spanning the width of your blog to the miniature example i have here.
This jQuery Featured Posts Slider also has features like auto scroll, continues scroll plus next slide and previous slide buttons for manual scroll.The original Easy Slider script and code was created by the very cool
Css Globe, below is a live demo of our version.
As you can see i have gone small in the demo but it could be even smaller and of course much much bigger.
Add The Any Size jQuery Slider To Blogger
Remember Always Back Up Your Template Before You Make Changes -
How To Back Up A Blogger TemplateStep 1. In Your Blogger Dashboard Click Design > Edit Html
Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code -
How To Find Code In A Blogger Template)
]]></b:skin>
Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>
/*Slider Css*/
#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
width:320px;
height:111px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:15px;
}
#nextBtn{
left:320px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjinBWMSLCpuyTA73IADqTHLYuteEk_yQLfzdoOfFYT26U6_INsiRhl_A3ooYdlnV4GSHM24t-gcYXnCK0TBnj7NkFGm4R5odqAUnXEhhNCbwbD7767H8wHGf5UsISkc8Iy7fM9Zfa2Q00/s1600/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixmKCg-JlDtIrujH3Xxti1dNYZJaa30gwiODIKIzQ0cJ-obHK-Pows4ZE4sHIuTDDZwkv8dfzlbKFPd6VTdSPk-b9Fnle92OJ2zswtdRPpBld1x1_RB9IgocdMre0AB4v58Z0nBV3yhmY/s1600/btn_next.gif) no-repeat 0 0;
}
/*Slider Css Info @ http://www.spiceupyourblog.com*/
Change the size of the slider - The width and height are highlighted in yellow so you change these to your required dimensions.You will also have to change the position of the next and previous buttons which is a little more tricky.
Highlighted in red you can see i have the buttons 15px from the top, if you made the slider bigger you would increase the margin from the top.So for example if you made the slider 222px high you would make this 30px.You can try a few margins until you get it right.
Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code -
How To Find Code In A Blogger Template)
</head>
Step 5. Now Copy And Paste This Code Directly Above / Before </head>
Note - If you have previously added jQuery to your template you can leave out the section in green.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/easySlider1.7.js-blogger.js'/>
<script>
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
That's the Css and Script added for the slider now we add the Html for the actual images.
The Html, Links And Images
This is the html for the actual slider in the demo blog, you can see the links and images highlighted.You can copy and paste this code into a Html / Javascript gadget from your design page, add your links then save and drag and drop into position.
<div id="slider"> <ul>
<li><a href="http://www.spiceupyourblog.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmHD-dhk4BRiANnubspFizl5KMqRI1MkGz4byJy6PMNlfrHEyGEaL6su8g_e9XWnaRvAAeC62ZslPMaNzDEgAQLhWKwPaPUTH2J98nju7f1jCy-nBT8vAWft9ZyinMOx7cPrKCWnOqjdk/s320/01.jpg" width="320px" height="111px" /></a></li>
<li><a href="http://www.bestbloggertemplates.net"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNqHoHxz3JgxQZUYCoy2lQlEqCCzcokNDoOS8QkoT6iUvCiIA5Rv0F9cHFitRMKLhyphenhyphen2pWQAtJ5egF7gSvle3P8ZQe9MbmXpIcHld0Rr-vzH3HLGT0Qu5V2VaE0DqqSJRl5cod8T-wDHo/s320/02.jpg" width="320px" height="111px"/></a></li>
<li><a href="http://www.socialiconstudio.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO6msJa-7Ghkd79xwW2eDkCcooPOihYzSXLzAXRItsFmdVHxeqBSOzNKh8jeDxcCZIfmLWqDpdd8fcm5pGUxa3fdnmWOaMohQkzdPcONL39cVCZlK_YaXy2I9Ts_b0Bkpglqv9wHCHtGQ/s320/03.jpg" width="320px" height="111px" /></a></li>
<li><a href="http://www.spiceupyourblog.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeAMzyW5B5wweEKDNt1AEcydyhg5Npsk-jrE_s65livNR_AhOEt1AN4z14-3pgcC-AdgeSqTZI_0v8YlujS4hqJUtCSni5cVxi1Ykoc3VZDnlGy6nqMCW7fnx7qMse7VqHNk11oO9XS_I/s320/04.jpg" width="320px" height="111px" /></a></li>
<li><a href="http://www.bestbloggertemplates.net"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUmR4XNPc1sHtPippvjlFQ5hcZfrVg9KJSeuAORy6k8lzTDsFjYd7R8-B0XdgZmnDGwKpYc0s0YLNrY33N5aBxe6bl9zGgDmt1m3rE27QAK23F3f8luwvqq0bLmGCGN308TCAfGX5hZcQ/s320/05.jpg" width="320px" height="111px" /></a></li>
</ul>
</div>
Note - The links are in yellow and the image URLs in red, change these to your links and images.
Note 1 - If you do change the size of the slider you need to change the width and height in each slide above to the same dimensions.
Add More Slides - To add more slides you simply add another link and image like this after the <ul> tag above :
<li><a href="http://www.bestbloggertemplates.net"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUmR4XNPc1sHtPippvjlFQ5hcZfrVg9KJSeuAORy6k8lzTDsFjYd7R8-B0XdgZmnDGwKpYc0s0YLNrY33N5aBxe6bl9zGgDmt1m3rE27QAK23F3f8luwvqq0bLmGCGN308TCAfGX5hZcQ/s320/05.jpg" width="320px" height="111px" /></a></li>
That's it for the versatile jQuery Easy Slider and this Blogger Tip.Once again thanks to
Css Globe, and make sure to check out more of our
jQuery Gadgets and
Blogger Gadgets.
Drop Your Comments And Questions Below.
You may have noticed Social Bookmarking Buttons or Icons in a fixed or hovering position that scroll with the page on many of the blogs you visit.This type of Fixed Bookmarking widget has become very popular and can get more people sharing your content on Twitter, Facebook and other social networks.In this Blogger Tip i will show you probably the easiest way you too can have fixed social bookmarking buttons on your blog.The widget we are going to use is from Share This, it looks great, offers users the option to share on almost every Social Network and is easy to implement.
Google today updated their page rank (PR) or the so called toolbar page rank.Page rank is basically a signal of how important any given page is in Googles eyes.Page rank goes from 0 (zero) to 10 (Ten) with 10 being the highest thus the best.The page rank we see is called toolbar page rank as it was first displayed on the Google toolbar although there are many other ways to view it.In general people refer to their website or blog PR by the PR of the home page, but every single page on your blog will have it's own PR.More on Page rank can be found in this post from when i informed you of the last update in January - 
In this post i have a really cool Blog Design Tip to spice up the lists on your blog.When you create an ordered list, items in the list are numbered, and in an unordered list items have what is called a bullet point.What we will do in this post is replace the default bullet point with an image.We do this with just a small 
This is a guest post by 
In this Video Post we look at a feature of Facebook some of you may not know, I didn't know myself until recently.Most of you will have a Facebook Fan Page or 
Last weekend i published two Blogger Tips on using a custom domain instead of the blogspot sub domain on your blog.The first post covered why in my opinion your must