Showing posts with label Blogger News. Show all posts
Showing posts with label Blogger News. Show all posts

Friday, 22 January 2010

Blogger Pages are finally out

Blogger has now released the pages feature just like in Wordpress blogs. You can use these pages for about me, contact me etc. The blogger pages are more or less like the blogger posts. But these pages wont appear in the blog archives and the blog feeds.

How to create a Blogger Page?

1. Login to your Blogger Account

2. In the posting Tab you will find an Edit Pages optionimage

3.Click on the New Page button and you will get a new page editor(same as the post editor that you normally use)image

4.You can make the page, in the same way as you create a post.If you want to enable commenting on the page, then you can do so from the post options

image

5. When you hit the Save And Publish Page button, you will be asked if you would like to add the Page Gadgets onto your blog

image

You can add the page gadget on the sidebar or as Top navigation Tabs.These widgets may not properly sync with your blog template.So i would advise you to choose the No Gadget option and add the links manually to your blogger template. You can obtain the links to the newly created pages from the Edit Pages Tab.

If you opt to add any of Pages gadget, then you will get an easy interface to add the page links to your blog. (now available on draft.blogger.com only) Here is what the Gadget options will look like

image

 

Limitations

1. You can only create a maximum of 10 pages.

2. Separate templating for pages would be a little too difficult(but not impossible :) )

Advanced options.

If you are familiar with the usage of blogger’s conditional tags and want to do something special with the pages, then you can use the following conditional tag for that

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
When condition is true this will be done
</b:if >

eg: If you want to hide the sidebar on the Static Pages, then you can use these conditional tags properly to implement that

Here is the incomplete sample code for the same

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type="text/css">
.sidebar-wrapper{display:none;}
</style>
</b:if >

This code should be placed above </head> in your template.

you will have to add some more CSS definitions to make it complete(you should increase the width of the post area.. ) these will be different from template to template. So  you will have to figure it out :)

So are some of my Blogger Pages. – Subscribe , Contact Me

Misbehaviour

1. If you are using the automatic post summaries hack, then your pages might not be properly displayed. I have updated the Automatic Post Summaries Trick so that it does not conflict with the static pages. So if you are using an older version of this trick, then do update

2. If you are using some trick to hide the post contents on non-post pages,then also you might end up with  problems on your new Static Blogger Page. You can either undo the trick or update the codes properly to avoid conflicts :)

read more...

Thursday, 17 September 2009

Show avatars on Blogger Comments

Blogger is now introducing features every day as part of its 10th birthday celebrations.Now it has formally announced the Blogger Comment avatars. To know what it means take a look at the comments here on this blog and you will see the profiles pictures of the commentators near to the comments.If you are using some default blogger template things would be much easy.Here is a little screenshot of the new feature.

Implementation of Comment Avatars

1.First of all Go to Blogger > Settings >Comments and enable “Show profile images on comment”

2.Now if you have a normal un customized template you will see the avatars on the comments on your blog.

3.If you have a customized template you will have to add some codes and play around with your template.For that first go to Blogger Layout >Edit HTML and backup your template.

4.Expand the widget templates and check if you can find this line there

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>



If you can’t then that means we have something to do..



If you couldn’t find this,then do the following steps.



a)Find




<dl id='comments-block'>



and replace it with




<dl expr:class='data:post.avatarIndentClass' id='comments-block'>



b)Now Find all occurrences of




<a expr:name='data:comment.anchorName'/>



and replace each of it with




<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>



If you are using the author comment highlighting trick and if doesn’t work out with that trick,then leave a comment and i will try to help you out..



Further Styling.







If you want to add a default avatar for the ones with no profile pics,then place the CSS code just above




]]></b:skin>



CSS Code




.avatar-image-container {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrNZkaSGAeP7wfh1UzHXXWNnli1Q4KkssTSGnX0Pzrc-JBi1hV8_cmbPo6ArzrkQxwGckNM8IHQ3b3SfcYHBLwchWdTgLZxSgfq2z6QBIQCYhPZu6cR-Gpm28UvUSHYNJFTjI9_3fug/s400/default.gif); width:35px;height:35px; }
.avatar-image-container img { border:none;}



You can customize the CSS according to what you need.



If you need bigger avatars instead of smaller ones,then use the following CSS instead of the one above.




.avatar-image-container{width:50px;height:50px;margin-top:-5px;}
.avatar-image-container img {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuerQ3UmmeTPwkWEA4m90FPpidUTDsp2NH5zsdmkECpdMzaQmzLqqKI8BmFIwUxc1y6EM1adiwBTgaVWH1Fauq4vM90f1uSxf7lUfjDWRe5mt42uiPKL0gv_bq1-G34BwfuJhPdfjg7FE/s400/grav.png);width:50px;height:50px;}



This will give you a bigger avatar and also a default gravatar image but it has a little drawback.It will also resize the small blogger favicons to a big size.(blooger favicon is displayed when a blogger user doesn’t have a profile avatar.Similarly OpenId also has a similar small icon.. ).



BTW to set you avatar pic you can use two methods.You can choose the edit profile link on your blogger profile and upload an image there,The second method is to enter a blogger comment somewhere in any blogger comment form and then click the Preview button instead of the Post Comment button.Now you will see an option to upload your avatar.



In case anything bad happens restore the template backup.. and comment here..:)


Permalink: Show avatars on Blogger Comments

read more...

Thursday, 10 September 2009

Post Summaries on Blogger With Read More

Blogger is fulfilling some of our expectations. Now blogger officially supports Post Summaries With Read more.This means that you wont need any JavaScript and CSS based tricks to display post summaries on Non-Post Pages.The static pages would be out soon. A screenshot on the official blogger buzz blog has made it more clear.

How Does This Work

Blogger has introduced something called jump breaks. This will help you in creating the summary.

What is a jump break? - Jump break is a special tag which can be inserted anywhere in a post using the post editor.When you have inserted a jump break into a post, the portion of the post above(or before) the jump break will serve as the summary of the post. This means that only this smaller portion will be displayed on Non-post pages.

How to insert a jump break?

If you are using the New Advanced Post Editor, then you can insert the jump break easily from the post editor.

If you are not using the New Post editor,then you will have to manually type the jump break tag . To do that just place <!-- more --> [Note that there is a space before and after more.] at the position where you want the break to occur. Now try going to your home page,and only the summary would be displayed on the home page.You might get problems if you are using a modified and highly customized template. In that case try the following adjustments. Go to your Blogger Layout > Edit HTML and expand the Widget templates. Now check if the following code is already present in your template
    <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>



If this code is not present in your template,then add this code before




<div class='post-footer'>


Now it should work properly.. If it doesn't,then leave a comment here and i will try to help you out..

Changing the Read More Text



By default the read more link text is Read more »  . You can change this to whatever you like. To do that, Go to Blogger Layout and click on the Edit link on the Blog Posts Widget.



image



Change the Post Page Link Text and Save the Settings..



Drawbacks of the New Feature





For the post summaries to work effectively, you have to edit each of your posts and add the jump link in each of them. Blogger wont generate summaries automatically.:(



A mistake that you might make.



When you insert a jump break in the post,the part of the post after the jump break gets truncated. In your posts,there are some opening div tags before the jump break and some of these are closed after the jump break. So when blogger truncates the part of the post after the jump break,the closing div gets missing. That's why the sidebar shifts to the bottom.



So in order to solve this you should take some care in inserting the jump break.The jump break shouldn't be inserted into open tags..



For example something like this shouldn't happen.(You can see these things if you switch to Edit HTML instead of Compose)



<div>

This is the short summary


<!-- more -->


This is the rest of the post


</div>



As it is clear from this code, the jump break is inserted into an open div tag and the div is closed after the jump break.This should not happen.You should insert jump breaks after closing the div tag..



So this should look like



<div>

This is the short summary


</div>


<!-- more -->


This is the rest of the post



I hope that the blogger post editor will soon show warnings when the jump break is inserted into open tags.


Permalink:Post Summaries on Blogger With Read More

read more...

The Best Blogger Resources

There are many many sites about blogger. Here i would like to share with you all blogger related sites which i love. All of these are my personal favourites.So i thought of sharing them with you guys! All of these sites provide tutorials,gadgets and templates which can be used on Blogger.



Blogger Tutorials and Gadgets


Amanda Fazani

She writes at Blogger Buster and Gadgets For Blogger . Blogger Buster is the Best Blog on Blogger Tutorials. Gadgets For Blogger is a directory which list all useful gadgets that can be used on blogger. Amanda also designs templates which can be found at Blogger Buster Designs and she also has made some premium templates at Theme Forest

Some Other Sites on Blogger Tutorials

  1. Blogger Tricks
  2. Anshul Dudeja
  3. Techie Blogger

Blogger Templates


Klodian

He is the person behind Deluxe Templates. He is now a good friend of mine and he has got a good collection of Blogger Templates.Some of these were inspired from Wordpress and other templates.All of these templates are perfectly coded and you can get them from his blog.

Dante

Dante has some truly original Blogger Templates at his blog.(Dante Araujo) . I really love his templates because they are so original. and elegant .He has got some really elegant templates that serve as image galleries. I haven't even seen any wordpress template to match those gallery templates. All of these blogs are powered by blogger.

Other Template Resources

Another great resource for Blogger Templates is Btemplates . Its actually the biggest collection of Blogger Templates which are organized well into categories and tagged properly so that you can find the best one out of them.

You can also check out my bigger list of Blogger Template Resources .

There are many other good resources for blogger. These are just my personal favourites.
read more...

Wednesday, 2 September 2009

New Advanced Post Editor For Blogger

Blogger has released an updated version of the Post Editor.This one has more features than the old post editor.Here is a screen shot of the new Post Editor,so that you can get an overview of what is new in this advanced post editor.

Some of the added Features in this new Editor are:

  1. Improved Image Handling
  2. Improved Raw HTML
  3. Geotagging
  4. Resize the Post Editor Vertically
  5. Easy Link Editing in Compose Mode
  6. Better Previews
  7. Draggable Placeholders
  8. A New Advanced ToolBar

How to Enable the New Post Editor

Go to the Settings Page, and under the global Settings, Opt for the Updated Editor and save the settings.


enable t
he new blogger post editor
Further Reading: Blogger Help Center
read more...

Tuesday, 25 August 2009

Blogger Releases the new version of the Label Widget

Blogger,as a part of its 10th Birthday celebrations, has now released a new version of the label gadget.This one is much better that the old version

What is new?

  1. It comes with a Label Cloud.
  2. It lets you choose which labels are to be displayed.
  3. You can customize it further using CSS.

Drawbacks

  1. The cloud just has 5 variations.All labels will be divided into 5 classes depending on the usage of these labels.
  2. It would have been better if there was a bigger number of classes.

How to Customize?

You can customize the looks further by using CSS..As i said it has 5 classes of clouds..You can add CSS styles to each of them.

Here is a sample Style which will give a bluish look for the cloud..Here i have applied styles for all 5 label classes and their hover styles (so 10 style definitions in total).

.label-size-5 a {color: #2789ce; /*color of a label of class 5*/
font-size: 3em;
text-decoration: none;
}
.label-size-5 a:hover {color: #2789ce; /*color of a label of class 5 on hover*/
text-decoration: underline;
}
.label-size-4 a {color: #2789ce;/*color of a label of class 4*/
font-size: 2.5em;
text-decoration: none;
}
.label-size-4 a:hover {color: #2789ce;/*color of a label of class 4 on hover*/
text-decoration: underline;
}
.label-size-3 a {color: #2789ce;/*color of a label of class 3*/
font-size: 2em;
text-decoration: none;
}
.label-size-3 a:hover {color: #2789ce; /*color of a label of class 3 on hover*/
text-decoration: underline;
}
.label-size-2 a {color: #2789ce;/*color of a label of class 2*/
font-size: 1.5em;
text-decoration: none;
}
.label-size-2 a:hover {color: #2789ce; /*color of a label of class 2 on hover*/
text-decoration: underline;
}
.label-size-1 a {color: #2789ce;/*color of a label of class 1*/
font-size: 1em;
text-decoration: none;
}
.label-size-1 a:hover {color: #2789ce; /*color of a label of class 1 on hover*/
text-decoration: underline;
}



Here all of these CSS styles are customizable.You can change the colours and font sizes of each of the 5 classes.








color: #2789ce; is responsible for the colouring of each of the classes.You can change it appropriately with some other hex colour code or something like color:red;



You can adjust the font size of these 5 classes by adjusting the corresponding font-size: attribute of that label size class.. (em is a unit of font size just like px)



I have commented the css codes(10 comments)..You can remove those comments if you want(eg: /*color of a label of class 2 on hover*/ is a comment)


These CSS style definitions should be placed above

]]></b:skin>


If you are not impressed by the customizability of this blogger label cloud,try this advanced version of the cloud which is highly customizable Label Cloud Widget For Blogger

read more...

Monday, 10 August 2009

What can you expect from blogger in the future?

If my guesses are correct,blogger will soon come up with post summaries(+ read more link) and static pages.

Some of you might have noticed the changes to your blogger templates.I have seen some new codes which give me the feeling that something better is coming!



 




Blogger May Soon have Static Pages like in Wordpress

static-pages-on-blogger

This code gives me the feeling that blogger too will soon have Pages like in Wordpress







Blogger May soon have the Read more link and Post Summaries. - Blogger has now added this Functionality.

This thing has been around for a while.

read-more-for-blogger

This code should probably give the indication that we will soon see post summaries and read more links on blogger..

When will these become a reality.. :)

read more...

Friday, 27 June 2008

Inline Comments For Blogger / Blogspot

Blogger has now come forward with inline comments like in wordpress.This allows you to show a comment form beneath your blogpost just like in wordpress(in fact a little better) Inline Comments for Blogger or Blogspot

The comment form is embedded as an iframe. This is still in Beta. So if you wish to create an inline commenting system for your blog login to your blogger(blogger in draft) account at http://draft.blogger.com.
Goto Settings>Comments and set Comment Form Placement as
Embedded below post
Inline Comments for Blogger
Save the settings and if everything went right you should get an inline comments form like mine..




If you have a modded template this may not work for you. In that case try these steps.. Goto Template>Edit Html


  • New Updated Method

  • Find this line in your template code:




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


    and replace it with


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

    <b:include data='post' name='comment-form'/>


    I hope you got the embedded comment form by now...;)







    If this didn't work for you try the steps mentioned below..



    Find find this 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>

    Now replace this code with
    <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>
    Sometime you may not get it right even after doing this..If this too doesn't work try the following method Here what we are actually trying to do is that we are finding the Post a comment link which appears after the list of comments and replacing that link with the new comment form..

    The normal code which generates the Post a Comment Link looks like this


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

    But this post a comment link would be there at different places in the template.Make sure you find the one which is shown after the list of comments..And now replace this comment link by the new comment form code.. that is


    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    If this too doesn't help or if you get into some errors or if you need some modifications please let me know.. I would be happy to help you..
    Help me spreading this new feature to the blogosphere by blogging about this
    You may also bookmark this post on your favorite Social bookmarking site..

    Why not help me by digging this post.
    read more...