Headlines
Monday, June 9, 2008
Some bloggers feel a need to add Google ads in between their blog posts ... maybe to increase the amount of ads click or maybe its just more appealing to them.
So here i have discovered this hack to add Google ads between your posts. You can even add elements other than ads in the same manner...
First of all you need to get the adsense code from Google which i believe you already have . So here is how you can carry out this hack : -
1. Go to dashboard->layout->EDIT HTML
2. Tick on expand widget templates
3. Locate this line of code
4. The <data:post.body/> line that you see in the above code is what contains the content of your post.
5. Now copy the code that you have got from google and paste it just below the <data:post.body/> line before the </p> tag.
6. Save the template........DONE !!!!!
In the same manner you can also add lot of other elements between blog posts......ENJOY !!
Saturday, June 7, 2008
The most common problem of the bloggers is the empty space around their template or the less amount of columns to add widgets . Many bloggers do not like the empty white space on either sides and wish to add a third column (maybe so that it looks more appealing).......Many bloggers report that 6% to 9% of their viewers are on 800 x 600 monitors. They would hence like to add a third column to their template.
NOTE : In case you already have a third column in you template but just wanna increase the width to fit the page , the read my earlier hack "Changing width of your blog template".
Now here is how you can add a third column to your blog template :
1. Define new columns
The size and placing of the new columns will have to be declared in the CSS first. The new sidebar is defined by
#righthandsidebar-wrapper
{
width:35%;
float:right;
word-wrap: break-word; /* fix for long text breaking sidebar floatin IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#righthandsidebar
{
margin:0;
padding-top: 100px; /* reduced from 170px of leftsidebar */
}
Notice that the right han sidebar wrapper has been floated right. Now we need to create one big column to include both the post and the left sidebar columns. After creating it we will give it a float left property. So it will float left and contain the left sidebar floating left within it and the posts column floating right within it. For this add this code and we will call it 'columns'.
#columns
{
width:64%;
float:left;
word-wrap: break-word; /* fix for long text breaking sidebar floatin IE */
overflow: hidden; /* fix for long non-text content breaking IEsidebar float */
}
Since the right sidebar wrapper is 35% we have sized this at 64%. Save Template.
2. Now we just have to implement the columns in the body for their corresponding CSS between the <head> </head> tags of the template
Scroll down till you come to this line :
<div id="'main-wrapper'">
and add the following code just above this line.
<div id="'rightsidebar-wrapper'">
<div id="rightsidebar">
</div></div>
<div id="columns">
Notice that the right hand sidebar wrapper along with its sidebar has been added before the main wrapper and the columns division has been opened but not closed. To close it add this code
</div>
just before the footer wrapper code starts here :
<div id="'footer-wrapper'">
Thus the columns includes both the main wrapper which is floated right inside it and the left sidebar which is floated left. It is closed before the footer wrapper so as not to include it.
3. Save the Template.
4. Now we are almost there.....You have added the third column....Now we only have to add the WIDGETS to the new column or it would remain empty.
To add it widgets or Page Elements to it add these lines :
<b:section class="'sidebar'" id="'righthandsidebar'" preferred="'yes'">
</b:section>
at the position marked by xxxxxxxxxxxxxx below :
<div id="'righthandsidebar'">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
5.Save the template.......ITS DONE !!!!
I except you guys to very well know about adding widgets in the column you created....for any help drop me an e-mail at kinglife50@gmail.com
Thursday, June 5, 2008
I have noticed that some bloggers who are have NO or very little knowledge about HTML , CSS ,XML have problemss in customizing their template acording to their own needs...
Well i cant give you a complete HTML tutorial here but i have seen that one of the most common needs most of the bloggers is to increase the width of their blog page so that it occupies more of the page (maybe to attract more traffic)...
So i am gonna give this tutorial about "How TO Increase the width of your blog template" :-
1. Login to your Dashboard and click on Layout under the name of your blog.
2. Click on Edit Html tab next to Page Elements tab. This opens the Edit Template page.
NOTE : Make sure to back up your template before making any changes. The template back up button is provided on the EDIT TEMPLATE PAGE . Download and save it for safety purposes..
Then scroll down in the HTML code box till you reach ....
/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper {
width: 1025px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {width: 530px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */}
#sidebar-wrapper {
width: 250px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#newsidebar-wrapper {width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
The Outer wrapper contains the main wrapper and the two sidebar wrappers. Their dimensions are described by the width parameter. Their positions are described by the float parameter. Notice that the outer wrapper does not have a float parameter. This is because its position in the center of the page is described by the "margin 0 auto" parameter. To change the width of any of the main or sidebar column change their width parameters only. Then change the width of the outer wrapper by the same amount because it has to expand to include the new width.
NOTE : Preview the template after making changes and back up the template in case you dont like it.
When you change the width then you will also have to change the HEADER width in order to prevent the sidebars from going under the posts and not coming up to take its normal position.
To change the width of the HEADER scroll down in Edit Template text box till you come to :
/* Header-----------------------------------------------*/
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
then change 750 to whatever width you want it to be.
IF YOUR TEMPLATES DOES NOT HAVE THE OUTER WRAPPER AS A DIVISON : Then go to Edit Html under Template tab and usually the first division after 'Body' and the a links will usually correspond to the outer wrapper.
If you still dont manage to get it right ... then drop me a mail at kinglife50@gmail.com .
To change the order of your posts in Beta Blogger..............remember that posts are ordered according to "LATEST POSTED FIRST ON PAGE" rule. Hence the newest posts are first with earlier posts lower down in the order. The first post you made when you created the blog is the last on the page. Your blog consists of a Main Page and Post Pages. The Main Page contains the number of posts you have set in Settings---->Formatting---->Show __ Posts on Main Page. The rest of the posts are shown as links in the Blog Archive widget in the sidebar. The posts on the Main Page also have their links in the Blog Archive widget. Each Post Page contains only one post.
To change this order login to Dashboard. Click on Posts link after 'Manage:' under name of your blog. You will see a list of all your posts with links to Edit, View or Delete them. Click on Edit link of the post you want to change the date of. The Posts Editor opens with its two modes : Edit HTML and Compose.
The bottom frame of the Posts Editor contains a link 'Post Options'. Click on it to expand the frame as shown in above image. In the expanded frame you can change the Posts Date and time.
-->If you want this post to be the first post always in this blog then set the date to any time as far in the future as it will allow it to be set. This is because once that day arrives and you post more posts this post will start migrating downwards like the rest. Till then it will remain a "sticky" post at the top of your blog.
To list All Previous Posts by Title...............you will use your blog's RSS feed to put content into your sidebar. How to do this has already been described in the post : Add Content with RSS Feeds in a general way. This is a special case in which you can use this method to display the title of all your previous posts in the sidebar.
STEP 1. The feed for your beta blog is of the format :http://yourblogname.blogspot.com/feeds/posts/full
where instead of 'yourblogname' type in the name of your blog. The feed for your old Blogger blog is :http://yourblogname.blogspot.com/rss.xml orhttp://yourblogname.blogspot.com/atom.xml
Step 2. You will have to convert this feed into Javascript code which you can then insert into your webpage so that it displays on your site. There are many RSS-to-Javascript convertors online which you can search out usinf Google. One of these convertors is located at : http://itde.vccs.edu/rss2js/build.php
Copy and Paste the above link into your browser and press Enter. Copy and paste the link for your blog feed obtained in Step 1 into the "Enter the web address of the RSS Feed" under 'Build your feed'. In Select the options set 'Number of Items to display' as 0 - This will display all posts. In 'Show item descriptions? How much?' set it as 0 to show no descriptions. Set 'Show item posting date?' as No and click Preview to see whether your titles are coming through. If it displays correctly then click 'Generate Javascript'. The program generates Javascript code along with a noscript code for those browsers without Javascript. Copy the code...
Step 3. Go to Layout in your blog after logging in to Dashboard. The Page Elements page opens. Click on 'Add Page Element' in the sidebar section. A new popup window opens where choose HTML/Javascript option and paste the code obtained in Step 2 above in the Content box.
Click Save Changes.
Refresh cache.
View Blog.
You can see an example of this in my right sidebar at the top.To do this in Classic Blogger just paste the Javascript code in your template in the sidebar section.
If you encounter any troubles with this method then feel free to e-mail me at kinglife50@gmail.com.
On blogs there is default atom feeds embedded by blogger...Howeever you can add content with RSS feeds also.
You can also add RECENT COMMENTS to the sidebar by using comment feeds URL which arehttp://yourblogname.blogspot.com/feeds/comments/TYPEInstead of 'yourblogname' type the name of your blog. Instead of TYPE use summary or full.
Monday, June 2, 2008
To get the you tube downloader on your blog --
1.Go to layout on your dashboard
2.Add a new page element and select HTML/javascript..
3.Copy/paste the following code in the content box and save it.
<script src="http://downloadutube.googlepages.com/ytdwid.js" type="text/javascript"></script>
<a href="http://technojuice.blogspot.com/2007/11/download-youtube-video-widget-blogger.html"><img border="0" alt="Download youtube Video" width="5" src="http://i197.photobucket.com/albums/aa309/technojuiceblog/blank.gif" height="5" />
</a>
4.Thats it .. Done !!!
Sunday, June 1, 2008
To hide the Blogger NavBar:
1.Log in to blogger
2. On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML . Under the
Edit Template section you will see you blog's HTML.
- Paste the CSS definition in the top of the template code:
<b:skin><![CDATA[/*-----------------------------------------------Blogger Template StyleName: Rounders
Designer:
Douglas Bowman
URL: <a
href="http://www.stopdesign.com/">www.stopdesign.com</a>
Date: 27 Feb
2004
Updated by: Blogger Team-----------------------------------------------
*/
#navbar-iframe { display: none !important;}
/* Variable definitions ====================
<variable name="mainBgColor" description="Main Background Color" type="color" default="#fff"
value="#ffffff">
<variable name="mainTextColor" description="Text Color"
type="color" default="#333" value="#333333"> ...Remove the code to show it again.
3.Save the template..
And you will never see the navbar again !!!
This post is for my fellow friends who asking for digg button display in their post. Digg button will show up on every single post you have in your blog.
1.Go to your blog template> Edit HTML> expand the widgets> and check for this line:
<data:post.body/>
2.Replace with this code:
<!-- DIGG --> <div style="'float:right;"> <script type="'text/javascript'">digg_url = ' <data:post.url/>'; </script> <script src="'http://digg.com/tools/diggthis.js'" type="'text/javascript'/"> </div><data:post.body/>
3.Click on Save Template. Done!
I have noticed that sometimes people are more willing to display comments under indivisual posts (something like you tube)...rather than the scrolling comments form under posts which doesnt appeal to all the bloggers...... Well , it is absolutely possible !!!
Here is how to do it -
1.Locate the following code in your HTML template and remove the first and last line
<b:if cond="'data:blog.pageType">
<b:include data="'post'" name="'comments'/">
</b:if>
2.To be safe, you can simply comment out the code rather than removing them:
<!-- <b:if cond="'data:blog.pageType"> -->
<b:include data="'post'" name="'comments'/">
<!-- </b:if> -->
3.Save the template . Done !!
Inline comments on blogger with i-frames. Not the greatest of hacks, but pretty good, I must say. Now, "you can customize your blogger template to show comments form on the same page like wordpress "
Here is how to add it on your blog. ( Save your template in case things don't work as expected and you want to revert back )
i) On blogger layout menu, choose 'Edit template HTML' and select 'Expand Widget Templates'
ii) Find and replace
<b:include data='post' name='comments'/> with
<b:include name='inlineComment'/>
iii) Paste the following code-fragment where all the "includable" sections are located.
<b:includable id='inlineComment'>
<iframe expr:src='data:post.addCommentUrl' frameborder='0' height='700' scrolling='auto' style='background:white;margin-top:-10px;margin-bottom:10px' width='100%' longdesc='http://blogger-station.blogspot.com/2008/06/blogger-inline-comments-hack.html' title='blogger inline comment (blogger-station.blogspot.com)' />
</b:includable>
If you are unsure, paste it just before
<b:includable id='post' var='post'>
iv) Save template and change the following blogger settings for comments:
Show comments in a popup window --> yes
The popup style comments structure is ideal for inlining the comments with the blogger post.
Show word verification for comments --> no
Word/ visual verification doesn't seem to work on IE ( the image doesn't show up in my browser IE7 ), however, disabling this option can increase comment spams on your blog by automated systems.
That's it !! you are ready to go....
There's still much left to be desired....
The comments are best visible on a white background. (can't do much about it, since the comment page has its own styling)
The comments form will appear only on individual URLs/ posts. (by design, I have set it to appear on pagetype=='item', and hence it won't appear on home page, archives and posts-by-labels; comments will still appear on a popup window for these pages)
I Wish someone could fiddle with javascript to destroy the 'close this window' span element located on top-right of the comments form ( though it is dysfunctional ). I might as well dabble in CSS to overlap the span with some element at a later date.
If you think you like the hack even with the shortcomings, leave me a feedack comment.
Saturday, May 31, 2008
We know that in blogger.com / blogspot.com readers must click on the new page or new popup window just to leave a comment on
our articles. that sometime just make them (well at least to me) too lazy to leave a comment, even they want to.
It’s true that blogger/blogspot is not like wordpress. In wordpress..... we can just leave a comment on the post page. so, why
can’t we have the same too on blogger/blogspot ?
we can actually !!!
here are the step.....
Please backup your template first before changing anything -
1. Go to your dashboard --> control panel --> edit html.
2. click the Expand Widget Templates
3. locate the following HTML code written below.
<b:includable id="comments" var="post"><div
class="comments" id="comments"><a name="comments"></a><b:if cond="data:post.allowComments"><h4><b:if
cond="data:post.numComments == 1">1
<data:commentlabel></data:commentlabel>:<b:else></b:else><data:post.numcomments></data:post.numco
mments> <data:commentlabelplural></data:commentlabelplural>:</b:if></h4><dl id="comments-
block"><b:loop var="comment" values="data:post.comments"><dt class="comment-author" id="'"><a
name="'"></a><b:if cond="data:comment.authorUrl"><a href="data:comment.authorUrl"
rel="nofollow"><data:comment.author></data:comment.author></a><b:else></b:else><data:comment.a
uthor></data:comment.author></b:if><data:commentpostedbymsg></data:commentpostedbymsg></dt><dd
class="comment-body"><b:if cond="data:comment.isDeleted"><span class="deleted-
comment"><data:comment.body></data:comment.body></span><b:else></b:else><p><data:comment
.body></data:comment.body></p></b:if></dd><dd class="comment-footer"><span class="comment-
timestamp"><a title="comment permalink"
href="http://www.blogger.com/"><data:comment.timestamp></data:comment.timestamp></a><b:include
name="commentDeleteIcon" data="comment"></b:include></span></dd></b:loop></dl><p
class="comment-footer"><a onclick="data:post.addCommentOnclick"
href="data:post.addCommentUrl"><data:postcommentmsg></data:postcommentmsg></a></p></b:if><div
id="backlinks-container"><div id="'data:widget.instanceId"><b:if cond="data:post.showBacklinks"><b:include
name="backlinks" data="post"></b:include></b:if></div></div></div></b:includable>
4. Replace all code above with this new html code below
Get The COde Here
[Note: sometime, somehow, if you copy that code, the single quote ‘ character will change to this symbol `i really have no idea
how could that happen. but if it so, please change it back to single character again ‘ to make it work.]
Update:in the code above, you’ll see this line :
http://lifewg.googlepages.com/html-code-leave-comment.gif
You can change that image with your own image if you want to.
5. copy all this html code below on top of your it’s usually second last line of your html code.
<script languange="javascript">function showcomment(a,b){var bloggerstationdotcom =
document.getElementById(a);bloggerstationdotcom.style.display = 'none';bloggerstationdotcom = document.getElementById
(b);bloggerstationdotcom.style.display = 'block';}</script><script languange="'javascript'">function showcomment(a,b){var
bloggerstationdotcom = document.getElementById(a);bloggerstationdotcom.style.display = 'none';bloggerstationdotcom =
document.getElementById(b);bloggerstationdotcom.style.display = 'block';}</script>
6. Find this code below:
<span class="'post-comment-link'"><b:if cond="'data:blog.pageType"><b:if
cond="'data:post.allowComments'"><a class="'comment-link'" href="'data:post.addCommentUrl'"
onclick="'data:post.addCommentOnclick'"><b:if cond="'data:post.numComments">1
<data:top.commentlabel/><b:else/><data:post.numcomments/>
<data:top.commentlabelplural/></b:if></a></b:if></b:if></span>
7. Change or replace with this code below:
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if
cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.url + "#comments"' ><b:if
cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/>
<data:top.commentLabelPlural/></b:if></a></b:if></b:if></span>
8. and then click on the “Save Template” button.
9. Look at your blog now, it should now has a commenting system under each post.
Popup Window will let you have all submitted comments placed on top of the comment form, so it’s good rather then have those
placed on the left side of the comment form, so your readers have to scroll it to right first if they want to leave a comment.
But you can try both of them to see the differences ...
Remove Pencil and Screwdriver and Spanner(Wrench) quick editing icons permanently
0 comments Posted by life king at 2:14 PMpermanently get rid of quick editing icons !!
We have received numerous complaints of bloggers seeing those "irritating" quick editing icons - the pencil 
icon and you will be editing/deleting the Page Element you want to edit/delete.OK, if getting rid permanently of those very useful quick edit icons is what you want, here is how you can do it:
Permanently get rid of quick editing Pencil icon for postsSign into Blogger (Dashboard), click SETTINGS for the relevant blog and you will be in the SETTINGS > BASIC sub-tab by default. Just a bit down from the top of the page, you will see "Show Quick Editing on your Blog?". Click the down arrow and select "No" At the bottom, click "Save Settings". (Warning: There is a button "Delete this blog" very near that "Save Settings" button, and it is not uncommon to hear of bloggers who accidentally deleted their blog this way). Once you have done that, you will never see the quick editing Pencil icon again.
Permanently get rid of quick edit screwdriver and wrench (spanner) icons for Page Elements (widgets)Sign into Blogger (Dashboard). Click LAYOUT for the relevant blog. Click TEMPLATE tab, followed by EDIT HTML sub-tab. Before you do any editing of the template, backup the template PLUS the Page Elements. See Backup and edit New Blogger template PLUS backup Page Elements. Once you are done with that, you will still be in the template editor window. Tick the "Expand widget templates" box and wait for the template to fully expand. Then look for this line of code:
<b:include name="'quickedit'/">