SHOUTMELOUD FEATURED CONTENT SLIDER - LIVE DEMO
Before I start off, I would like to tell you that this slider will auto slide until an user clicks on the content (the page navigation in the slider). It works with only one script which implies that it's gonna load faster than other sliders. Well, enough of stories... Let's get started!
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.
]]></b:skin>
2. Download the following text document (includes the CSS and JavaScript to run the widget) - CODE FOR SML FEATURED CONTENT SLIDER. Replace the above code with the code present in the text document.
3. Next, search for the following piece of code on your template.
<div id='main-wrapper'>
4. Place the following code just below the line mentioned at step 3.
<div class='sliderwrapper' id='slider1'>
<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 1 Here.
</div>
<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 2 Here.
</div>
<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 3 Here.
</div>
<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 4 Here.
</div>
<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 5 Here.
</div>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 1 Here.
</div>
<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 2 Here.
</div>
<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 3 Here.
</div>
<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 4 Here.
</div>
<div class='contentdiv'>
<a href='YOUR POST URL'><h1>YOUR POST TITLE</h1></a>
Content 5 Here.
</div>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
5. Save the template and your done!!!
Simple! Isn't it? Well, if you think it is, may be your wrong. The actual tutorial starts here! First, write your post title in between the "H1" tags (those highlighted in green). In other words, replace "YOUR POST TITLE" with your post title and don't forget to link it. Replace "YOUR POST URL" with the link to your post.
Secondly, you need to replace "Content 1 Here" with the snippet available on your blog. Well, the coding will display anything that's under the heaven in the space that's provided for it. Well, coming back to business, it's better if you could find the coding from your "Blogger Post Editor" for every snippet for the featured content.
Say, for example (from the demo blog), I wish to add "Review On Cannon Power G9" as a featured content on my slider. The first thing I should do is, navigate to "Posting >> Edit Posts" and select the "Edit" link of the corresponding post. In my case, I should select the "Edit" link for "Review On Cannon Power G9". Now, shift the tab from the "Compose" mode to 'Edit HTML" mode.
Get the coding for the first paragraph of your article with the styles you chose to display the original post. That's it! Paste it instead of "Content 1 Here" in the coding mentioned at step 4. But, please ensure that your "div" or "span" tags are properly closed before you paste the coding and save them!
You may repeat the above mentioned steps for replacing the other contents in the coding mentioned at step 4. Little confused??? Well, just have a look at the example coding given below. The final coding should look something like the one mentioned in this text document - Example Code For SML Featured Content Slider.
You may repeat the above mentioned steps for replacing the other contents in the coding mentioned at step 4. Little confused??? Well, just have a look at the example coding given below. The final coding should look something like the one mentioned in this text document - Example Code For SML Featured Content Slider.
I hope the tutorial was an easy fix! If you have any difficulties in getting the slider work or find any bugs, then please let me know via comments! I'll try to fix them! Your opinions about the widget are also welcome! So, share them too!
