jQuery Hacks : Hiding Links inside Comments

span stopFor the past few months I have been dealing with a lot of spam in the comment section. The Blogger’s inbuilt filter has stopped more than 6000 spam comments but still some slipped by . Due to this very reason I had to close the Anonymous option for commenting. But this didn’t solve the problem and people with Blogger profile started to spam as well . So I have come up with a simple jQuery powered hack that hides any clickable link and just displays its text.

Demo
Try adding links in the comment below

Code

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script>  

$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});

</script>

Add it just before the </body> tag in the Edit HTML . In case you have already included the jQuery library , then add the code starting from Line 2 onwards.

If you want to completely remove the links from the comments , then use this code instead

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script>  

$('.comment-content a[rel$=nofollow]').hide());

</script>

This works for the Threaded Comments in Blogger , incase you want to make it work for the old Comments in Blogger , then the code is as follows

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script>  

$('.comment-body p a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});

</script>

Hope this helps you in curbing the spam in your comment section and feel free to share this simple trick with your friends
//

Google Web Fonts in Blogger

web fonts

Web fonts have been around since the CSS2 specification came out ,but in the recent years there has been a huge adoption due to lots of services coming up to cater to the users needs. One of the first on the scene was Typekit and was followed by lots of others. But they were all paid services and hence out of reach of the many ,then came Google Web Fonts and rest is history. Not only was it free but being hosted at Google’s servers it was the most reliable of them all. In this tutorial we will learn how to embed Google Web Fonts in Blogger .

Getting started

There are mainly two ways to embed Google Web Fonts into your blog , firstly you can simply use the Template Designer or you can include the specific font related Style-sheet directly to your template .

Using the Template Designer


Video Tutorial 

Steps

1. In your Blogger Dashboard ,go to the Template page of the specific blog

blogger dashboard

2. Click the Customise button present just adjacent to the Edit HTML button

blogger dashboard template page

3. In the Template Designer , go to the Advanced Tab and you are now free to select the fonts for the various parts of your blog like Page Text , Blog Title ,etc

New Blogger Template Designer

Cons
– You don’t have access to all the fonts present in the Google Web Fonts Directory. Only a selected few are included in the Blogger’s Template Designer

– An extra bit of JavaScript is added which is way more than the simple stylesheet added in the other method

<script type="text/javascript">
if (navigator.userAgent.indexOf('MSIE 6') == -1) {
  WebFontConfig = {
    google: { families: [ 'Pacifico' ],
    api: 'http://themes.googleusercontent.com/fonts/css?kit=YwEG9hvZkp55xA2jQoejfg'
    },
    loading: function() {
      if (window.jstiming) window.jstiming.load.tick('webfontLoading');
    },
    active: function() {
      if (window.jstiming) window.jstiming.load.tick('webfontActive');
    }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
} else {
  document.documentElement.className = 'wf-inactive';
}
</script>

-This might not work if you are using a highly customized template the reason being the template designer would have removed the necessary CSS variables required for this to work. If you facing this problem then follow the other method below

Pros
– Simple to implement

– Surprisingly faster than the other method even though extra JavaScript is added

The Style-Sheet method

This requires a bit of fiddling with the Edit HTML of the Blog but is the cleaner of the two. I suggest that you follow this method

Video Tutorial 

Steps

1. Go to Google Web Fonts and browse through the various fonts . Once you have selected which font to use , click the Quick Use Button just in the right hand side.

Google Web Fonts select

2. Now scroll down a bit and you will see a link tag code , copy this code

Web Fonts CSS copy

3. Now in the Blogger Dashboard ,go to the Template page of the specific blog

Blogger dashboard

4. Click the Edit HTML button present just adjacent to the Customise button

Edit HTML Blogger

5. Paste the code you copied just after the <head> tag

Font before b:skin tag

6. Now to add the CSS to use this font, just before the ]]></b:skin> tag

 h1 {
font-family: THE-WEB-FONT-FAMILY-NAME-YOU-EMBED ;
}

Embedding fonts is now a easy task, just don’t overdo it, can have some negative effects Feel free to ask problems or questions related to this tutorial in the comments below

Sharing Links using Visibli

V

Sharing is the most fundamental act which drives traffic to blogs. The only beneficiary in this process is the content being shared and not the person sharing it. It would be so much better if the person sharing it would also get the due credit. This is exactly what Visibli does. It creates links with a fixed bar present on the top of the content, something similar to Digg and StumbleUpon. That bar can include a loads of things including Links, Like button ,Tweet button, RSS Feed tickers, to name a few. It also has some really interesting options which can make you a shareaholic by heart. Lets dig in.

Come again What’s Visibli ?

In its own words

Visibli is a Social Marketing and Analytics platform that helps you optimize your social media engagement.

In simple words, it provides detailed statistics including number of clicks each link receives giving you insights about what your audience like the most and helping you in optimizing and streamlining your engagement with them. About the bar , its officially called Engagement Bar™ and fulfills a really basic need in a really innovative way.

Is it free ?

Oh Yes and all the features that I am going to discuss are available for free use. There is a Paid version also but that just goes over the top, only for those that are like very deep into Social Media.

How to get started started

1. Go to Visibli.com and Login (In case you have not registered then register firstly either using Facebook or Twitter account)

Visibli Connect using Facebook

2. In this example I am using the Facebook Login option , after I Click the Sign In with Facebook button and give all the necessary Permissions , I am redirected to the main settings page of my account.

Visibli Engagement Bar Settings

3. For starters ,we will checkout the Customize Your Bar option

Visibli Engagement Bar Themes and Widgets

4. Now a array of options will appear to choose from. Firstly select a general format like for Bloggers or Agencies ,etc and then choose the widgets to include in it. Lets choose the Bloggers Bar

Visibli Customizing the bar

5. Now comes the part about choosing the widgets to be included in the bar , firstly the Link to your blog , hover over the Name and click the Edit option. Now enter your URL

6. For inserting any widget from the gallery , just drag it to your Bar. When you are Done just click the Save and Continue button and you will be redirected back to your main Settings page.

Visibli Options

7. Now comes the task of linking your Twitter and Facebook accounts. The reason being so that you don’t have to come back again and again to convert your URL. So from Now onwards ,whenever a URL is posted on your Twitter account , it will automatically contain the Engagement Bar beforehand.

Visibli Social Settings

8. We will be connecting the Twitter Account in the example , Under the Social Settings click the Connect Twitter Account option and you will be redirected to a page to Authorize the App. Now your Twitter account is connected. Now you will be presented with options like whether to Change links from services like Foursquare ,etc and also whether you want the bar to appear in the first place or just want the statistics. Save after you are done. Now all links (expect ones present in tweet beginning with @ ) will have this Bar in them and a custom URL.

Visibli social settings advanced

9. Now you are all set and start sharing !!

Some Other options

Analytics

Visibli Analytics

One of the Core functionalities provided by Visibli , it keeps tracks of all the links shared via Visibli (And the Connected Social Networks) and also provides the number of clicks each of these receives . It also has some other interesting features like Top Reshared and Real-Time stats. To access it ,go to Analytics Tab present in the Top Menu

Connect your Bit.ly account

Visibli Bit.Ly settings

In case you want all your URLs turned into short URL , you can directly connect your Bit.ly account with Visibli . To do that just go to the following URL and enter your Bit.Ly login and Bit.Ly API Key (In case you don’t know them , refer this )

Similarly you can connect Visibli directly with Tweetdeck and Seismic

Autopost Tweets to Facebook

Autopost tweets to Facebook

The normal option to post Tweets to Facebook (present in FB settings ) will cause problem of double posting , To solve that go to Twitter to Facebook option and select the Facebook page to post your Tweets to.

Bookmarklet

Visibli Bookmarklet

There is also a option for adding the Link converter to your Bookmark Bar in Chrome, making converting links while surfing easier. To do the same go to this page and drag the Bookmarklet into your bookmark bar.

Websites/Blogs External Links

Visibli Websites/Blogs Settings page

This is by far the most interesting feature . The ability to make all the external links in your blog to open in these bar windows. To access this option go to the Websites/Blogs option in the Tools Menu

In this the biggest plus is the ability to make the Custom Link URL into ones that are hosted on your Blog (like link.blogname.com ) just by adding a DNS record. This is possible for Custom Domains on Blogger only. The implication of this small option are very far reaching. Not only will the person checking out the link will see the Engagement Bar but in a way will also be contributing in increasing your Alexa Rank and if by chance the person links , then it will be your site that will get the benefit.

Hope you found this Tool useful, In case you have any problems implementing it then feel free to ask in comments below or you can even contact Visibli via Twitter (They are very responsive )

How To Introduce An Achievement Program On Your Blog

PunchTab Achievement Program LogoA couple of months back I did a guest post on How To Introduce A Free Loyalty Program On Your Blog on Spice Up Your Blog . PunchTab ,the company responsible for it has now come up with a new product called the Achievement Program. Rather than awarding coupons to users for showing their Loyalty (a.k.a. Liking ,+1’ing ,etc ) , it focuses on giving users Social Rewards to drive behavior. Users unlock badges for visiting, liking, tweeting, +1’ing, sharing or commenting. This creates a healthy competition between users to earn more and more badges and achievements ,in the process promoting your content.

In this post we will be discussing the following:

– How the Achievement Program Works
– How to integrate it into your Blog
– Some things to NoteHow it WorksIt requires the user to authenticate using Facebook Connect. After that they can start earning Badges for the following activities:

Visiting – for their first visit they get the Bike Badge and these are followed by other badges in the category
Liking – for their first Like on your site users will get the Smiley Badge
Tweeting – for their first Tweet on your users will get the Budding Badge
+1’ing – for their first Google +1 on your site users will get the Tuned In Badge
Commenting – for their first comment users will get the Megaphone Badge

There are two secret badges which are awarded when you become really active on the specific blog/website

How Do I integrate it into my Blog
1. Go to Punchtab and register yourself there if you haven’t and then Login to your account , you will be redirected to the Dashboard

PunchTab Dashboard

2. Now click the Achievement Program in the main menu above and then you will be asked to choose your platform

choose blogging platform

3. Now click on the Blogger Icon and then you will be asked where would like the Badges to be positioned on your blog.

position of PunchTab badges

4. After choosing the position ,click the Install Achievement Program button below it and you will be asked to install its widget in your blog

Install PunchTab widget on your Blog

5. After successfully installing the widget, you will see the Badges banner in the position you selected before.

Become a member of punchtab badges

6. Now click this Badges banner and register yourself through Facebook. Now you are ready to earn some badges

Some things to Note

  • Currently there is no Leaderboard for the Achievements you earned so you will just see how many badges you have earned and not how many others have earned.
  • You can run this exclusively on your blog or with the Loyalty program. Even though this will cause two notifications to appear together when you do a action. In my opinion a integration of both these programs would be a step forward in the right direction
  • In the near future PunchTab will add support for customized badges which will allow you to award them for actions define by you like following ,voting, etc
  • Placing the Badges in the top of your blog ,irrespective of whether it is right or left, sometimes causes problems of the posts being pushed up my a little. See the screenshot below

    Header slides up on installing punchtab Badges on the top

  • The problem about +1 still exist , so if you Un +1 any content and +1 again , then you will be given a badge for it
  • The number of badges currently for offer are measly and doesn’t really provide a rush in the users mind to respond to the call of action immediately . It would only take 3 days to earn all the badges in the +1’ing ,Tweeting, Liking, Visiting and Commenting category.
  • Blogger comments are supported but this feature became non-functional after the release of the Threaded Comments
  • Repositioning Badges other than their default position is a near impossible as moving them with CSS causes the whole container to shift which takes some part of the badges-won window out of the screen. See the screenshot below to get a idea of what I am talking about.

    Punchtab badges cannot be repositioned

  • None the less , its still in development and we expect that a lot of new features to be arriving soon enough

Announcement : I have introduced Badges on Stylify Your Blog , so you can also earn them by +1’ing ,liking ,tweeting and visiting. Make sure to claim your badges by doing these actions. Also from now on they will only load on Post pages in a bid to make SYB faster and also because only here does the real action (+1,Like,Tweet) happens.

.post li {list-style-type: square !important;margin-left:8px;}
.imports {font-family:Electrolize;font-size:20px;text-shadow:2px 1px 3px #f9f9f9;}
.headings {font-size:25px;text-shadow:1px 1px 1px gray;font-weight:bold;}
.date-outer{margin-bottom:-10px;}

Effects of using JavaScript Redirect

effects imageIn the last post ,we discussed how to redirect your blog to blogspot.com always. This simple trick has really far reaching effects on the Load Time, Usability, SEO, etc. We will be discussing them in-detail, in the following post. JavaScript Redirects are not really used much on the web as 301’s and 302’s can handle the job. The reason we are using them is because Blogger doesn’t give us Server side access. Lets get started now

1. Load Time
As there is redirect involved , there will be some extra time taken at the user-end. After rigorously testing it with GTmetrix ,it averaged around 1 second. Here is a picture describing it

An extra second will not hurt much, but the best possible solution to this is to place the JavaScript near the top of the page, for best results just after the <head> tag

2. Usability
As the URL changes , the person visiting the blog might not either be able to notice it or think there is something sneaky with the site. If the person does notice it ,another effect can be the less likability of clicking it again.

3. SEO
This is a multifaceted thing. There are lots of angles to it.

a) Indexing
According to various articles , Web crawlers do not take into account JavaScript in the pages. But the Search-Bots are being constantly updated. In the Past, the nature of these kind of redirects has been a bit shady but there is no need to worry. As all the pages of your blog have rel=Canonical tag. This tells the search-bot that the current page is just a copy of the original page. Accordingly now, the best place to place the redirect JavaScript is after the following code in the Edit HTML of your blog:

<b:include data='blog' name='all-head-content'/>

b) Reputation
There is no effects on the Search Engines evaluation of your blog as the presences of the Canonical tag nullifies the effects of the Redirect.

c) Country specific problems
As ccTLD’s were introduced to make it easier for Governments to ban a blog in their region ,this might become a problem. I started a thread in the Google Webmaster Forum, and here are some of the replies:

An Level 11 moderator replied to it and slightly suggested that Google might not like it. You can also drop-by and voice your opinion on the thread . Here is the Link

4. Alexa Ranking
This is the biggest plus of using the Redirect script. As all traffic is channeled to .com domain, the Alexa ranking remain consistent all throughout. As the rank is not distributed between country specific URLs, its easier for Alexa to estimate your rank correctly.

All-in-all the Redirect Script has a positive effect on your blog. Rest we will see as it unfolds. Have you experienced any thing unusual while using the Redirect, feel free to share it.

Limiting the use of Web Fonts

Web fonts have drastically improved the way we look at and read the web. The ability to remotely load a font in a web page has been possible as early as CSS2. In the past few years this got a lot of attention due to services like TypeKit and Google Web Fonts. Nowadays its a common thing on the internet. Even Blogger has a inbuilt support for Web Fonts. But now we have started overusing it and there are some disadvantages to it.

Recently I visited SmashingMagazine’s website. They have done a total redesign in the past month. They are using web font (a.k.a. Skolar Regular and a couple of others) for all the text in the page. Its being served by Fontdeck and so there is a extra step involved for validation to check the Font is being only used by the website that bought the rights for it.

As you will observe the Black highlighted portion is actually text. It is taking a lot of time load.

Problems

-In general Web Fonts take a heavy toll on the Page Speed as well as Page Size. They are like scripts ,the more you have the higher the page load time.

-Another problem with web services like TypeKit ,Fontdeck ,etc is that they perform a validation check to make sure that Fonts are being used by their customers alone and not anybody else. This also increases time lag as server side action from there side is required.

Solutions
-Solution to this problem is to limit the number of fonts being used on a single page. The ideal number is around 3 or 4 per page. Opinions vary on this but the rule of the thumb is to use what you really need.

-Another possible solution is to include these fonts in the Head of the page. This will make sure that they are loaded in the starting.

-One more way is to load the Fonts asynchronously. This makes sure that once the Page is loaded then only will the Fonts will be loaded. This sometime might show blank pages but a nice method for clean loading.

TIP: If you are using Google Web Fonts, then whenever you go on the details of any font in the directory, you come across a odometer kind of diagram on the right side. This denotes the effects of using that particular font on the page load times.

Make sure you check it and make decisions wisely. Lesser the value better the load speed.

Web typography and content go hand in hand. What is your take on this issue ?

Alternatives to Marquee and Blink tags

In the 90s the internet was full of websites which had scrolling and blinking text. By the 2000s these became obsolete due to some usability issues the major one being the time the user had to wait to read the whole text. In case you still want to use their functionality, then I suggest using CSS alternatives.

<Marquee> alternative

An auto-running ‘Marquee’ with ‘hover’ to stop the scroll, with links.
An auto-running ‘Marquee’ with ‘hover’ to stop the scroll, with links.

.myMarquee {width:500px; height:80px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto;box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.7);-o-border-radius: 18px 18px;-moz-border-radius: 18px 18px;-webkit-border-radius: 18px 18px;border-radius: 18px 18px;background:#f8f8f8;background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));}

.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:10s;-moz-animation-name: scroll;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:10s;-webkit-animation-name: scroll;}

.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:bold; padding:0 10px; }

.scroller div a {color:#c00;}

@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
-moz-animation-play-state: paused;
}

@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
-webkit-animation-play-state: paused;

}

#Blinker {position:relative;left:50%;display:block; height:40px;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:1s;-moz-animation-name: blink;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:1s;-webkit-animation-name: blink;font-family:georgia, serif; font-size:16px; line-height:40px; float:left; }

@-moz-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
-moz-animation-play-state: paused;
}

@-webkit-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
-webkit-animation-play-state: paused;

}

HTML

<div class="myMarquee">

<div class="scroller">

<div>
An auto-running 'Marquee' with 'hover' to stop the scroll, with <a href="#">links</a>.</div>
<div>
An auto-running 'Marquee' with 'hover' to stop the scroll, with <a href="#">links</a>.</div>

</div>
</div>

CSS

.myMarquee {width:500px; height:80px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto;box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.7);-o-border-radius: 18px 18px;-moz-border-radius: 18px 18px;-webkit-border-radius: 18px 18px;border-radius: 18px 18px;background:#f8f8f8;background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));}

.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:10s;-moz-animation-name: scroll;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:10s;-webkit-animation-name: scroll;}

.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:bold; padding:0 10px; }

.scroller div a {color:#c00;}

@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
 -moz-animation-play-state: paused;
 }

@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}
.scroller:hover {
 -webkit-animation-play-state: paused;
 }

This is a simple keyframe named scroll which defines just two states at 100% and 0%. Its time is set to infinite so that it runs indefinitely.

<Blink> alternative

Blinking Text

HTML

<div id="Blinker" >Blinking Text</div>

CSS

#Blinker {display:block; height:40px;-moz-animation-iteration-count: infinite;-moz-animation-timing-function: linear;-moz-animation-duration:1s;-moz-animation-name: blink;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-animation-duration:1s;-webkit-animation-name: blink;font-family:georgia, serif; font-size:16px; line-height:40px; float:left; }

@-moz-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
 -moz-animation-play-state: paused;
 }

@-webkit-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
#Blinker:hover {
 -webkit-animation-play-state: paused;

 }

This animation is based on a keyframe named blink , which has just 2 states with changing opacity property.

Even though these alternatives are currently supported in Webkit and Mozilla browsers only but this will change in the future. As the time goes by CSS animations will gain momentum and will have wide cross browsers support.

Shifting from Blogger: Things to keep in Mind

Blogger is the best blogging platform out there in terms of features and cost. Even then some of us decide to shift to other platforms. The thing is that self hosted blogs have a sense of control and security. With legislations like SOPA and PIPA in pipeline, many people have started to think how Google ,FB and other services might become puppet in hands of the Government. This might be one of the leading reasons why people may want to make a switch. In this post I will be discussing which points to keep in mind while doing the switch.

Blogging Platform
There are lots of them out there and it can be sometime hard to choose one. The choice of the blogging platform should solely depend on the easy of use as well as and resources for troubleshooting problems. An active community can be really helpful when you hit unexpected road blocks while using the platform. Another thing to consider is the functionalities (a.k.a. possibility ) present ,sometimes this is the main reason for switching in the first place. Some examples are WordPress ,Drupal ,Joomla,etc,etc 

Hosting
Choosing a hosting is a vital task ,because it will be your responsibility to make sure that your site is up every second. There are lots of high quality hosting options available within a affordable price but it can became a headache while choosing one . I suggest using services like Host Search which give clear comparisons between various hosting providers with in detail reviews.

Import Your Stuff
Shifting your blog from one CMS to another doesn’t mean that you have to start from scratch again. There are tools available for exporting all your posts as well as comments into XML format which can then be easily imported. XML is a widely accepted format and mostly all major CMS’es have a Import functionality present for it. Though there might be problems when your transferring 2 million posts of yours !!

Usability 
Before doing the actual switch, make yourself familiar with most of features of the new CMS or atleast the basic onces which you would be using frequently. This makes sure you don’t hit any unexpected problems. Reading through the official Documentation of the specific CMS would be really helpful in these cases.

Test then Finalize
When you have successfully shifted all your content to the new CMS, it is recommended that you keep the old blog up for atleast a month to make sure that all the traffic is directed to the new blog. As Blogger doesn’t allow 301 Redirects it would be simpler to inform users by a sort of Banner on Top about the new Blog. There is a video by Google Webmaster Help explaining it in more detail.

It would be so Awesome if Google released a Self Hosting version of Blogger. It would be a step towards making Blogger the ultimate Blogging platform. Who is stopping from dreaming…

W3C Valid Blogger blog: An impossibility

Markup Validator is used to check the validity of Web documents. My previous two templates Standardized and Directus are both 1 error away from W3C Valid label. This error being due to the IE meta tag whose purpose is to make sure everything HTML5 works in the IE9. But recently very weird things started to happen on this blog, neither was I able to Digg any of the new posts nor was the Like button working for them.

What Happened

Faulty Like Button
 
All the New posts were showing the Number of likes that the main domain had received rather than the independent Likes of that posts

Unable to Digg
The Digg button was not working for any of the new posts, It was redirecting to a older story that I had Dugg a while back. It was supposing the new posts had already been dugg.

Why it Happened
After going through my source ,it struck that I had removed a couple of lines to achieve W3C validity. After a bit of thinking and testing I realized that the reason for this problem was

<link rel="service.post" type="application/atom xml" title="Blog Name - Atom" href="http://www.blogger.com/feeds/BLOGID/posts/default" />

I had excluded the above line of code, as it was giving a error while the validation process. After including it again ,everything started to work fine.

How was it causing the problem
The cause was the attribute present in the rel tag. W3C showed that the value in the rel tag is not registered

Error Line 18, Column 158: Bad value service.post for attribute rel on element link: Keyword service.post is not registered.

With this problem ,It becomes impossible to make a perfectly Valid W3C blog in which the Like and Digg buttons works correctly. There is a alternative that you can use conditional tags to make the Homepage Valid atleast.

For people using the Standardized and Directus template ,here is how you can fix it :

Find the following code:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<script type='text/javascript'>(function() { var a=window;function c(b){this.t={};this.tick=function(b,i,d){d=void 0!=d?d:(new Date).getTime();this.t[b]=[d,i]};this.tick("start",null,b)}var f=new c;a.jstiming={Timer:c,load:f};try{var g=null;a.chrome&&a.chrome.csi&&(g=Math.floor(a.chrome.csi().pageT));null==g&&a.gtbExternal&&(g=a.gtbExternal.pageT());null==g&&a.external&&(g=a.external.pageT);g&&(a.jstiming.pt=g)}catch(h){};a.tickAboveFold=function(b){var e=0;if(b.offsetParent){do e =b.offsetTop;while(b=b.offsetParent)}b=e;750>=b&&a.jstiming.load.tick("aft")};var j=!1;function k(){j||(j=!0,a.jstiming.load.tick("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",k,!1):a.attachEvent("onscroll",k);
 })();</script>
<meta content='blogger' name='generator'/>
<link href='http://YourBlogName.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://YourBlogName.blogspot.com/' rel='canonical'/>
<link href='http://YourBlogName.blogspot.com/feeds/posts/default' rel='alternate' title='Atom' type='application/atom xml'/>
<link href='http://YourBlogName.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='RSS' type='application/rss xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<!--[if IE]><script type="text/javascript" src="http://www.blogger.com/static/v1/jsbin/754431588-ieretrofit.js"></script> <![endif]-->
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details,"   "figure,footer,header,hgroup,mark,menu,meter,nav,output,"   "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i  ) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

Replace it with this line of code:

<b:include data='blog' name='all-head-content'/>

In the upcoming post I will talk how you can achieve W3C validity atleast partially.

I am not aware of the technicalities of why this tag is present in the first place but it has something to with the feed of the post. What are your views on it ?

The official Threaded Comment: The Good and Bad

Atlast Threaded comments are live. It is one of the most awaited feature by all Blogger users. Now you can simply Reply to any comment without the popup that appeared in the many old hacks. Also there is a added feature to Show/Hide all the replies a comment receives. Even though it took so much time to bring this , but still it lacks the thing.

threaded comment image

How to Enable it

I) If you are using a uncustomized template , then they will be enabled by themselves if you follow these steps

1. Make sure that the blog feed is set to full ,to do it
For Old Interface Users: Go to Settings > Site Feed > Allow Blog Feed ,set it to Full
For New Interface Users: Go to Settings > Other > Allow Blog Feed ,set it to Full

2. And set the Comment position to Embedded below post,to do it
For Old Interface Users: Go to Settings > Comments > Comment Form Placement ,set it to Embedded below Post
For New Interface Users: Go to Settings > Posts and comments > Comment Location ,set it to Embedded

II) If you have a little modified template, without the Reply feature hack installed

1. Find the following code in the Edit HTML

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>

You will see two instances of this code, one for mobile template and other of the default template. 

2. Now replace this code (both the instances) with the following code

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

III) If you have a heavily modified template, with the Reply feature hack installed (With Nesting)

This one is the most difficult one to fix, The easier way is to select the Revert widget templates to default but it might as well remove all the other modifications you would have done .

Other way is to make a test blog and then search for the code in between  <b:includable id=’comments’ var=’post’> and </b:includable>. Copy everything from there and paste it inplace of your main blog. Now first check if it is Saving and then follow II) part above and check again for errors. If everything is working fine ,then save and it should work but in the process don’t forget that part I) conditions should also be satisfied. 

The Good and the Bad:
Pros
-The feature is there !!!
-The Reply feature is enabled in normal templates as well as Mobile version and Dynamic Views.
-One-click Show/Hide feature for Replies
-Inline Reply form
-Author’s comments are easily differentiated 

Cons
-Only single level of nesting a.k.a you can’t reply to a reply

Also to implement the reply feature in Blogger ,Google upgraded the Comment API , so now you will see a lot of Recent Comment with Thumbnails widgets 

For the time being I will stick to the old hack just because of 6 levels of nesting

What are your views on this change, did you like it or not ?