pkcompany

Best Wordpress e-commerce Templets

noreply@blogger.com (pakcompany) — Wed, 28 Sep 2011 07:00:00 +0000

App Cloud Free – Demo | Download

Simplecart(JS) – Demo | Download

Bangkoo Free – Demo | Download

TokoBajoo – Demo | Download

Kakileema Free – Demo | Download

Magneto Themes

Telescope – Demo | Download

mEbay – Demo | Download

Girly Store – Demo | Download

BlueScale – Demo | Download

HelloWired – Demo | Download

Polaroid – Demo | Download

FreePOP – Demo | Download

osCommerce Templates

Online Shop – Download

Cosmetic Store – Download

SalesPoint – Download

Computer Store – Download

10 Free Website Chat Widgets

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 18:30:00 +0000

If you want to make your website livelier, then adding a website chat widget is perhaps one of the more effective solutions for increasing user engagement and growing your community.
By putting a proper website chat widget on your site, you will get real-time feedback from site visitors regarding your product, services, or content. For sites that sell services or products, a chat widget will definitely help you communicate with your visitors in real-time and potentially make more sales.

This is a collection of 10 free website chat widgets that you can install on your websites.

1. Chatango

Chatango is a customizable chat room add-on that anybody can install in their website. The main advantage of using this website chat widget is that users can have their own avatar. It also offers different user roles that give participants privileges for becoming moderators and administrators.

2. Meboo.me

Meboo.me is a product of Meebo.com — a popular web-based IM platform service. Whether you are using Typepad, Blogger or WordPress, Meebo.me is just ideal for any of these platforms. The most advantageous part of adding a Meebo.me chat box in your webpages is that it is compatible with Gtalk, Yahoo! Messenger, AIM, as well as with Facebook. Hence, the visitors of your website do not need to register to interact through it. They can use their existing Gtalk or Facebook username to stay in touch with your website.

3. JWChat

JWChat is an Ajax-powered chat script. It only uses JavaScript and HTML, making it an ideal solution for those who want to quickly get a chat widget up and running. It functions like a traditional IM client, with system sounds notifying you of events like if someone sent an IM, support for emoticons, and more.

4. CBox

CBox attempts to merge the features of traditional desktop IM clients with the benefits of the social web. The user interface is straightforward, the installation is a snap, and is plug-and-play because it only relies on client-side JavaScript and HTML. CBox is free, but there is a premium version available for $2.00 a month with additional features like bigger bandwidth, no ads displayed, and custom word filters.

5. Mibew Web Messenger

Mibew Web Messenger, which also calls itself Open Web Messenger, is a free and open source chat messenger that was built with PHP and MySQL. This chat application was developed with live customer support in mind, but works well in other contexts.

6. AjaxChat for WordPress

This free website chat script is a plug-in for adding live chat functionality to a WordPress installation. It enables WordPress users to chat with other visitors on your blog without refreshing the browser.

7. AJAX Chat

As you can probably conclude by its name, AJAX chat uses client-side JavaScript to enable you to run a robust chat client on your website. It can also be used as a shoutbox, a site feature that allows your visitors to quickly leave a message and "shout out" to other visitors and the site admins.

8. phpFreeChat

This free PHP-based chat system is highly customizable and is packed with features you’d only expect in desktop clients. It supports the ability to create multiple chat rooms, private messages, custom themes using CSS, and Ajax for a smooth and seamless user experience.

9. iJab

This web-based IM client, developed using the Google Web Toolkit is free and uses Ajax to simulate a client desktop IM client. iJab can be a great solution for implementing a similar Facebook chat feature that people can use within their web browser while perusing your website.

10. Ajax IM

Ajax IM is a slick and open source web-based IM client for your website. It’s lightweight, weighing only 78KB on a good day (i.e. when minified). By default, it affixes itself at the footer of your web pages, similar to Facebook’s web-based chat client.

How to submit sitemap

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 13:17:00 +0000

How to Add Blogger Sitemap to Google Webmaster

How to get sitemap for Blogger?
How to get sitemap for Blogspot?
How to add sitemap for Blogger to Google Webmaster?
How to add sitemap for Blogspot to Google Webmaster?
How to enter sitemap to Google Webmaster for Blogger blog?
How to enter sitemap to Google Webmaster for Blogspot blog?

First, go to Google Webmaster and sign in with your Google Account.

Then, if you have not added your blog, click on "Add a site..." first.

After adding your website, you'll need to verify the site ownership by added a meta tag on your blog. Follow the instructions displayed.

Then, proceed to the dashboard of the site.

On the left sidebar, expand "Site configuration" and click on "Sitemaps" below it.

Then the next page is where you submit the sitemaps for the blog.

Click on "Submit a Sitemap" and enter the following link extension:

1) This is the basic sitemap you submit first.

/atom.xml?redirect=false

2) Then enter the second sitemap. This is to index the first 100 posts on your blog, which means post number 1 until post number 100.

/atom.xml?redirect=false&start-index=1&max-results=100

3) If you have more than 100 posts on your blog, submit this link as well. This will index post number 101 until post number 200.

/atom.xml?redirect=false&start-index=101&max-results=100

4) If you have more than 200 posts on your blog, submit this link as well. It will index post 201 until 300.

/atom.xml?redirect=false&start-index=201&max-results=100

5) Continue adding new sitemaps if you have more posts.

Take note that the more posts you have on your blog, you have to add more sitemaps to index every hundredth posts. Refer to the number in orange and it's pretty self-explanatory.

After submitting the sitemaps, your sitemap list will look more or less like this:

The sitemap links above can accommodate 200 plus blog posts only. If the number of posts exceeds, more sitemaps have to be added for every hundredth.

Why is this "Sitemap submission" necessary?

It helps Google index your blog more efficiently and ultimately provide more traffic to your site via its search engine.

Go ahead and add your blog's sitemap to Google Webmaster now!

Label Cloud Widget For Blogger / Blogspot

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:50:00 +0000

A tag cloud or label cloud for blogger is a visual depiction of all labels used on your blog.You can see a demo of the Label cloud for blogger(blogger label cloud) here on my site. This Tag Cloud Widget was originally developed by phydeaux3. This is a modded version of phydeaux’s Cloud. This is much better than the Blogger’s Default Label Cloud. First of all Go to Your blogger Layout > Page Elements page and add a Labels Widget there..You can Do that using the Add a Page Element Option on that page. After Adding the Label Widget Go to Layout > Edit Html (Do not expand the widget templates for the sake of easy explanation) You will find some code similar to

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Now Replace that with

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<div id='labelCloud'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 30;
var maxColor = [35,130,196];
var minFontSize = 13;
var minColor = [35,130,195];
<b:if cond='data:showFreqNumbers'>
var lcShowCount = true;
<b:else/>
var lcShowCount = false;
</b:if>

// Don’t change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;
a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Posts in &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
span.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(&#39; &#39;);
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
</p>
<noscript>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
<br/>Powered By:<small><a href='http://www.bloggerplugins.org'>Blogger Gadgets</a></small>
<br/><small><a href='http://www.bloggerplugins.org/2008/06/label-cloud-widget-for-blogger-blogspot.html'>Label Cloud for Blogger</a></small>
</noscript>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Now find

]]></b:skin>

and replace it with

#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:&quot;&quot; !important}
]]></b:skin>

Save your template and now you should get a working Label Cloud On your Blog.

You can Configure the Gadget from the Gadget Options

Additional Tweaks

These tweaks are optional. Proceed further only if you want to customize the cloud to a better level... Changing Cloud Colours: you can change those colours editing the code a little bit.. you will have to expand your widget templates and modify these 2 lines of code var maxColor = and var minColor = you have to specify the RGB values there separated by commas..If you are sure of what should be the hex codes of the maximum and minimum colors,then you can use this convertor to convert the hex value to RGB values..If you are not sure of what the hex code of the colors are then have a look at this. Changing the Font Sizes: You can change the font sizes by editing these 2 lines of code var minFontSize = and var maxFontSize =

Adsense Below the post title in Blogger

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:48:00 +0000

Your blog earnings depend mainly on your blog's traffic and on your ad placement. One important place to place the ads is below the Post title. It will give more importance to the ads and there is more possibility to get clicks. This is in accordance with the Google Adsense TOS

I am personally using the same hack on this blog. You can see adsense ads below the post title on all my pages.Ok now let us get into the details of how to set it up.

First of all login to your adsense account and generate ad code of optimum size..
Now copy that adsense code into the following box and parse it(you may not see the parser if you are reading my feed)

Copy off the parsed code..
Now login to your blogger account.
Go to Layout > Edit Html and expand the widget templates.
Find this piece of code

<data:post.body/>

Now add the following code just above that line.

<b:if cond='data:post.isFirstPost'>
Put your parsed adsense code here
<br/>
</b:if>

Automatic Post Summaries for Blogger with Thumbnails

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:47:00 +0000

Wordpress users might have seen the wordpress excerpt thing, which displays a summary of your post. Now we have something similar for blogger.Actually i should say it is really amazing..This hack will automatically create post summaries with thumbnails.. you needn't need to add any extra code in every blogpost that you make..These summaries will be displayed on all pages other than the post page..Here in my blog i am using a modded version of the same which displays summaries on pages other than the post page and homepage.Check out some of my labels to see the hack in action..

First of all, this hack was developed by Blogger Sphera . I will try to explain his hack to you guys..

First of all Edit your blogger template

Find this code

</head>

and replace it with

Off course you can edit these parameters..
Now Find

<data:post.body/>

Replace it with

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>
</b:if>

And you are done.. now you should have the post summaries on your homepage,search results,archive and label pages..

Post Summaries on Blogger With Read More

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:43:00 +0000

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  [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 seeing the Read More Link if you are using a modified and highly customized template. In that case try the following adjustments. Go to your Blogger Design > Edit HTML and "Expand the Widget templates". Now check if the following code is already present in your templates

<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 Design > Page Elementsand click on the Edit link on theBlog Posts Widget.

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 that can cause the sidebars to move down.

When you insert a jump break in the post,the part of the post after the jump break gets truncated. In your posts,if there are some opening div tags before the jump break and some of these are closed after the jump break then problem arises. 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

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>

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.

Now Blogger Automatically handles this issue.

Permalink:Post Summaries on Blogger With Read More

How to get Numbered Page Navigation For Blogger

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:42:00 +0000

Page Navigation is a really awesome and long awaited feature. You might have seen numbered page navigation on many wordpress blogs(wp-pagenavi by Lester Chan). Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger.It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger.It had some minor bugs and now Abu Farhan has perfected it and he has now given us the perfect page navigation solution.Here is a little screenshot of what this is all about.

When you use this hack,you will see this kind of navigation on your blog’s home page and label pages(needs little customization).

Implementation of Blogger Page Navigation

Those who are bad at HTML modifications can use my one click installer :)

After installing this widget proceed to the label fix.

The Complex Method. :P

If you installed the widget you shouldn’t be here.. Scroll down to the label fix.

1.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Don’t click the checkbox which says ‘Expand Widget Templates’

3.Now find

]]></b:skin>

and replace it with

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need

4.Next is the JavaScript part. Find

</body>

and replace it with

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates

Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.

Now if you are using the label cloud widget by phydeaux3,then find

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and replace it with

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation working perfectly on your blog. :)

This tutorial is based on Codes from Abu Farhan and Muhammad Rias. So if you plan to write this tutorial on your blog,do link back to them also.

Permalink: Numbered Page Navigation For Blogger

how to show Show avatars on Blogger Comments

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:40:00 +0000

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/AVvXsEjruV6Z5pKmVIjRn3wXONv6rOZhB4-14lfHhz2pdxt0y8UtMf495FetHkvJIRYotK-QKm2E5u8Q8fXJfYDumHo_3BU-o40v7LqJx0YykPKqd2tfTbcqHrL27NR4jlQKSINmeGfU3b0aSw/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/AVvXsEi9mzY6e9FhUzAnpRoI1xFbW8srsn9FIysvXYChwjkLKZzAf5W_Y4qhJG-iCxGFxZGy3OBL1inWchZewFwkb-RZfxkcX6EGAvYcEdsK_cBrJi8FLePQMucX-vm-WfaNJMbkRuX5H9eao2k/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..:)

Add Signature to Blogger Blog

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:40:00 +0000

You might want to add a custom automatic signature below each of your blog posts. This would be more useful if you are running a Team Blog with multiple authors. You can use unique signatures for each author.The same can be done on a single author blog also :)

Adding Signature to Single Author / Multi Author Blogger Blogs

1. Create a Signature using Photoshop or some online Generators like My Live Signature

2. Upload this signature image to blogger.Once its uploaded hit preview and copy the image location(Note down the URL of the image).

3.Now Go to Layout > Edit HTML and Expand your Widget Templates

4.Now Find

<div class='post-footer-line post-footer-line-1'>

If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'>

or this one

<data:post.body/>

a) If you are using a Single author blog, paste the following code below the code you found

Code should be edited with your signature image URL

b) If you are on a Team Blog, paste the following code just below the code you found

<b:if cond='data:post.author == "Author1Name"'>
<img src='url_of_author1_signature_image' style='border:0px;'/>
</b:if> <b:if cond='data:post.author == "Author2Name"'>
<img src='url_of_author2_signature_image' style='border:0px;'/>
</b:if>

If you have more number of authors, you can repeat the blocks accordingly(here i have mentioned 2 blocks[blue and brown] one for each of the two authors).Codes should be edited with the author names and the signature image urls.

5.Save your template and you should see the signature in action :)

Add Google Buzz Buttons To Blogger Blog ( with Counter )

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:39:00 +0000

Google Buzz is a social tool from Google and it is much similar to Twitter and Facebook :). Google Buzz is a new way to start conversations about the things you find interesting. You can read more about Google Buzz at the official Google Blog . You might have seen the Google Buzz buttons on Mashable. You can see a demo of this button in this post page. :) . Now Google has officially released the Share Counters, So here are the steps to get the Buzz button on your blog.

1. This is the Google Buzz it Code. Copy it.

<div style="float:right;padding:4px;">
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="en_IN" rel="nofollow" expr:data-url='data:post.url'></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

2. Login to your Blogger Account and navigate to Layout > Edit HTML and Expand your widget templates.

3.Now find this piece of code in your template after expanding the widget templates

and immediately after that place our Google Buzz it Code

.If you were unable to find this code in your template,then look for the first occurrence of

<data:post.body/>

and immediately before that, place our Google Buzz it Code.

4.Save your template and see the results.

5. If you need a smaller compact button, then change normal-count to small-count in the code.If you want to show the button on the left rather than on the right, then changefloat:right to float:left in the code

Official Sharing Buttons on Blogger

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:37:00 +0000

Blogger has been rolling out new features to improve the looks and usability of the blogs. Blogger is now testing out a new Social Sharing icon set consisting of Email, Blogger,Twitter(with goo.gl shortener),Facebook and Google buzz buttons. The set looks simple and elegant with some cool mouse over effects. These Sharing buttons are now available in your regular dashboard.If you need to take a peek at these new sharing icons, then take a look at my post page(and try sharing it :P ).

You are still reading. So i guess that you are really interested in implementing these Sharing buttons on your Blogger Blog.

Then don’t wait. Just follow these simple steps

Login to Your Blogger Dashboard
Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Share Buttons” Option
You can Drag and Drop the Share buttons and place it where you want.
Now if everything went right, then you should be able to see the Share buttons on your Blog. If not then read on. :)
If it didn’t appear then don’t worry, That is because you are having a modded template. Just Go to the Edit HTML page under the Design Tab , Check the “Expand Widget Templates” Option and locate
```
<p class='post-footer-line post-footer-line-3'>
```
Or if that is not there then find
```
<div class='post-footer-line post-footer-line-3'>
```
Or if that is not there then find
```
<data:post.body/>
```
and place the following code just below any of these lines[whichever is present in your template].
```
<div class='post-share-buttons'>
  <b:include data='post' name='shareButtons'/>
</div>
```
and Save your template.

Google + 1 Button Doesn’t show up

1. If it doesn’t show up, then replace the share button code first.To do that, look for

<b:includable id='shareButtons' var='post'>

in your template. Now delete everything including this line, till the very next occurrence of

</b:includable>

(including this line)

Now we can add a new b:includable block there. So paste the following code there instead of the old b:includable block

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.emailThisMsg/></span>
  </a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.blogThisMsg/></span>
  </a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
  </a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
  </a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
  </a></b:if><b:if cond='data:top.showBuzzButton'><a class='goog-inline-block share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=415,width=690\&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span>
  </a></b:if>
  <b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</b:includable>

2.Save the template, and see if the Plus One button is showing up.If it is then you are done. Otherwise proceed to step 3.

3. Locate

</head>

and just above that paste the following code

<script src='https://apis.google.com/js/plusone.js'/>

and Save the template.Now you should see the +1 buttons on your blog.

Optional Tweaks

Show the Sharing Buttons on Post pages only - Find the Following Code in your template

<div class='post-share-buttons'>
  <b:include data='post' name='shareButtons'/>
</div>

and wrap it within conditional tags as

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
  <b:include data='post' name='shareButtons'/>
</div>
</b:if>

Hide Some of the Sharing Buttons – If you want you can hide some of these buttons using CSS. For example to hide the Blogger sharing button, add the following code above ]]></b:skin> in your template
```
.sb-blog{display:none}
```
sb-email , sb-twitter, sb-facebook, sb-buzz and sb-blog are the different Button Classes. If you hide the mail or buzz buttons, then it might look a little bad as these have rounded edges,
How to add the text “Share this:” before the Share Buttons? – This was one of the questions asked in the comments.So here is how to do it.Go to Design > Edit HTML and “Expand Widget Templates”.Look for
```
<b:includable id='shareButtons' var='post'>
```
Just below that add
```
<table border='0'><tr><td><b>Share this : </b></td><td>
```
Now Look for the first occurrence of
```
</b:includable>
```
that comes after that. Just above that add
```
</td></tr></table>
```

Got into Trouble with implementing the sharing buttons? Ok leave a comment here and i will try to help you out. :)

Display Short URLs for Blogger Posts with Bit.ly

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:37:00 +0000

Having a Shorter Version of your Blog Post’s URL is much useful especially when sharing links with others. For example Take a look at this Link http://bit.ly/aJMJNI . If you visit that link, you will end up right back here. This URL shortening was done with the Help of the Bit.ly API. Bit.ly is one of the most reliable URL shortening services on the Web.Wordpress has got its own URL shortener namely WP.me. If you are interested in providing Short Sharable URLs of your Blogger Posts to your readers, then read on. Demo is present on the post page.

Template Tweaking to Add the Short URLs

Login to your Blogger Dashboard and navigate to Design > Edit HTML
Click on the Check Box which says “Expand Widget Templates.

Locate

</head>

and add the following JavaScript Snippet just above that

<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/>

Now Locate

<p class='post-footer-line post-footer-line-3'>

Or if that is not there then find

<div class='post-footer-line post-footer-line-3'>

Or if that is not there then find

<data:post.body/>

and place the following code just below any of these lines[whichever is present in your template].

<div id='bp_shorturl'>
<form expr:id='"bp_short_holder_" + data:post.id'/></div>
<script type='text/javascript'>
Bloggerplugins_shortener.init(&quot;bp_short_holder_<data:post.id/>&quot;,&quot;<data:post.url/>&quot;)
</script>

Save the changes and now you should See a Sharable Short URL below each of your posts .If you want to tweak further, then read on.

Optional Tweaks

1.Styling the Share Link

Locate the following line in your template

]]></b:skin>

and just above that line add

#bp_shorturl {
color:#666;
font-size:11px
}
#bp_shorturl input {
color:#999;
border:inset 1px #CDCDCD;
padding:1px 5px;
}

and save.

2. Display the Short Link on Post Pages Only

If you want to restrict the Short URLs to your post pages, then wrap the codes mentioned in Steps 1 and 4 within Conditional tags like :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>
<script src='http://blogger-plugins.googlecode.com/files/bloggerplugins.org.bit.ly.short.url.generator.js' type='text/javascript'/>
</b:if>

and

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bp_shorturl'>
<form expr:id='"bp_short_holder_" + data:post.id'/></div>
<script type='text/javascript'>
Bloggerplugins_shortener.init(&quot;bp_short_holder_<data:post.id/>&quot;,&quot;<data:post.url/>&quot;)
</script>
</b:if>

3. If you have your own Bit.Ly Login and API key, then you can replace them in the code of Step 1(tweettrackjs and R_7e9987b2fd13d7e4e881f9cbb168f523). Its free to signup and it is advised to use your own login and API because too many API calls on the same login can create an undefined error

"Tweet This" Text Link for Blogger

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:34:00 +0000

The Official Twitter Tweet Button has 3 default styles(2 of them with a counter and one without) . The Button works with JavaScript and is not fully Customizable.This post is for all those who want to customize, the tweet button and change it into a simple Text link. The output will be a simple HTML link with all the features if the Tweet Button(excluding the count)

How to add the Tweet This Text Link to Blogger?

1. Login to your Blogger Dashboard and Navigate to Design > Edit HTML
2. Click on the Check box which says “Expand Widget Templates”
3. Now Look for

<data:post.body/>

and immediately after that line paste the following code(Edit the code if needed)

<a expr:href='&quot;http://twitter.com/share?text=&quot; +data:post.title+ &quot;&amp;url=&quot; + data:post.url + &quot;&amp;via=twitter&amp;related=bloggerplugins:Widgets and Tutorials for Blogger&quot;' style='float: left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1sYrnNixJSscctmK8MqEOe7rGJrHfSNPrPNPu579TkdcG9WySx3eK8QyNlZGEr6ZcYIR18o35iCoF6uT-vePxKMElk2TDlHXUMGpRaGfTI1n-fUZBI92J9l8KmJoLJQsMyRzwAUeGw/[3].png) left no-repeat; padding-left: 20px;' title='Share on Twitter' rel='nofollow' target='_blank' >Tweet This</a>

Save the Template and you should see a Tweet This link below each of your posts like this

Tweet This

Optional Edits

1. You can edit via=twitter with your twitter user name. So if your twitter username is john, then change via=twitter to via=john

2. You can also edit related=bloggerplugins:Widgets and Tutorials for Blogger .You can replace bloggerplugins with a twitter handle that you would like to recommend. You can replace Widgets and Tutorials for Blogger with a description of the recommended account

3. You can also edit Tweet This with the text you want to see on the link

How to Add Tweet Box to Blogger

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:34:00 +0000

It has been a long time since @Twitter released the @AnyWhere Developer Tool. AnyWhere allows you to seamlessly integrate Twitter into your site using a few lines of JavaScript. You can read more about it at @AnyWhere Developer Page. Tweet Box is one such @AnyWhere Application, which allows you to add a 140 char Tweet Box onto your blog.

Here is a screen shot of how the Tweet box appear on my Previous Post.

Hope that now you got a good idea of how this works, If not scroll down to the bottom of the post and see it in live action :)

How to add the Tweet Box on a Blogger Blog?

1. Go to the @AnyWhere Developers Page and create an Application there with your blog details.

Make Sure that you have checked the Read & Write Option when you Register your Application

2.When you complete the signup process, you will get some JavaScript codes, with a unique API Key

Copy out the JavaScript from there(the code in the red box) as shown in this Screenshot.

3.Now Login to your Blogger Dashboard and navigate to the Edit HTML Tab underDesign and “Expand your Widget Templates”

4.Look for

</head>

and paste the copied Twitter JavaScript just above that line and save the template.

5.Now look for

<data:post.body/>

and immediately below that paste the following JavaScript Code and save your template. (Editable parts are shown in red)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='bp_tweetBox'/>
<script type='text/javascript'>
bp_tweet_link=&quot;<data:post.url/>&quot;;
twttr.anywhere(function (T) {
T(&quot;#bp_tweetBox&quot;).tweetBox({
width: 560,
label: &quot;Share the L&#10084;ve  &amp; Retweet&quot;,
defaultContent: &quot;RT @bloggerplugins <data:post.title/>&quot;+&quot; &quot;+bp_tweet_link
});
});
</script>
</b:if>

Now you should see the Tweet Box on all of your post pages

Currently, this doesn’t do any URL shortening . You can expect that it my next post. I will also try to post about the other @AnyWhere features soon :)

Share your opinions and if you have any questions about the tweet button, feel free to ask :)

Replace Page List Menu Gadget with a Link List

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:32:00 +0000

The Default Blogger Templates(which can be customized using the Designer) are all made to use the “Blog Pages” as your Blog’s Top Navigation Menu. This is done using a Page List Gadget. But , you might want to setup your own menu with Custom Links. In that case, you can replace the Page List Gadget with a Link List. This tutorial guides you on how you can replace the Page List with a Link List without loosing the Menu Styling(and the highlighted active links)..

How do i add non-page links to my Menu

This is a frequently asked question on the Blogger Help Forum. The solution is simple, if you want to display anything other than page links on your Menu, then you will have to use a Link List Gadget instead of using a Page List. If you are using one of the Default Blogger Templates, and if you have added a Page List Gadget below the header, you will be using "Page" links as the Navigation Menu. To change this to a Link list, follow these simple steps.

1. Login to your Blogger Account and navigate to the Design > Edit HTML tab. Do NOTcheck the “Expand Widget Templates” Option.

2. Now look for(Ctrl + F)

<b:widget id='PageList

and you will find some line like

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>

3. Replace this line by the following Code

<b:widget id='LinkList123' locked='false' title='Menu' type='LinkList'>
<b:includable id='main'>
<div class='widget-content PageList'>
   <ul>
     <b:if cond='data:blog.url == data:blog.homepageUrl'>
     <li class='selected'>
     <a expr:href='data:blog.homepageUrl'>Home</a>
     </li>
     <b:else/>
     <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
     </b:if>
     <b:loop values='data:links' var='link'>
       <b:if cond='data:blog.url == data:link.target'>
       <li class='selected'>
       <a expr:href='data:link.target'><data:link.name/></a>
       </li>
       <b:else/>
       <li><a expr:href='data:link.target'><data:link.name/></a>
       </li>
       </b:if>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Save the Template.

5. Now you can manually add links to the Menu by using the Quick Edit Wrench Button .

The Styling of the Gadget will be preserved and the Active links will be highlighted.

How to post large image in bloggers

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:30:00 +0000

As you might already know, Blogger is integrated with Picasa and all the images that you upload to Blogger automatically becomes a part of your Picasa account.Picasa has got 1 GB free Storage.So if your Picasa Account exceeds this 1 GB limit, you wont be able to post more images to your blog.(In that case you will have to buy additional Storage).

Each of your Blogs will be having a separate album in your Picasa Account. You can check it out at http://picasaweb.google.com The visibility of these albums will be set to “Anyone With Link” and hence these albums won’t be publically visible to anyone.If you delete any of these images from Picasa, they will disappear from your blog as well.

Images uploaded to picasa have some special properties which might come in handy for you. You can resize or crop these images so easily.

Resizing Images in Blogger / Picasa

The maximum width of a Picasa image is 1600px. If you upload images which have a bigger width, then picasa will automatically scale them to a width of 1600px maintaining theaspect ratio. Once you have uploaded an image to picasa/blogger, you can have multiple sizes of the image by altering the image url.

Example :https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY3EO_q_gCDCLkBiPojfS_4mYvtnQa8PYx-05UQBezOYQm-J8cXgMRGB5rQ7ZhAPe_1FwnNS85UwsI3ZMI13faaB20KN_tNoOkK6B3OBYBGueol7tR0k0bAL_gNUXfrJZc_HvzF5NeRK8/ is an 1920x1020px image that I uploaded to picasa via blogger. It automatically got resized to 1600x900px

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY3EO_q_gCDCLkBiPojfS_4mYvtnQa8PYx-05UQBezOYQm-J8cXgMRGB5rQ7ZhAPe_1FwnNS85UwsI3ZMI13faaB20KN_tNoOkK6B3OBYBGueol7tR0k0bAL_gNUXfrJZc_HvzF5NeRK8/s1600/1920.1080.jpg

This is the image url that I got in my blogger post Editor. You can get multiple sizes of the image by varying this bolded parameter. An image url with s1600 will have a maximum width of 1600px. Similarly an image urlhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY3EO_q_gCDCLkBiPojfS_4mYvtnQa8PYx-05UQBezOYQm-J8cXgMRGB5rQ7ZhAPe_1FwnNS85UwsI3ZMI13faaB20KN_tNoOkK6B3OBYBGueol7tR0k0bAL_gNUXfrJZc_HvzF5NeRK8/s777/1920.1080.jpg will have a maximum width of 777px. (Here as the actual image is larger than 777px, it will show a scaled pic with width 777px)

Here is another image that I uploaded

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivVuutlN55Jauxg0t7UJ92pGEWUBQg-XqAI7cJYguTgSGgPw3aD50vi_vK6hTNA-w6XCz5S4Uy72721xM6gkcx3w6tXX3OOCv8CZ4uM-2bnDKPYX3fDv830_5Ly_0nw37dIiqfXdDXNH4/ (actual size 126x131px)

Now lets try modifying the image url

Here the actual size of the image is less than 777 px and hence the original image will be shown without any scaling

Cropping images in Blogger / Picasa

Picasa can also provide you with Cropped images. You have to add a -c to the modifiable parameter to crop the image.
http://1.bp.blogspot.com/_u4gySN2ZgqE/TRoVyjWy22I/AAAAAAAABxA/s1600-c/zqjhDdXbITk/1920.1080.jpg
will provide you a cropped 1600x1600 px image
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivVuutlN55Jauxg0t7UJ92pGEWUBQg-XqAI7cJYguTgSGgPw3aD50vi_vK6hTNA-w6XCz5S4Uy72721xM6gkcx3w6tXX3OOCv8CZ4uM-2bnDKPYX3fDv830_5Ly_0nw37dIiqfXdDXNH4/s1600-c/christmas-bells-icon.png
will provide you with a cropped(Plus scaled) 1600x1600 px square image.
http://1.bp.blogspot.com/_u4gySN2ZgqE/TRoVyjWy22I/AAAAAAAABxA/s111-c/zqjhDdXbITk/1920.1080.jpg
will provide a 111x111px cropped version of the image
Remember 1600 is the maximum pixel size that you can use when modifying the image urls for cropping or resizing purposes.

-h parameter.
When adding images using the old Blogger Post Editor, you might have come across urls containing /s1600-h/ . These links will actually generate an HTML page where the image is embedded.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY3EO_q_gCDCLkBiPojfS_4mYvtnQa8PYx-05UQBezOYQm-J8cXgMRGB5rQ7ZhAPe_1FwnNS85UwsI3ZMI13faaB20KN_tNoOkK6B3OBYBGueol7tR0k0bAL_gNUXfrJZc_HvzF5NeRK8/s200-h/1920.1080.jpg
is a link to an HTML page where the image is embedded(maximum width of the image is 200px)

Posting Big Images in Blogger

If you read everything posted above, then you should be able to manipulate the image links so that you get an image of an appropriate size. Refer These Screenshots for posting large images onto Blogger. Click the image for a larger view.

New Post Editor

Old Post Editor

If you feel that you need to post a big image, but your post area is too small to accommodate it, then you can try using the Light Box Overlay Viewer for Blogger

Facebook Like Box For Blogger

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:30:00 +0000

Facebook Like Button allows you to provide more Sharing Options to your Readers. Your readers can share your posts on Facebook using the Like Button. Have you added the Like button and still not getting any “Likes”? :(. Ok then we will present the Like button in a much better and elegant way.

Here is a Screenshot of the Facebook Like Box. Isn’t it lovely and more “Likable” than the default Like Button?

The Facebook Like box also includes a link to your Facebook Fan Page. This FB Like Box was Designed Styled and coded by Mia of Dezign Matterz . Thanks to her for designing and styling this awesome Like Box.

How to install the Facebook Like Box?

1. First Fill in the following Details (Code will be updated with these details)

2. Now Login to your Blogger Account and navigate to Design > Edit HTML and check the option which says “Expand Widget Templates”

3. Look for ]]></b:skin> in your template and just above that place the following code (You can use Ctrl +F to find the code).

.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:540px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaHQ_mRqk7lmvQItBNEemfn1w_8ZYRh5BhSiu9dOOR1t0paoDrfunNnU-gk6k3pwTnP0z375nYEB1pT6SeQfA2ZJ_5M1yjFRLojR20nkp60Hscgaz3kme2ZbNpjN-H57jsWwX11VACEXk/") no-repeat scroll left top transparent;
}
.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:515px;
height:42px;
}

4. Now Look for <data:post.body/> in your template and just below that add the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'></div>
<div class='fb_like_button_holder'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>
</div>
</div>
</b:if>

5. Now Save your template and you will see a Facebook Like Box on your post pages.

Facebook send button for Blogger

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:24:00 +0000

t had been some time since Facebook released their new Send Button.The Send button is a social plugin that websites can use to let people send a link to a friend through Facebook Messages, post it to a Group, or email it to an individual. Follow this tutorial to add it to your Blogger Blog.

Configure how your Send button should look like, using the options below, and then continue following the instructions in this tutorial.

Demo

1. Login to your Blogger Dashboard, and navigate to Design > Edit HTML.

2. Click on the checkbox which says “Expand Widget Templates”

3. Now look for

</head>

and just before it add,

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>

This code snippet is needed for all of the Facebook FBML markup to work. If you have added it to get some other FB widget to work, then there is no need to add it up again.

4. Look for <data:post.body/> and immediately below that paste the following code.

<div>
<fb:send expr:href="data:post.url" font="arial" colorscheme="light"></fb:send>
</div>

5. Save your template, and now you should have the send button working on your blog.

How to insert adsence adds in bloggers posts

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:16:00 +0000

Your adsense earnings has a lot to do with placement of ads among other things. Placing ads in certain positions such as under post titlegives you a better click through rate and increased adsense earnings. One of the most effective practices is placing your adsense unit inside blog post, wrapping your text around it, preferably a 300 X 250 medium rectangle ad unit or a 336 x 280 large rectangle ad unit. Your ads will appear in your blog post as the image appearing on the left side of this blog post. Unlike wordpress blogs with different plugins to make things like this easy, there are certain steps you have to take to make this work on your blogspot site. This post explains how to place adsense unit inside blog posts and the steps are quite simple.

1. Log in to your adsense account and create the adsense unit you intent to use. I would recommend 300 X 250 medium rectangle ad unit or a 336 x 280 large rectangle ad unit.

2. Copy the generated code and paste it in the box below to parse it.

3. Click on Convert and copy the parsed adsense code.

4. Login to your blogger account and go to Design > Edit HTML

5. Back up your template by clicking Download full template before proceeding. You can easily restore your original template in case something goes wrong.

6. Check Expand widget template

7. Press CTRL + F and search for this code:



<data:post.body/>

8. Right above that, paste this code:



<b:if cond="data:blog.pageType == &quot;item&quot;"> 

<div style="float: left; padding: 5px; margin: 5px;"> 



PARSED ADSENSE CODE 



</div> 

</b:if>

9. Be sure to replace PARSED ADSENSE CODE with your adsense code you parsed earlier.

This makes the ad appear under post title with your blog post wrapped around it. You should however know that this adsense unit will not appear on static pages such as homepage, archive and label pages. If you intend to show the ads on the static pages, simply remove the first and last line of the code.

Also, I won't advice you to use this tweak if you have blog posts starting with images. This will place the images right beside your blog posts which is strictly against google adsense terms of service.
Don't leave yet! You don't have to miss any of our updates. Click here to subscribe to our Feedburner RSS feed and get live updates or simply enter your email in the form below to get updates right in your inbox. You can as well be a part ofour web forum.
Clicking the Google +1and facebook likebuttons below also means a lot to us. Please scroll down and leave a comment, it helps us improve and inspires us to go on. Thanks for visiting

Code To Hide Blogger Nav Bar And Have It Reappear When You Hover Over It.

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:11:00 +0000

Adding the code to your blog.

Please log into your blogger account.
Now navigate to Layout >> Edit html >>
and find the following code :

]]></b:skin>

And Before it, add the next one :

#navbar-iframe {
  height:5px;
  }

/* IE7, IE8, IE6 */
  #navbar-iframe { height/*\**/: 30px\9; }


#navbar-iframe:hover {
  height:40px; !important; 
  }

Now click Save Template
And You Are done,

How to Login To Multiple Google Accounts

noreply@blogger.com (pakcompany) — Fri, 26 Aug 2011 12:08:00 +0000

There are many reasons to have multiple Google accounts. You may have multiple websites for personal and business accounts. Whatever the reason, it is inconvenient to have several browsers running or keep logging out of one to check another account.
Aside from forwarding your email to a single Gmail account, you can use browser extensions or manage the settings in Gmail to allow multiple account access without the inconveniences you are currently experiencing.
The following methods are mostly meant for accessing several Google accounts for email. Some of the other apps accessed when you are logged into your Google Account may not work.

Quick Login for Google Accounts
For this first fix, you will need to use Google Chrome (browser). The Quick Login for Google Accounts extension will allow you to access several different Google Accounts. This is ideal because you can have a browser window open and have a tab for each Google account.
Setup
1. After adding the extension to Chrome, click the new icon in the top right corner of the browser window, then on options.
2. In the name column, enter something to help you differentiate the account from the others. I chosepersonal, maketecheasier and untetheredoffice as the names for mine.
3. In the next box over, you will need to put your login user name. You do not need the @gmail.com or @yourgoogleappname
4. Add your login password in the next box to the right.
5. If you are using Google Apps for a business, you will need to tell the extension where the login page is. To do this, you need to click show advanced options. Another row will appear. In this row, you can paste or type the page you visit to log into your business email.
6. After all the information is entered and saved, you can try it out. Click on the Quick login icon again and choose an account to log into.
Multiple Account Sign in
Another option to enable the multiple account login option in your Google Account settings. This way will not tie you to a single browser or even computer. Remember, you will need to sign out of these accounts as well. So if you are one of those people who ticks the remember me or keep me logged in buttons, make sure you actually log out. If you don’t, you will have a lot of email accounts accessible to anyone else using that computer.
Setup
The setup is pretty easy for this one. Sign into your Gmail or Google Docs or some other Google application. In the top right you will see your name. Click on it to show a drop down.
1. In this drop down, there will be an option to access your Account settings.
2. Once in the settings, you will see the option to edit the Multiple sign-in.
3. You will need to log into each Google Account you’d like to access and enable this option.
4. When you have all of the accounts enabled, you can sign into multiple accounts by clicking on your name in the top right again then switch accounts.
5. you will see an option to sign into another account.
You should have access to a good number of the Google application for the other accounts you are accessing.
Conclusion
The whole point of doing this is to make accessing your multiple accounts easier. If you can reply to emails or access your documents with ease, it will shave time off of your tasks. These two options may help you save a little time while freeing up resources on your computer by not having so many browsers running at the same time.
Do you have a preferred method for accessing your multiple accounts?

Color Scheme
Font
Float
Location of the Button
Display

pkcompany

Popular Post Widget-Most commented Posts For Bloggers

Best Wordpress e-commerce Templets

Magneto Themes

osCommerce Templates

10 Free Website Chat Widgets

1. Chatango

2. Meboo.me

3. JWChat

4. CBox

5. Mibew Web Messenger

6. AjaxChat for WordPress

7. AJAX Chat

8. phpFreeChat

9. iJab

10. Ajax IM

How to submit sitemap

How to Add Blogger Sitemap to Google Webmaster

Label Cloud Widget For Blogger / Blogspot

Additional Tweaks

Adsense Below the post title in Blogger

Automatic Post Summaries for Blogger with Thumbnails

Related Posts Widget for Blogger with Thumbnails

Related Posts Widget with Thumbnails for Blogger

How to display the related posts on every page and not only on the post pages?

Light Box Image Viewer For Blogger

Installation Steps

Adding Images for the Lightbox Viewer

Creating an album with light box

Post Summaries on Blogger With Read More

How Does This Work

How to insert a jump break?

Changing the Read More Text

Drawbacks of the New Feature

A mistake that you might make that can cause the sidebars to move down.

How to get Numbered Page Navigation For Blogger

Implementation of Blogger Page Navigation

The Complex Method. :P

Label Fix

How to Edit the template to cut short the posts per page?

how to show Show avatars on Blogger Comments

Implementation of Comment Avatars

Further Styling.

Add Signature to Blogger Blog

Adding Signature to Single Author / Multi Author Blogger Blogs

Add Google Buzz Buttons To Blogger Blog ( with Counter )

Official Sharing Buttons on Blogger

Google + 1 Button Doesn’t show up

Optional Tweaks

Display Short URLs for Blogger Posts with Bit.ly

Template Tweaking to Add the Short URLs

Optional Tweaks

"Tweet This" Text Link for Blogger

How to add the Tweet This Text Link to Blogger?

Optional Edits

How to Add Tweet Box to Blogger

How to add the Tweet Box on a Blogger Blog?

Replace Page List Menu Gadget with a Link List

How do i add non-page links to my Menu

How to post large image in bloggers

Resizing Images in Blogger / Picasa

Cropping images in Blogger / Picasa

Posting Big Images in Blogger

Facebook Like Box For Blogger

How to install the Facebook Like Box?

Facebook send button for Blogger

Demo

How to insert adsence adds in bloggers posts

Code To Hide Blogger Nav Bar And Have It Reappear When You Hover Over It.

How to Login To Multiple Google Accounts

Quick Login for Google Accounts

Setup

Multiple Account Sign in

Setup

Conclusion