A single lesson learned from an Image Slider (the technical bit)

What you’re walking into:

The back end story to my previous post, A single lesson learned from an Image Slider (the story)…

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:

Though some basic understanding of HTML, CSS, Javascript, and how a website works in general would definitely help a ton in assisting you to see what’s happening step-by-step along the way, it isn’t entirely necessary. All you need is Google, the ability to copy and paste, and you’re all good to go.

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.

original code original code

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.

Slider codes (HTML, CSS, Javascript)

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.

P.S. Just as there are different ways to make a slide show “slide”, there are different Javascript codes to dictate that. I’ll be going with the one that lets the slideshow slide automatically.

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).

screenshot-39.png
Colours. Colours everywhere.

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

 using Ctrl+F.

This is an opening div tag to the div class ‘container sp_sidebar’, corresponding to the main blog posts area of the site. Your code shall go on top of that div. Just paste it in.

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

slide comparison

  • 1. Div of class 'mySlides fade' is image slots for the slide show.
  • 2. Replace src with your image’s online url [1].
  • 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 'dot'

 

[1] 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,

The story

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.

 

Thank you!

 

– Just another dude

Advertisements

One thought on “A single lesson learned from an Image Slider (the technical bit)

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: