It's Back!

I had not taken care of this blog for a long time but now i have decided to work on it. In the following weeks some minor changes in design and major changes in post frequencies may be expected.
Showing posts with label Blogger tips and hacks. Show all posts
Showing posts with label Blogger tips and hacks. Show all posts

Enable comment forms

When a visitor comes to your site and clicks to post a comment, a popup window opens up.This may be annoying for users specially with slow internet speeds,So they may find a reason to dislike your site.You can avoid such mishaps like this by changing the commenting style to a comment form.It's not very though and is one of the options that blogger provides you.
Enabling comment forms:
  • Go to your dasboard
  • Click on the settings button of the blog you want to edit
  • Go to the comments section
  • Change the 'comment form placement' to 'embedded below post
  • Save settings and preview any post

Smileys for comments

Allow visitors to ypur site to add animated smileys to their comments on your site!
To do this,
Enable your blogspot blog's comment form.You can find out how here.
After you have enabled your blog's comment form,
Go to Layout > Edit HTML section
Select the expand widget templates option(found on top-right side of your blog's template code within the text area)
Now press ctrl+f, this is the find option,use this to find the following lines

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

NOTE:The find option does not analyze the details found within text areas in Google Chrome.
Replace them with these lines

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

Paste this code after the </body> tag

<script src='http://dsai.588.googlepages.com/smiley.js' type='text/javascript'/>

Now save your template.
Your smileys are now ready and can be seen in individual post pages.
To display the smileys you have to type the text thet comes after it,for example :)) for the first smiley
FIXED!

Enable comment forms

Enabling a comment form is probably a good idea as it makes it easy for your site's visitors to comment.Previously if visitors had to comment they had to click on a link which would open a pop-up window.After enabling,it's just 2 or 3 boxes!
To enable a comment form, go to the settings section of your blog

See the image and change the settings of the comment form placement
Save changes
After this modification you can see the comment forms below each post.
NOTE: You can also enable smileys for your comments.

Tests

I did some tests for my blogs

1.Speed Test 
These were the results:-
Boltions was the fastest which took only 1.14 seconds to load

2.Pagerank Checker
In great anticipitation of my pagerank I decided to run the test and...
I was not surprised by the results!
The results:-

Display HTML, Javascript in posts

I already explained two methods by whick you can do this but they worked only with CSS(sorry guys!).I have found out this method after much research and testing.
And it was so simple!.
I'm going to reveal it to you now!.
  • Copy or type the code you want to display into notepad.
  • Press Ctrl+H
  • This opens a window which is for find and replace
  • Firstly,In the find type <  and in the replace & lt; (no space between & and lt;)
  • Now click replace all.
  • Now use the same method to replace> with & gt; (no space between & and gt;)
  • Copy the code
  • Create a new post and go to the Edit HTML mode.
  • Paste the code where you want here.
  • That's it!
Here's the example:-
<a href="http://boltions.blogspot.com" target="_blank">Boltions</a>

Simple isn't it

How to display HTML, Javascript and CSS codes in posts.

UPDATE:This is the better and new version.You can see the old version here
  • Go to the layout section of your blog
  • Go to the edit HTML section and find the b:skin tag.It will be like this]]>(b:ski...)(... denotes n!)change the brackets from() to <>
  • Now paste this code directly above this tag

{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:center;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}


Now type each HTML, Javascript or CSS within (pre) and (/pre)[change brackets for pre from () to <>!]

How to type HTML tags in the main area in blogger

LATEST UPDATE:Sorry!.This code only displays only CSS codes inside boxes.For displaying HTML, Javascript codes, click here(tested!)
As a blogger in HTML you would have known that you could not enter HTML codes directly in your post for others to see.A lot of bloggers ask this question and they are answered very rarely.In this post I will show you how to show HTML tags or codes in text for others to see.

Plese replace the ( in the code to < and ) in the code to >
(span style="COLOR: rgb(0,0,0)")
Your HTML code to appear in the first line
(/span)
(br/)
(span style="COLOR: rgb(0,0,0)")
Your HTML code to appear in the second line
(/span)
(br/)

AND SO ON....

As you can see for something to appear in the next line you have to type the whole thing again.You can remove the br in the last line to cancel an extra line break after your code.

How to make the blogspot navbar disappear

This is a step by step instruction on how to remove the Blogspt navbar on top of every Blogspot website.There are two codes
  1. To Reduce the Navbar's height
  2. To reduce the Navbar's visibility
Let us, see both the methods:-
Just paste the following code anywhere between the (head) tags
  1. To Reduce the Navbar's height

#navbar-iframe {
height: 0px;
}


     2.  To reduce the Navbar's visibility

#navbar-iframe {
visibility: hidden;
}


But both these methods do leave a gap above the header which was actually meant for the Navbar.To hide this space also just paste this bit of code anywhere between the head tags:
#navbar-iframe {
visibility:hidden;
height:10px;
}

How to change blogger template without losing widgets.

I am one of those guys who is not happy with anything being the way it is.I would always change my mind after listening to what people say.This was also the same thing in blogger.I could never decide which template was the best so I would always change.Previously I was not satisfied with the template of one of my previous sites.Till now I have passed through what I call my three stages of blogging.
  • The first stage:I always considered that blogger's default template was the best as I could request support from a lot of people like Peter.(about a year ago!)I thought like this as I was a beginner in HTML and knew almost nothing about it.
  • The second stage:I was starting to consider myself as a guy who had more than basic knowledge of HTML, Javascript, Java at this point of time.So I started using templates created by others(they were for free of course!).You could see about them here.
  • The third stage:My current stage.Now I consider myself a guy who may graduate out of a masters degree in HTML in a few months or so!.But I started using blogger templates again for a variety of reasons.You can see why here.
So in my time of passing through the second stage to the third stage,I was thinking that blogger templates were the best as I would have explained above through the link.I had to change my outboard template to a blogger one but while doing so it said the widgets have to be deleted(oh no!).But I knew how to change the template without the widgets getting deleted.
Here is a detail explanantion obtained only through common sense.
  • Save your main blog's tempalte before setting out on this venture(just in case!)
  • Arrange all of your widgets in the same area for example sidebar.
  • Copy your main blog's HTML code which can be done in the Layout section>Edit HTML to notepad
  • Now Hit Ctrl+f in notepad and type in b:widget.
  • You will find all your widgets there
  • Copy all the b:widget lines(each line stands for one widget) to notepad-->1
  • Create a new blog with any template.Name it as 'Test'
  • Go to the Layout section>Edit HTML
  • Upload or enter the code of the template here(continued below)
If you want to change to a blogger template follow the numbered steps
  1. Go to Layout>Pick new template
  2. Pick your new template(all this on test) which you want for your main blog
  3. Go to layout>Edit html
  4. Continue
  • Go to Layout section>Add page element
  • Add any gadget.For example a link list(I'll explain using the link list widget)..
  • If you followed all the instructions above you will have two widgets(title and link list)
  • Now go back to Layout >Edit HTML
  • Use Ctrl+f and find b:widget here also.
  • Find the one which will be Linklist1
  • Paste 1 between the
Plese replace the ( in the code to < and ) in the code to >

(b:section class='sidebar' id='sidebartop') 
(b:widget id='LinkList1' locked='false' title='xxx' type='LinkList'/)
!!!paste 1 here!!!!
(/b:section)
  • Save your template.
  • Now copy the template code and paste it in your main blog.
This method will work assuredly but to paste all other widgets embedded in your template use your common sense again!