Installing Mini Icons in The Mez Template

 from :

Installing Mini Icons in The Mez Template

Posted by on Oct 17, 2010 in The Mez Template Documentation | 32 comments

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 mez template mini icons
There are two options to install the icons, through “Edit HTML” and through “Page Element”. But for Page Element option, you are only allowed to install the icons to the HTML/Javascript widget.

Preparing Icon

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:

image code

So, the codes that are ready to be installed would be:




Identifying Widget

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.

  1. Login to blogger with your ID
  2. Click Design
  3. Click Edit HTML.
    edit HTML
  4. Do the backup of your full template to prevent from error that may occur. Just click Download Full Template.
    download full template
  5. Tick the small box next to Expand Widget Templates .
    expand widget templates
  6. 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. widget
  7. Paste the code of the icon exactly above the code icon code
  8. Do the same to other widgets
  10. Done

The second way is through Element, but limited to the widgets of HTML/Javascript, while for other widgets such as Label, Archive and others can be done only through Edit HTML as explained above. It’s simple. You only need to paste the icon codes into the contentc of the Element.

edit gadget


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s