ကိုကြီးဇော် ( မုန်တိုင်း )

Hi bloggy readers,
In my previous article about - Adding a Mini Flash Slide Show Widget on Blogger blog -, i already uncovered to you about how to embed a mini flash slide show widget into our blog template. But apparently, in customizing that widget, requires a technical ability, especially in the field of programming language. That's why, for some of you who are facing lots of trouble in customizing the widget, i am here to make it easier to you to customize the widget without bothering to much in editing the HTML code and CSS styles. In this post, i am gonna share to you the new styles of the mini flash slide show widget with variety of buttons.

1. Log in to your Blogger Account
As usual, now head to http://www.blogger.com to start entering to your Blogger Account.

2. Go to Edit HTML
In the Dashboard, now pick a blog that you've already added with the mini slide show widget, and then, press the button Layout/Design. By doing so, you will be automatically brought to Page Element by default, now switch the sub-tab to Edit HTML to begin customizing your current mini slide show widget.

Anyway, before doing any kind of customization, i strongly suggest you to save your current template just in case you did something wrong with the template. Now click at the link Download Full Template.


After clicking the Download Full Template link, you will be prompted with the choice about where you are gonna put the xml file in your Computer, just put it in the Desktop to make it easier if later you want to switch back to the current template.

3. Expand the widget Templates
Still in the Edit HTML page, now give a tick/check mark at the small box called "Expand Widget Template".

4. Find the Code
Inside the expanded widget in your blog template, you've already placed the code that controls the button of the mini slide show widget, now in order to change the current button with the newest one, you must replace the image URL address of both buttons, left and right buttons. Now press Ctrl + F at the same time to enter the Find mode, and then find the code below. If you are having a problem in locating the code below, you can simply enter the keyword miniflashslide1 in the Find mode and scroll down little bit.
As you can see in that code above, now pay attention to the red code i've already marked inside the code. The first URL address indicates the left and right buttons of the widget, so if you want to replace the interface of the buttons with another buttons, you can simply replace the current image URL address with the new one.

5. Replace the button image
Now pick one of these button below you want to embed in the widget, and then press the right click on the mouse and press the option "Copy Image Location". After that, put the Image URL address to the red code above, both left and right URL address.


6. Find the code
If you decide to replace the button of the mini slide show widget with the new one, you must also replace the CSS style that controls the color of the background. Now find the code below (Ctrl + F)
As you can see in the CSS style above, now look at the red code inside the CSS. The code #fff indicates the background color of the images is white. So, if on the step number 5, you have chosen the blue button, you can also customize the background of the images by using the HEX color code, you can read this post to find out more about HEX color code.

And then, the code #800000 indicates the border line of the images is red maroon. You can also customize the border by replacing the code #800000 with another HEX color code.

7. Save the Template
By pressing the Save Template button, now you can save the current change you've just made in your blog template.

Okay, that's all for now. Hope it helps you in customizing the button of the mini slide show widget. If you are having a problem, you can leave your question in the comment section below, and i'll try my best to solve your problem.

Labels: Blogger-III