Installing Mini Icons in The Mez Template
It is still about documentation of The Mez Template, which is aimed to easily referring when there is any question in the future. Today’s documentation is about Installing Mini Icons in The Mez Template.
One of the things to have made The Mez Template look cool is by installing the Mini Icon in the corner of one widget.
The first step is to prepare the icons you want to install, which are free based on your interests. Kang Rohman, in this case, takes the icons from Iconspedia.
The following are samples of the icons:
For best appearance, you should change the size of the icons into 60X60 pixels. This size is still changeable, but I myself made the CSS editing when determining the size.
Upload the icons into image hosting as you have used or directly into Blogger. Record the icon URLs, e.g.:
Create the HTML codes for the icons, e.g.:
And the final codes will be added with:
So, the codes that are ready to be installed would be:
The next step is to identify the widgets that will be installed the icons. The easiest way to identify the widgets is by the titles of the widgets.
The titles of the above widgets are:
- Useful Tutorials
- Work Everywhere
- Free Templates
Now, I suppose you have the identity of the widgets in which you want to install the icons. As the additional info, the widgets that can be installed with the icons are upside column widgets, sidebar widgets, and footer widgets.
Installing the icon codes
The last step is to install the icon codes you have prepared. The first way is through Edit HTML.
- Login to blogger with your ID
- Click Design
- Click Edit HTML.
- Do the backup of your full template to prevent from error that may occur. Just click Download Full Template.
- Tick the small box next to Expand Widget Templates .
- Find the codes of widgets in which you want to install the icons. As mentioned above, the easiest way to identify the widget is by its title. For instance, when you want to find a widget entitled with useful tutorials, for fastest way, you can use Ctrl+F and then enter the title of the widget into the available column.
- Paste the code of the icon exactly above the code
- Do the same to other widgets
- Click SAVE TEMPLATE.