Wednesday, August 18, 2010

How to make "Grab My Badge" widget

  • Log in to your Blogger account
  • Go to "Design". Click on "Add a Gadget" and select HTML/JavaScript. 
  • In the widget configuration pop-up, add a title of your choice such as Grab My Badge or leave it blank.
  • In the content, copy and paste the code below. You will need to adjust the values in blue according to your needs:

<img border="0" src="Image URL" alt="Blog Title" title="Blog Title" width="150" />

<p>Copy and paste the text below on your blog's widget.</p>

<textarea cols="35" onclick="this.focus();this.select()" readonly="readonly" rows="8">&lt;a href=&quot;Blog Address&quot; title=&quot;Blog Title&quot;&gt;&lt;img src=&quot;Image URL&quot; alt=&quot;Blog Title&quot; title=&quot;Blog Title&quot; width=&quot;150&quot; /&gt;&lt;/a&gt;</textarea>

See an example of my badge on the sidebar.

Saturday, August 14, 2010

Blogger: Time to disable word verification?

I've noticed since the last few days, Blogger has added automatic spam detection for comments. Under the Comments tab on your Dashboard, you will find a new Spam inbox section.



Blogger will send all the comments that it thinks spam into the spam inbox automatically. This is a great addition to Blogger. I believe we can now disable word verification while submitting comments. Some people find it annoying and because of this you may be receiving fewer comments than you actually deserve.

I have disabled word activation. Lets see how effective this is going to be.

Sunday, August 1, 2010

How to Remove the Subscribe Link in Blogger

Below each article, there is a feed subscribe link like shown in the image below:
So how do you remove that? I figured out 3 ways to do that. You can either remove the template tags or use CSS to hide the portion of the code. You can also use all 3 methods if you want.

Method 1 - Removing the template code:
  • Go to Layout > Edit HTML.
  • Click on Expand Widget Templates box.
  • Search for class='post-feeds' and class='blog-feeds'. You can use Find/Search feature of your browser or press Ctrl + F to do that.
  • Once you have located the codes, which looks like this in my template:

    <div class='blog-feeds'>
      <b:include data='feedLinks' name='feedLinksBody'/>
    </div>
    

    and

    <div class="post-feeds">
      <b:loop values="data:posts" var="post">
        <b:if cond="data:post.allowComments">
          <b:if cond="data:post.feedLinks">
            <b:include data="post.feedLinks"
            name="feedLinksBody">
            </b:include>
          </b:if>
        </b:if>
      </b:loop>
    </div>
    
  • Delete the codes or comment them out with . Depending on the template you are using, it may look a bit different from above but the codes that diplay the subscription links are:

    <b:include data='feedLinks' name='feedLinksBody'/>
    

    and

    <b:include  data="post.feedLinks" name="feedLinksBody">
    </b:include>
    
  • Save your template and you are done.
Method 2 - Removing the template code:
  • Just as shown in Method 1, search for the following code in the template editor (again depending on the template you are using, it may slightly look different in your template):

    <data:feedLinksMsg/>
    <b:loop values='data:links' var='f'>
      <a class='feed-link' expr:href='data:f.url'
      expr:type='data:f.mimeType'
      target='_blank'><data:f.name/> (<data:f.feedType/>)
      </a>
    </b:loop>
  • Delete this code or comment it out.
  • Save your template. 

    Method 3 - Modifying the CSS:
    Alternatively, you may leave the above code as is but instead hide it using CSS:
    • Search for .feed-links in your HTML code like you did above. I have my CSS like this:

      .feed-links {
        clear: both;
        line-height: 2.5em;
      }
    • Edit the above CSS to:

      .feed-links {
        clear: both;
        line-height: 2.5em;
        visibility: hidden; 
        height: 0px;
        display: none;
      }
    • Save your template.

    CSS Transparent Background Colour in different browsers

    As of this writing, all new browsers (especially IEs) still do not support transparent background colour. In IE, I have noticed that they completely omit the background colour. This is the sequence I use so that the unsupported browsers still display a plain background colour and does not break the layout.
    background-color:#f2e5da; /* IE8 */
    background-color:rgba(242, 229, 218, 0.9); /* FF, Opera, Chrome,
                                               Safari */
    ^background-color:#f2e5da; /* IE6/IE7 hack */
    _background-color:#f2e5da; /* IE5/IE6 hack */

    Adding Twitter/Retweet button to your Blogger posts

    The Retweet button allows your visitors to retweet the contents of your blog on their twitter account.



    Here are the simple steps to add this button on your every Blogger post:
    • Login to your Blogger account and go to Dashboard. 
    • Go to Layout > Edit HTML
    • Click on Expand Widget Templates 
    • Search for "<b:loop values='data:posts' var='post'>" within the template code by pressing Ctrl + F. 
    • Paste the following code after "<b:loop values='data:posts' var='post'>" and just above "<b:include data='post' name='post'/>":
    <div style='float:right; margin-left: 10px;'>
    <script type='text/javascript'>
    tweetmeme_url = '<data:post.url/>'
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js'
    type='text/javascript'/>
    </div>
    • Save your template and you are done!