Blogging To Fame - Bloggers Bread

Add The Blogger “Read More” Expandable Posts Link - Blogger Hack

2008-02-20T10:41:00.000-08:00

This is a pretty popular Blogger hack that lots of people have asked me about. Instead of answering to each email individually, I thought it would make more sense to write an article about it.

With this hack, you can choose to display a select amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of the post, they can click a “read more” link to see the full post. This is very handy if you have lots of long articles all on one page. (Note that you’ll need to have post pages enabled in order to make this feature work.)

Step #1 - Update Your Template Code

First you need to edit your existing code so I recommend copying and pasting it into notepad or any text editor. Also, it’s smart at this point to create a backup of your template just in case something goes wrong. Now do a search (CTRL + F) within the text editor for the following code post-header-line-1. This is the default code that Blogger includes but some custom templates remove or change this code so you might have trouble finding it. If you can’t locate this text then try searching for <data:post.body/> instead. Your template will for sure have this since it’s the tag that actually prints the body of your post.

Now depending on which code you were able to find will determine how easy the next steps will be. You might need to do some detective work first in order to get this working properly in your custom template. The idea is to get this new code into your template before the <data:post.body/> tag. Keep reading and hopefully the explanation will illustrate the concept clear enough so you are able to adapt this hack to your custom template.

Add the following code below the <div class=’post-header-line-1′/> and <div class=’post-header-line’> tags if you’ve got both.

<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>

The result should look something like this:

If you don’t have the default <div class='post-header-line-1'/> tag then your result should look something like this instead. This is how it would be done in the MushBlue Blogger custom template:

Notice in both examples that the code in yellow and the <data:post.body/> tags are the same — it’s just tag above it that will differ based on the template you’re using.

Now let’s add one more bit of code which will actually create the “read more” link in your post. This code will go below the <data:post.body/> tag so copy the following and paste it in. Feel free to change the “Read more…” text to whatever you want the link to look like. Be careful not to delete any other code during this process.

<b:if cond='data:blog.pageType != "item"'><br /> <a expr:href='data:post.url'>Read more...</a> </b:if> </b:if>

Yes, there are supposed to be two </b:if> tags in the above code so don’t think it’ s a mistake. The result should look like this:

This code will be the same no matter what template you are using. Just make sure it goes below the <data:post.body/> as shown in the image above.

Now let’s look at what the final result should be. Here’s the updated code block you just worked on all put together:

Ok, you’re all done editing the template code. Paste it back into your Blogger html window and save it. If you get an error, you made a mistake. The most common mistake is to accidentally delete a > or < while pasting in the new code. If it saved successfully, it’s time to move onto the next step and modify a quick Blogger format setting.

Step #2 - Add a Class Tag in Your Default Post Template

For this step, you need to navigate in your Blogger account to “Settings” => “Formatting” and scroll all the way down to the bottom. It’s the last option called “Post Template”. You’re going to paste in the following code:

<span class="fullpost">

</span>

You’ll want to keep the spaces in there which will make sense later. After you save this, it will look like this:

Step #3 - Create a New Post

Ok, we’ve got everything all setup so it’s time to go and test it out. Hopefully you’ve got a new post in mind for your blog. If not, then we’ll just create a test post which you can later delete. When you click on the “Posting” tab, you’ll notice that the post text area is now pre-populated with the <span class=”fullpost”> and </span> tags. If not, then you didn’t save it properly so go back and re-read step #2.

So when writing your new post, anything you put above the <span class=”fullpost”> tag will be the teaser text. The main body of your post needs to go in between the <span class=”fullpost”> and </span> tags in order for the “read more…” link to work properly. See the screenshot below. Sometimes pictures illustrate better than words.

Now publish or preview your post to see the “read more” hack working on your blog. If it doesn’t show up for some reason, go back and run through the steps again. Most likely you pasted the code blocks in the wrong places. It’s difficult to troubleshoot these issues since each template can be unique so please make sure to double-check your template before asking for help in the comments section below.

Here’s the live post with the “read more…” link properly working based on the text I used above in the post text area.

Additional Info

If you want to go back and update your old posts with this new “read more…” feature you can. Just go back and edit each post manually. Essentially you’ll need to paste in the <span class=”fullpost”> and </span> tags breaking apart the post into two parts.

For some posts, you might not want to use this feature at all. If that’s the case, just delete the <span class=”fullpost”> and </span> tags from within your new post text area. Then your new post will show up entirely just like it used to before you implemented this hack. Enjoy!

Thanks To - David

Labels into Horizontal Tabs - A Blogger Hack

2008-02-18T11:14:00.000-08:00

Below are the instructions on how to turn "Labels into Horizontal Tabs,"

Step 0: Label your posts.

Make sure your blog has some posts with label assigned, otherwise nothing will get created. See this topic on how to create labels:

http://help.blogger.com/bin/answer.py?answer=44498&topic=9084

Step 1: Downloading and unzipping the file from the Exploding Boy website

Here are the downloading and sample links:

http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/

http://exploding-boy.com/images/cssmenus/menus.html

Then, have a googlepages account and upload the pics there.

Step 2: Changing the Header to become appendable.

Modify this line:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

to become

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

Step 3: Prepare the CSS portion of the hack.

Go to the very end of this article and cut the CSS portion you like there, then paste it at the very end of the CSS code (right before the closing CDATA part - see picture below)

Make sure to replace "www.yourwebsite.com" to your website.

Below is an example of pasting the code for style F:

/*- Menu Tabs F By http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/------
*/

#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid #000;

}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url(" http://www.yourwebsite.com/labeltabs/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url(" http://www.yourwebsite.com/labeltabs/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

Step 4: Adding Label Widget

Follow the instructions from this article, especially step B.4. After you've done with inserting the code & save it, go to Page Element option and drag the newly added widget to stay under the Header area (that we fixed so that it would accomodate this new widget.)

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>

If you use a style other than F, than make sure id='tabsF' reflects the correct tab, such as id='tabsE' for style E. Later, if you like a different design, just cut-and-paste the style's CSS code, then change this id again to reflect the change.

There you have it! Well-designed tabs from professionals (The Exploding Boy website) being integrated into the new Blogger Beta.

Enjoy This hack !!!

Thanks To - Hoctro

TabView In Your Blog - A widget for Blogger

2008-02-17T10:36:00.000-08:00

Dear Friend,

Now that I have the new framework for making widgets in store, I feel confident and start trying to create a new tab widget - using labels as tabs, similar to this Yahoo! widget.

With the wonderful help of Yahoo! TabView widget, the programming time reduces quite a bit.

You can see the result from my homepage:

If you want to install this onto your blog, follow these instructions.

Step 1: Installing the core Javacript library object

First, follow the instructions from this article Hacking Technique: How To Modify a (Beta) Template, in particular section C.2 (for step 1 & 2) and B.4 (for step 3).

Next, install the latest version of the Javacsript Core Library.

Save the template.

Step 2: Installing Yahoo! Tab View requirements

Cut and paste this code below right after step 1's code (such that these code still stay before the closing </head> tag.). See instruction here if you're still not sure.

<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>

<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>

<script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>

<script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>

<style type='text/css'>

.yui-content {
padding:1em; /* pad content container */
}

.yui-navset .yui-content {
border:1px solid #ccc;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff;
}

.yui-navset .yui-nav li a {
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}

/* top oriented */

.yui-navset-top .yui-nav { margin-bottom:-1px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:1px solid #ccc;
}

.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>

Save the template.

Step 3: Installing the widget

Add this code between any two "b:widget" tags, save the template, and you're almost done.

<b:widget id='HTML102' locked='false' title='MultiTab Widget' type='HTML'>
<b:includable id='main'>
<div class='widget-content'>

<b:if cond='data:title != ""'>
<h2 class='title'
></h2>
</b:if>
<div id='doc'>
<div>
<h2>Blogging To Fame</h2>
<div class='yui-navset' id='multiTab1'/>
</div>



</div>
<div id='103'/>
</div>

<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.
var p1 = document.createElement('h6');
document.getElementById('103').appendChild(p1);
p1.innerHTML = cb.txt('TabView');

function listOneTab(json, tabView, title, act) {
var label = '';
var text = '';
var nPost = 10;

if (title == "")
label += cb.getLabelFromURL(json);
else
label += title;

text += "<div id='" + label + "'><ul>";

var numberPost = (json.feed.entry.length <= nPost) ?
json.feed.entry.length : nPost;

for (var i = 0; i < numberPost; i++) {
var entry = json.feed.entry[i];
text += "<li>" + "<a href='" + cb.getLink(entry, "alternate")
+ "'>" + cb.getTitle(entry) + "</li>";
}

text += '</ul></div>';

tabView.addTab( new YAHOO.widget.Tab({
label: label,
content: text,
active : act
}));

}

var blog1 = "hoctro.blogspot.com";
var tabView1 = new YAHOO.widget.TabView('multiTab1');
var labels1 = ['JSON Hacks', 'Label Hacks','Free Templates'];
function listTab1(json) {
listOneTab(json, tabView1, "", false);
}
function listLatestPostsTab1(json) {
listOneTab(json, tabView1, "Latest Posts", true);
}
function listLatestCommentsTab1(json) {
listOneTab(json, tabView1, "Latest Comments", false);
}

// Activating calls!

// Latest Posts
cb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');

// Latest Comments
cb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');

// Preferred Labels
for (var i=0; i < labels1.length; i++)
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');

/*
var blog2 = "hackosphere.blogspot.com";
var tabView2 = new YAHOO.widget.TabView('multiTab2');
var labels2 = ['Neo','Widgets', "Blogger Power"];
function listTab2(json) {
listOneTab(json, tabView2, "", false);
}
function listLatestPostsTab2(json) {
listOneTab(json, tabView2, "Latest Posts", true);
}
function listLatestCommentsTab2(json) {
listOneTab(json, tabView2, "Latest Comments", false);
}
// Activating calls!
// Latest Posts
cb.search( blog2, "posts", 1, 25, 'listLatestPostsTab2');

// Latest Comments
cb.search( blog2, "comments", 1, 25, 'listLatestCommentsTab2');

// Preferred Labels
for (var i=0; i < labels2.length; i++)
if (labels2[i]) cb.searchLabel("hackosphere.blogspot.com", labels2[i], 'listTab2');

*/
</script>
</b:includable>
</b:widget>

Save the template.

After you install the above three easy steps, just change these things found in step 3' code:

a. To change the title, look for this line:

<h2>Blogging To Fame</h2>

b. modify the label tabs to become yours:

var labels1 = ["JSON Hacks", "Label Hacks",
"Free Templates", "Notable Hacks"];

c. Change value below from 10 to any value you want for the maximum of posts per tab

var nPost = 10;

d. then replace mine with your blog's name

blog1 = "bloggingforbread.blogspot.com";

For advanced bloggers who would like to manipulate the CSS, "step 2" contains the information to do so. Also consult the Yahoo! TabView widget tutorials and examples for other variations of these tab options.

To add another tabview to this widget such as the picture below, please see part 2.

Until next time.

Thanks To - Hoctro

Disable Right Click on Blog - A Blogger Hack

2008-02-17T06:10:00.000-08:00

I know many Blogger don't like to get there unique content copied by any other blogger.
SO now don't worry about getting your content copied here is a solution.
By this Hack users of your blog cannot right click on your blog and your content remains safe :)

This widget is very simple to install into your blog
Following are the steps

Step 1 > Go to Template -> Page Elements.
Step 2 > Add a Page Element -> then Add a HTML
Step 3 > Now just copy and save the following code into Html and you are done !

<script language='JavaScript'>

</script>

Enjoy this hack !!!

Label Cloud in your blog - A blogger hack

2008-02-14T10:53:00.000-08:00

To Put Label cloud or tag cloud on yours blogger sidebar template you have to follow below instruction carefully and with free mind This hack will really add flavour to your blogger Template and help yours readers in finding contents according to label or tags ,this features will really make you free to add many tags according to your blog post.Make sure you backup your template before making any changes!

On yours Dashboard Select Layout

Note-You have a Label widget already Installed In your blogspot webpage where you want it (it can be moved around later)

Go To Edit Html

Then Search for the code ]]></b:skin> And Place Below Code In place of ]]></b:skin>(By Removing ]]></b:skin>)

Click Here To Get The Code

Now Save Template and Search for below mention label widget in blogger Html

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

Atlast replace the above mention Label1 widget code with below code

Click Here To Get The Code

And you are Done ,In Case Of Any problem fell free to post yours problems in Comment

Original By - Scrapur

Add a Menu Bar - Blogger Hack

2008-02-10T09:10:00.000-08:00

Missing a real menubar on you Blog? This hack explains how you can add a simple menubar to the top of your Blog. It is in fact a simple link list, and that is a standard page element of Blogger Beta. I have added a new section at the top of the Blog Page, and the link list is inside that section. Of course there are some tricks to play, such as hiding the link list title, and showing the links list elements side by side. Here is how it is done.

In this Page Layout you can see where I have added the Menubar. The code of this section is highlighted in red:

<div id='header-wrapper'>
<b:section class='menubar' id='menubar' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList2' locked='true' title='Menubar' type='LinkList'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Beautiful Beta (Header)' type='Header'/>
</b:section>
</div>

To the CSS-part of your template, add coding for the menubar-id:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}

#menubar a:hover {
background-color: $headerCornersColor;
}
The menubar title is hidden, so that only the options are visible.
The list-elements are set to none, so that there are no bullets in front of the menu options. And if a menu-option is hovered over, it is highlighted.

Original By - Ehtisham Khan-Edwardian

Add Signature to your Blogger Post - Blogger Hack

2008-02-07T09:58:00.000-08:00

If u Want to Pretty Up Your Post,There Are many Things,But to Add Signature to your Blogger Post is Much Fun.Well,Below i am Showing a Tutorial How to Add a Signature to Your Blogger Post!

You must first have a signature that you want to have at the bottom of your post. This signature will be in the form of an image. To get that image, you can look online for sites that help create signatures, or you can make your own using GIMP as I did. If you need help making a signature, read some of my posts on design and graphics. After you have your signature, upload it to your web host...I use Ripway.

Open your Dashboard/ Settings/ Formatting/ Post Template. Put this code in the Post Template box:

<p><image class="centered"alt="post signature" src="SIGNATURE URL" /></p>

Replace SIGNATURE URL With The Image URL!

Done !!!

Original - by Ehtisham Khan-Edwardian

Weather Report in your Blog - Widget For Blogger

2008-02-07T09:35:00.000-08:00

Widgetizing your Blog is the new thing to explore here on Blogger TTT. Ramani shows how to add random Einstein quotes to your Blog. Phydeaux3 started all this showing Flickr Puppies, and even Hoctro now shows a Flickr Zeitgeist widget. So it is time that Beautiful Beta follows these fellows, with a useful Weather Forecast Widget. And ofcourse a tutorial on how to create this widget on your own Blog and make it easy-to-install for your readers.

You have to follow 3 easy steps:

Create the widget
Add it to your Blog
Add an Install-button to your Blog

Step 1: Create the Widget
Go to WeatherReports.com, scroll down and click Add WeatherReports To Your Site.
In the next screen, enter your city, select the colors and style of the weatherbox. After entering all your selections, you will go to the next screen automatically. Take a look at the preview, and select and copy the HTML-code.

Step 2: Add the Widget to your Blog
Add an new HTML page element to the sidebar of your Blog. Paste the code that you copied into the page element, and set its title to "Weather Report".

Don't save it yet, but go to step 3.

Step 3: Add an Install-button
Now we are going to add a button, that installs the widget on your visitors blog when it is clicked. In fact, we'll add a form with several input fields, but only the button will be visible. Here we go.

<form action="http://beta.blogger.com/add-widget" method="post">
<input value="Weather Report" name="widget.title" type="hidden"/>
<textarea style="display:none;" name="widget.content">
<script type="text/javascript" language="javascript1.2" src="http://weatherreports.com/jscript.html?width=125&height=125&theme=brand&location=Amsterdam%2C%20Netherlands&units=c"></script><div><a href="http://www.weatherreports.com/"><small>Free Weather Reports</small></a></div>
</textarea>
<input value="Install to Blog" name="go" type="submit"/>
</form>

The text between the <textarea>-tags is the html of your widget. Please notice that each <> is replaced with >.

Now save the page element and view your Blog.
If you want more information on how to add third-party widgets to your blog, take a look at these help pages.

Done !!!

Original - by Ehtisham Khan-Edwardian

Change Title Of Each Post - Widget For Blogger

2008-02-07T09:11:00.000-08:00

Guys get ready to change your title accordingly to your posts.I mean you can now have a unique title for each and every post now.This will really Boost your blogs ranking and it will help you for your blogs Search Engine Optimization.Guys please be creative so that you will get best result out of it
Now lets start to implement this into your blog.Just Follow this simple steps

Step 1-Goto Blogger Dashboard>>Layout>>Edit Html
Step 2-Backup your template
Step 3-Follow the instructions below

Find this code in your XML template{in header}

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

Now replace it with


<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> ~ <data:blog.title/></title></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='nextprev'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>


Further more you can add a very good keyword in homepage's title by just adding Keyword + Blog Title by finding this line in the above code{3rd last}-

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

and adding keyword here

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

Done !!!

Original -Ehtisham Khan-Edwardian

Add Favicon - Widget For Blogger

2008-02-04T00:12:00.000-08:00

Favicon is known as favorite icon for a your blog or site. Adding a Favicon to your blog is a good way to distinguish your blog from the millions of other blogs.
Below is Screen Shot of my Favicon so that you can know what Favicon exactly is :-

Ok now you what Favicon is now let see how to add it into your Blog or site. I have seen many procedures of adding Favicon. I will tell you the simplest method to add it
Here we go...

Step 1> step 1 is choosing you Favicon it may be in any format like JPG,JPEG,PNG Etc. Just save that Image which you like into your hard drive.
If you have problem in finding Favicon then simply go to google images and type the keywords like Favicon or icon or anything you want as Favicon (Be Creative).After saving your image file into your hard drive go to step 2

Step 2> Now you need to create the .ico file of that image file which you saved into your hard drive. For making .ico file of any image file i use Html-Kit.com. After opening there site you just need to upload you image file there and they convert you image file into .ico format then you just need to download it and step 2 is Done !

Step 3> Now time to upload your .ico file to any hoster like Google pages. After uploading your .ico file get the path of that image file - http://Bloggingforbread.googlepages.com/favicon.ico now after getting the path move to Step 4

Step 4> Now login to your blog and go to the Edit Html tab from Template. Then paste the following code below <head>

<link href='http://youraccount.googlepages.com/myicon.ico' rel='shortcut icon'/>
<link href='http://youraccount.googlepages.com/myicon.ico' rel='icon'/>

Before pasting this code to your blog's Html just exchange both the line - http://youraccount.googlepages.com/myicon.ico
with your .ico files path

That's It you are Done !

If you have any type of problem adding Favicon to your Blog fell free to ask here by commenting.

Happy Blogging !!

Now Get Adsense Pin at 10 $

2008-01-31T06:10:00.000-08:00

Today i was searching the adsense blog and i was shocked that google has decreased the minimum amount for getting adsense pin at 10 $.
Its very helpful for adsense user now and as they get the PIN at 10 $ which was 50 $ till yesterday.

Below is the original Post Posted in Adsense Blog :-

Pinning it down (to $10)

As part of our efforts to make sure that the AdSense account details publishers provide are valid and correct, we do a couple types of validation that you may be aware of: the Personal Identification Number (PIN) program and, in some locations, phone number verification. One or both of these verification methods is required in order to ensure the security and accuracy of your information so you can receive payments from AdSense.

In the past, our system would ask you to verify your information when your earnings reached $50. However, we've recently changed the threshold to $10. This lowered amount means many of you may see a PIN arrive in your mailbox soon, as well as a prompt in your account to verify your phone number. For more information about these holds, visit the links in the 'Required Actions' box on your Payment History page.

(Psst: If your all-time earnings are between $10 and $50, this might be a good time to learn all about PINs so you'll know what to expect. Or, if you prefer surprises, you can remain blissfully ignorant till a PIN mailer pops up in your mailbox. Just be sure you don't pitch it in the trash!)

Design Float - Widget For Blogger

2008-01-28T00:35:00.000-08:00

Design Float is a great resource - digg-like - to share stories about Web Design, CSS, Identity and Branding, Digital art and Illustration. This tutorial explains how to add a Float it! button on each post on your Blogger template.

Edit your Blogger template and check "Expand Widget Models". Find this line of code:

<'post-footer-line post-footer-line-3'>

...and paste, below this line, this code

The result looks like this

If you prefer a big button copy and paste this button instead of the first code:

The result is like this

Save your template and post your stories on Design Float!

Blogger Templates - All Templates Available on Internet.

2008-01-26T20:45:00.000-08:00

I Know Blogger.com provides only 16 default templates and 8 of them are very unprofessional and untidy so i decided to give you the all the templates available on the on the internet from this single page which will be updated daily. There are 2 and 3 column and also some other templates which i have searched around the net and also tested every single Template and made a xml file of all Templates so have fun and enjoy them...And Yes this templates are not mine let me thank the original creater's of this templates. I have pos ted this templates for users convince but you are most welcome if you are having some problem installing this templates.

So Enjoy my Find...............

2-Column Templates

Blogging To Fame - Bloggers Bread

Add The Blogger “Read More” Expandable Posts Link - Blogger Hack

Step #1 - Update Your Template Code

Step #2 - Add a Class Tag in Your Default Post Template

Step #3 - Create a New Post

Additional Info

Labels into Horizontal Tabs - A Blogger Hack

TabView In Your Blog - A widget for Blogger

Disable Right Click on Blog - A Blogger Hack

Label Cloud in your blog - A blogger hack

Add a Menu Bar - Blogger Hack

Add Signature to your Blogger Post - Blogger Hack

Weather Report in your Blog - Widget For Blogger

Change Title Of Each Post - Widget For Blogger

Add Favicon - Widget For Blogger

Now Get Adsense Pin at 10 $

Design Float - Widget For Blogger

Blogger Templates - All Templates Available on Internet.

1) Hello

2) Glossy Blue

3) Mush Blue

4) Emire

5) Spiderman

6) The Late Show

7) Peaceful Rush

8) Top Secret

9) Fleur

10) Summer

11) Road To October

11) MistyLook

1) Green Marinee

2) Garland

3) Magic Paper

1) Ambiru

How Google Detects AdSense Invalid Clicks

Search Form Widget For Blogger

I will now tell you how to install a Search Bar into your blog which will search you blog contents very easily.

13 more built in online bookmarks for blogger

Calender Archive Widget

Create Search Engine in Blogger

Read More Widget for Blogger

Remove Navbar From Blogger

Recent Comment Widget

Post Rating Widget for Blogger

How to implement it on blogger/blogspot?

Show Adsense on individual post view

Recent Posts Widget for Blogger

Precautions before testing Google AdSense on your website

A - Z Tips and Tricks for Layout Optimization and Higher CTR

What is Google Adsense and how to get a Adsense account fast.

Get Your Blog/Website Indexed To Google.com

Google Cancelling Adsense Referal Policy