How to Modify BlogSpot/Blogger Gadget’s HTML

What BlogSpot users miss most is ability to control output as exactly they want. BlogSpot users are not allowed to use server side languages. Also they have little control over JavaScript as well. They cannot use external JavaScript file unless they have a hosting place to do so.

Sometimes, you may like BlogSpot/blogger Gadget (widget) provided by BlogSpot very much but you want to modify or adjust the HTML of it. How would you modify the Gadget's code? Modifying the server side code is not possible but we can modify the HTML. When you add a gadget using "Add a Gadget" link from "Page Element" tag, the HTML code is inserted to your template dynamically for always. So, suppose you have added a "Popular Post" Gadget, and you have given "Popular Post" as a title for the gadget. Then Search for "popular", look at the code there and modify the code freely. Just before modifying the code you may want to take a backup of the code, so you can revert it back later. If you carefully modify the HTML then nothing wrong can happen. Remember it is pure XML. I have just changed the HTML tag from H2 to H3. It is an easy task. and these kind of work will not destroy anything.

Here is an example code from Popular Post gadget:


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h3 class='title'><data:title/></h3></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Above the line you can see is: <h3 class='title'><data:title/></h3>. Earlier it was
<h2><data:title/></h2>.

  • # 1 - by traeh

    Hi,
    I”m using blogspot.com. On one of my blogs there, I’m using an “advanced recent posts” gadget. The links that appear in the “advanced recent posts” gadget do not have a visited color. I can’t figure out how to give the links in the “advanced recent posts” gadget a visited color. I do know how to control the visited color of links in the rest of the website. I also know how to find, in the html, the code for the gadget (put a check in the “expand widgets” box). But looking at the widget code, I don’t see how to control the color of visited links.

    Can you tell me how to introduce a visited color to the links in the “advanced recent posts” gadget at blogspot?

    Thank you very much for any tips. — Traeh

Comments are open for an year period. Please, write here on Facebook page.