Increase Your Recent Posts and Comments from 10-100

You can easily add recent Post Widget into yours blog with One Click and some little Edit in it ,The most important advantage of this recent post widget is that you can show from 10 to 100 recent post in to yours Blogger webpage or any other web page whether it is wordpress or it is Blogger .If you are blogspot User then Just click below Buttom to add Recent Post Widget into yours Blog . Remember you have to do a Little Edit in recent Widget code.




After adding recent widget in yours blogs Go to Dashbord >>>Layout >>> Edit Recent widget Html and put yours blogspot webpage name there or yours website name there as seen in image below.


————————

Just like the above one you can also add recent comment widget directly into yours blogger webpage ,this is a customize blogger widget and you can edit this directly from yours blogger account after adding this widget .
The most important features of this widget is that it provides you the option to display from one to more then hundred comments ,and controls number of characters to display in comments ,At present this widget is displaying 100 words, if you want to edit this you can do this from Html code after adding this widget into yours blog,

Social Bookmarking Widget For Blogger Like WordPress

Social bookmarking services are a useful way to aggregate your content across the web and bring more awareness to your blog and many bloggers have already added it in their blog’s. Some site’s like Addthis.com provides a tool with many bookmarking sites in it.It is also widely used by bloggers out there..But still many bloggers are jealous about the social bookmarking widget available for wordpress.Don’t worry blogger too can have it now..You can Have a look at in my blog at the last of this post.

Continue reading Social Bookmarking Widget For Blogger Like WordPress

How to Highlight Author Comments

Highlighting author comments using a different background color, border or different style of text helps readers understand when you have personally posted a response.

So far, “How to Highlight Author Comments” has been the most requested article in my Skribit widget, so in this post I’ll explain how you can change comments which you have posted yourself to distinguish these from other comments on your posts.

The main obstacle I’ve faced in writing up this article so far is that different Blogger templates code the comments section differently.

While the easiest method for me to write would have been to say “Find this code and replace it with this”, such a method would only be usable by bloggers whose template matches the code.

Instead, my explanation may be a little more complicated than usual, though I hope this explanation will ensure anyone using a Blogger template will understand how to implement the highlighted author comments hack!

Backup your Blogger Template!

Before even attempting to customize your Blogger template, the first thing you should do is back up your template. This ensures you can easily restore your original template if something goes wrong. Also, as most of us cannot see comments unless we are viewing a post page, it would be impossible to see if code changes have adversely affected the comments section.

To make a backup of your Blogger template, simply go to Layout>Edit HTML in your Blogger dashboard, and click on the “Download Full Template” link. This will save your existing template as an XML file which you could use to restore your blog, just in case 🙂

Finding the Comments Block in your Blogger Template

The first thing we need to do in order to implement this hack is to locate the “comments block” within your Blogger template.

To find the comments section, you will need to tick the “expand widget templates” box as this code is contained within your main “Blog Posts” widget.

As I’ve already pointed out, the section of code used to display comments varies in different templates, so in order to find this section, you may need to search for some specific tags rather than complete sections of code.

To give you an idea of what you are searching for, here is the complete comments-block code from the Minima template:

<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id=’data:comment.anchorName’>
<a expr:name=’data:comment.anchorName’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class=’comment-body’>
<b:if cond=’data:comment.isDeleted’>
<span class=’deleted-comment’><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class=’comment-footer’>
<span class=’comment-timestamp’>
<a expr:href=’data:comment.url’ title=’comment permalink’>
<data:comment.timestamp/>
</a>
<b:include data=’comment’ name=’commentDeleteIcon’/>
</span>
</dd>
</b:loop>
</dl>

If you are using Minima (or a similar template) you should be able to locate this section of code easily. However, some templates use <ul> and <li> instead of <dl> and <dd> tags, in which case the code you are looking for may look more like the section on this page instead, or could even be wrapped in simple

tags.

If you are having trouble locating the comments section in your blog’s HTML code, do a CTRL+F (or CMD+F for Mac users) search within your template code for the following template tags:

* <b:loop values=’data:post.comments’ var=’comment’>
* <data:comment.author/>
* <data:comment.body/>

The comments section of your blog’s HTML code should contain all three of these template tags. Simply locate these tags and the surrounding code in your template, then work out where this section begins and ends using your discretion.

Generally speaking, this section will usually begin with

or

    or

    and end with a matching closing tag.

    Changing the comments code to add author highlighting

    Once you have located your comments section in your blog’s HTML code, you will need to highlight this entire section of code and replace it with the following section of code instead:

    <ul class=’commentlist’ style=’margin: 0; padding: 0;’>
    <b:loop values=’data:post.comments’ var=’comment’>
    <b:if cond=’data:comment.author == data:post.author’>

    <li class=’author-comments’ style=’margin: 0 0 10px 0;’>
    <b:if cond=’data:post.dateHeader’>
    <div class=’commentcount’/>
    </b:if>
    <cite>
    <b:if cond=’data:comment.authorUrl’>
    <a expr:href=’data:comment.authorUrl’><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    </cite>
    <br/>
    <div style=’clear: both;’/>
    <b:include data=’comment’ name=’commentDeleteIcon’/>
    <p><data:comment.body/></p>
    <div class=’commentlink-date’><a class=’commentlink’ expr:href='”#comment-” + data:comment.id’ title=’comment permalink’>
    <data:comment.timestamp/>
    </a></div>

    <div class=’clear’/>

    </li>

    <b:else/>

    <li class=’general-comments’ style=’margin: 0 0 10px 0;’>
    <b:if cond=’data:post.dateHeader’>
    <div class=’commentcount’/>
    </b:if>
    <cite>
    <b:if cond=’data:comment.authorUrl’>
    <a expr:href=’data:comment.authorUrl’><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    </cite>
    <br/>
    <div style=’clear: both;’/>
    <b:include data=’comment’ name=’commentDeleteIcon’/>
    <p><data:comment.body/></p>
    <div class=’commentlink-date’><a class=’commentlink’ expr:href='”#comment-” + data:comment.id’ title=’comment permalink’>

    <data:comment.timestamp/>
    </a></div>
    <div class=’clear’/>
    </li>

    </b:if>
    </b:loop>
    </ul>

    The simplest way to change your comment code is to follow these steps:

    1. Copy the code above to your clipboard
    2. Highlight the entire section of your comment code in your Blogger template
    3. Paste the code from your clipboard in place of the existing code by keying CTRL+V (or CMD+V).

    One quick method to check if you have made code errors is to preview your template. If you have accidentally omitted some code, you will receive an error message. In this case, you should press the “clear edits” button and begin again.

    If you don’t get an error message, you can then proceed to save your template.

    Adding style for author comments

    At this stage, your own comments will still appear in the same style as other comments. To highlight author comments, we need to add some style code to your blog template.

    This step is much easier than locating and changing the comment section. Simply locate the closing tag in your Blogger template, and immedietly before this, paste the following section of code:

    .author-comments {
    background: #cccccc;
    border: 1px solid #333333;
    padding: 5px;
    }

    If you prefer, you can change the hex colors (#cccccc and #333333) to match the color scheme of your own template (discover the color codes for your preferred schemes using the web color calculator).

    Then save your template.

    Now when you make a comment on your blog while signed in to your Blogger account, your comments will have a different border and background color to comments posted by your readers.


How to add bookmarker widgets in Blogger

This tutorial will explain simple way to add cool social bookmarker widgets to Blogger pages. In this case we’ll use simple Blogger Plugin from BlogSocializer. This plugin allows us to add nine popular bookmarkers button on every pages of our blog. Including Digg, Technorati, Delicious, Yahoo! MyWeb, Google Fusion, Blink, Furl, Simpy, and Stumble upon. Here we go..

1. Go to your Blogger Dashboard. Than click manage layout of your desired blog.

Layout menu in blogger dashboard

2. You’ll be in Template page at Page Element Tab. Now click [Add a Page Element]. Just choose where you’ll place the widget is. In this case I set it at bottom of every post, so I’ll place it below Posting Blog coloumn (See picture).

Add a page element

3. A popup window will appear. There you can choose what kind of page element you want to add. Now select [HTML/JavaScript] element. Than click [Add to Blog] button. A ‘Configure HTML/JavaScript‘ page will appear, leave it first.

Choose page element

4. Go to BlogSocializer and get the code there. Click and copy the given code.

copy BlogSocializer code

5. Go to popup window again. Fill in title of element first than paste the code at ‘Content‘ area (Right click and paste). Lastly, just click [Save Changes] button.

Paste the code

6. Now open your blog and test the widget. Below is example of working BlogSocializer in my blog. You can try how easy this widget in use by submitting this page to Digg, Technorati, and Delicious.

Demo screenshoot

Conclusion.
BlogSocializer is the easiest and simple way to add bookmarker widget in Blogger based page. This Blogger plugin is free to use. I know there are other bookmarker plugins such AddThis.com and Sharethis.com but I still suggest you to use BlogSocializer. Why? because with BlogSocializer we can display the true buttons of originally bookmarker sites. Not other flip button. So benefit of displaying those buttons is to make our blog looked like more cool. Just as WordPress bookmarker plugin.

Blogumus: A animated label cloud for Blogger!

Amanda Of Blogger Buster Launched this Awesome Animated Label Cloud for blogger “Blogumus” converting Roy Tanck’s WP Cumulus plugin for us.The result is the widget you can see in action in the sidebar of my blog. Hover your mouse over the Flash object to see the animation begin. In this post, I’ll explain how you can add Blogumus to your own Blogger layout.

How it works

This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels. Once installed in your template, it should work “out of the box” without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate 🙂 You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location. To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).

How to install Blogumus in your Blogger layout

Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing. Here are the steps required to install Blogumus in your Blogger layout: Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line (or similar):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Then paste the following section of code below above line.

Click Here For The Code To Be Copied.


Then preview your template.If you see it in your sidebar then save it.
Now All you have to do is matching the colors.For this read below..

In this default installation, Blogumus includes the following preset variables:

  • Width is set to 240px
  • Height is set to 300px;
  • Background color is white
  • Test color is grey
  • Font size is “12”

If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I’ll go through these options in the order they appear in the widget code.

Editing width and height

The variables for width and height are found in this line of the script:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer.

Editing background color

You can change the background color from white to any other color by altering the hex value in the same line:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes.

Alter the color of text

By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:

so.addVariable("tcolor", "0x333333");
Be aware that “tcolor” is a Flash variable and doesn’t include the usual hash symbol of hex color codes. Be sure to only replace the numbers!

Adjust the font size

The maximum font size of tags is specified in this line:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing “12” to a larger or smaller number.

While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.

If you are not able to do so then ask Amanda of Blogger Buster she might help you.Or send me your blogger account info via the contact link in my tabs,so that i can add it to your blog successfully..


Top 10 Search Terms:

• blogumus • blogumus for blogger • animated tag cloud blogger • animated label cloud for blogger