Blogger Templates

Can't Save Blogger Posts

2012-01-18T15:27:00.006+08:00

Long story short.

I copied and pasted HTML source from a RTS game forum. I removed most of the tags except the <span> </span> tags, which have all the font colors, highlights, styles, etc.

I tried to save or publish the post, but took a LONG time and finally FAILED.

Googled for answers and the recommended solution from Google forum is to delete all the </span> tags. NO EXPLANATION or whatsoever.

I troubleshooted. The exact problem was the nested <span>s.
i.e.

A <span> tag should have a corresponding closing </span> tag but not nested. You can combine the styles into one <span> separated by a semi-colon.
e.g.

<span style="font-size: 150%; line-height: normal; color: brown">AVALON WARS</span>

Old Blogger Dashboard

2011-12-21T11:48:00.002+08:00

How to get back to old Blogger dashboard?

I was so frustrated as I just wanted to "preview" the new Blogger dashboard, but my old IE browser was not supported. On the other hand, there was NO LINKS to switch back.

You can also paste the following link into the address bar, while signed into your account:

http://www.blogger.com/opt-in-new-ui.g?useNewUi=false

Credits to Legacy2000

LinkWithin - Install Widget on Blogger

2011-11-30T11:37:00.001+08:00

If you have not installed this widget, you are missing out a lot on how to continuously capture your audience's attention with your blog's rich content.

I personally recommend this to be installed on every blog. Blogger should make LinkWithin a standard widget, period.

Install Widget on Blogger

Enter your email, blog's info, platform & width. I believe it works without an email. I used 4 stories with all my blogs.

1. Click "Install Widget (your own link)" to open Blogger in a new window, and follow the steps below in that window. Login to your Blogger account if necessary.

2. Select a blog if you have more than one, then click on Add Widget.

3. (Optional) For better performance, Drag and Drop the LinkWithin box under the "Blog Posts" box.

4. Click on Save.

And you're done! The widget should now appear on your blog.

Stories will appear in the widget when their crawl of your blog is completed. This will take a few minutes to an hour, depending on the size of your blog.

NOTE: The quality of recommended stories will improve once they complete their crawl of your blog. This may take up to several hours, depending on the number of stories in your blog.

Email vs Blog vs Facebook

2011-06-24T00:26:00.000+08:00

vs vs

I have been blogging for a while now. One of my colleagues told me the era of blogging is over and the "in" thing now is social networking Facebook.

He described the era of the progression being Email->Blog->Facebook.

Email is passive and pretty simplex. You send, s/he reply, you reply..., broadcast...

Blog is one way and you need to search for the information you wanted.

Facebook is interactive and gives you information that you needed proactively.

While email is passive, it serves a specific need. At your own time, leisure, schedule, reply the email. Of course instant messaging (IM), tweets, SMS, WhatsApp is quickly replacing it with more prompt replies, but at the expense of distracting from what you may be focussing on. That's opportunity cost, promptness vs focus.

Blogs on the other hand serves a different niche. Search for the exact information you want on the blog and move on to the next. The information in a blog can be highly organized to your specific needs.

I have not deep dived into Facebook to fully appreciate the features, but I find the information on Facebook very cluttered and usually you have to spend at least an hour, replying to pokes from friends and trying out the applications they send and updating your status. Very time consuming. The great part is you can find your long lost buddies. But you have to be careful what you update about yourself as privacy is now fully exposed. I can't advertise on Facebook like blogging unless someone can teach me.

Anyway, conclusion is each serves their specific needs & will not be replaced for quite a while.

Adsense inside Blogger Post

2010-07-08T09:33:00.003+08:00

The new Blogger widget based template that built on XML specification has a feature to add Google Adsense between Blogger Posts. These inline ads appear between 2 blog posts on homepage, archive and category or label pages, or after the blog content when the single post is viewed individually. However, the placement is kind of awkward and low performing in terms of click through rate (CTR) and also displays a blank space when > 3 adsense units are already displayed. - Credits to My Digital Life

A lot of bloggers have put Google AdSense ad code inside the post or wrap the ad unit around blog post by editing template’s HTML to insert modified ad code manually. Some users may feel uneasy on modifying the AdSense ad code as it may violate AdSense TOS. Anyway, there is another workaround to put AdSense ads in Blogger posts, by using this trick to move or duplicate built-in inline ads between posts block to inside the post section.

To use the trick to move around AdSense ad unit added by Ads Between Posts, enable and configure inline ads in Blogger using this guide. Note that you must login to your AdSense account from Blogger to establish access authentication. If you don’t have AdSense account yet, you can click on Sign Up button to register for one.
To display this ad within blog post also, click on Template tab, and then click on Edit HTML sub-tab link to open Blogger HTML code template editor to edit the contents of your template.
Backup a copy of your template by click on Download Full Template link, in case it is needed to be uploaded to Blogger server to recover the template in the event of mistakes or corruption.
Click to tick the Expand Widget Templates checkbox.
Find the line with the following text:
<data:post.body/>
And paste the following block of text before (for ad position before content) or after (for ad position after content) the line above:
<b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if>
Note that maximum of 3 AdSense for Contents (non Link Unit type) ads are allowed on each page.
If you want the AdSense ads inside blog post to appear only when individual blog post is visited, and not on homepage, category or archive pages, wrap the following lines to before and after code added above
<b:if cond='data:blog.pageType == "item"'> </b:if>
The whole block added will look like below:
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:if>
After enabling Show Ads Between Posts in step 1, you will notice that AdSense ads will be shown between posts on all multiple blog posts page, and also after the article on individual single post view. If you don’t want these ads to appear, i.e. to move built-in inline ads to within post, the locate the following block of text which is same with the one we added above:
<b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if>
And delete these code from template. Note that we have just added a same block of code from step above, so do not remove the newly added code, but the existing code in the template.
If you still want the AdSense ad unit to appear between posts when visitors view your blog homepage, label or category pages or archive pages, wrap the code above on top and bottom with the following 2 lines:
<b:if cond='data:blog.pageType != "item"'> </b:if>
so that it looks like the following:
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:if>
Note that the two lines should be added to the existing block of code in template, not the block which we added in step above.
Click on SAVE TEMPLATE button to save the new hacked template. Now the ad should be appear inside blog post without actually modify ad code. You can also use the same hack theory above to place the ads on different location.

* I also suggest under Design->Page Elements->Blog Posts->Edit to Show after every "5" posts (up to 3 ads can be placed on a page) if you are using 7 posts for homepage. It will show the first adsense unit inside first post, 2nd adsense in between posts and subsequently, no blank space for the rest of the adsense units not displayed. You still have one adsense unit to play with which I put it at the top left. Happy earnings.

Free Google Links

2010-03-04T15:34:00.000+08:00

One free tool you can use is the native free Google search to find out which URLs link back to you. Just enter in the search box:

link:<URL>

E.g.
link:http://www.leatherleatherleather.com/
link:http://firesfiresfires.blogspot.com/
link:http://blogger-templates123.blogspot.com/

You do not need any other software or online URLs to know which URLs link back to you.

Why?

You may be interested to find out how your blog is doing and what types of blogs or sites link back to you. You can gauge whether your content has the correct targeted audience.
You can check any spam URLs and do something about it.

How to Hide Navigation Bar

2010-01-14T16:13:00.003+08:00

You may like to hide the Blogger Navigation Bar to make your blog look more professional.

How to do it?

To hide the Blogger Navbar :

Log in to Blogger
On your Dashboard, select Layout->Edit HTML. Check "Expand Widget Templates" box.
Save a copy by clicking on "Dowload Full Template" link
Look for this similar code
body {
margin:0;
padding-top:0px;
background:#2F2723 ;
font-family:Verdana,Tahoma,sans-serif;
color:#99806B;
font-size:13px;
}
Copy and paste the CSS definition before the code:
#navbar-iframe
{
height:0px;
visibility:hidden;
display:none
}
Save Template

How to Remove Image Border

2010-01-12T20:16:00.019+08:00

In order to make the border disappear you can add this attribute style="border:none;" to the <img> tag like this:

and the result of that edit is this photo minus the border:

Cool Text

2010-01-05T21:14:00.004+08:00

I was looking for a website to generate some cool special effects for my text and I came across this Cool Text site. It will suit my FIRE FIRE FIRE website with the burning text.

Advertise With Us

2010-01-04T15:43:00.008+08:00

Advertise with us.

Total to date = ~$476
Last month's average daily earnings for content > $2.50

Merry X'Mas & Happy New Year!

2009-12-30T09:24:00.010+08:00

Merry Christmas & Happy New Year! Let it snow, let it snow, let it snow.

Snow effects especially for you.

Go to Layout->Page Elements->Add a Gadget
Select Add HTML/Javascript
Copy and paste the code and notice below->Save->Save

Creating "Read more..." Summaries

2009-12-29T17:11:00.008+08:00

Read more... is a feature which lets you create expandable post summaries in your blog posts, so longer posts appear as an intro with a link to Read More

In my previous "Read More Blogger Hack" post, I showed you how to create a "Read more..." link. While that is good, the "Read more..." link will appear even if you do not have any more content and you will need to end it with a [end of post]. Not so graceful.

Now, Blogger has a native in-built "Read more..." summary. Find out more by clicking on, you've guessed it

Creating "Read more..." in your blog posts can be easily done in Edit HTML mode by adding where you want to position the "Read more..." summary link.

Once you are set on the "Read more..." location within the post, you are ready to publish your post. After publishing, you will notice that the Read More... link is placed where you set the summary break:

E.g.

Clicking on the Read More link will then display the full text of the post:

If you feel like changing the Read More text to your own custom phrase, you can easily do this from the Layout | Page Elements tab. Click Edit on the Blog Post widget, and then change the Post page link text to whatever you'd like.

One more note, the "Read more..." feature does not change how your post appears in your feed. You can configure post feed options by going to Settings | Basic | Site Feed, and editing Allow Blog Feeds.

Customized Third-Party Template

Note:For those using a customized third-party template, you will have to add a snippet of code to make Jump Breaks work.

To do this, access your blog's Layout | Edit HTML tab, and first backup your template by clicking the Download Full Template link at the top of the page. This will download an XML version of your template which you can upload later at any time if you need to.

After backing up your template, then click the Expand Widget Templates checkbox, and scan your HTML for the following snippet:

<data:post.body/>

Once you've located that code, paste the following snippet directly below it:

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div> </b:if >

After you've pasted in the code, click Save and then you're done!

Twitter Feed for your Twitter Bird

2009-12-28T19:16:00.004+08:00

Do you want to update your Twitter automatically? I wanted to and found Twitterfeed. Do not underestimate the traffic generated by Twitter. Currently, ~3% of my traffic comes from Twitter and growing. Find out more...

I was pretty frustrated to publish my blog posts and Twitter tweets (shrinking the URL as well) separately. I was looking for a solution and found Twitterfeed. Just

Besides Twitter, it also has options for Laconica, Ping.fm, Hellotxt and Facebook currently. I only tested out on Twitter.

Blogger Images Sizes 2

2009-12-07T15:19:00.015+08:00

Optimize your images for the entire width of your blog post.

Why and how?

Why?

How?

Blogger Images Sizes

Rule Of Thumb:

For portrait (vertical) images, try to squeeze two High Quality (HQ) images side-by-side first with size s400. If they wrapped to the next line, then try s320. If s400 can be squeezed into one line, then try a higher resolution like s640 until the images wrapped to the next line.

For landscape (horizontal) images, usually you will not be able to squeeze two HQ images side-by-side. Then you might as well use a higher resolution than s400 to make full use of the entire width of the post body.

For many images are in one post, e.g. over 10 images, my recommendation is to make one or two of the best images with the highest resolution (see point 1 & 2) and use thumbnails for the rest like s200 and below. You could also end the post with a high resolution image as well to create an impact.

E.g. of of blowing up a landscape image

Next Post: Twitter Blog Feeds Automatically

Blogger Image Sizes

2009-11-23T18:33:00.012+08:00

A lot tips and tricks has been written about non-photo blogs. I like to contribute my experience with photo blogs using different images sizes.

Why is it important?

It optimizes your post area (better visual - placement or sizing), as well as you can create thumbnails for sorting.

Most of you have added images with standards sizes:

Small (s200)
Medium (s320)
Large (s400)

Which corresponds to (depending on whether your image is portrait or landscape):

200 pixels at its longest side
320 pixels at its longest side
400 pixels at its longest side

What you may not know is, Blogger has also resized the image into different sizes proportionally with the correct resolution as well:

s72-c, s110, s128, s150, s160, s200, s220, s320, s400, s640, s720, s800, s1024, s1280, s1440, s1600

This is what I experimented. If you found newer sizes, please feedback to me to be added.

So, what is this sXXX or sYYYY thing. I will cover how to use the image sizes in my next post. So stay tuned.

Next Post: Blogger Image Sizes Usage

The Dutch online casino Casinotoplijst.com is collaborating with Casino Del Rio, who have great bonuses, by introducing together a brand new X-men slot by Marvel.

Blogger Polls - Add or Save to Post

2009-11-18T14:06:00.009+08:00

How to add or save a Blogger Widget Poll to a Blog Post? During or after conducting a poll, you may like to copy your poll to the post. Either to the relevant post to be more prominent or as a record for reference (good for sorting and using a label to display past polls).

1) Create a "Blogger Widget Poll" inside your sidebar, just like you've done before. Make sure to give it an easy to find/remember Title.

2) After the Blogger Widget Poll, is added to your sidebar, visit your blogs HomePage in your Browser (I'm working with Internet Explorer as my Browser).

3) After you have your HomePage loaded into your Browser window, Go to the top Toolbar & View/Source (of your blogs Homepage) HTML.

4) In a text editor (Windows Notepad) etc... Find/Search for the Title to your new Polls Title.

5) Copy (Right Click/Copy) the HTML Code that looks similar to the code below:

6) Paste your new Polls HTML into your Blogger Post/Article.

7) After you get the Blogger Widget HTML, you can go ahead & delete the Blogger Widget Poll, from your Sidebar, we only needed that to get the HTML source code.

Note:
The actual Poll is inside an iframe, I also added bit of HTML code to prevent the Poll from adding a scrollbar to the Poll, I didn’t like the way it looks with a scrollbar on the Poll inside a Blog Post, so this is just an option, to remove scrollbars, after the (height="275") add this code (scrolling="no").

Once you have the Polls HTML Code, you can change a few things to make it look better in your Blog Post, for example, Blogger sets the default width of a Blogger Poll to 100%, If you want to add a Poll to a Post/Article I think it would look better as a fixed number (example: width:275), the same goes for the Poll Height, iframe border etc...

I also suggest changing the h2 heading to h3 for a smaller, less intrusive title.

Below is a working example of a Blogger Widget Poll, inserted in a Blogger Blog Post.

What is Your Favorite Leather Wear?

Next Post: Blogger Image Sizes

Feedcount

2009-11-17T09:25:00.008+08:00

Promote your Blog with Feedcount:

If are a new blogger, you may have seen the above feedcount indicating the number of email subscribers.

It is delivered by FeedBurner. FeedCount is another cool way to promote your feed. It is a dynamic graphic that always displays your feed's current circulation.

So, let's see how to add a "Feedcount chicklet" like that in your blog:

1.Firstly, sign in to your FeedBurner account. If you don't have a FeedBurner account yet, you can register it here

2.Click on the "My Feeds" link at the top of the page and next, click on your blog name [look at the screenshot below]

3.Next, click on the 'Publicize' tab as shown below.

4.Select the "Feedcount" option [look at the left sidebar]

5.Next, you will see this

Choose your blog's matching color scheme and click on 'Save'

6.Now, copy the code they provided [see the screenshot below]

7.Finally...
sign in to your blogger dashboard>layout>add a page element>html/javascript
Paste the code and SAVE THE CHANGES.

That's it!...too long process know? No. Very simple process to do.
OK. Why don't you Subscribe to Blogger Templates by Email so, you will be updated with the latest blogger tips and tricks.

Next Post: Saving Poll Results to Post

Google Adsense Earnings

2009-11-13T19:28:00.012+08:00

Some of you have been reading or following this blog may be wondering, whether my blogging tips & tricks really works. One of the major difference about this blog that stood out from the rest is that I walk the talk. All the changes I suggested, I tested them and implemented them to my blogs.

This resulted in my humble Google Adsense earnings improving steadily daily.

Total to date = ~$401
This month's average daily earnings for content > $2

Below shows a screenshot of accumulated earnings to date for content.

Besides having great content, other parts such as organizing, arrangement, sorting, packaging of your blog helps to make your blog more visually attractive, appealing and organized. Also Google adsense ads placement will help as well. The overall presentation helps in keeping your readers engaged and keep coming back for more. Results? Higher earnings for you and more satisfied customers.

Next Tip: How to copy your Blogger Polls to your posts (After adding feedburner counter as promised).

Email Subscription Form

2009-10-27T09:10:00.008+08:00

How to add "Email Subscription Form" to your blog:

If are a new blogger, you may have seen an email subscrtiption form like the one below in other blogs while browsing.

It is delivered by FeedBurner. When people subscribe, they will receive a email with your blog posts whenever your blog is updated. It is very easy to do and makes your visitors come back again and again to your blog.

So, let's see how to add a "Email Subscription form" like that in your blog:

1.Firstly, sign in to your FeedBurner account. If you don't have a FeedBurner account yet, you can register it here

2.Click on the "My Feeds" link at the top of the page and next, click on your blog name [look at the screenshot below]

3.Next, click on the 'Publicize' tab as shown below.

4.Select the "Email Subscriptions" option [look at the left sidebar]

5.Next, you will see this

Click on 'Activate'

6.If you look at the sidebar now, there are a few more options under the Email Subscriptions column namely Subscription Management, Communication Preferences, Email Branding and Delivery options.

Now, click on the Subscription Managemant option and copy the code they provide [see the screenshot below

7.Finally...

sign in to your blogger dashboard>layout>add a page element>html/javascript

Paste the code and SAVE THE CHANGES.

That's it!...too long process know? No. Very simple process to do.

OK. Why don't you Subscribe to Blogger Templates by Email so, you will be updated with the latest blogger tips and tricks.

Next Post: Feedcount

Credits to ©Blogger Tricks

Star Ratings Widget

2009-10-26T19:53:00.004+08:00

Are you curious to know what your readers think about your content? Do you want to enhance their experience on your site? By adding the outbrain ratings and recommendations widget you will get immediate feedback from your readers and provide them with personalized links to more great content.

The outbrain widget is free and is very simple to add to your Blogger, TypePad, WordPress (hosted) or Drupal blog. After adding the widget, we will automatically insert a beautiful 5-star ratings and recommendations widget to the bottom of every post you publish:

The outbrain widget is available in 5 popular flavors. Select your blog platform, and/or add to your RSS feed:

Background Image or Wallpaper

2009-09-23T20:56:00.014+08:00

Do you want to create a professional looking blog? A nice background image to your blog is one tip. Check out LEATHER LEATHER LEATHER or Leather Beauty to see the effect.

Add an image into one of your posts. I chose the links post so that I can quickly reference from my menu.
Add a widget to your side pane.
Copy the image code into your widget.
Replace the image http://.../.jpg with your image.
Tile the background. <style type="text/css">table, tr, td { background-color:transparent; border:none; border-width:0;} body { background-position: top left;background-repeat: repeat;background-attachment: fixed; background-image:url(http://2.bp.blogspot.com/_3fcmn11BYHw/SrEI5T6NmDI/AAAAAAAAA6Q/NWuiOm61uPY/s400/leathershiny_cropped.jpg); } </style>
Replace the image http://.../.jpg with your image.
Save.
Refresh or reload.

"Read More" Blogger Hack

2009-05-29T10:10:00.015+08:00

Update : This Tutorial is out of date. Please read my latest tutorial. Click here!

If you are a beginner, you will be surprised to see only the first or second paragraph in my posts. If you want to read the full post, you have to click on the Read more... link. I will share with you how to do it.

The function is called Post Summary. You can make a post summary function by adding a little code to your template code. But this code is for blogger layout template and does not work for classic template.

Please follow the steps below :

Step #1 :

Login to blogger with your ID
In the dashboard page , click Layout
Click edit HTML tab
Click the Download full template link. SAVE YOUR TEMPLATE FIRST (very important).
Please mark the little box beside Expand Widget Templates. Wait for a moment.
Go to your template code, and find this code:

<p><data:post.body/></p>
Delete the above code and replace it with this code:

<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p><b:else/><style>.fullpost{display:none;}</style> <p><data:post.body/> <a expr:href='data:post.url'><strong>Read more...</strong></a></p></b:if>
Click Save Template button
Step #1 is done.

Step #2:

Click Setting tab.
Click formatting tab.
Go to lower side. you will find a blank text are beside Post Template. Fill that blank text area with this code :

<span class="fullpost"> </span>
Click Save settings button.

Step #2 is done.

How to post your article?When you post your article, choose tab. and you will see the code below :

<span class="fullpost"> </span>

This is an example how to post:At the front page of your blog, it will show up like this:Finally, if you tried this hack without success, do not panic. Upload your backup template, and it will revert back to your template before you edited.

Limitations of this post summary method?

There is only one limitation that I am aware of with this method of post summaries. This is that all posts will display the "Read more..." link at the bottom of them. This means that if you do not want a summary version for a very short post for instance, that the "Read more..." link will still show and will be a link to the permalink page for that post.There seems to be no way around this that I am aware of at the moment. To get around this you will need to use a Javascript summaries hack, or handle this by stating at the end of short posts that it is the [end of post].

All right my friend, I think this should be enough. See you at my next post.

Modified from http://www.blogspottutorial.com/2007/12/make-post-summary-readmore-function.html - Kang Rohman

Translation or Translate Widget

2009-03-27T11:06:00.006+08:00

I will discuss and explain how to install Google Translate Widget in the form of nations’ flags. This widget may be a bit different from available widgets on the internet that you have found, because Kang Rohman creates this widget for a half day with a very interesting modification on it.

The widget will be like the illustration below, please point your mouse over the flag-images so that you will find the blur effect as an attracted result:

If you are interested in installing the widget, then you should do the steps as follow:

Login to blogger with your ID
Click Layout
Click Page Element tab
Click Add A Gadget
Click the sign plus (+) for HTML/JavaScript

Copy and paste the Google Translate code into the available area.

<style> 
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style> 
<div> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwj4Ab0NaI/AAAAAAAAA14/3H56LPKtijA/German_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj8KhadjI/AAAAAAAAA2A/GNyl8VBie3o/Spain_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a>
<br/><br/>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkJ6RBJAI/AAAAAAAAA2o/lpsTh893J3k/Japanese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24"/></a> 
</div><div style="font-size:10px;margin:10px 0px 3px 0px">
by : <a href="http://www.blogspottutorial.com">BTF</a>
</div>

Click Save button
Done

It is very easy, isn’t it? Happy enjoying your new Google Translate widget!

Source from Installing Google Translate Widget (2)

Floating "Top of Page" Icon Widget

2009-03-02T16:37:00.010+08:00

Some blogs and webpages have obnoxiously long pages that go on forever... and that's where this widget comes in handy. As you can see, there is a small floating arrow at the bottom-right of this page. It always maintains the same position. Scroll down a little, then if you click on it, it will take you to the very top of the page.
Why it's a good thing?

Saves your visitors from an unnecessary hassle of scrolling up.
The icon does not interfere with your content.
You can use your own image in order to blend in with your own blog.

For Google Bloggers:

The html code:

Customizing the Icon Image:

If you wish to change the arrow image to something else, then find this line below and replace it with another image url

http://img119.imageshack.us/img119/8589/arrowupcx2.gif

Source from Installing Google Translate Widget (2)

Adsense between Blogger Posts

2009-02-26T10:42:00.027+08:00

How to add Adsense ads between Blogger posts:

Adding adsense ads inside blog posts is a very good thing to do to increase your CTR.
CTR means "(number of times your ad clicked) / (number of times it is shown)". So, the more CTR you have, the more $$ you get.

As we know, there are more chances for the ads to be clicked when they are in the middle (blog posts) rather than at the sidebars (especially the right sidebar), footer, etc. So,

How to place adsense ads between Blog posts:

By doing this, the adsense units will be displayed between the blog posts in the homepage, archive pages and permalink (individual post pages).

Follow the procedure to do this:

1. Sign in to your blogger dashboard -> click on the layout link

2. Click on the Edit link in the "Blog Posts' column [look at the screenshot below]

..............a pop up window opens..........

3. Check the box next to 'Show ads between Posts'

4. Next, configure the ads, choose the format, colours, etc and SAVE THE CHANGES.

That's it! Now your adsense ads will show between blog posts.
http://bloggertricks.com/2007/12/placing-adsense-ads-inside-or-between.html

Next post: Floating "Top of Page" icon widget.

Adsense Placement

2009-02-11T13:37:00.027+08:00

The best location for Google ads varies from page to page, depending on content. Here are a few questions to ask yourself when considering where to position your ads:

What is the user trying to accomplish by visiting my site?
What do they do when viewing a particular page?
Where is their attention likely to be focused?
How can I integrate ads into this area without getting in the users' way?
How can I keep the page looking clean, uncluttered and inviting?

Certain locations tend to be more successful than others. This "heat map" illustrates the ideal placing on a sample page layout. The colors fade from:

Dark orange (strongest performance)
Light orange (strong performance)
Light yellow (weakest performance)

All other things being equal, ads located above the fold tend to perform better than those below the fold. Ads placed near rich content and navigational aids usually do well because users are focused on those areas of a page.

While this heat map is useful as a positioning guideline, we strongly recommend putting your users first when deciding on ad location. Think about their behavior on different pages, and what will be most useful and visible to them. You'll find that the most optimal ad position isn't always what you expect on certain pages.

For example, on pages where users are typically focused on reading an article, ads placed directly below the end of the editorial content tend to perform very well. It's almost as if users finish reading and ask themselves, "What can I do next?" Precisely targeted ads can answer that question for them.

Tip for forum webmasters and bloggers: Check out our specific tips on ad placement for forum sites and blogs.

Next post: Adsense placement in between Blogger posts.

Blogger Page Number

2009-02-06T09:57:00.016+08:00

How to add Blogger Page Number:

Login To Your Blogger And Then Click On Settings And Navigate To Layout Section.

Then Click On Add Page Element.

A new Window Will Open in Which Select Add Html/Javascript.
It will ask For Javascript.

Now Copy The Whole Javascript Below And Paste in it.
__________________________________________________________________________

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=7;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://blogger-templates123.blogspot.com">Blogger Widget</a></div>
__________________________________________________________________________

After Adding this Javascript you need to drag and drop the widget below the Blog Posts main widget. See this screen shot

In the above code you can find the below written word and can change its value from 7 to the number of posts you show at your main page.

var pageCount = 7;

In my Blog, it is set to 7 as it is the default for blogger posts.

Save Javascript for Blogger (Updates)

2009-02-05T10:56:00.004+08:00

UPDATES: The root cause is javascripts conflict. After removing the widgets that contain javascripts one-by-one, I was able to re-add back and save. My advice is to test the javascript on a test page first and also add in javascript one-by-one. In that way, you will know which is the last known javascript that gave you the problem.
__________________________________________________________________________

Recently, I have noticed that I was unable to save javascript for Blogger HTML/JavaScript gadgets. It just says saving, but it takes forever. Even the old widgets cannot be saved.

I have a work-around for this problem.

©Blogging with blogger is basically 123.

Add a Blogger Gadget

Add a Gadget
Add HTML/JavaScript
Add text to title and content: e.g. Recent Posts
Save
Go
Add text to title and content: e.g. Recent Posts
Save

Include JavaScript into HTML

Go to Layout->Edit HTML
Check Expand Widget Templates
Find the widget you just created
Add JavaScript
Comment line <data:content/>
Save Template

I will provide screen-shots later.

Charcoal Template - Improvement

2009-01-23T07:55:00.014+08:00

I like to improve a few things on the Charcoal Blogger 3 columns template. My tests will reflect on http://blogger-templates-123.blogspot.com. The final version will be implemented to this blog.

©Blogging with blogger is basically 123.

Add a footer widget
Modify the links below the body to match Minima Black
Modify body to include Google Adsense
Google Adsense color scheme

I also noticed whenever I saved the html, the Google Adsense changed to the default 125 x 125 layout. I will try to find out why.

1. I have added a footer widget but not to my liking. Not full length like the title and not centered (right aligned for some reason). Also after adding the first widget, subsequent widgets cannot be seen. Investigating...

2.1 Modified HTML code to include posted dates (makes more sense).

Find these lines (Ctrl+F)

<span class="date">
<b:if cond="data:top.showAuthor">
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Insert line on <data:post.dateHeader/>

<span class="date">
<b:if cond="data:top.showAuthor">
<data:top.authorLabel/> <data:post.author/>
on <data:post.dateHeader/>
</b:if>
</span>

2.2 Include a QuickEdit icon.

Find this line (Ctrl+F)

...
<span class="quick-edit-icon"> </span>
...

Comment & Insert line
<img alt="" class="icon-action" height="18" src="http://www.blogger.com/img/icon18_edit_allbkg.gif" width="18"/> :

...


<img alt="" class="icon-action" height="18" src="http://www.blogger.com/img/icon18_edit_allbkg.gif" width="18"/>
...

Find these lines (Ctrl+F)

<b:if cond="data:post.allowComments">
<a class="comment-link" expr:href="data:post.addCommentUrl" expr:onclick="data:post.addCommentOnclick"><b:if cond="data:post.numComments == 1"><data:top.commentLabel/> (1)<b:else/><data:top.commentLabelPlural/> (<data:post.numComments/>)</b:if></a>
</b:if>

Append line <b:include data="post" name="postQuickEdit"/> directly below:


<b:include data="post" name="postQuickEdit"/>


4. Charcoal Template Google Adsense Color Scheme (I prefer the title to be orange)

After all these implementations, I will upload it to the zip file.

Next post, I will give you a workaround for unable to save javascript.

Charcoal Blogger Template

2009-01-22T16:46:00.009+08:00

Finally, I succeeded in creating the Blogger Templates Blog with the Charcoal Blogger Template with 3 columns.
The original 3 column version of the Wordpress theme was released by Jinsona of http://web2feel.com.
Credits to kranthi who posted in http://bloggertricks.com/search?q=charcoal

Charcoal Blogger Template - 3 Columns

Live Demo | Download

As usual, after downloading and installing the template,change the top navitation links

Scroll down the template and find this code:

and replace the text (Home, About, Pictures, etc) and write the link to that page by replacing the YOUR-LINK-HERE

Hope all like the template!

Links

2009-01-22T11:34:00.018+08:00

__________________________________________________________________________

LEATHER LEATHER LEATHER LOOP (8)

__________________________________________________________________________

The 4 Elements Ring (3)

__________________________________________________________________________

BLOGS

__________________________________________________________________________

FORUMS

__________________________________________________________________________

HTML CODE (copy and paste to link to us)

Privacy Policy

2009-01-22T08:01:00.001+08:00

Privacy Policy for blogger-templates123.blogspot.com

If you require any more information or have any questions about our privacy policy, please feel free to contact us by email at leathergloves1@gmail.com.

At blogger-templates123.blogspot.com, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by blogger-templates123.blogspot.com and how it is used.

Log Files

Like many other Web sites, blogger-templates123.blogspot.com makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.

Cookies and Web Beacons

blogger-templates123.blogspot.com does use cookies to store information about visitors preferences, record user-specific information on which pages the user access or visit, customize Web page content based on visitors browser type or other information that the visitor sends via their browser.

DoubleClick DART Cookie

.:: Google, as a third party vendor, uses cookies to serve ads on blogger-templates123.blogspot.com.
.:: Google's use of the DART cookie enables it to serve ads to users based on their visit to blogger-templates123.blogspot.com and other sites on the Internet.
.:: Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy at the following URL - http://www.google.com/privacy_ads.html

Some of our advertising partners may use cookies and web beacons on our site. Our advertising partners include ....
Google Adsense

These third-party ad servers or ad networks use technology to the advertisements and links that appear on blogger-templates123.blogspot.com send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies ( such as cookies, JavaScript, or Web Beacons ) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and / or to personalize the advertising content that you see.

blogger-templates123.blogspot.com has no access to or control over these cookies that are used by third-party advertisers.

You should consult the respective privacy policies of these third-party ad servers for more detailed information on their practices as well as for instructions about how to opt-out of certain practices. blogger-templates123.blogspot.com's privacy policy does not apply to, and we cannot control the activities of, such other advertisers or web sites.

If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.

Disclaimer

2009-01-22T08:00:00.001+08:00

Disclaimer

The information contained in this website is for general information purposes only. The information is provided by ©Blogger Templates 123 and while we endeavour to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the website for any purpose. Any reliance you place on such information is therefore strictly at your own risk.

In no event will we be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.

Through this website, you are able to link to other websites which are not under the control of ©Blogger Templates 123. We have no control over the nature, content and availability of those sites. The inclusion of any links does not necessarily imply a recommendation or endorse the views expressed within them.

All pictures on this site are the property of their respective owners and have been gathered from sources across the internet. These images are believed to be in the public domain. If you own the copyright of an image, please follow Copyright Feedback section below to have it removed.

Copyright Feedback

This site in no way wishes to infringe on anyone's copyright. If you believe that any content has been used on the site in a way that violates your copyright or other intellectual property rights, please reach us at leathergloves1@gmail.com or/and leave a comment in our post. We guarantee that the content will be removed or altered to fit your wishes as soon as possible.
[end of post]