Blogspot domains localized and Google mum !!

Google has made a really weird move. It has localized the Blogspot domains for all Indian users or atleast thats what I have come to know. All the Blogspot URLs are redirecting to a .in domain if they are accessed from within India. A intial guess is that is that everybody with a Indian IP address is being redirected to the .in version. The .com version is still existing and is served to everybody with a IP address out of India. There are very far reaching implications for such a move.

UPDATE: There is a official explanation about the issue present Here. To check your .com domain put /ncr after your Blog URL and you will be redirected to the .com domain.

Till now there is no news that any other countries blogspot domain is localized. I have myself tested for .de , .ca, etc but none are redirecting to the blogspot blog. Google being mum about this move is also a very weird thing (maybe Google has been hacked !!! ).

Advantages
> As its localized to India, so Indian users can access Blogspot blogs faster. Now their request is sent to Indian servers rather than a US based server.

> For all Bloggers its in a way a good news as now they have two domains for the same blog

> Both the versions a.k.a. .com and .in are same. Any comment on the .in version will appear on the .com version as well.

> No SEO losses as such as every page has a rel=canonical tag with a .com domain

Disadvantages
> As users are distributed between these two domains there is a loss in Alexa Rankings !!!

> Page Rank is zero for the .in version !!

> Confusion: users might get puzzled that their Blog URL’s have been changed.

> Unnecessary: Google could have just created a copy of blogspot blogs in every countries Servers and served the .com version faster from their.

All in all this is out-rightly weird. Even though there is a thing about serving blogs faster but changing the domain for that purpose is not a correct move. The Blogger Forum has started to fill with request about this change. Another odd thing to note is that Google is mum about this issue. There is no mention about this thing on any of their Blogs.

One thing that is coming into my mind is that ,there is ongoing hearing against Google Inc in the Delhi High Court. Even though this is just a thought but maybe this has been done to make it easy for the Indian Govt to ban Blogspot URL’s in India. Something like the dreaded SOPA & PIPA. This is just a thought.

I strongly suggest that there should be option for Bloggers to choose whether they want a localized domain or not. 

What are your views about this bizarre move by Google

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 ?

Blogger is going to release Threaded comments

Threaded comments or nested comments as many people call them is the one feature which is missing in the Blogger comment system. I have come to know through reliable sources that Blogger is soon going to release Threaded comment as a default option for users. Even though the date is not known but it will be live anytime now. In any case if you are getting a bit impatient then I will also be discussing how to implement it now in your blog using a hack thats doing rounds across the internet . I have altered its style a bit to make it look a bit more presentable.


How I came to Know


Well that reliable ,super-secret source of my is none other than the Edit HTML of the Template. Even though it may sound a bit confusing ,but while creating templates I came across some code with threaded keyword in them and after a bit searching though it I could understand that it was a new feature that Blogger was going to rollout.Here is some visual evidence and you can even try it yourself by searching for the term threaded in the template. (Tick the Expand Widget Preview option)

Earlier in the day Dasari Harish of Way2Blogging did a post explaining what you can expect from this commenting system and how it will work and other stuff related to it.

This new feature rollout also explains why recently there has been lot of Service Unavailable errors and a bit of slowdown while using Blogger .


  

How to Implement it Now in your Blog

Demo

There are hacks present on the internet dating back to as long as 2008 ,on how to do this in your blog. But recently hacks by Tien Nguyen have made it possible to implement this in your blog. I will be using a older version of his hack and the styling done by me. In case you want the Newest Version you can get it from Here
Step 1: Go to Templates > Edit HTML (Old Interface Users go to Design > Edit HTML)
Step 2: Tick the Expand widget Preview Option 
Step 3: Search for ]]></b:skin> and paste the following CSS just before it (How to Copy code easily)

#cm_block{position:relative;left:-20px;}
.cm_wrap{clear:both;float:right;margin-bottom:10px;width:98%}
.cm_head{float:left;margin:0;width:70px}
.avatar-image-container a img{border-radius:100%;background:url() no-repeat scroll center center;position:relative;left:1px;top:0px;width:40px;height:40px;}
.cm_avatar{width:42px;height:42px;margin:0;padding:0;border:solid 4px white;-webkit-border-radius:1em;-moz-border-radius:10em;border-radius:10em;-webkit-box-shadow:0 1px 2px rgba(0,0,0, .2);-moz-box-shadow:0 1px 2px rgba(0,0,0, .2);box-shadow:0 1px 2px rgba(0,0,0, .2);border-image:initial;background-color:white;}
.cm_reply{padding-top:5px}
.cm_reply a{-moz-border-radius:2px;-webkit-border-radius:2px;background:0;border:1px solid #C4C4C4;border-left-color:#E4E4E4;border-radius:2px;border-top-color:#E4E4E4;color:#424242!important;display:inline-block;font:12px/19px sans-serif;margin:0;padding:1px 6px;text-align:center;text-decoration:none;text-shadow:0 -1px 0 #FFF}
.cm_reply a:hover{background:#f8f8f8;text-decoration:none!important}
.cm_reply a:active{background:#f1f1f1;text-decoration:none!important}
.cm_entry{border-radius:10px 100px 80px;background:#f8f8f8;overflow:hidden;padding:16px}
.cm_info{margin-bottom:5px}
.cm_name{float:left;font-size:12px;font-weight:700}
.cm_name:after{content:" said";}
.cm_date{color:#444;float:right;font-size:10px;font-style:italic}
.cm_entry p{color:#222;font-size:13px;margin:0}
.cm_pagenavi{color:#666;font-size:10px;font-weight:700;text-shadow:1px 1px #FFF;text-transform:uppercase}
.cm_pagenavi a{color:#666;padding:10px;text-decoration:none}
.cm_pagenavi a:hover{text-decoration:none}
.cm_pagenavi span{background:#FFF;border:1px solid #E0E0E0;color:#888;padding:4px}

Step 4: Search for <b:includable id=’comments’ var=’post’> and till the end of this tag which looks like this </b:includable> Replace all the code with the code given below

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments &gt; 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>
<div id='cm_reply_css'/>
<div class='cm_pagenavi' id='cm_page'/>
<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>                      
</div>
<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=7535998369717577932&amp;postID=&quot;   data:post.id   &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot;   data:comment.anchorName   &quot;%22%3E&quot;   data:comment.author   &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>
</div>
<div class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
</div>
<div class='clear'/>                                  
</div>
<p><data:comment.body/><b:include data='comment' name='commentDeleteIcon'/></p>
</div>
</div>
</div>
</b:if>            
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>

</b:if>
</div>

In Line 40 of the above code relplace the blogID with your blog Id (To find the blog id ,just open lets say the Stats page and in the address bar you will see a very long numbers ,thats your blog id).

Step 5: Now below the </body> tag ,paste the following code(Sorry for the Horizontal scrollbar but had to make the code one-click copyable):

<script type="text/javascript"><!--
var _0x7bf4=["x32x20x78x3Dx31x72x2Ex31x6Ex2Ex4Ax3Bx32x20x46x3Dx77x2Ex79x28x27x31x6Dx27x29x3Bx32x20x6Dx3Dx46x2Ex75x3Bx32x20x70x3Dx5Bx5Dx3Bx32x20x37x3Dx5Bx5Dx3Bx32x20x64x3Dx5Bx5Dx3Bx32x20x6Ex3Dx30x3Bx32x20x49x3Dx27x27x3Bx32x20x4Bx3Dx27x27x3Bx32x20x45x3Dx27x27x3Bx32x20x69x3Dx30x3Bx32x20x6Ax3Dx30x3Bx32x20x6Bx3Dx30x3Bx32x20x68x3Dx30x3Bx32x20x62x3Dx27x27x3Bx32x20x42x3Dx22x22x3Bx32x20x71x3Dx22x22x3Bx31x73x20x31x31x28x29x7Bx32x20x56x3Dx2Dx31x3Bx38x28x5Ax2Ex31x79x3Dx3Dx27x31x7Ax20x31x76x20x31x75x27x29x7Bx32x20x31x65x3Dx5Ax2Ex31x77x3Bx32x20x31x30x3Dx31x78x20x31x32x28x22x31x74x20x28x5Bx30x2Dx39x5Dx7Bx31x2Cx7Dx5Bx5Cx2Ex30x2Dx39x5Dx7Bx30x2Cx7Dx29x22x29x3Bx38x28x31x30x2Ex31x41x28x31x65x29x21x3Dx31x70x29x56x3Dx31x71x28x31x32x2Ex24x31x29x7Dx31x6Fx20x56x7Dx32x20x57x3Dx31x31x28x29x3Bx38x28x57x3Dx3Dx2Dx31x7Cx7Cx57x3Ex3Dx39x29x7Bx31x34x28x6Dx2Ex66x28x27x4Cx3Dx22x63x27x29x21x3Dx2Dx31x29x7Bx69x3Dx6Dx2Ex66x28x27x4Cx3Dx22x63x27x29x3Bx6Dx3Dx6Dx2Ex65x28x69x2Bx34x29x3Bx69x3Dx6Dx2Ex66x28x27x22x27x29x3Bx70x5Bx6Ex5Dx3Dx6Dx2Ex65x28x30x2Cx69x29x3Bx6Dx3Dx6Dx2Ex65x28x69x29x3Bx37x5Bx6Ex5Dx3Dx77x2Ex79x28x70x5Bx6Ex5Dx29x2Ex75x3Bx64x5Bx6Ex5Dx3Dx30x3Bx6Ex2Bx2Bx7Dx76x28x69x3Dx30x3Bx69x3Cx6Ex2Dx31x3Bx69x2Bx2Bx29x7Bx76x28x6Ax3Dx69x2Bx31x3Bx6Ax3Cx6Ex3Bx6Ax2Bx2Bx29x7Bx38x28x37x5Bx6Ax5Dx2Ex66x28x70x5Bx69x5Dx29x21x3Dx2Dx31x29x7Bx49x3Dx70x5Bx6Ax5Dx3Bx4Bx3Dx37x5Bx6Ax5Dx3Bx64x5Bx6Ax5Dx3Dx64x5Bx69x5Dx2Bx31x3Bx45x3Dx64x5Bx6Ax5Dx3Bx76x28x68x3Dx69x2Bx31x3Bx68x3Cx6Ax3Bx68x2Bx2Bx29x7Bx38x28x64x5Bx68x5Dx3Cx45x29x7Bx31x37x7Dx7Dx76x28x6Bx3Dx6Ax3Bx6Bx3Ex68x3Bx6Bx3Dx6Bx2Dx31x29x7Bx70x5Bx6Bx5Dx3Dx70x5Bx6Bx2Dx31x5Dx3Bx37x5Bx6Bx5Dx3Dx37x5Bx6Bx2Dx31x5Dx3Bx64x5Bx6Bx5Dx3Dx64x5Bx6Bx2Dx31x5Dx7Dx70x5Bx68x5Dx3Dx49x3Bx37x5Bx68x5Dx3Dx4Bx3Bx64x5Bx68x5Dx3Dx45x7Dx7Dx7Dx76x28x69x3Dx30x3Bx69x3Cx6Ex3Bx69x2Bx2Bx29x7Bx6Ax3Dx37x5Bx69x5Dx2Ex66x28x27x40x3Cx61x20x4Ax3Dx22x23x63x27x29x3Bx38x28x6Ax21x3Dx2Dx31x29x7Bx42x3Dx37x5Bx69x5Dx2Ex65x28x30x2Cx6Ax29x3Bx71x3Dx37x5Bx69x5Dx2Ex65x28x6Ax2Bx31x29x3Bx6Ax3Dx71x2Ex66x28x27x3Cx2Fx61x3Ex27x29x3Bx71x3Dx71x2Ex65x28x6Ax2Bx34x29x3Bx37x5Bx69x5Dx3Dx42x2Bx71x7Dx6Ax3Dx37x5Bx69x5Dx2Ex66x28x27x50x3Dx22x59x22x27x29x3Bx38x28x6Ax21x3Dx2Dx31x29x7Bx42x3Dx37x5Bx69x5Dx2Ex65x28x30x2Cx6Ax29x3Bx71x3Dx37x5Bx69x5Dx2Ex65x28x6Ax29x3Bx38x28x64x5Bx69x5Dx3Ex36x29x64x5Bx69x5Dx3Dx36x3Bx37x5Bx69x5Dx3Dx42x2Bx27x74x3Dx22x31x35x3Ax27x2Bx28x31x39x2Dx64x5Bx69x5Dx2Ax35x29x2Bx27x25x22x20x27x2Bx71x7Dx62x2Bx3Dx37x5Bx69x5Dx7Dx62x2Bx3Dx27x3Cx67x20x50x3Dx22x31x66x22x3Ex3Cx2Fx67x3Ex27x3Bx46x2Ex75x3Dx62x3Bx46x2Ex74x2Ex51x3Dx27x31x62x27x3Bx32x20x4Dx3Dx77x2Ex79x28x27x31x61x27x29x2Ex75x3Bx32x20x6Fx3Dx4Fx28x4Dx29x3Bx38x28x6Fx3Ex72x29x7Bx62x3Dx27x3Cx67x20x74x3Dx22x47x3Ax31x63x22x3Ex31x64x20x27x3Bx32x20x48x3Dx28x6Fx2Dx6Fx25x72x29x2Fx72x2Bx31x3Bx32x20x73x3Dx27x27x3Bx32x20x6Cx3Dx31x3Bx69x3Dx78x2Ex66x28x27x2Ex31x6Cx27x29x3Bx38x28x69x21x3Dx2Dx31x29x7Bx73x3Dx78x2Ex65x28x30x2Cx69x2Bx35x29x7Dx7Ax7Bx73x3Dx78x7Dx69x3Dx73x2Ex66x28x27x23x44x27x29x3Bx38x28x69x21x3Dx2Dx31x29x7Bx73x3Dx73x2Ex65x28x30x2Cx69x29x7Dx69x3Dx78x2Ex66x28x27x3Fx53x3Dx27x29x3Bx38x28x69x3Dx3Dx2Dx31x29x7Bx6Cx3Dx31x7Dx7Ax7Bx6Cx3Dx4Fx28x78x2Ex65x28x69x2Bx31x33x29x29x7Dx76x28x69x3Dx31x3Bx69x3Cx3Dx48x3Bx69x2Bx2Bx29x7Bx38x28x69x3Dx3Dx6Cx29x7Bx62x2Bx3Dx27x3Cx55x3Ex27x2Bx69x2Bx27x3Cx2Fx55x3Ex27x7Dx7Ax7Bx62x2Bx3Dx27x3Cx61x20x4Ax3Dx22x27x2Bx73x2Bx27x3Fx53x3Dx27x2Bx69x2Bx27x23x44x22x3Ex27x2Bx69x2Bx27x3Cx2Fx61x3Ex27x7Dx7Dx38x28x6Cx2Ax72x3Cx3Dx6Fx29x7Bx62x2Bx3Dx27x3Cx2Fx67x3Ex3Cx67x20x74x3Dx22x47x3Ax54x22x3Ex27x2Bx28x28x28x6Cx2Dx31x29x2Ax72x29x2Bx31x29x2Bx27x20x2Dx20x27x2Bx28x6Cx2Ax72x29x2Bx27x20x52x20x27x2Bx6Fx2Bx27x20x44x3Cx2Fx67x3Ex27x7Dx7Ax7Bx62x2Bx3Dx27x3Cx2Fx67x3Ex3Cx67x20x74x3Dx22x47x3Ax54x22x3Ex27x2Bx28x28x28x6Cx2Dx31x29x2Ax72x29x2Bx31x29x2Bx27x20x2Dx20x27x2Bx6Fx2Bx27x20x52x20x27x2Bx6Fx2Bx27x20x44x3Cx2Fx67x3Ex27x7Dx32x20x43x3Dx77x2Ex79x28x27x31x69x27x29x3Bx43x2Ex75x3Dx62x3Bx43x3Dx77x2Ex79x28x27x31x68x27x29x3Bx43x2Ex75x3Dx62x3Bx38x28x6Cx3Cx48x29x7Bx62x3Dx27x3Cx74x20x31x67x3Dx22x31x6Bx2Fx31x6Ax22x3Ex2Ex58x20x7Bx51x3Ax20x31x38x7Dx3Cx2Fx74x3Ex27x3Bx32x20x4Ex3Dx77x2Ex79x28x27x31x36x27x29x3Bx4Ex2Ex75x3Dx62x7Dx7Dx7Dx7Ax7Bx31x34x28x6Dx2Ex66x28x27x4Cx3Dx63x27x29x21x3Dx2Dx31x29x7Bx69x3Dx6Dx2Ex66x28x27x4Cx3Dx63x27x29x3Bx6Dx3Dx6Dx2Ex65x28x69x2Bx33x29x3Bx69x3Dx6Dx2Ex66x28x27x3Ex27x29x3Bx70x5Bx6Ex5Dx3Dx6Dx2Ex65x28x30x2Cx69x29x3Bx6Dx3Dx6Dx2Ex65x28x69x29x3Bx37x5Bx6Ex5Dx3Dx77x2Ex79x28x70x5Bx6Ex5Dx29x2Ex75x3Bx64x5Bx6Ex5Dx3Dx30x3Bx6Ex2Bx2Bx7Dx76x28x69x3Dx30x3Bx69x3Cx6Ex2Dx31x3Bx69x2Bx2Bx29x7Bx76x28x6Ax3Dx69x2Bx31x3Bx6Ax3Cx6Ex3Bx6Ax2Bx2Bx29x7Bx38x28x37x5Bx6Ax5Dx2Ex66x28x70x5Bx69x5Dx29x21x3Dx2Dx31x29x7Bx49x3Dx70x5Bx6Ax5Dx3Bx4Bx3Dx37x5Bx6Ax5Dx3Bx64x5Bx6Ax5Dx3Dx64x5Bx69x5Dx2Bx31x3Bx45x3Dx64x5Bx6Ax5Dx3Bx76x28x68x3Dx69x2Bx31x3Bx68x3Cx6Ax3Bx68x2Bx2Bx29x7Bx38x28x64x5Bx68x5Dx3Cx45x29x7Bx31x37x7Dx7Dx76x28x6Bx3Dx6Ax3Bx6Bx3Ex68x3Bx6Bx3Dx6Bx2Dx31x29x7Bx70x5Bx6Bx5Dx3Dx70x5Bx6Bx2Dx31x5Dx3Bx37x5Bx6Bx5Dx3Dx37x5Bx6Bx2Dx31x5Dx3Bx64x5Bx6Bx5Dx3Dx64x5Bx6Bx2Dx31x5Dx7Dx70x5Bx68x5Dx3Dx49x3Bx37x5Bx68x5Dx3Dx4Bx3Bx64x5Bx68x5Dx3Dx45x7Dx7Dx7Dx76x28x69x3Dx30x3Bx69x3Cx6Ex3Bx69x2Bx2Bx29x7Bx6Ax3Dx37x5Bx69x5Dx2Ex66x28x27x40x3Cx41x20x4Ax3Dx22x23x63x27x29x3Bx38x28x6Ax21x3Dx2Dx31x29x7Bx42x3Dx37x5Bx69x5Dx2Ex65x28x30x2Cx6Ax29x3Bx71x3Dx37x5Bx69x5Dx2Ex65x28x6Ax2Bx31x29x3Bx6Ax3Dx71x2Ex66x28x27x3Cx2Fx41x3Ex27x29x3Bx71x3Dx71x2Ex65x28x6Ax2Bx34x29x3Bx37x5Bx69x5Dx3Dx42x2Bx71x7Dx6Ax3Dx37x5Bx69x5Dx2Ex66x28x27x50x3Dx59x27x29x3Bx38x28x6Ax21x3Dx2Dx31x29x7Bx42x3Dx37x5Bx69x5Dx2Ex65x28x30x2Cx6Ax29x3Bx71x3Dx37x5Bx69x5Dx2Ex65x28x6Ax29x3Bx38x28x64x5Bx69x5Dx3Ex36x29x64x5Bx69x5Dx3Dx36x3Bx37x5Bx69x5Dx3Dx42x2Bx27x74x3Dx22x31x35x3Ax27x2Bx28x31x39x2Dx64x5Bx69x5Dx2Ax35x29x2Bx27x25x22x20x27x2Bx71x7Dx62x2Bx3Dx37x5Bx69x5Dx7Dx62x2Bx3Dx27x3Cx67x20x50x3Dx22x31x66x22x3Ex3Cx2Fx67x3Ex27x3Bx46x2Ex75x3Dx62x3Bx46x2Ex74x2Ex51x3Dx27x31x62x27x3Bx32x20x4Dx3Dx77x2Ex79x28x27x31x61x27x29x2Ex75x3Bx32x20x6Fx3Dx4Fx28x4Dx29x3Bx38x28x6Fx3Ex72x29x7Bx62x3Dx27x3Cx67x20x74x3Dx22x47x3Ax31x63x22x3Ex31x64x20x27x3Bx32x20x48x3Dx28x6Fx2Dx6Fx25x72x29x2Fx72x2Bx31x3Bx32x20x73x3Dx27x27x3Bx32x20x6Cx3Dx31x3Bx69x3Dx78x2Ex66x28x27x2Ex31x6Cx27x29x3Bx38x28x69x21x3Dx2Dx31x29x7Bx73x3Dx78x2Ex65x28x30x2Cx69x2Bx35x29x7Dx7Ax7Bx73x3Dx78x7Dx69x3Dx73x2Ex66x28x27x23x44x27x29x3Bx38x28x69x21x3Dx2Dx31x29x7Bx73x3Dx73x2Ex65x28x30x2Cx69x29x7Dx69x3Dx78x2Ex66x28x27x3Fx53x3Dx27x29x3Bx38x28x69x3Dx3Dx2Dx31x29x7Bx6Cx3Dx31x7Dx7Ax7Bx6Cx3Dx4Fx28x78x2Ex65x28x69x2Bx31x33x29x29x7Dx76x28x69x3Dx31x3Bx69x3Cx3Dx48x3Bx69x2Bx2Bx29x7Bx38x28x69x3Dx3Dx6Cx29x7Bx62x2Bx3Dx27x3Cx55x3Ex27x2Bx69x2Bx27x3Cx2Fx55x3Ex27x7Dx7Ax7Bx62x2Bx3Dx27x3Cx61x20x4Ax3Dx22x27x2Bx73x2Bx27x3Fx53x3Dx27x2Bx69x2Bx27x23x44x22x3Ex27x2Bx69x2Bx27x3Cx2Fx61x3Ex27x7Dx7Dx38x28x6Cx2Ax72x3Cx3Dx6Fx29x7Bx62x2Bx3Dx27x3Cx2Fx67x3Ex3Cx67x20x74x3Dx22x47x3Ax54x22x3Ex27x2Bx28x28x28x6Cx2Dx31x29x2Ax72x29x2Bx31x29x2Bx27x20x2Dx20x27x2Bx28x6Cx2Ax72x29x2Bx27x20x52x20x27x2Bx6Fx2Bx27x20x44x3Cx2Fx67x3Ex27x7Dx7Ax7Bx62x2Bx3Dx27x3Cx2Fx67x3Ex3Cx67x20x74x3Dx22x47x3Ax54x22x3Ex27x2Bx28x28x28x6Cx2Dx31x29x2Ax72x29x2Bx31x29x2Bx27x20x2Dx20x27x2Bx6Fx2Bx27x20x52x20x27x2Bx6Fx2Bx27x20x44x3Cx2Fx67x3Ex27x7Dx32x20x43x3Dx77x2Ex79x28x27x31x69x27x29x3Bx43x2Ex75x3Dx62x3Bx43x3Dx77x2Ex79x28x27x31x68x27x29x3Bx43x2Ex75x3Dx62x3Bx38x28x6Cx3Cx48x29x7Bx62x3Dx27x3Cx74x20x31x67x3Dx22x31x6Bx2Fx31x6Ax22x3Ex2Ex58x20x7Bx51x3Ax20x31x38x7Dx3Cx2Fx74x3Ex27x3Bx32x20x4Ex3Dx77x2Ex79x28x27x31x36x27x29x3Bx4Ex2Ex75x3Dx62x7Dx7Dx7D","x7C","x73x70x6Cx69x74","x7Cx7Cx76x61x72x7Cx7Cx7Cx7Cx7Cx43x6Dx5Fx49x74x65x6Dx5Fx43x6Fx6Ex74x65x6Ex74x7Cx69x66x7Cx7Cx7Cx73x74x72x6Fx75x74x7Cx7Cx43x6Dx5Fx49x74x65x6Dx5Fx4Cx65x76x65x6Cx7Cx73x75x62x73x74x72x69x6Ex67x7Cx69x6Ex64x65x78x4Fx66x7Cx64x69x76x7Cx7Cx7Cx7Cx7Cx43x6Dx5Fx43x75x72x5Fx50x61x67x65x7Cx43x6Dx5Fx42x6Cx6Fx63x6Bx5Fx43x6Fx6Ex74x65x6Ex74x7Cx43x6Dx5Fx4Ex75x6Dx7Cx43x6Dx5Fx54x6Fx74x61x6Cx7Cx43x6Dx5Fx49x74x65x6Dx5Fx49x64x7Cx73x74x72x5Fx74x32x7Cx32x30x30x7Cx4Fx72x67x5Fx55x72x6Cx5Fx54x68x72x65x61x64x43x4Dx7Cx73x74x79x6Cx65x7Cx69x6Ex6Ex65x72x48x54x4Dx4Cx7Cx66x6Fx72x7Cx64x6Fx63x75x6Dx65x6Ex74x7Cx43x75x72x5Fx55x72x6Cx5Fx54x68x72x65x61x64x43x4Dx7Cx67x65x74x45x6Cx65x6Dx65x6Ex74x42x79x49x64x7Cx65x6Cx73x65x7Cx7Cx73x74x72x5Fx74x31x7Cx43x6Dx5Fx50x61x67x65x5Fx4Fx62x6Ax7Cx63x6Fx6Dx6Dx65x6Ex74x73x7Cx43x6Dx5Fx49x74x65x6Dx5Fx4Cx65x76x65x6Cx5Fx54x7Cx43x6Dx5Fx42x6Cx6Fx63x6Bx7Cx66x6Cx6Fx61x74x7Cx43x6Dx5Fx50x61x67x65x5Fx4Ex75x6Dx7Cx43x6Dx5Fx49x74x65x6Dx5Fx49x64x5Fx54x7Cx68x72x65x66x7Cx43x6Dx5Fx49x74x65x6Dx5Fx43x6Fx6Ex74x65x6Ex74x5Fx54x7Cx69x64x7Cx43x6Dx5Fx54x6Fx74x61x6Cx5Fx4Fx62x6Ax7Cx43x6Dx5Fx52x65x70x6Cx79x43x53x53x5Fx4Fx62x6Ax7Cx70x61x72x73x65x49x6Ex74x7Cx63x6Cx61x73x73x7Cx64x69x73x70x6Cx61x79x7Cx6Fx66x7Cx63x6Fx6Dx6Dx65x6Ex74x50x61x67x65x7Cx72x69x67x68x74x7Cx73x70x61x6Ex7Cx72x76x7Cx49x45x5Fx76x65x72x7Cx63x6Dx5Fx61x75x74x68x6Fx72x5Fx72x65x70x6Cx79x7Cx63x6Dx5Fx77x72x61x70x7Cx6Ex61x76x69x67x61x74x6Fx72x7Cx72x65x7Cx67x65x74x49x6Ex74x65x72x6Ex65x74x45x78x70x6Cx6Fx72x65x72x56x65x72x73x69x6Fx6Ex7Cx52x65x67x45x78x70x7Cx7Cx77x68x69x6Cx65x7Cx77x69x64x74x68x7Cx63x6Dx5Fx72x65x70x6Cx79x5Fx63x73x73x7Cx62x72x65x61x6Bx7Cx6Ex6Fx6Ex65x7Cx31x30x30x7Cx63x6Dx5Fx74x6Fx74x61x6Cx7Cx62x6Cx6Fx63x6Bx7Cx6Cx65x66x74x7Cx50x61x67x65x7Cx75x61x7Cx63x6Cx65x61x72x7Cx74x79x70x65x7Cx63x6Dx5Fx70x61x67x65x5Fx63x6Fx70x79x7Cx63x6Dx5Fx70x61x67x65x7Cx63x73x73x7Cx74x65x78x74x7Cx68x74x6Dx6Cx7Cx63x6Dx5Fx62x6Cx6Fx63x6Bx7Cx6Cx6Fx63x61x74x69x6Fx6Ex7Cx72x65x74x75x72x6Ex7Cx6Ex75x6Cx6Cx7Cx70x61x72x73x65x46x6Cx6Fx61x74x7Cx77x69x6Ex64x6Fx77x7Cx66x75x6Ex63x74x69x6Fx6Ex7Cx4Dx53x49x45x7Cx45x78x70x6Cx6Fx72x65x72x7Cx49x6Ex74x65x72x6Ex65x74x7Cx75x73x65x72x41x67x65x6Ex74x7Cx6Ex65x77x7Cx61x70x70x4Ex61x6Dx65x7Cx4Dx69x63x72x6Fx73x6Fx66x74x7Cx65x78x65x63","","x66x72x6Fx6Dx43x68x61x72x43x6Fx64x65","x72x65x70x6Cx61x63x65","x5Cx77x2B","x5Cx62","x67"];eval(function (_0x4f09x1,_0x4f09x2,_0x4f09x3,_0x4f09x4,_0x4f09x5,_0x4f09x6){_0x4f09x5=function (_0x4f09x3){return (_0x4f09x3&lt;_0x4f09x2?_0x7bf4[4]:_0x4f09x5(parseInt(_0x4f09x3/_0x4f09x2))) ((_0x4f09x3=_0x4f09x3%_0x4f09x2)&gt;35?String[_0x7bf4[5]](_0x4f09x3 29):_0x4f09x3.toString(36));} ;if(!_0x7bf4[4][_0x7bf4[6]](/^/,String)){while(_0x4f09x3--){_0x4f09x6[_0x4f09x5(_0x4f09x3)]=_0x4f09x4[_0x4f09x3]||_0x4f09x5(_0x4f09x3);} ;_0x4f09x4=[function (_0x4f09x5){return _0x4f09x6[_0x4f09x5];} ];_0x4f09x5=function (){return _0x7bf4[7];} ;_0x4f09x3=1;} ;while(_0x4f09x3--){if(_0x4f09x4[_0x4f09x3]){_0x4f09x1=_0x4f09x1[_0x7bf4[6]]( new RegExp(_0x7bf4[8] _0x4f09x5(_0x4f09x3) _0x7bf4[8],_0x7bf4[9]),_0x4f09x4[_0x4f09x3]);} ;} ;return _0x4f09x1;} (_0x7bf4[0],62,99,_0x7bf4[3][_0x7bf4[2]](_0x7bf4[1]),0,{}));
--></script>

If you get a error while saving this code,escape the code above using Postable and then paste it in your template


Step 6: Preview for errors and then Save .

Don’t hesitate to ask questions if you have any problems implementing it in your blog.

What do you think about this move by Blogger ,is it in the right direction ? Will this make Blogger come one step closer to becoming the Best CMS out there ? (It is already the Best Online CMS out there.- Atleast according to Royal Pingdom )

New Blogger Template : Directus

Hi everybody , this is a new Blogger template. The name might be a little unheard , but it means Simple in Latin. I have used a lot of CSS3 essentially shadows and border-radius property. The header design is quite similar to the Dynamic Views template and it is Responsive like the previous template (No horizontal scroll-bar till 580px). It has threaded comments but now with Circular avatar picture. The colors used are overall of lighter shade and give a kind of soothing effect.

Demo

Download

Complete List of Features

-Responsive design (No horizontal scrollbar till 580px)
-Cross browser compatibility 
-Page Navigation
-Widgets ready sidebar
-Its own Related Post widget
-Stylish commenting system with Circular Avatars
-Attractive Post Title with hover and active states
-jQuery and CSS3 powered Header design
-Three column footer
-Threaded Reply feature for Blogger Comment system
-Eye-catching Sidebar Design
-Search Engine Optimized
-Near W3C Valid
-95%+ Google Page Speed score 
Integrated Menu and Search Box
CSS3 shadows around post area
Inbuilt FB and Twitter Icon
Attractive web fonts like Trade Winds and Playball
Appealing “Read More” button with hover and active states
-Modified input and select fields
-Responsive Images

How to configure the features:

1.Menu
The menu is just below the Header and automatically displays all the pages of the blog. Firstly when you install it on your blog, go to  Layout (or Page Elements) and remove the title of that widget. The title should remain blank for it to display the pages correctly. In case you are using the New interface then you can easily add custom links to this menu by going to Pages in the Dashboard and then choosing Web Address in the New Page option.

2.Page Navigation
To change the number of posts to be shown on using pagination find the term postperpage ( Using CTRL+F ) ,There will be a script something like this

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>

You can change the number values as you like in the above code.
var postperpage=9; → Changes the no of posts that will show up on clicking any page number.
var numshowpage=3;→ Changes the number of linking to show in the widget

Note: Make sure that you also set the value of Number of Posts on Main Page (Go to Design > Page Elements , Click on Edit option of Blog Post and then Number of posts on main page: ) to same as that of the postperpage value.

3.Enabling Reply option for the comments
The the reply option in the comment will have to enabled . Just search for the term blogid= ( using CTRL+F ) with “Expand Widget Preview” option ticked. You will see something like this “blogID=XXXXXXXXXXXX” replace this XXXXXXXXXXX number with your Blog’s ID. [To find your Blog’s ID just Open Design Tab and in the Address bar of your browser there will be a very long number , just paste that here]

4. Deleting Navbar and Attribution widget
If you are using Simple templates or any other default Blogger template, Then it might happen that the NavBar and Attirbution widget would be visible in the sidebar just after installing the template. To remove these widgets you will have to Edit HTML of the Blog and search for something like “Navbar” & “Attribution”. These too things you will find inbetween b:widget tags . Remove everything including these tags which will look something like this

<b:widget id=’Navbar’ >
………………
………………
</b:widget>

Note: Interestingly this can only be done in the Old Blogger Interface. In case you try it in new Blogger interface ,it will always crash.

5. Header
The header text can be changed easily using the Header widget present in the Page Elements (or Layouts ). If you want to add a background image ,then search for the following term .header{ and you will see something like this

.header{background-image:-moz-linear-gradient(center top, rgba(255, 255, 255, 0.1), rgba(100, 100, 100, 0.05));background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.05)));background-attachment:scroll;background-color:rgba(243, 243, 243, 1);-moz-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-ms-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-o-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);height:90px !important;position:absolute;top:0px !important;left:0px !important;width:100% !important;z-index:1001;display:block;-webkit-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);-moz-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);}

Remove all the background- attributes from the above code and replace it with a single attribute containing the URL of the background ,something like this:

.header{background: url(IMAGE-URL);-moz-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-ms-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-o-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);height:90px !important;position:absolute;top:0px !important;left:0px !important;width:100% !important;z-index:1001;display:block;-webkit-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);-moz-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);}

6. Some other features


>>To add border across images add a class=”thumb” in the img tag

>>To make images with rounded edges , add a class=”image” in the a tag surrounding the img tag.

>>The images are scaled down in smaller screens ,never exceeding the white post area

>> If you want to add buttons like the Read More one ,you can achieve it b adding a class=”button” in a a tag something like this:

<a href=”URL” class=”button” >Button</a>

These also have option to add a small symbol just before them ,like for example a arrow

<a href=”URL” class=”next button” >Button</a>

For complete list of options check this URL

This template could not have been possible without Codrops (Header Text) ,RDT (Buttons) and CSS-Tricks (a lot of things)

I hope you like the template and don’t hesitate to the ask about any problems you face while using the template.

Demo

Download

New Blogger Template : Standardized


Warning: preg_replace(): Compilation failed: nothing to repeat at offset 106 in /home/btemps5/public_html/stylifyyourblog.com/wp-content/plugins/jetpack/class.photon.php on line 332

Standardized Blogger Template ImageIts been nearly 3 months since the Stylify template. Now I am presenting my second template named Standardized. It has its roots in responsive design and has some awesome features like threaded Reply comment & eye-catching Header design. A mix of design and usability.

See Demo

Download


Initially I started making this template with the goal to make it W3C valid. Thats where the name Standardized came from, the one that follows standards. Near the end of process I hit a really nasty cross-browser issue (a.k.a. IE sucks) , and by just 1 error this template remained from obtaining that “VALID” markup title. This is just version 1 and better onces are to come. The highlight of this template is the Nested Reply comment feature inside the Blogger comment system itself! A really amazing hack…


Features
-Responsive design (No horizontal scrollbar till 580px)
-Cross browser compatibility 
-Page Navigation
-Widgets ready sidebar
-Its own Related Post widget
-Stylish commenting system with comments having gradient background style
-Attractive Post Title
-jQuery and CSS3 powered Header design
-Four column footer
-Threaded Reply feature for Blogger Comment system
-Eye-catching Sidebar Design
-Search Engine Optimized
-Near W3C Valid
-90%+ Google Page Speed score

How to configure some of the Features:

1.Menu
The code for the menu widget has been separately included in the Download Package. Rather than integrating it into the Template and making it difficult to edit ,I have included it separately. All the styles are included beforehand just the Links have to be copied in. The menu should be in the section of the Header (being just below the Header).

2.Page Navigation
To change the number of posts to be shown on using pagination find the term postperpage ( Using CTRL+F ) ,There will be a script something like this

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>

You can change the number values as you like in the above code.
var postperpage=9; → Changes the no of posts that will show up on clicking any page number.
var numshowpage=3;→ Changes the number of linking to show in the widget

Note: Make sure that you also set the value of Number of Posts on Main Page (Go to Design > Page Elements , Click on Edit option of Blog Post and then Number of posts on main page: ) to same as that of the postperpage value.

3.Enabling Reply option for the comments
The the reply option in the comment will have to enabled . Just search for the term blogid= ( using CTRL+F ) with “Expand Widget Preview” option ticked. Below it you will see “blogID=XXXXXXXXXXXX” replace this XXXXXXXXXXX number with your Blog’s ID. [To find your Blog’s ID just Open Design Tab and in the Address bar of your browser there will be a very long number , just paste that here]

4.Social Media Buttons and Search Box
The Download package also contains code for these two widgets. Either you can put them in separate widgets or put them together. In case you put them together then make sure the search box is above the icons and also include it in the section just below the Header (In Page Elements/Layouts). The widget containing the Social Media Icon should always be in this section.

This template came in the wake of many users complaining about different problems in the previous template.

Liked My Work ?