template shelby

Add Twitter Badge Button to Blogger

noreply@blogger.com (Admin) — Tue, 01 Sep 2009 04:56:00 +0000

In this tutorial you will learn how to add a Twitter button to your Blogger to link your blog to your Twitter account. By adding a Twitter button you will give your readers the option to follow your blog on Twitter.

Display a Twitter Icon in the Sidebar of Your Blogger Blog.
If you look at the top of the right sidebar you will notice that I have placed a Twitter icon with a link to my Twitter profile. Adding the Twitter badge and link is not difficult and requires no change to the template. We will simply be adding a gadget to the sidebar. I have assumed no knowledge of Blogger and widgets so that absolute Blogger beginners can follow this tutorial.

1. Login to Blogger if not already logged in.

2. Navigate to Layout > Page Elements.

3. Click on Add a Gadget in the sidebar or other location eg the footer if you prefer

4. Select HTML/Javascript from the list of available gadgets.

5. Paste the following code into the content box depending on your choice of button:

<a href="http://twitter.com/YourProfile"><img src="http://www.twittericon.com/image/twitter8.png" border="0" /></a>

6. Change Your Profile to your own Twitter profile. For example:

http://twitter.com/YourProfile

to

http://twitter.com/akudandotdot

7. Click on Save.

8. Move your new Twitter widget to the desired location on your sidebar using drap and drop

9. Click on View Blog to admire your new Twitter button

In this tutorial you have learned how to add a Twitter button, badge, icon to your Blogger Blogspot blog so that readers can sign up to follow you on Twitter. For more Twitter buttons try these free Twitter vector icons or these free Twitter graphics or just type Twitter icons into your favorite search engine.

BDV-990453-BDV

noreply@blogger.com (Admin) — Tue, 01 Sep 2009 04:31:00 +0000

BDV-990453-BDV

Twitter Icons

noreply@blogger.com (Admin) — Fri, 28 Aug 2009 09:05:00 +0000

By TwitterIcon.com

Example icon above

First, visit TwitterIcon.com to get the button, simply enter your TWITTER ID below. Then click "GO" and copy any of the codes below under the icon you want. Paste the code on your blog, webpage or anywhere you like so people can follow you. That's it! Enjoy!

Add Flag Counter on Blogger Widget

noreply@blogger.com (Admin) — Wed, 26 Aug 2009 02:12:00 +0000

Its simple step to add this widget.

1. Go to this website http://flagcounter.com

2. On this page, change 'Maximum Flags to Show' how many you want to show ( for me only 12 flags).

3. Then Change 'Columns of Flag' or just leave it.

4. At the 'Laber on Top of Counter', you can choose title Visitor, None or Custom.

5. Also you can change background color, text color or border color to match color your blog or website.

6. Then Click button to generate widget code.

7. Copy all of the HTML code at text area below of "Code for Website", paste at notpad and then save to your computer.

Example Code :
<a href="http://flagcounter.com/more/JROQ"><img src="http://flagcounter.com/count/JROQ/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=12/viewers=0/labels=0/" alt="free counters" border="0"></a>

8. Login ID your blogger.

2. Choose Dashboard or Customize 0n right above blogger.

3. Choose Layout. On Page Element, Click Add a Gadget.

4. Choose HTml/JavaScript.

5. Open your Flag Counter code, copy and then paste into Html/JavaScript Gadget column.

Example Code :
<a href="http://flagcounter.com/more/JROQ"><img src="http://flagcounter.com/count/JROQ/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=12/viewers=0/labels=0/" alt="free counters" border="0"></a>

6. Save. Done it..

Now you have a Flag Counter at your blog.

Increase Search Engine Traffic

noreply@blogger.com (Admin) — Tue, 25 Aug 2009 07:31:00 +0000

Here’s a little tweak for your blog’s template if you’re looking to increase traffic through searches by optimizing your blogger’s title for search engines. Not until recently, your Blogger’s blog titles were displayed before the name of your post, making keywords from your post titles appear after your blog title, resulting in poor performance for SEO. Luckily, there’s a way to fix that with a simple tweak and about five minutes of your time.

Steps to follow:

1. Login to your Blogger Dashboard in a new browser window.

2. Go to Layout > Edit HTML (Don’t click on “expand widgets” box)

3. Next, you will need to search for the following section code below:

title><data:blog.title/></title>

replace the whole code with the section code below:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

4. Preview your template, and if all works fine, Save Template.

Note: If you have customized your template or uploaded a third party template, you will need to change the original <data:blog.pageTitle/> to the new <data:blog.pageName/> tag for this change to take effect.

For example:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

replace the section code in red with

<data:blog.pageName/>

Add Google Translator Widget with 11 Languages

noreply@blogger.com (Admin) — Tue, 25 Aug 2009 07:15:00 +0000

Its simple step to add this widget.

1. Login ID your blogger.

2. Choose Dashboard or Customize 0n right above blogger.

3. Choose Layout. On Page Element, Click Add a Gadget.

4. Choose HTml/JavaScript.

5. Copy code below and paste on Html/JavaScript Gadget.

<form action='http://www.google.com/translate' class='translate'>

<script language='javascript' type='text/javascript'>



</script>

<noscript><input name='u' type='hidden' value='your blogspot address'/></noscript>

<input name='hl' type='hidden' value='en'/>

<input name='ie' type='hidden' value='UTF8'/>

<input name='langpair' type='hidden' value=''/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png' title='Arabic' type='image' value='en|ar' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png' title='ä¸æ��ï¼�ç®�ä½�ï¼�/Chinese (Simplified)' type='image' value='en|zh-CN' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png' title='ä¸æ��ï¼�ç¹�ä½�ï¼�/Chinese (Traditional)' type='image' value='en|zh-TW' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png' title='FranÃ§ais/French' type='image' value='en|fr' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png' title='Deutsch/German' type='image' value='en|de' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png' title='Italiano/Italian' type='image' value='en|it' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png' title='æ�¥æ�¬èª�/Japanese' type='image' value='en|ja' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png' title='í��êµì�´/Korean' type='image' value='en|ko' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png' title='PortuguÃªs/Portuguese' type='image' value='en|pt' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png' title='Ð Ñ�Ñ�Ñ�ÐºÐ¸Ð¹/Russian' type='image' value='en|ru' width='25'/>

<input height='15' name='langpair' onclick='this.form.langpair.value=this.value' src='http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png' title='EspaÃ±ol/Spanish' type='image' value='en|es' width='25'/>

</form></div>

6. Save. Done it..

Note: You can modify all flag images by replacing all hyperlinks above with yours.

Free SEO ebook : Search Engine Optimization made easy

noreply@blogger.com (Admin) — Mon, 24 Aug 2009 07:57:00 +0000

Want to get 1 top ranking at Google Search? Need ton traffic to your site? Optimize your site or blog. Don't know what should be do with your blog? Download this SEO e-book and read how to optimize your blog. The creator of this free e-book is Brad Callen. I'm loving this e-book because very simple but complete, good tips and trick. So, don't waiting untill tomorow, go a head to download this e-book.

File size to download is only 1.66 MB. Please click at the image button :

Meta Tag SEO Friendly

noreply@blogger.com (Admin) — Mon, 24 Aug 2009 04:12:00 +0000

A few of new bloggers still do not customize his/her Meta Tag and just follow or use the free template that has been given.

It is better to customize your Meta Tag as it would be nice and easy being crawl by Google or other search engine. Also make your site more SEO friendly and chance of being index in top of the search engine. Consider to put this Meta Tag and make the search engine more easy to find the information about your site and ranked it.

Here the steps.

1. Go to Layout => Edit HTML

2. Find this code on Top :

<head>
<title><data:blog.pageTitle/></title> <b:include data='blog' name='all-head-content'/>

3. Add this script below after the above code :

<meta content='index,follow' name='robots'/>
<meta content='blogger' name='generator'/>
<meta content='Example, Tell, your Blog, Description, here' name='description'/' name='description'/>
<meta content='Example Keyword1, Keyword2, etc..here' name='keywords'/>
<META content='Yahoo key 8cd050e05' name='y_key'/>
<META content='Google val x83e274ff' name='verify-v1'/>
<meta content='MSN val C3F6D70CF879' name='msvalidate.01'/>
<meta content='index,follow' name='msnbot'/>
<meta content='Your Name' name='author'/>

Explanation
a). <meta content='index,follow' name='robots'/>
This will index and crawl all your page content by Google by default.

b). <meta content='Example, Tell, your Blog, Description, here' name='description'/>
This will tell your blog description.
Example if your Title about : Windows Vista Tweak
your description should be : "Windows Vista Tweak, Hack, Software Review, etc"

c). <meta content='Example Keyword1, Keyword2, etc..here' name='keywords'/>
This will tell your Keywords.
Example : "Vista Sp1, Speed Up, Faster Copy, registry Cleaner, etc"

d). <META content='Yahoo key 8cd050e05' name='y_key'/>
This will adding your Yahoo Validation using meta tag if you have submit your site to yahoo search engine. You can add this later when submit to Yahoo.

e). <META content='Google val x83e274ff' name='verify-v1'/>
This will adding your Google validation key when you add your site to Google search engine.
Do it first though you use Blogger service.

f). <meta content='MSN val C3F6D70CF879' name='msvalidate.01'/>
This will adding your MSN valiation key when you submit your site to MSN search engine.

g). <meta content='index,follow' name='msnbot'/>
This will tell MSN to crawl all your page content.

h). <meta content='Your Name' name='author'/>
This is usefull to easily verify your name / owner of your site if needed.

Hopefully you would get rank sooner. Good Luck.

Meta Tag Page Title with Blog Title SEO Friendly

noreply@blogger.com (Admin) — Mon, 24 Aug 2009 03:52:00 +0000

By default blogger set the Blog Title show on the Tab bar of the browser. We can customize it to show the Page Title first then followed by the Blog Title. This way make your blog more easy crawled by the search engine robot and chance of your page being listed in search engine more faster. Thus make your blog results in SERP more good. SERP results with Keywords results is not the same.

How to change Meta Tag Blg title and Page Title :

Go to Layout => Edit HTML, do not check expand widget template.

1. Find this Code : (press ctrl+F)

<title><data:blog.pageTitle/></title>

2. Replace the above code with this code :

<b:if cond='data:blog.pageType == "item"'>

<title><data:blog.pageName/> | <data:blog.title/></title>

<b:else/><title><data:blog.pageTitle/></title>

</b:if>

3. Save your Template. Done.
See the big change on your result page in your tab browser.
Hope your new post would be easily crawled by the search engine and you have to wait for several days (approximately 3 to 5 days) before the search engine crawl your page and make the change in the SERP.

And better you customize your Meta Tag to make your blog more SEO friendly.
Give me comment if you feel usefull later on. Thank you.

How to Make single Column under Header

noreply@blogger.com (Admin) — Sat, 22 Aug 2009 07:49:00 +0000

Do you feel interested in making a column under the header? Just read and follow the steps below.

1. Login into blogger with your ID.

2. Click Layout

3. Click Edit HTML.

4. Click Download Full Template.

5. Please save the template first. It is aimed at anticipating the risk if we make mistake in editing our template. If we make a mistake, we still have the backup and return it normally.

6. Find this code ]]></b: skin>.

7. Copy paste the following code right above the code of ]]></b: skin>.

.adscolumn{
width:933px;
padding:10px 3px;
background:#fff;
margin:5px 10px 0px 10px;
text-align:center;
border:1px solid #C0C0C0;
}

.adscolumn .widget{
}

8. Look at down, then find the following code

<div id='main-wrapper'>

9. Copy paste the following code right above the code of <div id='main-wrapper'> :

<b:section class="adscolumn" id="adscolumn" preferred="yes">

10. Click SAVE TEMPLATE.

Finish.

Google Translator Widget with 40 languages

noreply@blogger.com (Admin) — Fri, 21 Aug 2009 08:00:00 +0000

How to make 3 column template

noreply@blogger.com (Admin) — Thu, 20 Aug 2009 07:25:00 +0000

1. Login your blogger account, then click Customize.

2. In Edit Layout page, click to Edit Html.

3. Don't thick Expand Widget Templates.

4. Find following code below (press Ctrl+F):

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Change the highlight in red color width:950px;

5. Find following code below (press Ctrl+F):

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Change the highlight in red color width:950px;

6. Find following code below (press Ctrl+F):

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Change the highlight in red color width:250px;

7. Next copy this whole section from your template (this is the section we modified in the previous step):

#sidebar-wrapper {
width: 250px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Once you have copied this to your clipboard, paste this section of code immedietly beneath the original set of code. Then change this line in your newly pasted code:

#sidebar-wrapper {

To say this instead:

#new-sidebar-wrapper {

However, if you prefer the sidebar to appear to the left of the main posts column, you will need to change the following line:

float: $endSide;

To this instead:

float: $startSide;

This will ensure that your new sidebar will float to the left.

8. Next find following code below (press Ctrl+F):

When you have decided where you would like your second sidebar to appear, copy and paste the following section of code in the appropriate place:

You should save your new template at this point.

There is currently no content in this second sidebar, so if you preview your blog, nothing will be displayed in it's place. But if you go to Template>Page Elements in your Blogger dashboars, you will see a new "Add page element" section. Here you can add a new widget and take a look at your blog to see how it will be displayed.

Live Demo 1 or Live Demo 2

credit to http://www.bloggerbuster.com

How to add column above posting

noreply@blogger.com (Admin) — Thu, 20 Aug 2009 07:23:00 +0000

1. Login your blogger account, click Customize.

2. Navigate to Page Elements >> Edit Html Template.

3. Search for the following code in your template

3. Now inside the above code you can find a code <b:section class=' main' id='main' showaddelement='no'> . This code is for the post section. We can edit this code to add another gadget on our post body.

4. You have to change NO to Yes in the above code. That means after editing the code it should look like <b:section class=' main' id='main' showaddelement='yes'> . Save the template.

5. Now navigate to Page Elements and you can notice a new Add a Gadget option there above your post contents. Check out the below screenshot.

6. You can use either TEXT or HTML/Javascript gadget to write your post and then save. This will show your text above all your blog posts.

7. You are done.

What is Blog?

noreply@blogger.com (Admin) — Thu, 20 Aug 2009 07:21:00 +0000

Defination A weblog, sometimes written as web log or Weblog, is a Web site that consists of a series of entries arranged in reverse chronological order, often updated on frequently with new information about particular topics. The information can be written by the site owner, gleaned from other Web sites or other sources, or contributed by users.

A weblog often has the quality of being a kind of "log of our times" from a particular point-of-view. Generally, weblogs are devoted to one or several subjects or themes, usually of topical interest, and, in general, can be thought of as developing commentaries, individual or collective on their particular themes. A weblog may consist of the recorded ideas of an individual (a sort of diary) or be a complex collaboration open to anyone. Most of the latter are moderated discussions.

Since there are a number of variations on this idea and new variations can easily be invented, the meaning of this term is apt to gather additional connotations with time. A popular weblog is Slashdot.org, the product of programmer and graphic artist Rob Malden and several colleagues. Slashdot.org carries discussion threads on many subjects including: Money, Quake (the game), Netscape, Sun Microsystems, Hardware, and Linux. Slashdot.org solicits and posts interesting stories reported by contributors, includes a link to the story, and manages the threads of the ensuing discussion by other users. Another well-known weblog is Jorn Barger's Robot Wisdom Log, which is more of collection of daily highlights from other Web sites. Jessamyn West's librarian.net is a daily log of items interesting to librarians and possibly others, too.

As a format and content approach for a Web site, the weblog seems popular because the viewer knows that something changes every day, there is a personal point-of-view, and, on some sites, there is an opportunity to collaborate or respond with the Web site and its participants.

2) Weblog is the name of a software product from South Korea that analyzes a Web site's access access log and reports the number of visitors, views, hits, most frequently visited pages, and so forth.

Get your blogID , user ID on blogger

noreply@blogger.com (Admin) — Thu, 20 Aug 2009 07:21:00 +0000

BlogID , user ID are the number is not known very much but they are very important in developing and writing new code for blogger. Most bloggers do not notice this,do not know what it is and where can find it. Some pro bloggers have to know this and write new script , widget for their own blog base on these ID. So this tip will help you-new bloggers to find and get them.

1.Now first , blogID , where is it ?
Log in your blogger.com account > Customize , ok look for the address bar, you will see the blogID with this form :
http://www.blogger.com/posts.g?blogID=xxxxxxxxxxxxxxxxxx

2.User ID
Log in your blogger.com >Look at your profile on left side bar then click on View Profile and look at the address bar , you will see your userID with this form:
http://www.blogger.com/profile/xxxxxxxxxxxxxxxxxxx

Why you have to know these ID ? Because some script and widgets work base on these ID.

Create Auto Read More ( no thumbnail) - Hack 3

noreply@blogger.com (Admin) — Thu, 20 Aug 2009 07:19:00 +0000

Log in your blogger account , go to Edit HTML ( should back up your template) > choose Expand Widget Tempate , then look for the code <data:post.body> ( press Ctrl F or find it each line , up to you)

Replace it by this whole code :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'/>
<script type='text/javascript'>
var blogID = "937920098338306331";
function retriveSummaryPost<data:post.id/>(json){document.getElementById("summary<data:post.id/>").innerHTML
= json.entry.summary.$t + "..."}

function createSummaryPost<data:post.id/>(POSTID){ var script =
document.createElement("script");
script.src = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/"+POSTID+"?alt=json-in-script&callback=retriveSummaryPost<data:post.id/>";
script.type = "text/javascript"; document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<script type='text/javascript'>
createSummaryPost<data:post.id/>("<data:post.id/>");
</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>-->Read more...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='post_body'><data:post.body/></div>
</b:if>

Look for the red code, that is the number of your blogID, if you don't know how to get your blogID , click here to view the instruction.

Note: If you can not find the code because you have changed your template source many times, so try with the last as you see.

credit to http://zenplate.blogspot.com for good tutorial

Definitions of Blog on the Web

noreply@blogger.com (Admin) — Thu, 20 Aug 2009 07:17:00 +0000

read, write, or edit a shared on-line journal
web log: a shared on-line journal where people can post diary entries about their personal experiences and hobbies; "postings on a blog are ...
wordnetweb.princeton.edu/perl/webwn
A blog (a contraction of the term weblog) is a type of website, usually maintained by an individual with regular entries of commentary ...
en.wikipedia.org/wiki/Blog
A personal or corporate website in the form of an online journal, with new entries appearing in sequence as they are written, especially as ...
en.wiktionary.org/wiki/blog
blogger - a person who keeps and updates a blog
wordnetweb.princeton.edu/perl/webwn
Blogger is a blog publishing system. It was created by Pyra Labs, which was bought by Google in 2003. ...
en.wikipedia.org/wiki/Blogger_(service)
blogging - The design and editing of a blog; weblogging
en.wiktionary.org/wiki/blogging
blogger - A contributor to a blog or online journal
en.wiktionary.org/wiki/blogger
a journal or diary that is posted on the Internet.
www.luminafoundation.org/grants/grantee_resources/comm101/glossary.html
(Weblog - usally shortened to blog) Blog is an abbreviated version of Weblog, which is a term used to describe Web sites that maintain an ongoing chronicle of information. A blog is a frequently updated, personal Web site featuring diary-type commentary and links to articles or other Web sites. ...
www.web2fordev.net/web2/glossary-of-web/en/
Short for Web log, a blog is a Web page that serves as a publicly accessible personal journal for an individual. Typically updated daily, blogs often reflect the personality of the author.
www.genderit.org/en/index.shtml
Blog is short for weblog. A weblog is a journal (or newsletter) that is frequently updated and intended for general public consumption. Blogs generally represent the personality of the author or the Web site.
www.bytowninternet.com/glossary
Short for "Web log," a specialized site that allows an individual or group of individuals to share a running log of events and personal ...
www.pvt.com/oth/glossary.htm
A blog is basically a journal that is available on the web. The activity of updating a blog is "blogging" and someone who keeps a blog is a "blogger." Blogs are typically updated daily using software that allows people with little or no technical background to update and maintain the blog. ...
www.apollo-media.com/glossary.aspx
A blog is a website where entries are made in journal style and displayed in a reverse chronological order. ...
www.sussexlearningnetwork.org.uk/glossary/B

Make a Recent Post widget (Thumbnail ready) on Blogger blog without external JavaScript file

noreply@blogger.com (Admin) — Thu, 20 Aug 2009 04:22:00 +0000

Assuming that you are using any default blogger template, or at least that template having default blogger classes,(minima template) here is what you need to do:

Login your blogger account.
Go to Blogger Dashboard > choose Customize.
Choose Layout then click Edit HTML.
Copy and Paste the following code below before (above) </head>:

boxwidth = "100%"; Change the 100% to a fixed value like "300px"; Make sure that you have wrapped it side a quote and give a proper unit! Else the JS may not work.
borderColor = "#ffffff"; Change the hex color code to any value in order to blend into your template. For getting color scheme generators have a look here;
thumbwidth = "48"; & thumbheight = "48"; Change it to any numerical value to make thumbnail of that size in pixel.
fntsize = "13"; Change the font size of the post heading!
acolor = "#000099"; Change the color of the Post Title link.
aBold = true; True for bold fonts false for normal fonts.

Show Popular posts on Blogger

noreply@blogger.com (Admin) — Mon, 17 Aug 2009 12:39:00 +0000

Popular Posts widget on Blogger uses Pipes , a feed and content aggregation tool from Yahoo. It fetches the Comment feeds and find outs the most commented post.

Follow this steps:

1. Login your blogger.

2. Click Customize.

3. Click to Add A Gadget and select HTML/JavaScript.
You have to paste the following code into it , after making the necessary changes.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i )
{
var href = "'" obj.value.items[i].link "'";
var item = "<li>" "<a href=" href ">"
obj.value.items[i].title "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json
&_callback=pipeCallback&_id=1cf38ae68efbe859c4ba1ee239cec099&
url=http%3A%2F%2FYOUR URL&num=8"
type="text/javascript"></script>

4. You have to change YOUR URL with your URL and the number 8 with the required number of posts.

Save your template and preview the Popular posts widget .

How to make 2 or 3 until 5 column under the header template

noreply@blogger.com (Admin) — Fri, 14 Aug 2009 09:34:00 +0000

For the bloggers who do not know, it is still curious, how to add these tips to the blog layout.

Let's start follow the steps quickly and easily add to these tips into template:

1. Login into Blogspot and then go to the page layout and edit the HTML
Do not forget to save the template information, click the "Download Full Template".

2. Find this code : ]]></b:skin>
(Press Ctrl+F)

3. Copy and Paste the code (blue color) below before code (red color) above:


#colb-main-contain {
clear:both;
}

.colb-column {
padding:0px 5px 5px 5px;
border:1px dotted $bordercolor;
}

4. Save Template.

5. Then find the code <div id='main-wrapper'>, paste the code (blue color) below before code (red color) above.

For 2 column.

<div id='colb-main-contain'>
<div id='colb1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr1' preferred='yes' style='float:left;'>
</div>

<div id='colb2' style='width: 70%; float: right; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr2' preferred='yes' style='float:right;'>
</div>

<div style='clear:both;'/>
</div>

Then SAVE. Finally you have 2 column under the header.

6. Tips for the adjusment to meet your needs :
(a) padding:0px 5px 5px 5px; => Top Margin, Right, Bottom and Left margin.
(b) style='width: 30% => you can change the percentage number from 10 to 90% note the width of your Header Wrapper

If you want to add more than 2 column, here the code. Just follow the step 1, 2, 3 and 4, when the phase 5 just enter this code below.

For 3 column.

<div id='colb-main-contain'> <div id='colb1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr1' preferred='yes' style='float:left;'/>
</div>
<div id='colb2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr2' preferred='yes' style='float:left;'/>
</div>
<div id='colb3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

For 4 column.

<div id='colb-main-contain'>
<div id='colb1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr1' preferred='yes' style='float:left;'/>
</div>
<div id='colb2' style='width: 25%; float:left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr2' preferred='yes' style='float:left;'/>
</div>
<div id='colb3' style='width: 25%; float:left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr3' preferred='yes' style='float:left;'/>
</div>
<div id='colb4' style='width: 25%; float:right; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/> </div>

For 5 column.

<div id='colb-main-contain'>
<div id='colb1' style='width: 20%; float: left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr1' preferred='yes' style='float:left;'/>
</div>
<div id='colb2' style='width: 20%; float:left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr2' preferred='yes' style='float:left;'/>
</div>
<div id='colb3' style='width: 20%; float:left; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr3' preferred='yes' style='float:left;'/>
</div>
<div id='colb4' style='width: 20%; float:right; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr4' preferred='yes' style='float:right;'/>
</div>
<div id='colb5' style='width: 20%; float:right; margin:0; text-align: left;'>
<b:section class='colb-column' id='colbr5' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

All depends on what you want.
Hopefully useful.

How to Remove the Number of Label

noreply@blogger.com (Admin) — Mon, 10 Aug 2009 11:58:00 +0000

Do you wish to eliminate the number at label too?
This is the steps :

1. Login to blogger with your ID
2. After entering the dashboard page , click Layout.
3. Then click edit HTML tab.
4. Before Start, please save your template first. Click the Download full template link. Save your template:
5. Please check the little box beside Expand Widget Templates.
6. Go to your template code, and find the code like this :
(Press Ctrl+F to make easy find this code).

(<data:label.count/>)

7. If you was found the above code, please delete.
8. Click Save Template button.
9. Done. Please see the result.

Now your label will not with number.

How To Make Scrolling Blogger Blog Roll

noreply@blogger.com (Admin) — Sat, 08 Aug 2009 11:20:00 +0000

It is a very simple setup! Just follow my steps below.

1: Go to Edit HTML tab. Make sure you BACKUP your template BEFORE you do anything.

2: Make sure the Expand Widget Templates is checked.

3: Find LinkList with the title Blog Roll or any title you've set.
Note: Don't mind the number after the word LinkList. Numbers may varry depending on your blogger setup!

<b:widget id='LinkList1' locked='false' title='Blog Roll' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4th: Insert the BLUE TAGS.
Note: You may edit the values of the GREEN TAGS.

<b:widget id='LinkList1' locked='false' title='Blog Roll' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"' style='overflow: auto; display: block; overflow-x: no; overflow-y: scroll; height: 300px; width: 160px;'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>
</b:includable>
</b:widget>

5: SAVE!!! And finish.

How To Hide Your Post Date

noreply@blogger.com (Admin) — Sat, 08 Aug 2009 02:52:00 +0000

Post date can be define a date that show publish of article on your blog. It’s normal to show date post to show our article consistency. But sometimes it’s nice to hide our post date, let’s make it real.

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

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

6. Save and done.

It’s will make your post date disappears from your blog.If you want to make it to default and show your post date just delete the red code.

How to Show Post Title Without Full Content for Label

noreply@blogger.com (Admin) — Fri, 07 Aug 2009 13:17:00 +0000

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

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

Let’s move on, simply follow this Steps:

1. Open Template, Backup your Template and click on Expand Templates widget.

2. Then See the code below :


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

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

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

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

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

4. Finally save your setting.

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

Post with Read More and Thumbnail - Hack 2

noreply@blogger.com (Admin) — Fri, 07 Aug 2009 12:59:00 +0000

1.First Check Your blog, if your blog has installed the previous read more, make it to default again to be without read more. i mean redo your read more code. Just check the previous Tutorial about Read more Here.

2. if you done make your blog without read more code,

3. Open Your Layout, Choose Edit HTML, and back up your blog first

4. Expand Widget Template and now copy this code below.

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

5. Put those code below tag

6. Now find this tag

7. Delete and Change that code with code below

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

8. Save and Done

Enjoy blogger