Tutorial : Image Slider for Blogger II

Hello, everyone. Okay, this one I'm gonna tell you how to change the slider's

the border color

the ribbon

the caption font
the shadow box color behind caption

You see what I've changed my slider? =D

BEFORE

AFTER

So, LET'S START!
Here's how you do it!!


STEP 1 : The Ribbon

Open your LAST HTML/Javascript 
WHERE U INPUT IMAGE SLIDER BLOGGER CODE

Go to this PART of the CODE or CTRL+F (the word I bold)
----------------------------------------------------------------------------------

#ribbon {

width: 111px;

height: 111px;

position: absolute;

top: -4px;

left: -4px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVknrJTyHPfhRWenVpvOhpXxEM2aBZnddFeBk3b0sxICKcT9KDPF94L1qoocRxhs0L1VeUVoUCIysRc0_WJwZ0WiEqK_IfDyzTpULjb0uPyhlhdgWNQAEs5I33wT6gm5cgjrA6eWx2Npc/s1600/helperblogger.com-ribbon.png) no-repeat;

z-index: 7;

}

------------------------------------------------------------------------------
REPLACE the HIGHLIGHT words with your own image URL,
u either google the ribbon or edit your own.

I edit my own. Then I changed it.

From this ---> 

Since my blogshop in PURPLE color, I google the purple corner ribbon  and edit it ^^

The picture size is 109x109 pixels for that code, so make sure it'll fit perfectly!

Done for the ribbon! NEXT!




STEP 2 : The border/The Frame


Go to this PART of the CODE  or CTRL+F (the word I bold)
------------------------------------------------------------------------

#sliderFrame {

position: relative;

width: 500px;

margin: 0 auto;

border:5px solid #000;

}

------------------------------------------------------------------------------

You change the HIGHLIGHT word to any colors you want!
Go here to get the HTML COLOR CODE

I choose #611745 for my border colour =)

Next!



Step 3 : The Caption Font & Shadow Box

 
Go to this PART of the CODE
-------------------------------------------------------------------------------------

div.mc-caption-bg {

background-color: black;

}

div.mc-caption {

font: bold 14px/20px Arial;

color: #EEE;

z-index: 4;

padding: 10px 0;

text-align: center;

}

--------------------------------------------------------------------------

Caption background-color aka the shadow box HERE

The font Size & Style HERE

Font Color HERE


And THAT'S IT!

Save then YOU'RE DONE! =)


Thanks for your time reading my blog. =D