Shoutmeloud Thesis Theme Customization - Part 6

I would like to start the tutorial straight away because it's not going to be a cake walk unless your a webmaster like me (just kidding). I guess this was the most awaited customization "SML Featured Content Slider" that every SML blogger theme user wanted to have! I tried my best to match the one on SML however, it's little different from the ideal one! Check out the live demo below...

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.

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>

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.

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!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

Amit said on July 6, 2011 at 8:09 PM :

Hey nice on. you said that it does not match SML content slider but i thimk its pretty much the same as SML's. Good work....

Mukund said on July 6, 2011 at 8:17 PM :

@Amit: Well, I actually mentioned that because "arrow marks" are missing in the slider. Otherwise, it's pretty much the same! Thanks for your comment Amit!

Sagar said on July 6, 2011 at 10:23 PM :

Thank you for the featured content slider Mukund, I was desperately waiting for it.

Mukund said on July 6, 2011 at 10:31 PM :

@Sagar: Well, I know how desperate you were! Enjoy the slider now! By the way, thanks for your comment!

Freshcrop said on July 7, 2011 at 11:23 PM :

Thanks for a great blog with many interesting posts!

Mukund said on July 7, 2011 at 11:30 PM :

@Freshcrop: Thanks for the comment buddy! I hope you enjoy the upcoming articles on my blog too!

MV said on July 9, 2011 at 12:27 AM :

Hi Mukund, I want to add 'category' wise slider, instead of changing the individual posts all the time. Would this work for the same code?

Mukund said on July 9, 2011 at 10:57 AM :

@MV: I don't understand what you mean.. A category wise slider in the sense??? Please elaborate more on the widget you want and I'll let you know if it is possible!

Guduru Pradeep Kumar said on July 16, 2011 at 12:21 PM :

Thanks for sharing your knowledge on designing

Mukund said on July 16, 2011 at 12:55 PM :

@Guduru Pradeep Kumar: Thanks for the comment! I hope you enjoy the other articles related to web design as well!

Anonymous

Hi Mukund

How can I delete the default hostgator image.

Mukund said on July 16, 2011 at 4:17 PM :

@Anonymous: You need to expand your template and search for the Hostgator code to delete them! If you find it difficult, just send me your template via email and I'll remove it for you!

SAM said on December 1, 2011 at 7:42 PM :

Hi Mukund mailed you about problem of slider .... installed the code as told by you ... but slider not working.

Hope you help me.

Thanks a lot.

SAM

Cute said on December 19, 2011 at 2:03 PM :

Dear Sir

Slider does not working. i have done all the step that you have told, but sliders is working. as you could see.

http://www.vuaccess.net

Plese tell me the solution via email at vuaccess@gmail.com

Prathamesh Kamath said on January 8, 2012 at 1:27 AM :

Thank you for providing this information. I have edited my blog and customized all the buttons according to my liking. But there is a Hostgator Ad on every article.
I wish to remove it. How is that possible? Please help.

Mukund said on March 9, 2012 at 6:10 PM :

@Prathamesh Kamath: Just expand the template and search for hostgator. You will find a code there. Just remove that block. That's it!

Prathamesh Kamath said on March 9, 2012 at 9:14 PM :

Thanks, I have removed all those ads.

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT