What you’re walking into:
The back end story to my previous post, A single lesson learned from an Image Slider (the story)…
…and a step-by-step run through on how to implement a static image slider into a built-in BlogSpot theme ( I’m using Rosemary to be specific).
What do you need:
What we are going to do:
Unlike the prototype I’d built (read more here), this time, you can’t just paste the slider codes in the webpage’s source codes extracted with Ctrl+U because it’s no longer a static site. This time, it’s hosted, live, and dynamic, hence it’s going to be a little more complicated than that. I’ve tried a many ways, i.e. creating a new widget with widget codes found online, and using pre-made, built in slider widgets, but none seemed to work the way I wanted it to.
This is an overview of what we’re going to attempt to do.
Since we want the image slider to appear at a certain position on the site, what we’ve gotta do is to paste the slider codes into the section of the theme’s code that corresponds to that intended position. Let’s say you want it at the top of the page, all you’ve gotta do is to identify the section of the HTML code that corresponds to that position, and paste your slider codes there, with some minor modification. Simple.
Ready? Let’s do this.
Step 1 – The source code for image slider
This is the part where we get the actual codes for the image slider. Because the internet is such an amazing place, you can get it for free here. It contains all of the source code needed for this image slider.
P.S. Click the image above to get the complete image slider codes. There’s some minor modifications needed to be done to suit BlogSpot’s theme framework format, XML.
Step2 – Tapping into the website’s theme
This is the part where you insert your image slider code into the theme’s code. In case you didn’t know, sites like BlogSpot and WordPress aren’t built with straight up, plain simple code. Rather, they’re built with themes, code that enables the user to customize them, without ever looking at a line of code (drag and drop style), hence having a much, much more complicated set of codes than what other websites normally do.
If you already have a built-in theme installed, then simply download the theme being used by clicking on “Backup”, and opening up in a word editor (I recommend Sublime Text as it just looks pretty damn cool with all its text colouring).
Else if you’re going to use an online theme that you’ve found, open it up in a word editor just as well (I’m using Rosemary by ThemeXpose because it’s the one my “client” was using at the time).
Next, identifying the section of code that corresponds to the position you want. Now, this is going to differ from theme to theme, but in the Rosemary theme, it can be located by finding the keyword
p.s. I usually like to add a weird, unique comment e.g.
//spiderman at the start of the foreign code because it eases the process of locating my newly added code. Just in case I messed things up.
Step3 – Putting in your images
- 1. Div of class
'mySlides fade'is image slots for the slide show.
- 2. Replace
srcwith your image’s online url .
- 3. If you intend to have more images in your slider, feel free to do so by adding more div of class
'mySlides fade', and span of class
 If you’re serious about your blog, I would suggest using Pinterest. As such, people from Pinterest could be linked to your blog too, and vice versa.
Aaaand there you go! All it takes is just a little time, energy and attention, and you have a slider on your blog which you could brag to others by saying “I dived into the code”, where in reality it’s more like you placed a finger in it. But it still looks impressive tho.
If you haven’t read the precending part to this post, which describes the story part of this journey,
Comment down below if you succeed in doing this, or if you encounter any problems along the way. If you like this, don’t forget to like, reblog or share this to give other a hand.
– Just another dude