Blogger Howtos

How To Add Twitter Official Tweet Buttons to Blogger

2010-08-16T16:53:00.000-07:00

Few days ago Twitter has introduced their own tweet buttons for web masters.Now you can use this twitter button directly share your posts through twitter without any third party web site.So you and your visitors don't want to authenticate any third party web site to access your Twitter account.These new tweet button loads very fast and anyone can share your article with in few seconds.There are 3 types of Beautiful Tweet buttons : Vertical count, Horizontal count and No count.Here I am going to describe how to add these Twitter buttons to your blogger blog.

If you like o add these Twitter official share button to your blogger blog,then follow the steps given below.

1.Login to your blogger Dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

4.Now Copy your "Twitter tweet button" code and paste it just below the above code.

NOTE: If you can't find

in your template, paste your "Twitter tweet button" code just before .

Code 1 : Vertical Count



TWITTER-USERNAME">Tweet

Result:

Code 2 : Horizontal Count



TWITTER-USERNAME">Tweet

Result:

Code 3 : No Count



TWITTER-USERNAME">Tweet

Result:

Note :
Remember to replace "TWITTER-USERNAME" with your real Twitter username.

If you want to show Tweet buttons not only Post pages but also Home page,Archive pages,Label pages,etc... , then remove "" and "" from above codes.

5.Now save your template.

You can view more info from here:

http://twitter.com/goodies/tweetbutton

Want to build a custom tweet button for your site? Check out developer documentation for the Sharing API to provide the same Tweet Button sharing functionality with your own style :

http://dev.twitter.com/pages/tweet_button

Blogger New Commenting Feature

2010-08-12T20:38:00.000-07:00

Blogspot has a new feature implemented again - this time it's a new feature for comments.

Now you can manage the comments received on your Blogger blog. It will be with one of the tabs with the other navigation, such as Edit Post, Settings, Designs and Monetize.

Here's how the navigation bar look now.

With the commenting feature, now you can easily check on published comments, comments that are awaiting moderation and spam comments.

To be honest, it's almost like Wordpress now - except Wordpress has a "Trash" are once you deleted a particular comment, probably just in case you want to recover it back.

But when you delete comments on Blogspot, that cannot be undone.

This is how the "Published" section look like - with complete information such as comment author, commented blog post and the date.

Comments "Awaiting Moderation" section. It's self-explanatory.

And lastly, the "Spam" section. Haven't gotten any in my spam inbox right now, hopefully it works against automated spam comment bots.

Take note: It's not implemented on all blogs, yet. Only a handful of blogs has this feature - probably all will have it in the near future.

New Comments System on Blogger : Spam Filtering | Comments "Inbox"

2010-08-12T17:03:00.000-07:00

Commenting is one of the most important parts of blogging. it’s what makes blogging a conversation. Now Blogger has introduced 2 new improvements to Blogger’s comments system: Spam filtering(Spam Inbox) and the ability to view all comments on your blog in one place(Comments Inbox).

Comment Inbox

The Published sub-tab(under Comments tab) provides a similar view as your email inbox. You can see all of the comments on your blog in one place.

Also you can mark them as "spam",delete or remove content of the comments.When you mark a comment as Spam, it will be deleted immediately from your blog.

Comment moderation has also moved under the Comments tab and has been extended to allow you to mark comments as Spam.

Comments Spam Filtering(Spam Inbox)

To fight with spam, some of you enabled moderation of all comments or required word verification or login. While somewhat effective, these checks limit real-time conversations around your blog.To address this,Blogger have integrated Google’s spam filtering technologies into the Blogger comment system.

The comments in the Spam inbox are not visible to your readers. Here, you can permanently delete spam comments by selecting them and choosing Delete. You can also mark comments as Not Spam that have been incorrectly classified as spam.Choose Not Spam and the selected comments will be moved out of the spam list and will be immediately published on your blog.

Want to Read More?

http://www.google.com/support/blogger/bin/answer.py?&answer=187141

http://buzz.blogger.com/2010/08/new-comments-system-on-blogger.html

Pure Magazine V1 Premium Blogger Template

2010-08-12T04:36:00.000-07:00

This is a magazine style free premium blogger template created by me.It has many advanced features, you can see in a blogger template.I hope you will like it very much.To configure this template read the instructions given below.And also read the instruction inside the downloaded zip file.

Template Features

Column: 3 Columns/2 Sidebars/Right Sidebars
Fixed Width Template (1000px width)
2 Horizontal Navigation Menus
Auto Read More Feature with Thumbnails.
468*60 Header Ads banner
1 CSS Search Box
CSS Subscribe Box included
JQuery Featured Post Content Slider included
4 Column Footer section
Meta tags installed
SEO friendly blogger title hack installed to help you rank higher in Google
Facebook Like button installed
Hosted images on blogger. Free use forever!
Favicon support so you can add your own url icon
Compressed CSS to speed up your page load times
Modified "Older Posts","Home","Newer Posts" Links
Automatically highlight author comments
Modified Comments Section to Enable Avatars in Blogger Comments
More...

Demo

Download

Template name : Pure Magazine V1

Template type : 2 Sidebar, 3 Column, 4 Column footer, Elegant, Featured Section, Fixed width, Header Banner, Magazine, Premium, Right Sidebar, Rounded corners, Slider, Top Navigation Bar, Web 2.0, White

Release date : 08-12-2010

Coder/Designer Name(s) : Lasantha Bandara

Coder/Designer URL(s) : http://www.premiumbloggertemplates.com/
http://www.bloggertipandtrick.net/

Advanced Details : http://www.premiumbloggertemplates.com/2010/08/pure-magazine-v1-blogger-template.html

Template Layout Structure

4 Column Footer Section

Template Customization

Basic Template Installation:

1.First download the template and unzip the file.

2.Now, sign in to Blogger dashboard and click on the layout.

3.Here is the important step, after uploading any new Blogger template, all of the previous widgets like your google adsense ads,text,profile,poll,etc etc will be lost.
So, to avoid this to happen, in this step click on 'edit' on all the widgets and copy the codes into notepad,etc.

4.Now click on the 'Edit html' tab

5.First of all please Download Full Template.This is to back up your present template.If the new template that you are going to upload makes/gets into some errors or if you make more complex errors in that,then you will loose everthing.So make sure that you back up your template.

6.Just below that,there's an option of uploading new template.So, use the Browse button and upload the downloaded xml file.

7.Now, a message appear saying that your widgets are about to be deleted.Click on the Confirm & Save (no problem doing this because we already copied the widget codes in Step 3).

8.Now click on "confirm and save".Now you successfully installed the template.

8.Click on the 'Page elements' page now and add the codes that you copied in step3 using the 'Add a Page Element' option.

How To Configure Meta Tags

Find this code in your template:

Now Replace,

DESCRIPTION HERE with your site description.
KEYWORDS HERE with your site keywords.

How To Configure First and Second Navigation Bar

Login to your blogger dashboard--> design- -> Edit HTML.Now Scroll down to where you see below code :

Link-Name-X

Now Replace Your-Link-Here,Link-Title,Link-Name-X with your details.

How to Configure Featured Content Slider

Add this code into a HTML/JavaScript box and place it into above "Blog Posts" section:

NOTE :
Replace "featured post x link"s with your real featured posts links.
Replace image addresses with your real featured posts image addresses.

How To Show Slider only in homepage

Read the instruction inside the downloaded template file.

How to Configure Reply Option of Comments

Find this text in your template : YOUR-BLOG-ID

Now replace it with your real blog ID.

More Details : http://www.bloggertipandtrick.net/2010/06/add-reply-option-to-blogger-comments.html

How to Add Search Box

Add this code into a HTML/JavaScript box:

How to Configure subscribe box

Enter Below code into a HTML/JavaScript box to Add Slider to your blog:











Twitter



Facebook Page



Subscribe via Email

Remember to Replace,

"pbtemplates" with your feedburner ID.(you can find it 3 times)

"btipandtrick" with your twitter ID.

"http://www.facebook.com/pages/Premium-Blogger-Templates/10150130448820134" with your Facebook URL.

How To Configure Favicon

Login to your blogger dashboard--> Design- -> Edit HTML.Now Scroll down to where you see below code :

Now replace "YOUR-FAVICON-URL" with your Favicon address/url.

Configure "Timestamp Format" Format

Login to your blogger dashboard--> Settings- -> Formatting.Now set your timestamp format as the picture below.

Important !!!:

Please do not remove the footer credit. I spend several hours to create this blogger template. So that you can use it for your blog. All I ask is, stay the credit intact.

License:

This free Blogger template is licensed under the Creative Commons Attribution 3.0 License,which permits both personal and commercial use.
However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:
http://creativecommons.org/licenses/by/3.0/

Tutorial: How To Set Password for Blogger Post

2010-08-11T06:14:00.000-07:00

How to make blogger post private?
How to encrypt blogger post?
How to create blog post with password?

First, please proceed to http://www.vincentcheung.ca/jsencryption/instructions.html.

Go to Dashboard > Design > Edit HTML.

Then add the JavaScript decryption code after the tag in the HTML code of your blog. Copy and paste the following code:

Then proceed to http://www.vincentcheung.ca/jsencryption/.

You'll see this page.

Then type for secret key at the "Key" area and the secret message at the "Plain Text" area.

After doing so, hit the Encrypt button under the "Plain Text" area.

Then scroll down a little and you'll see the "HTML Code" area. Highlight, copy and paste the HTML code into your POST EDITOR.

And that's it!

Here's the result of the example shown. The secret key is "the key". Go and click on it.

Show encrypted text

How To Display Recent Twitter Tweets Using JQuery

2010-08-10T19:22:00.000-07:00

Do you want to show your recent tweets inside your website or blogger blog?Then,this tutorial will helpful for you, to add recent tweets into your website using Jquery.Your recent tweets will load fast using jquery and also you can change number of tweets must display very easily.If you want you can read advanced details about tutorial from here: http://www.thewebsqueeze.com/web-design-tutorials/displaying-your-tweets-on-your-website-with-jquery.html

Twitter is a social networking and microblogging service, owned and operated by Twitter Inc., that enables its users to send and read other user messages called tweets. Tweets are text-based posts of up to 140 characters displayed on the author's profile page.

Now follow the steps given below to add this recent tweets widget to your website or blog.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

NOTE :
btipandtrick : Replace this with your twitter username.

5 : Number of tweets must appear.

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:



There was a problem fetching tweets

Currently loading your tweets...


btipandtrick">Follow me on twitter

You are done.

How To Manage External Links Using JQuery

2010-08-10T04:03:00.000-07:00

In this tutorial I am going to show how to style your external links differently from the other links using Jquery.Also after adding this trick to your blogger blog or web site,all external link of your site will open in new window.This is very easy to do and you can view a DEMO HERE.If you want to know further details about this trick you can read this : http://www.madeincima.eu/blog/jquery-tutorial-external-links/

Now to add this jquery external links effect to your site follow the steps given below.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now save your template.

You are done.Now all of your external links open in new windows and can identify external links from other links.

How To Use Own Photo as Blog Background

2010-08-07T19:21:00.000-07:00

How to add photo as Blogger blog background?
How to upload own photo to blog background?
How to change blog background to own photo?
How to modify Blogspot blog background to own photo?
How to put image as blog background?

Blogger in Draft's Template Designer now has a new feature which allows users to upload their own photos as background easily.

To do so, go to Dashboard > Design > Template Designer > Background.

Click on the "Background image" and you'll be able to see the "Upload image" feature. Click it and you'll be able to select the preferred picture as your blog's background.

According to Blogger in Draft blog, for images that fill the entire background, a resolution of 1800px wide and 1600px high is recommended and image size less than 200KB to minimize loading time of the blog. It support JPEG, GIF, and PNG format images.

At the end, additional background settings are available by using the Alignment, Repeat and Scroll options.

How To Add Smart Jquery Featured Slider to Blogger/Websites

2010-07-28T04:32:00.000-07:00

This is a another tutorial about, how to add great featured jquery content slider to your blogger blog or other website.Read the instruction given below to add this featured content slider to your blog with in few minutes.Remember to use 307px width and 254px height images for this slider.I recommend to DOWNLOAD java script files and host it yourself.Also you can see the DEMO of this slider HERE.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:



SLIDE-1-IMAGE-ADDRESS-HERE'/>

SLIDE-2-IMAGE-ADDRESS-HERE'/>

SLIDE-3-IMAGE-ADDRESS-HERE'/>

SLIDE-4-IMAGE-ADDRESS-HERE'/>

SLIDE-5-IMAGE-ADDRESS-HERE'/>

NOTE : Replace,

SLIDE-X-LINK-HERE with your real featured posts links.

SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

Look at the example below:

You are done.

How To Create JQuery Featured Content Slideshow

2010-07-20T01:50:00.000-07:00

In this tutorial I am going to explain,how to create a slideshow to show your featured content to visitors.This is very easy to add and configure.This slideshow is working using jquery.You do not want to host any java script file yourself to add this slideshow to your blog.So you can add this slideshow to your site with in few minutes.Default width=600px and height=240px.But you can change it easily to match it for your website.

If you like add this slideshow to your blogger blog or website,then follow the steps given below.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:



http://3.bp.blogspot.com/_4HKUHirY_2U/TEVd7gbRVeI/AAAAAAAABGc/J-aSBfN0rhw/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." />


http://2.bp.blogspot.com/_4HKUHirY_2U/TEVd7zgT63I/AAAAAAAABGk/9vJ6VYTYGWM/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." />


http://4.bp.blogspot.com/_4HKUHirY_2U/TEVd8JKsDaI/AAAAAAAABGs/vzECCT1mDws/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." />


http://1.bp.blogspot.com/_4HKUHirY_2U/TEVd8VPgRRI/AAAAAAAABG0/O4yhLEWG5UU/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." />

You can add more slides as you like.

Note : Replace images URLs,"This is featured post X title","Replace This Text With Your Featured Post X Description" with your content.

You are done.

How To Add Random,Rotating Images for Blogger Header

2010-07-09T05:16:00.000-07:00

In this tutorial I am going to explain how to add random,rotating images for your blogger header background.When after you adding this feature to your blogger blog,header image of your blog will rotate/change in each page refresh.Before doing this trick you must create header images for your blog.In this tutorial I am going to show how to rotate 5 header images.

1.Log in to your dashboard--> Design- -> Edit HTML

2.Scroll down to where you see tag.

3.Now copy below code and paste it just after the tag.

NOTE :

Replace "URL-OF-HEADER-IMAGE-X" with your image URLs.

If above code doesn't work for your blog,then replace "#header-wrapper" with "#header".(ID or Class of your header section).

You can add different number of images than 5.But remember to change "4*Math.random()" according to the number of images you add.For example,when you want to add 8 different images for your blog header background, then code should be change as "7*Math.random()".Look at the example below:

4.Now save your template and your done.Refresh your site few times to see the result.Your header image will be rotate.

How To Add Twitter Follow me Button to Blogger/Website

2010-07-04T18:32:00.000-07:00

This tutorial will explain to you how to add Twitter Follow me Button to your blogger blog or any other web site.This service is provided by Tweetmeme.com.This Follow button is for website and blog publishers that want to encourage their audience to follow them on twitter. This button provides the interface to see the follower count of a particular user and a button which upon pressing opens the follow pop-up providing a number of different views and statistics about the user from additional services such as Twitter Grader, Twitalyzer and Twitter Counter.

If you are a blogger then follow the steps below to add this 'Twitter follow button' to your blogger post.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

4.Now Copy your "Tweetmeme Follow Button" code and paste it just below the above code.

NOTE: If you can't find

in your template, paste your "Tweetmeme Follow Button" code just before .

Code 1:

Result:

Code 2:

Result:

Code 3:

Result:

NOTE : Remember to replace yourtwitterusername with your real twitter username.

If you are not a blogger,you can too add this code simply your website.

5.Now save your template and you are done.

New Stats Feature on Blogger in Draft

2010-07-03T22:27:00.000-07:00

Is there a statistics feature on Blogger?
How to check traffic on Blogspot?
How to see statistics and analytic of my blog?

Here's a new feature implemented by Blogger, however in Blogger in Draft for the moment. Once it's finalized, it will probably be implemented on Blogger as well.

Once you're on the Stats page, navigate yourself on the navigation to see more detailed information. The stats can be changed depending on your choice - Now, Last Day, Last Week, Last Month or All Time.

Overview Section

On the Overview page, the page views is shown.

Blog posts with the highest page views.

Short summary of the traffic sources and audience.

So basically it's like a summary. The stats of the blog can be roughly seen on this page.

Posts Section

On the next page, the Posts page, the more blog posts with the top highest page views will be shown.

From this, blog posts are giving the blog most traffic can be identified.

Traffic Sources Section

On the Traffic Sources page, more details can be obtained. The referring URLs, also known as links, that direct traffic to your blog.

The referring websites. Shows which website gives the blog the organic traffic.

And the referring keywords as well. Usually these are the keywords people search on Search Engines and got into the blog.

So these information is basically the sites and links that has given traffic to the blog.

Audience Section

On the last page, the Audience page, there's a page views statistics categorized by countries. Visitors' location can be identify by looking at the illustrated map and list.

Also, page view categorized by web browsers. The top used browsers used to access the blog can be known too.

And lastly, page views by operating systems. Pretty self-explanatory.

All in all, a little information about the visitors can be seen here.

Besides this default stats feature, other external Traffic Tracker and Statistics on your Blogger blog as well.

"Blogger Stats" - Check Traffic of Your Blog through Blogger

2010-07-03T21:32:00.000-07:00

Few days ago, Blogger, has introduced a full-featured, real time stat service for your blogspot blog.The new Stats feature shows all traffic stats data of your bloggger blog, in a simple, easy-to-understand graphical user interface.

So now you can check traffic stats of your blogger blog without using any third party services.You have nothing to install or configure.It monitors and analyzes your visitor traffic in real time, which technically is not possible with other tools, not even in Google Analytics.

The coolest thing about the new Blogger Stats is that it monitors and analyzes your visitor traffic in near-real-time. You can see which posts are getting the most visits and which sites are sending traffic to your blog right now. For example, if a reader shares one of your blog posts on Twitter and the post is getting lots of clicks, you will see a traffic increase in Blogger Stats almost instantly, with the particular Tweet mentioning your post being identified as the traffic source. Of course, traffic data across longer time periods (day/week/month) and all-time historical data are available as well.

From Blogger in draft

Right now it's available for Blogger in Draft only, but soon you can see this feature in your main Blogger dashboard.To check this feature,Login to your Blogger in Draft dashboard.You can see a link called "Stats".Look at below:

Click on that link and now you can check your blog traffic stats directly from blogger.Here you can check features like page views of your blogger posts,Traffic Sources of your blog,popular search keywords that send visitors to your blog, which country your visitors come from, and which web browsers they are using,etc...

This new feature will helpful to all blogger users to know what's going on with your blog right now.As a blogger I am very happy with this new feature of blogger.

How To Remove Blogger Navigation Bar in Template Designer (Update)

2010-07-02T17:31:00.000-07:00

How to delete navigation bar on Blogger Draft template?
How to remove default bar on Draft Template Designer?

It can also be done via this method. Navigate yourself through:

Dashboard > Design > Template Designer > Advanced > Add CSS
And then add this:

#navbar-iframe {display: none !important;}

Click "Apply to Blog" and you're done.

Credit: Comment by Bytexpert

P/S: Click here for the previous workable method.

How To Add Blogger Official Share Buttons

2010-07-01T06:13:00.000-07:00

In this tutorial I will explains, how to add blogger new share buttons to your blogspot blog.This will more helpful if your template is a highly customized blogger template.But your template is a blogger default template, then you can add this share buttons editing the Blog Posts widget and enabling Show Share Buttons in Page Elements section.

But this method does not work for you,follow the steps given below to add blogger share buttons to your blog.

Blogger now offers new share buttons. The new buttons can be placed under each post and let your blog readers easily share your post via email, Blogger, and popular social networks—we now support Google Buzz, Twitter, and Facebook, and we plan to add more services in the future.
-From Blogger Buzz

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

4.Now Copy below "Blogger Sharing buttons" code and paste it just below the above code.

NOTE: If you can't find

in your template, paste "Blogger Sharing buttons" code just before .

This will show blogger sharing buttons below post header.But if you want to show share buttons below blogger post,then paste your code just after .

5.Now save your template and you are done.

How To Add Social Sexy Bookmarks v2 to Blogger

2010-06-23T17:17:00.000-07:00

This is the second version of "How To Add Sexy Social Bookmark to Blogger".The creator of Sexy Social Bookmarks is http://www.cssreflex.com/.For second version of sexy social bookmarks, you have to use jquery.I hosted sexy bookmarks images(2 images) in google code or other hosting service.Don't try to host images in blogger.If you do so this sexy bookmark widget will not work correctly.Below I explain how to add this sexy bookmarks v2 for your blogspot blog.If you like to add it to your blog then follow the steps given below.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see tag.

4.Now add below code before tag.

NOTE : Download Image Files

5.Scroll down to where you see tag.

6.Copy below code and paste it just after .




Share this on del.icio.us

Digg this!

Stumble upon something good? Share it on StumbleUpon

Share this on Reddit

Add this to Google Bookmarks

Tweet This!

Share this on Facebook

Share this on Mixx

Subscribe

Buzz up!

Share this on Linkedin

Submit this to DesignFloat

Share this on Technorati

Submit this to Script & Style

Post this to MySpace

Share this on Blinklist

Share this on FriendFeed

Seed this on Newsvine

7.Now save your template and you are done.

How To Add Subscribe Box to Blogger/Website

2010-06-19T21:49:00.000-07:00

In this tutorials,I will explain to you how create a Subscribe Box with Feedburner Email subscription,Feed subscription and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious).You can easily add or remove social buttons to this widget and setup your email subscription.If you like to add this widget to your blog or a website,then follow the steps given below.

1.Log in to your dashboard--> Design- ->Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.



FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">Get Notified When We Update !!!
FEEDBURNER-ID" name="uri" type="hidden" />



DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(http://1.bp.blogspot.com/_T46SliM0-PI/TB2Wrb1EuNI/AAAAAAAAAZQ/XCYsv5xhrFY/s1600/delicious.png) center top no-repeat">
TWITTER-USERNAME" class="subscribe-sec" style="background: url(http://3.bp.blogspot.com/_T46SliM0-PI/TB2WqtxRIMI/AAAAAAAAAZI/7INQ-HwZQo4/s1600/twitter.png) center top no-repeat">
DIGG-USERNAME" class="subscribe-sec" style="background: url(http://1.bp.blogspot.com/_T46SliM0-PI/TB2WrnJnupI/AAAAAAAAAZY/qgLCPjkY7xQ/s1600/digg.png) center top no-repeat">
FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(http://2.bp.blogspot.com/_T46SliM0-PI/TB2WsA5-GWI/AAAAAAAAAZg/llckeiIzHBA/s1600/facebook.png) center top no-repeat">
STUMBLEUPON-USERNAME" class="subscribe-sec" style="background: url(http://3.bp.blogspot.com/_T46SliM0-PI/TB2W0KunsvI/AAAAAAAAAZw/2UZpjpyBE5s/s1600/stumbleupon.png) center top no-repeat">
FEEDBURNER-ID" class="subscribe-sec" style="background: url(http://4.bp.blogspot.com/_T46SliM0-PI/TB2WsfPjsZI/AAAAAAAAAZo/LOPvME3a_mA/s1600/rss.png) center top no-repeat">

Note : Remember to REPLACE,

FEEDBURNER-ID with your feedburner ID.
DELICIOUS-USERNAME with your delicious username.
TWITTER-USERNAME with your twitter username.
FACEBOOK-USERNAME with your facebook username.
STUMBLEUPON-USERNAME with your stumbleupon username.

Look at the example given below.



blogspot/WyNa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">Get Notified When We Update !!!
blogspot/WyNa" name="uri" type="hidden" />



wam8387" class="subscribe-sec" style="background: url(http://1.bp.blogspot.com/_T46SliM0-PI/TB2Wrb1EuNI/AAAAAAAAAZQ/XCYsv5xhrFY/s1600/delicious.png) center top no-repeat">
btipandtrick" class="subscribe-sec" style="background: url(http://3.bp.blogspot.com/_T46SliM0-PI/TB2WqtxRIMI/AAAAAAAAAZI/7INQ-HwZQo4/s1600/twitter.png) center top no-repeat">
wam8387" class="subscribe-sec" style="background: url(http://1.bp.blogspot.com/_T46SliM0-PI/TB2WrnJnupI/AAAAAAAAAZY/qgLCPjkY7xQ/s1600/digg.png) center top no-repeat">
btipandtrick" class="subscribe-sec" style="background: url(http://2.bp.blogspot.com/_T46SliM0-PI/TB2WsA5-GWI/AAAAAAAAAZg/llckeiIzHBA/s1600/facebook.png) center top no-repeat">
wam83879" class="subscribe-sec" style="background: url(http://3.bp.blogspot.com/_T46SliM0-PI/TB2W0KunsvI/AAAAAAAAAZw/2UZpjpyBE5s/s1600/stumbleupon.png) center top no-repeat">
blogspot/WyNa" class="subscribe-sec" style="background: url(http://4.bp.blogspot.com/_T46SliM0-PI/TB2WsfPjsZI/AAAAAAAAAZo/LOPvME3a_mA/s1600/rss.png) center top no-repeat">

You are done.

How To Buy Custom Domain for Blogger

2010-06-19T20:57:00.000-07:00

How to buy domain for Blogspot blog?
How to add custom domain on Blogger blog?
Where to purchase custom domain for Blogger?

Firstly, head to:

Dashboard > Settings > Publishing
Then click on Switch to "Custom Domain".

So now you're on the page where you buy a domain for your blog via Google Apps. A domain costs USD10 a year.

Enter the domain address you desire and check on its availability by clicking on the blue button beside.

Take note: Your readers won't be left behind!

So there's no need for your readers to change your link on their blog roll because it will be automatically redirected to your new domain.

After checking its availability, you will redirected to a new page with information regarding the domain.

If you noticed below, there's a phrase "Powered by GoDaddy.com" or "Powered by eNom". These 2 are the domain registration partners of Google. Click on "Learn more" to switch between them. I would suggest GoDaddy.com.

Then, continue with the registration.

Enter your domain name information and remember to check "Automatically renew my registration every year" if you want to keep this domain.

Follow the rest of the instructions and it's pretty simple. Do remember to have your credit card/debit card ready as well.

All the best!

How To Add Reply Option to Blogger Comments

2010-06-14T03:50:00.000-07:00

This tutorials will show you how to add reply option to your blogger comments like wordpress.Usually we can see reply option in non blogger blogs.But in blogger blogs there is no option to reply comments.But after you add this trick to your blogger template,you can see a reply option in blogger comments.

Before add this feature to your blogger blog you must find your blog ID.

To find your blog id follow the step given below.

Login to your dashboard and click on "Settings" link of your blog.

Now look at address bar of your browser.You can see your blog ID on the address bar.It will be a number like 2183677992760077155.Now note your blog ID.

Now let see how to add reply option to blogger comments.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Copy below code and paste it just after above code.

[Reply]

NOTE : Remember to replace YOUR-BLOG-ID with your real blog ID.

Look at the example given below:

[Reply]

5.Now save your template and you are done.

20 Free Beautiful Social Media Icon Sets Collection

2010-06-08T05:04:00.000-07:00

This is my another beautiful high quality social media icon collection for you.I think you will like this social icons very much.You can get these social icons directly from the authors websites.If you want to read my previous social media icon collection read below posts:

23 Free High Quality Social Media Icons Sets

Beautiful 3D Social Bookmark Icons Sets For Bloggers

Free Premium Quality Social Media Icons Collection

65 Bookmarks And Social Icons

65 freeware icons of Web 2 Social Bookmarks and Networks for use in blogs, websites, etc...Sizes: 128x128 64x64 32x32 16x16 | 260 Total icons.

Download : http://studiom6.deviantart.com/art/65-Bookmarks-And-Social-Icons-120098825

Ultra Glossy Silver Button Social Media Icons

Download : http://webtreats.mysitemyway.com/ultra-glossy-silver-button-social-media-icons/

108 Glossy Black Comment Bubble Icons

Download : http://webtreats.mysitemyway.com/108-glossy-black-comment-bubble-social-networking-icons/

154 Matte Black Social Media Icons

Download : http://webtreats.mysitemyway.com/154-matte-black-social-media-icons/

Social.me

Social.me is an icon set consisting of 30 individual icons of the popular social networks/Web 2.0 sites out there.

The icons are iPhone-inspired and is based on the template provided by Tim (www.lostpixel.com) @ MacThemes Forum.Feel free to use these icons anywhere on your website, blog, or even in print.

Download : http://jwloh.deviantart.com/art/Social-me-90694011

Black Inlay on Steel Social Media

Download : http://webtreats.mysitemyway.com/iconsetc-black-inlay-on-steel-social-media-icons/

Social Media Balloons

The icons come in different sizes (from 32px to 128px) and they are in 32-bit transparent PNG format. The set is free for both personal and commercial use (under Creative Commons Licence, attribution is needed). However, resell is not allowed. If you want to integrate them into a website template which is for sale (e.g. WordPress theme, Social bookmark plugin, etc), you need to purchase an extended license.

Download : http://www.doublejdesign.co.uk/2010/03/social-media-balloons/

Social Media Balloons 2

Download : http://www.doublejdesign.co.uk/2010/04/more-social-media-balloons/

Social Jeans

Download : http://nishad2m8.deviantart.com/art/jeans-social-media-icon-pack-131069708

Simple Glossy Silver Social Media Icons

Download : http://webtreats.mysitemyway.com/simple-glossy-silver-social-media-icons/

Social 2 Duo

Download : http://iconblock.com/goodies/icons/

OLED Social Icons

Contents:21 icons
- 256x256px,- 128x128px,- 96x96px,- 64x64px,- 48x48px,- 32x32px,- 16x16px21

Download : http://arrioch.deviantart.com/art/OLED-social-icons-151238966

Furry Cushions Social Icons

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.

Download : http://www.cutelittlefactory.com/freebies/furry-cushions-social-icons/

Free Social Media Icon Set Chrome

This set includes 19 social networks along with a standard RSS icon in PNG format.

Download : http://www.chris-wallace.com/2009/05/28/free-social-media-icons-socialize/

Wooden Social Media Icons

This is a set of free Social Bookmarking icons which is in Wooden style. Icons are in editable PSD and PNG formats so they can be customized as per your requirement.

Download : http://annanta.com/archive/wooden-social-media-icons/

Free 3D Social

Free 3D Social Icons are a free icon collection ideal for Web sites and applications associated with all sorts of social networks. The pack delivers images depicting various communication technologies and Web sites.

The icons from the pack come in sizes of 16x16, 20x20, 24x24, 32x32, 48x48, 64x64, and 128x128 pixels, as well as in specially created, extra large sizes of 256x256 and 512x512 pixels. The icons are available in True Color with semi-transparency format. They are delivered in all of the following formats: ICO, PNG, GIF and BMP. Source files in 3D-Max format are also available.

This fabulous icon pack is available for instant free download!

Download : http://www.large-icons.com/stock-icons/free-3d-social-icons.htm

Grunge Social

Download : http://www.box.net/shared/hxycdc1m8z

Large Delicious Icons

Large Delicious Icons are a free icon collection ideal for Personal blogs and Web-pages. This set pictures the well-known Delicious symbol in lots of fresh and attractive variations.

The icons from the pack come in sizes of 16x16, 24x24, 32x32, 48x48 and 128x128 pixels, as well as in specially created, extra large sizes of 256x256 and 512x512 pixels. The icons are available in True Color with semi-transparency format. They are delivered in all of the following formats: ICO, PNG, GIF and BMP.

This fabulous icon pack is available for instant free download!

Download : http://www.large-icons.com/stock-icons/large-delicious-icons.htm

Social Media Price Tag

The source file (PSD) is included, as well as two sizes of PNGs (250×150 px & 125×75 px). You can use these icons for personal and commercial projects at free of charge.

Download : http://deepubalan.com/blog/2009/12/14/high-resolution-social-media-iconset-for-free-price-tag-style/

Woodgrain A Free Social Media Icon Set

Download : http://www.chris-wallace.com/2009/06/30/woodgrain-a-free-social-media-iconset/

How To Embed URL,HTML,Forum Links Code below Blogger Posts

2010-06-03T01:02:00.000-07:00

This tutorial will explain how to create a widget, for your visitors to link back to your article/blogger post.This was created by me(http://www.bloggertipandtrick.net/) and previously I had installed this widget to this site.Many visitors ask from me how to add this widget to their blogger blogs and so I decided to explain it.This widget will show 3 codes (Blog Post URL,HTML code to embed your post to a website,Forum Link to embed your post to a forum) below your blogger post.If you like to add this widget to your blogger blog,then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now find below code:

5.Copy below code and paste it just after the .


If you find this article useful, please feel free to link to this page from your website or blog.
URL:
HTML Link:

Forum Link:


Widget by BloggerTipAndTrick

NOTE : Don't change anything in above code.

6.Save your template and you are done.

How To Let Visitors to Listen Your Blogger Post

2010-06-02T05:37:00.000-07:00

This service is provided by http://vozme.com/.If you like to let your visitors to listen to your blogger posts, you can add this Vozme Link or Vozme Button to your blogger blog.This will more helpful when your blogger posts are very long.Below I explain how to add this widget to your blogger blog.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

NOTE: If you can't find

in your template, Find .

4.Copy one of code below and paste it just after

or just before .

CODE 1 : Using a Text Link






I have    Twitter followers.

NOTE : Replace YOUR-TWITTER-USERNAME with your real twitter username.

You are done.

12 Things To Do After Creating New Blogspot Blog

2010-05-23T00:08:00.000-07:00

What to do after creating a new Blogspot blog?
What necessary actions need to be taken with a new blog?

Here are 12 things you should do after setting up a new blog with Blogspot.

First, head to the Settings and you'll be on the "Basic" section.

1) Make sure you have a good blog title and description.

2) If you want to drive traffic to the blog, pick "Yes" for "Add your blog to our listings?" and "Let search engines find your blog?"

After that, head on to the "Formatting" section.

3) Select the number of posts you want to be shown on the main page. The lesser the posts, the faster the loading speed of the homepage.

4) Adjust the time zone depending on which country you reside in.

Then, continue to the "Comments" section.

5) Select who can comment on your blog. It depends on how much you welcome comments from strangers.

6) Select the type of comment form placement you want. There are 3 choices and each of them are different. I'd recommend it to be embedded below post.

7) If you would like to display backlinks to your blog posts, select "Show" and the links will be shown. Indirectly, your readers will be able to access to the links if they are interested.

8) If you prefer to keep track and moderate the comments received on the blog, select "Always". Comments submitted will not be shown immediately as a result. Otherwise, select "Never".

9) I personally don't like guessing some funny words and type them out just to make sure I'm not a robot or some sort. But if you really want to prevent spam, by all means, say "Yes" to word verification.

10) If you like to see profile images of the commentators on the comment section, selecting "Yes" would be a good option.

Next, the "Site Feed" section.

11) Remember to allow the default feed on your blog so that people can subscribe to your blog and receive updates easily.

12) If you have created a custom feed on Feedburner or some other external feed manager, do include the feed link as well. It will automatically redirect your default feed to the custom feed.

And that's all for now. Hope this guide will help those who've just started a new Blogspot blog.

LK Magazine v2 Premium Blogger Template

2010-05-22T01:05:00.000-07:00

This template is the second version of LK Magazine Premium Blogger Template.I hope you will like it.It has many more premium features than its first version.Give your ideas about this templates leaving a comment.You can download this premium blogger template from here for free and read the article for template configuration.

Demo

Download

Template name : LK Magazine Version 2

Release date : 05-22-2010

Coder/Designer Name(s) : Lasantha Bandara

Coder/Designer URL 1 : http://www.premiumbloggertemplates.com/
Coder/Designer URL 2 : http://www.bloggertipandtrick.net/

Template Features

Column: 4 Columns/3 Sidebars/Right Sidebars/Left Sidebar
Fixed Width Template (1000px width)
2 Horizontal Navigation Menus
Auto Read More Feature with Thumbnails.
468*60 Header Ads banner
468*60 Header Logo with the PSD file and Fonts.
1 CSS Search Box
3 Column Footer section
Social Bookmarking Buttons/Badges installed
SEO friendly blogger title hack installed to help you rank higher in Google
Blogger Default Heading Tag has Changed for better SEO
Meta tags installed
Top Bar with Feed buttons and Display Day,Month,Year
Hosted images on blogger. Free use forever!
Favicon support so you can add your own url icon
Compressed CSS to speed up your page load times
Embedded JavaScript date code showing current day
Built-in Related Posts Widget to show Related posts
Numbered Page Navigation Hack Installed
Breadcrumbs Navigation Hack Installed
Replace "Older Posts","Home","Newer Posts" Text Navigation with Images
Automatically highlight author comments
Modified Comments Section to Enable Avatars in Blogger Comments
Many more ......

Template Layout Structure

3 Column Footer Section

Template Customization

Basic Template Installation:

1.First download the template and unzip the file.

2.Now, sign in to Blogger dashboard and click on the layout.

3.Here is the important step, after uploading any new Blogger template, all of the previous widgets like your google adsense ads,text,profile,poll,etc etc will be lost.
So, to avoid this to happen, in this step click on 'edit' on all the widgets and copy the codes into notepad,etc.

4.Now click on the 'Edit html' tab

5.First of all please Download Full Template.This is to back up your present template.If the new template that you are going to upload makes/gets into some errors or if you make more complex errors in that,then you will loose everthing.So make sure that you back up your template.

6.Just below that,there's an option of uploading new template.So, use the Browse button and upload the downloaded xml file.

7.Now, a message appear saying that your widgets are about to be deleted.Click on the Confirm & Save (no problem doing this because we already copied the widget codes in Step 3).

8.Now click on "confirm and save".Now you successfully installed the template.

8.Click on the 'Page elements' page now and add the codes that you copied in step3 using the 'Add a Page Element' option.

Configure Meta tags

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below codes :

Replace DESCRIPTION HERE,KEYWORDS HERE,AUTHOR NAME HERE as below.

DESCRIPTION HERE:Write your blog description
KEYWORDS HERE:Write the keywords of your blog separated by comma.
AUTHOR NAME HERE:Write the author's name(Your name)

Configure First and Second Navigation Bar

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below code :

Link-Name-X

Now Replace Your-Link-Here,Link-Title,Link-Name-X with your details.

Configure Header logo

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below line :

http://2.bp.blogspot.com/_T46SliM0-PI/S_VIpcB5SmI/AAAAAAAAAMs/CuJPES_Z5aE/LK+Magazine+v2.png

Now replace it with your logo address/url.

How To Configure Favicon:

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below code :

Now replace "YOUR-FAVICON-URL" with your Favicon address/url.

Configure Featured content slider

Go to Layout-->Page Elements and click on "Add a gadget".

Select "html/java script" and add the code given below and click save.








ENTER-YOUR-POST-1-LINK-HERE">THIS-IS-FEATURED-POST-1-TITLE

FEATURED-POST-1-DESCRIPTION


FEATURED-POST-1-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-LINK-2-HERE">THIS-IS-FEATURED-POST-2-TITLE

FEATURED-POST-2-DESCRIPTION


FEATURED-POST-2-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-3-LINK-HERE">THIS-IS-FEATURED-POST-3-TITLE

FEATURED-POST-3-DESCRIPTION


FEATURED-POST-3-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-4-LINK-HERE">THIS-IS-FEATURED-POST-4-TITLE

FEATURED-POST-4-DESCRIPTION


FEATURED-POST-4-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-5-LINK-HERE">THIS-IS-FEATURED-POST-5-TITLE

FEATURED-POST-5-DESCRIPTION


FEATURED-POST-5-IMAGE-ADDRESS" class="full" alt="" />

Change 5000 to change your slider speed.

NOTE : Remember to replace ,

ENTER-YOUR-POST-X-LINK-HEREs with your real post links.

THIS-IS-FEATURED-POST-X-TITLEs with your real post titles.

FEATURED-POST-X-DESCRIPTIONs with your post descriptions.

FEATURED-POST-X-IMAGE-ADDRESSs with your real image addresses.

More details: http://www.bloggertipandtrick.net/2010/05/mootools-featured-posts-slider-blogger.html

Configure Multi tab widget

Login to your blogger dashboard--> layout- -> Edit HTML.Now Scroll down to where you see below lines :

ENTER-TAB1-CONTENT-HERE

ENTER-TAB2-CONTENT-HERE

ENTER-TAB3-CONTENT-HERE

Replace these lines with your tab contents.

Configure 125*125 Ad Banners

Find below code in your template.

Now replace "http://themeforest.net?ref=wam8387" and "http://4.bp.blogspot.com/_T46SliM0-PI/S_VK7D-QSNI/AAAAAAAAAM8/KfE0GynX7KI/tf_125x125_v4.jpg" with your details.

Configure "Blog Posts" Widget

Login to your blogger dashboard--> layout- -> Page elements.Click on "Edit" form "Blog Posts" Section.Now change it value as the picture below:

Configure "Timestamp Format" Format

Login to your blogger dashboard--> Settings- -> Formatting.Now set your timestamp format as the picture below.

Important !!!:

Do not remove Footer Credits.

License:

This free Blogger template is licensed under the Creative Commons Attribution 3.0 License,which permits both personal and commercial use.
However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:
http://creativecommons.org/licenses/by/3.0/

Mootools Featured Posts Auto Slider to Blogger/Websites

2010-05-21T00:11:00.000-07:00

This tutorial will show you how to add Mootools Featured Posts Slider into blogger or any other web site.You can look at the DEMO page of this Mootools Featured Posts Slider.Now if you like to add this slider to your site then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

NOTE : You can DOWNLOAD and HOST mootools-1.2.1-core-yc.js yourself.Andalso you can change width and height of this slider easily (Default width:515px and height:250px;).

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below and click save.








ENTER-YOUR-POST-1-LINK-HERE">THIS-IS-FEATURED-POST-1-TITLE

FEATURED-POST-1-DESCRIPTION


FEATURED-POST-1-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-LINK-2-HERE">THIS-IS-FEATURED-POST-2-TITLE

FEATURED-POST-2-DESCRIPTION


FEATURED-POST-2-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-3-LINK-HERE">THIS-IS-FEATURED-POST-3-TITLE

FEATURED-POST-3-DESCRIPTION


FEATURED-POST-3-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-4-LINK-HERE">THIS-IS-FEATURED-POST-4-TITLE

FEATURED-POST-4-DESCRIPTION


FEATURED-POST-4-IMAGE-ADDRESS" class="full" alt="" />



ENTER-YOUR-POST-5-LINK-HERE">THIS-IS-FEATURED-POST-5-TITLE

FEATURED-POST-5-DESCRIPTION


FEATURED-POST-5-IMAGE-ADDRESS" class="full" alt="" />








This is featured post 1 title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...






This is featured post 2 title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...






This is featured post 3 title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...






This is featured post 4 title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...






This is featured post 5 title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...

You are done.

How To Add JQuery Fade Effect to Blogger / Website

2010-05-16T19:12:00.000-07:00

This quick tutorial explains how to add jquery fade effect to your images in blogger or any other web site.This is very easy and you can do this less than a minute.But this effect will add some attractive appearance to your blog or web site.You can look at the DEMO page of this tricks from here.Now follow the steps below to do this.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now save your template and you are done.

How To Change Dimension of Photo Manually on Blogspot

2010-05-16T04:27:00.000-07:00

How to modify the photo resolution on Blogger?
How to change size of photo manually on Blogspot?
How to edit the picture size on photos uploaded on Blogspot?

If you want to manually change the dimension, or distort the size, of a particular photo uploaded on Blogger, here's how.

This is the sample picture.

After uploading, check the code and look for "width:" and "height:" from the photo code.

width: 400px; height: 265px;" src="http://3.bp.blogspot.com/_h8eC61avCMk/Sj47sGxezHI/AAAAAAAAA-8/yxPvykDZdDQ/s400/asian.jpg" alt="" id="BLOGGER_PHOTO_ID_5466089975697168450" border="0" />

Then change the pixels to your desired dimension.

Here's an example of "width: 200px; height: 500px;".

Enjoy changing the dimension!

How To Add Twittley Retweet Counter Buttons to Blogger

2010-05-15T06:49:00.000-07:00

Twittley is a social network for users to find and share links on Twitter.Harness the power of social networks and viral marketing with the Twittley button. Millions of users use Twitter as a social network so it only makes sense to get your link out to those users.

When a Twitter user arrives at your site, they'll quickly see the distinctive Twittley button. When they click on the button your link will automatically be posted onto their Twitter status so all of their followers can then see the link. Your link will also appear on the Twittley web site where the community can then retweet and comment. All of this is done without the user leaving your site, Twittley does everything behind the scenes.

In this post I explain how to add a Twittley Retweet Counter Button to your blogger blog.If you like to add this Twittley retweet button to your blog then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

4.Now Copy your "Twittley Retweet" bookmarking buttons code and paste it just below the above code.

NOTE: If you can't find

in your template, paste your "Twittley Retweet" bookmarking buttons code just before .

Code 1:

Note : You can download javascript files from here if you want to host above files yourself.

4.Now save your template and you are done.Refresh your site to see the result.

How To Change Default Photo Size Uploaded on Blogspot

2010-05-08T05:48:00.000-07:00

How to change the size on photos uploaded on Blogger?
How to set the original photo size on Blogspot?
How to modify the size of photos uploaded on Blogspot via Picasa?
How to change the photos uploaded on Blogspot to the original size?
How to edit the size of the photos uploaded on Blogspot?

If you have uploaded a photo bigger than the default 400px x 400px maximum width and height on Blogspot and would like to display its original size, here's how.

Here's a demonstration: You uploaded this (tiger) picture onto your Blogspot (which is originally larger at 1071px x 1600px), and you want it to be displayed on a bigger scale. What you need to do is to look at the HTML section of the particular blog post.

Look for the code lines for the picture. It will look somehow like this.

http://1.bp.blogspot.com/_5GPNp7WSVyI/SQgmKB2K3RI/AAAAAAAAAmo/JjrNfvYr1mk/s400/DSC_0232.JPG" alt="" id="BLOGGER_PHOTO_ID_5466089975697168450" border="0" />

Then, all you need to do is to change the URL's (highlighted in Orange) "s400" part.

Change it to:

s800 - for medium size.
S1600 - for full size.

When it's changed to s800, here's the medium size of the photo shown.

Now the displayed photo size is 536px x 800px.

Likewise, change it to "s1600" if you want to display to full size of the photo.

Take note: s800 and s1600 has no connection with the height and width, and may show different results compared to the demonstration shown here. It varies depending on the original size of your uploaded photo.

Any questions are welcomed.

How To Add Flickr Photostream to Blogger

2010-05-02T02:43:00.000-07:00

This tutorials will show you how to add a Flickr photostream to your blogger blog.If you like to add this widget to your blogger blog,then follow the steps given below.

1.First login to your Flickr account.

2.Now click on "Your Photostream".

3.Now you are in the your flickr Photostream page.

4.Look at the address of the address bar of your browser.It will look like this:

5.Now can see your Flickr ID.It will be something like this:

38647261@N03

6.Now copy your Flickr ID.

7.Login to your blogger dashboard-->Layout > Page Elements

8.Click on 'Add a Gadget'.

9.Select 'HTML/Javascript' and add the code given below and click save.

Note : Replace YOUR-FLICKR-ID with your Flickr ID.

How To Add Facebook Like/Recommend Button For Blogger

2010-04-28T22:42:00.000-07:00

This tutorial will explains how to add facebook like/Recommend button to your blogger blog and how configure it as you like.To add this facebook like button to your blog follow steps given below.

The Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click. Since the content is hosted by Facebook, the button can display personalized content whether or not the user has logged into your site. For logged-in Facebook users, the button is personalized to highlight friends who have also liked the page.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

4.Now Copy your "StumbleUpon" bookmarking buttons code and paste it just below the above code.

NOTE: If you can't find

in your template, paste your "StumbleUpon" bookmarking buttons code just before .

standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

You can customize above facebook like button changing its values:

You can change,

layout=standard to layout=button_count .

show_faces=false to show_faces=true.

action=like to action=recommend.

font=arial to font=lucida+grande or font=segoe+ui or font=tahoma or font=trebuchet+ms or font=verdana.

colorscheme=light to colorscheme=dark.

5.Now save your template and you are done.

Smooth Jquery Featured Post Slideshow For Blogger

2010-04-27T00:19:00.000-07:00

This tutorial will shows you how to add featured content slideshow to show your featured post to your readers.This slideshow is very easy to setup and can easily manage width and height to match your template.Not only that you can change the speed of this slideshow easily.Default width is 550px and Default height is 200px.I think you will love this slideshow.You can see the DEMO of this widget from here.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

NOTE : To change the speed of slideshow, change the value 4000.

4.Save your template.

5.Now go to Layout-->Page Element and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.





YOUR-LINK-HERE">
Crysis : Download Full Version



YOUR-LINK-HERE">
Halo 3 : Play Game Online



YOUR-LINK-HERE">
Avatar : Watch Movie Now !!!



YOUR-LINK-HERE">
Call Of Duty 4 : Get Here

NOTE : Replace YOUR-LINK-HERE and images with your content.

Now you have successfully installed this slide show to your site.

How To Add Official Google Buzz Button+Counter to Blogger

2010-04-19T07:33:00.000-07:00

Now Google has introduced their Official Google Buzz Buttons.Buzz Buttons help people share stuff from your website in Google Buzz. You can add this buzz button to your blogger blog or website easily.Below I explain how to add this official Google buzz button to blogger with or without share count.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Now copy one of the below codes and paste it just before the above line.

Button 1 : Button + counter : Post count - On the top

Code:

Result:

Button 2 : Button + counter : Post count - On the side

Code:

Result:

Button 3 : Button only : Size - Normal

Code:

Result:

Button 4 : Button only : Size - Small

Code:

Result:

Button 5 : Link

Code:

Result:

5.Now save your template and you are done.

How To Hidden Deleted Comments in Blogger

2010-04-18T04:33:00.000-07:00

When you delete the comments in blogger, still you'll see an message like the picture below.This messages add a ugly appearance to your blogspot site.But doing this little trick,you can hidden deleted comments easily.If you like to hidden deleted comments in your blogspot blog,then simply follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see below code:

4.Copy below code and paste it just after .

5.Copy below code and paste it just before .

6.Save your template and you are done.

Now your deleted comments will not appear.

How To Add Apture Social Networking Bar to Blogger

2010-04-18T03:39:00.000-07:00

The Apture Site Bar is a new way to give readers more information without leaving the page.

When you add this bar to your site,your visitors can share your articles on Facebook, Twitter and via E-mail is just one click away.And also readers can find additional information from your site, like Wikipedia and YouTube all without leaving the page.

To add this widget for your site follow the steps below.

1.First go to http://www.apture.com/createbar/

2.Now you must give your site URL,your email address and other details.

3.Fill in the details and click on "Get My Bar".

4.Now you can see code of the bar.Copy your code.

5.Login to your blogger dashboard--> layout- -> Edit HTML

6.Scroll down to where you see tag.

7.Paste your social networking bar code just before tag.

8.Now save your template and you are done.Refresh your site to see your Apture Social Networking Bar.

Note : For further configuration you must click on confirm link in the email they send to you.After doing that you can do many more things with this Apture Social Networking Bar.

How To Remove Commentators Profiles/Sites URLs in Blogger

2010-04-17T20:28:00.000-07:00

When someone leave a comment,your site is linked automatically into his website or profile url.If you don't like this you can stop it doing this very simple trick.Simply follow the steps below to do it:

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see below code:

4.Now replace above code with below code:

5.Save your template and you are done.

Now your site will not linked to commentators sites/profiles.

Gravatar: How To Upload Avatar Display Image

2010-04-13T05:37:00.000-07:00

How to show display picture when commenting?
How to upload display picture on Gravatar?
How to get a display image when commenting on Wordpress blogs?
How to have avatar display for commenting accounts?

To do so, you have to go to Gravatar at http://en.gravatar.com.

One you're at the page, click "Log in/Sign up".

If you don't have a Gravatar account, please register first with the proper email that you're going to use while commenting.

But if you already own a Wordpress.com account, do sign in with the email you used for your Wordpress.com account. (Not applicable for self-hosted Wordpress from Wordpress.org)

After registering (if necessary) and logging in, hover your mouse at the "My Account" and a list will appear. Pick "Manage My Gravatars".

From there onwards, just upload your preferred display avatar and you're good to go!

How To Add Featured Auto Content Slider to Blogger

2010-04-06T19:35:00.000-07:00

This tutorial will explain to you how to create a auto featured content slider for your blogger blog or website.I found this content slider from Florance wordpress theme(Created by Web2feel.com) and I think, it will be useful to your blogger blog.Before adding this widget to your site look at the DEMO from here.

If you like to add this beautiful auto slider to your blog then follow steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

Note : Host trans.png yourself.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.












YOUR-POST-1-LINK-HERE">
http://2.bp.blogspot.com/_4HKUHirY_2U/S7vljotCSlI/AAAAAAAAA40/hwIdHlaH7oc/image-11.jpg" alt=""/>


YOUR-FEATURED-POST-1-SMALL-DESCRIPTION-HERE [...] 










YOUR-POST-2-LINK-HERE">
http://4.bp.blogspot.com/_4HKUHirY_2U/S7vljwib0DI/AAAAAAAAA48/c29GWJDporg/image-22.jpg" alt=""/>


YOUR-FEATURED-POST-2-SMALL-DESCRIPTION-HERE [...] 










YOUR-POST-3-LINK-HERE">
http://1.bp.blogspot.com/_4HKUHirY_2U/S7vlkVY6CbI/AAAAAAAAA5E/XwqpXOgcQvs/image-33.jpg" alt=""/>


YOUR-FEATURED-POST-3-SMALL-DESCRIPTION-HERE [...] 










YOUR-POST-4-LINK-HERE">
http://2.bp.blogspot.com/_4HKUHirY_2U/S7vlksYOysI/AAAAAAAAA5M/QZfHWmdShNg/image-44.jpg" alt=""/>


YOUR-FEATURED-POST-4-SMALL-DESCRIPTION-HERE [...] 










YOUR-POST-5-LINK-HERE">
http://4.bp.blogspot.com/_4HKUHirY_2U/S7vlky-b58I/AAAAAAAAA5U/4uDyxtxjPS4/image-55.jpg" alt=""/>


YOUR-FEATURED-POST-5-SMALL-DESCRIPTION-HERE [...] 










YOUR-POST-6-LINK-HERE">
http://2.bp.blogspot.com/_4HKUHirY_2U/S7vlrJpgMMI/AAAAAAAAA5c/weiuY5Wma_Q/image-66.jpg" alt=""/>


YOUR-FEATURED-POST-6-SMALL-DESCRIPTION-HERE [...]

Note : Replace YOUR-POST-x-LINK-HERE, YOUR-FEATURED-POST-X-SMALL-DESCRIPTION-HERE [...] and Images Links with your content.

Look at the example below:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem [...]

Now save your template and you are done.Don't forget to leave a comment,if you have any problem.

How To Update Blog Posts to Facebook via Notes

2010-04-05T18:39:00.000-07:00

How to link blog to Facebook?
How to update blog on Facebook?
How to automatically import blog post to Facebook?

First log-in to your Facebook account.

Then click on the "Profile" link on the top right of the main navigation bar above to view your own profile.

After that, click on "Options" below the Share box.

Then, the word "Settings" will appear. Click on it.

A list of ways to import stuffs (also known as Stories) to your Facebook will be available. Find for "Blog/RSS" and select it.

After selection "Blog/RSS" a text field will appear right below.

Enter your blog address or the blog feed, and click Import.

Facebook will then import all your available blog posts as Notes and it'll appear on your Wall and also your friends' Wall.

Also, whenever you update your blog, Facebook will automatically import the latest posts as well. Enjoy!

How To Remove Blogger Navigation Bar in Draft Template Designer

2010-04-03T07:47:00.000-07:00

How to delete navigation bar on Blogger Draft template?
How to remove default bar on Draft Template Designer?

The previous method to remove default Blogger navigation bar cannot be used anymore with templates designed from Blogger Draft Template Designer.

Here's how to remove the navigation bar on Template Designer's templates:

Dashboard > Layout > Edit HTML
Add this code:

#navbar-iframe {
display: none !important;
}

just above this line:

]]>

(instead of below Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

Now you are done.Now refresh your site and look at your browser status bar.

How To Stop Showing Web Page Errors in Internet Explorer

2010-04-02T02:49:00.000-07:00

If you are using internet explorer you can see that,Internet explorer show web page errors in its status Bar.This is not a good thing for your site.Look at the picture below:

Here I show you how to stop these error messages using JavaScript.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag.

3.Now copy below code and paste it just before tag.

4.Now save your template and you are done.

Internet Explorer do not show errors of your website/blogger blog further.

How To Add BlogEngage Vote Button to Blogger

2010-03-28T22:05:00.000-07:00

This simple article will explain to you how to add BlogEngage vote button to your blogger blog.If you like to add this article submission button to your blog,follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see this:

4.Copy below code and paste it just before the .

Result :

Code 2:

Result :

Code 3:

Result :

Code 4:

Result :

Code 5:

Result :

Code 6:

Result :

5.Now save your template and you are done.