Get Error Messages On Template Editor??Here the Tips

Today tutorial blog and blogger hack. Do you know about this error messages?

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.,,bla,,,bla

I’m sure that you exactly know about type of message above. It usually appears when we get the wrong way while pasting a HTML into your template editor. The error message given when you attempt to Preview or save a HTML.

As we know, New Blogger Templates are coded in XHTML which is based on XML. XHTML is a much stricter language than HTML and you will encounter more error messages while working on the new templates.

I will give you some tips to handle this errors. Different errors will be solved by different method too. So, check the type of your error message and find the solving tips in my list tips below:

- WHEN THERE IS NO MATCHING END TAG : In XHTML every tag should have a matching end tag. If there is a end tag missing you will get the following error message :

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "

Matching end tags are </div> for <div>.

All tags should be closed using a forward slash. If there are empty tags then they should be closed by putting a space before the forward slash. For example : <br />.



- SAME WIDGET ID ERROR : If you add a widget or Page Element with the same ID Number as a widget already present in the template you will get the following error :

More than one widget was found with id: archive1. Widget IDs should be unique.

To correct the error just change the number in the widget ID. In this case change it to archieve1

- ADDING CODE BEFORE THE INCLUDABLE : If you add a line of code before the includable line in an expanded widget template you will get the following error :

The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements

To prevent this always add any code after this line <b:includable id='main'> in the widget code.

.- USING THE CHARACTER "&". When using ampersand within an attribute value it should always be written using a m p; (without the spaces) and not simply an & character. If this is not done you will get the following error message :

Your template could not be parsed as it is not well-formed. Please make
sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in
the entity reference.


OR THIS


Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "key" must end with the ';' delimiter.

For example this is incorrect: <title>Cats & dogs</title> while this is
correct: <title>Cats &a m p; Dogss</title>. Omit the spaces between a m p. Do this in links also.

- LINK ERROR : Following error is seen :

Your template could not be parsed as it is not well-formed. Please make
sure all XML elements are closed properly.
XML error message: The value of attribute "href" associated with an
element type "a" must not contain the '<' character.

when you have in your template code of this type :

<a href="<data:post.url/>">Link list!</a>

To correct this error change the code to the following :

<a expr:href='data:post.url'>Link list!</a>


Are you still with me friend? That’s all the tips about error message in your template. Just keep in your mind to Backup your template first before you do anything with your template or you will regret it. I hope this tips will help you to solve the errors.


Feel free to subscribe my article to your e-mail or feeds reader &#61514;.

Happy blogging and see ya at my next article,
Hi,,please subscribe my RSS for Free by click this image

Read More.... »»

How to Change Your Header Imager Automatically

Today tutorial blog and blogger hack. How do you feel today? ready for hack your blog now? I will write about how to make your header image always change automatically with your images. Your header image will change if you open the new page or just refresh it.
Ok, now we start to hack your template, don’t forget to backup your template to your computer (that’s so funny if you don’t know how to back up yours, don’t you?)

Now, follow these instructions:
• Go to the edit Template
• Backup first ( I say it again or you will be sorry to yourself )
• Copy these code below

<script type='text/javascript'>
var gbr= new Array()
gbr[0]="http://yourimagehere1.png"
gbr[1]="http:// yourimagehere2.png"
gbr[2]="http:// yourimagehere3.png"<
gbr[3]="http:// yourimagehere4.png"
gbr[4]="http:// yourimagehere5.png"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + gbr[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

• And paste below this code

]]></b:skin>

Now, save your template and check your blog by refreshing on your blog page.
Btw, don’t forget to change the red word with your images.

It’s done and happy blogging for you all.
Feel free to subscribe my article to your e-mail or feeds reader .
Happy blogging,,
See ya

Hi,,please subscribe my RSS for Free by click this image

Read More.... »»

Page Navigation Hack Code

Today tutorial blog and blogger hack. One question for you, do you like attractive blog or just a simple blog?If you like the first one, now we will make it real with some hack that make your blog more attractive.

 

Some time when you look at the bottom of other blog, you will find a page navigation which the functions is move the page for the pages in sequence without clicking on the category.

 

We will make it with some CSS code, so if you not want your blog slower than usual don’t make your blog with full CSS code.

 

Ok, now we will continue with the code:

• Open your Edit HTML and back up your blog first
• click on Expand widget template
• Copy these code below and put above the ]]></ b: skin>

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

 

• Now find this code or similar in your blog
  
  <b:section class='main' id='main' showaddelement='yes'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
  </b:section>

• now copy these code below and put under </b:section>

<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=6;
var displayPageNum=4;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount &percnt; pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00&percnt;3A00&percnt;3A00&percnt;2B08&percnt;3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount &percnt; pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00&percnt;3A00&percnt;3A00&percnt;2B08&percnt;3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

• Save and done

Well, that’s our tutorial blog and blogger hack today, hope you like it. Don’t forget to subscribe this blog and get the update direct to your Feed or E-mail

 

Happy Blogging

Read More.... »»

Different Background for your Post

Today tutorial blog and blogger hack. at previous article we have talked about hack post date and the result was your post date disappeared!!. Now, we will continue our hack inside our post. Maybe you have seen the Title of article today. That’s right, we will make some different background or maybe some different image background for our post.  It will be nice to see our post have different background.

 

If you boring with your post background, just use this hack and make your blog more colorful. You can apply these setting for your previous article too and you can remove or change it anytime :). Let’s begin our hack:

 

• It is done while you write your article by use some HTML code
• Just use a “div”  element, here the full code

Code for Changing the Color of the Post Background

 

<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">
Your text goes here....
</div>

,,,,Put the pink code where you put on the beginning post

,,,The Orange code at the End of your post

,,,Replace the Green code by your preferred color hex value 

Code  for changing with image post background

<div style="background:url(URL address of your image) no-repeat;">
Your text goes here....
</div>

,,,Replace the Green code with your URl address of your image from image hosting (Photobucket, tinyurl. etc).

 

 

That's for tutorial blog and blogger hack today, i hope this hack will be useful for you to make your blog more attractive, if you have any question just tell me on my comment box,,Happy blogging all my friends :)

 

Read More.... »»

How To Hide Your Post Date

Today tutorial blog and blogger hack. Nice to write a post again in my busy time, actually it’s not to busy but i think i must reduce my time for blogging so i will keep my another activity still vary.Ok, forget about my daily.

 

Now we will talk a simpel tutorial about post date. Post date  can be define a date that show publish of article on your blog. It’s normal to show date post to show our article  consistency. But sometimes it’s nice to hide our post date, let’s make it real.Here the Hack:

 

• Go to Layout and Choose Edit HTML
• Back up your blog and click on Expand widget template
• Find this code h2.date-header {
• Add some code like this visibility: hidden;
• Here for the example

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80&percnt;;
color:#777;
height: 0px;
visibility: hidden;
}

• Save and done

 

It’s  will make your post date dissapears from your blog.If you want to make it to default and show your post date just delete the red code. That’s tutorial blog and blogger hack for today.  Happy blogging for every one

Read More.... »»

Super Hack Read More

Today tutorial blog and blogger hack. Do you know Peek-a-boo Hack? Or also known as read more? It’s difficult to say that many blog have this one inside. But sometimes it difficult to apply on our post, always put the code and publish. next post, put the code again. So why we make it simpel, read more always appear without put the code?.

This read more code i got from here. and here  Juat check For more info

 

Just relax and now we will start the hack.

 

Let’s Hack this one:

 

• First Check Your blog, if your blog has installed the previous read more, make it to default again to be  without read more. i mean redo your read more code. Just check the previous Tutorial about Read more Here.
• if you done make your blog without read more code,
• Open Your Layout, Choose Edit HTML, and back up your blog first
• Expand Widget Template and now copy this code

<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://www.geocities.com/fabisnis/hack-readmore.js' type='text/javascript'/>

 

• Put those code below  </head>  tag
• Now find this tag <data:post.body/>
• Delete and Change that code with code below

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 

• Save and Done

Now you can post your content without write the read more code again, it’s Super Read more and it will appears otomatic. If there is any problem just check again those steps above and read carefully.

Any Question just ask, my YM always stand on sidebar.

Happy tutorial blog and blogger hack for all

Read More.... »»

Display All your Post Using Feed2JS

Today Tutorial blog and blogger hack. We know that importan to display all of our post so the visitor can find it easily. Blogger has a gadget called Blog Archive where we can show our post by dropdown or list menu. Or you can display all your post by HTML/javascript code but you must add this manual if you have a new post.

Ok, let’s we  make it with some different way, Using Your Feed. We will use the third party called Feed2JS.

 

Here the steps:

• Open Feed2JS
• Enter your Feed URL ( if you using feedburner here the fromat : http://feeds2.feedburner/yourID )
• For another form just choose what do you like such as show a title or not, date post, and else
• Click preview if you want to see the display of feeds
• if you done with form just click generate javascript  to get the code
• Now we will put the code by create a new post
• Go to your Dashboard and choose New Post
• Paste the code you got before in post (on tab edit html)
• Choose Post Option and set date to be the oldest post
• Publish and Done

Now you can Put the link of your display post where visitor can see it maybe Navbar or Sidebar.

You can See my Link to Display All my post at Sidebar. Just click my list  and you will see all my post inside. One Benefit using feed is we mustn’t add the list by manual if we have a new post, so this list will be automatic added by our feed.

 

Ok, That’s enough today for tutorial blog and blogger hack.Hope we will meet again in the next post. Have a nice day

 

image source: www.scribemedia.org

Read More.... »»

How To Change Your BackGround Image (I)

Today Tutorial blog and blogger hack. Tonight i will give some blogger hack for you, some blogger never satisfied with their template and always tend to change it frequenly. One think from template part that i always see like background and header had be some problem. But now we will start blogger hack with Background changing. Lets make it go through.

• Find your image at google or else, you can also use tile image here
• I use this image taken from image site( dont forget to host your image at image hosting such as Photobucket, or  flicker)

 

• To make this image as your background Go to Layout and Choose Edit HTML and look for  code from your body template, look like this example:

 

body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

 

• Ok, now to focus at the bold line, we will modify this line to adding our background. we just simply add the following code ( with green code):

body {
background:url(http://www.imagehost.com/yourimage.jpg);
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

 

• Where you can change the green code with your image URL, Save and done
• Please look the part of image below (taken from testing blog):

• The image has repeated acroos the whole page.

You can try it by yourself, it’s easy to change background of your blog. Ok that’s Blogger hack today, i will see you at the next posting about another blogger  hack. Don’t forget to get update this blog free via your e-mail below. thanks

Read More.... »»

Add 3 Coloumn Footer in Your Blog

Today Tutorial blog and blogger hack.  I still have no mood about continue my project, some problem still holding in my head. But, writing in blog is get my self relax  a bit. Ok, just ignore my problem and we will have a schedule today for post a new content. how about make some Blogger hack in our template? Like adding 3 coloumn in footer?i see, you all agree about it. let’s begin this hack.

• Log in your blogger account
• Move to Layout and Choose Edit HTML
• Back up your blog first, and click on expand widget template
• Copy this code and paste before the tag </b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

• save the template
• Now, find this code

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

 

• Change the red code with code below

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

 

• Save and done

Now you can check your Layout, if you follow the instruction you will see three footer have added. Congratulate

That’s blogger hack today, please enjoy this blog and i will give more tutorial blog and blogger hack for you.

Read More.... »»

Hot Gadget : Related Post

Today Tutorial Blog and Blogger Hack. We all know that making visitor comfortable in our blog is the priority. They will feel like a someone special if we serve the best for them. For example if they want to find your old article that related to they want, your blog will give it an easily link to them. So it call related post widget. All you have to do is give them related post and they satisfied with your blog service.

 

Now our blogger hack today is making a related post below your post, so we will make it simple:

• Now Download This script here
• Open that file and copy the code
• Go to your Layout and Choose Edit HTML
• Click on Expand Widget Template (back up your blog first)
• Now paste the code below <data:post body/>
• Save and done

 

If you want to change the word “ Related Post by categories” by yourself just find this word on the code.

 

It’s enough for today and if you like our tutorial blog and blogger hack just subscribe our RSS or E-mail

 

See you at next Tutorial blog

Read More.... »»

How to Embedded Comment Below Post

Today tutorial blog and blogger hack. We will talk about embedded comment below the post.  it’s usually  can be done with an easy ways. Upps i say maybe two ways to embedded comment below the post.

Let’s try the first one:

1. Go to Setting and Choose Formatting
2. Choose Comments  and look at comment form placement
3. Then  choose embedded below post

Now Check your blog, is it the comment form is below post yet? If it is, now we done to do it. congratulate for your success. Now enjoy the comment below post in your blog

But, if it is fail. Now we move to the next step.

1. Go to your Layout
2. Choose Edit HTML and click on Expand Widget Template
3. Backup your blog first
4. Now find this code, especially focusing at red code

<p class='comment-footer'>

        <b:if cond='data:post.allowComments'>

        <a expr:href='data:post.addCommentUrl'            

expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

    </b:if>

</p>

5. Change these code with this code below

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<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>
</p>


</b:if>

6. Then save your template and it’s done

 

Well, it’s very useful if we have embedded comment below post cause visitor can easy to give a  comment .

Have a nice try 

 

Technorati Tags: Tutorial BLog,Blogger Hack

Read More.... »»

How to Make Favicon for Your Blog

Did you use favicon besides icon standard Blogger?Favicon is found on icon our bar address at web browser. The example for blogger defauls icon  like this.

we can change it with style our own like this:

 

Let's make it with easy step

1. Make  picture/image size  32x32 with format type jpg, gif, png, or bmp
2. Then open the online favicon maker like dynamics drive or favicon generator.
3. Click on browse and add an image that will be our icon
4. Then click on Generate or create icon
5. Download icon and upload at image hosting like geocities or Photobucket.
6. After then,  You will have an image URL from image hosting eg:    http://www.geocities.com/masterblog/favicon.ico    
7. Open Template and Edit HTML , copy this code and paste above <b:skin><![CDATA[/*  script

<link href=' http://yourimageURL ' rel='shortcut icon' type='image/x-icon'/>

 

      8.    Dont forget to change the code red with your URL image/icon.

      9.    Then Save

 

Congratule, now you have a new favicon with your own style..

 

Technorati Tags: tutorial Blog,blogger Hack

Read More.... »»

How to Show Post Title Without Full Content for Label

When performing a search or a content  label (category) on our blog. it’s always display full content for example if we choose label “tutorial” it will be display all post on tutorial label with full content. How if the post in tutorial has 100 post? It will be difficult for us and for our reader to wait our blog loading to display it.

So we will make it short, from Full content display to short display with only display the title and posting date. Of course, loading page will be faster 50x  than normal when opening page label. Great yeah….

Let’s move on, simply follow this Steps:

1. Open Template, Backup your Template and click on Expand Templates widget.
2. Then See the code below
   
   

<!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <data:adStart/> <b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2>

</b:if><b:include data='post' name='post'/>

     3.   Then look for code red above, change the code red with this code below

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> <data:post.title/></a><br/><br/> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/>

<b:include data='post' name='post'/> </b:if>

 

      4.  Finally save your setting.

Congratulate, now your blog will only display post tile and post date withour full content when reader click on label/category.

Thanks’ for coming

Technorati Tags: Tutotrial Blog,Blog Hack

,

Read More.... »»

Installing Neo Template ( The Lightning Fast Template)

Welcome to The new template with lightning speed for your blog. It’s called NEO Templates.

Let’s look at this features:

1. A visitor can navigate through your blog much faster because the entire pages won’t be reloaded while vieweing every post.
2. Newer comment are shown before older ones instead of the usual oldest to newest order.
3. Rounded corners box and pleasant colors add to the visual impact.

Do you interested?just look at blog that using neo templates here.

Now, we will begin to install neo templates without losing widget from your previous templates.

Disclaimer: I will not take the responsibility for your losing widget if you not follow the instruction. if you follow these instruction it will be smooth. So, read these intructions twice before you start

Step 1: Back up your blog (its very important!!)

Step 2: Go to Template tan and click on Edit HTML, Copy all the lines after <body> tag that start with <b:widget (except the widget with id “BLog1” which is the main obody widget) and paste them all to a file (notepad, word,etc)

Step 3: Download xml file here and save the template code. Open the neo.xml and find this portion of code shown below . copy paste all your widget to the place indicated below (between </b:widget> and </b:section>). Save the file

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Posts' locked='false' title='Posts' type='HTML'>
<b:includable id='main'>
<div id='LabelDisplay'>
<div id='LabelTitle'>
</div>
<div class='widget-content' id='LabelPosts'>
<script language='javascript'>fetchLatestPosts('<data:blog.homepageUrl/>', '');</script>
</div>
</div>
</b:includable>
</b:widget>
Add all your widgets here...
</b:section>
</div>

 

Step 4: in Edit HTML , browse and upload this file to blogger. When you do this, you should not get the error shown the image

if you get it, DO NOT click  on confirm and save. If you do so, you will lose those widgets permanently.

Step 5: Now if you go to the page element. you will see 3 colomn as shown below . Leftmost colomn has the label widget and the second colomn has the posts Widget at the top. These two widget come with neo by default. Though they  are better placed at the top, you could move them  wherever you want  but NOT DELETE THEM. If you delete them, you will lose the functionality (asynchronous loading of Posts).

Step 6: Some final setting to be in place for Neo work properly. Go to Setting / site feed and if you are in basic mode switch to the advance mode and save. Go to the formatting and set it to 1 post in main page (Neo will just replace this post whenever you click on another post title. if you have many posts in main page, it will be weird if only the topmost one changes).

It’s done and congratule you have the lightning  fast blog.

Thanks to Hackosphere for this tutorial and neo templates. Great idea ..

Read More.... »»