Add a Search Engine to Your Blog

Installation a search engine in blog of course will make your visitor is easier to find the articles in your blog, for the reason hence opening the big opportunity of your articles will in reading by many visitors.

To the point, to add this search engine to your blog, following this step :

* Login to blogger with your ID

* After entering the dasboard page , click Layout.


# Click at Page Element tab.





# Click at Add a Page element.

# After emerging pop up window , Click add to blog button for the things HTML/JavaScript.



# Copy and paste the code below into available column :

<form id="searchThis" action="/search" style="display:inline;" method="get">
<input id="searchBox" name="q" size="20" type="text"/> <input id="searchButton" value="Search" type="submit"/>
</form>

# Click Save Changes

* Finish. Please see the result.


At the code above, you'd meet the code be like this :

size="20"

The code is to arrange the wide of seach box. You can change it according to desire, ever greater of his value of course more wide. Example :

size="25", size="30"

And you will find the code like this :

value="Search"

You can change this word with your word. Example :

value="GO !"

Or possibly you still confuse with the steps above?


Just click the button for automatically install to your blog.

How to Send Recent Comments on your Email

Possibly this tips a lot have known it, however don't close possibility is which not yet known it. This tips is about every your visitor give a comment at your blog automatically sending to your @mail inbox. So that every the comment entering in blog direct in sending automatically to yout @mail, hence you have to do setting at setting tab. This is the steps :



1. Login to blogger with your ID.


2. Click Settings.



settings


3. Click Comments.



comments


4. Scroll to underside and you will find a box near the article Comment Notification Address, write your email address inside the box. for example : noob@gmail.com



5. Click Save settings



6. Finish.




Now you'd get an email from blogger.com every your blog visitor give a comment.

How To Make a Post Summary (Read more Function)

If you are a beginner, possible you'd feel to surprise when seeing the articles in my blog presenting only shares first paragrap or second paragrap, and to read for full article, you must click Read more... link. Alright.. please don't feel surprise, i will discuss about this now.

The function like that called Post Summary. You can make a post summary function with add a little code to your template code. But this code is for new blogger template (beta) and does not work at classic template.

Please follow the steps below :

Step #1 :

1. Login to blogger with your ID


2. In the dashboard page , click Layout.


3. Then click edit HTML tab.


4. Click the Download full template link. Save your template (very important)


5. Please mark the little box beside Expand Widget Templates. Wait for a moment.

6. Go to your template code, and find the code like this :

<p><data:post.body/></p>

7. Delete the above code and change 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>

8. Click Save Template button


9. Step #1 is done.




Step #2 :

1. Click Setting tab.


2. Click formatting tab.


3. 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>

4. Click Save settings button.


5. Step #2 is done.




How to post your article?

When you post your article, choose Edit Html Tab. and you will see the code below :

<span class="fullpost">


</span>

Place the first paragraps above of :

<span class="fullpost">

and above of :

</span>

and then publish your post. Done.


If you still feel confuse, this is the example how to place your article:


Testing ... blog test... one two.....
<span class="fullpost">
This is a Test for read more add on on blogger.. brought to you by noob.niteshkothari.com
</span>

At front page of your blog, will show just like this :

Testing ... blog test... one two..... Read more...

The last, if you try this hack and you not succes, don't be panic. upload your backup template, and it's will be back to template code before you do edit.

How to change the template

At this opportunity, I will discuss about how to change template in blogger.com. First matter to be in considering in changing template is you have to make a backing up your old template, this good for if you feeling not match with your newly template. if you not yet known the way to back up template, please read at the post how to backup template, and also don't forget to back up your widgets (this is very important). For back up your widgets, please read at the post how to backup your widgets.


To change the template, of course you must had a new template to uploaded. If still not yet had, you can download for free template at Falconhive.com or at other sites. Have ready for changing your old template with newly template? Please follow the steps below :


# Login to blogger with your ID


# After entering the dasboard page , click Layout. Please saw the picture :






# Then click edit HTML tab. Please saw the picture :






# Click the Download full template link. Save your template:






# Click browse... button. Choose your new template. and then click Upload button.


# Usually go out commemoration that your data in your widgets will be delete forever (so don't forget to backup your widgets).

Finish. Please look he result.




Now you have had the new face. However of course your template is still empty, So next step is inserting your widgets manually through page element menu.

How to backup your "Widgets"

If emerging question do we require to back up the data in page element? the answer is very require to. Because if you change your old template with new template, hence the data in page element will follow to be vanished, and you'd lose all data be like : guest book, blog accessory, blog tool, and also all which have been attached in your blog forever.


Many the way to back up the data in Widgets / page element, but i'm limitation of time to comment it in detail, hence I will try explain just two way, that is backing up directly from Page element and also backup from template source code.

# Back up widgets From Page Element


Back up widgets in this way be in fact very disturbing, however than we lose various accessory and also tool which have been attached, wiser likely to do so.

Please follow the steps below :

1. Login to blogger with your ID


2. Click Layout.


3. Click menu Page Elemet, you will see the page be like this ( just example):



At representative of above seen the article edit which I give red circle, You must click at Edit in each the page element, hence will emerge popup window figuring in the code have in input to that. Pay attention the picture below :



5. Copy the code inside there, and paste to Notepad.


6. Repeat the step above at all the elements.


7. Finish.




There is the step how to back the data inside page element. This is the other way to backup your widgets.



# Back up widget through Template Source Code


I think this way is more quickly and efisian, you need a few time to do this. This is the steps :

1. Visit your blog address.


2. After you at your self blog, click the menu View at the bar menu. See the picture below :



# After click the menu View, will be out the sub menu, then click Source.


# if your browser is Internet Explorer, so there is automatically will out the notepad with your template source code. If your browser is Mozilla Firefox or Opera, so there is out the new page with your template source code For example, see the picture below :



5. Save your template source code.


6. Finish.




If your question, where is the widgets code? there is always begin with :

<div class='widget-content'>


And in terminating with code :


</div>

For example, in my template source code. there are code be like this :

<h2 class='title'>Buku Tamu</h2> <!-- this the title of your widget -->

<div class='widget-content'> <!-- look at this code -->
<!-- Begin Shoutbox - http://www.shoutmix.com -->
<iframe scrolling="auto" width="170" frameborder="0" src="http://www.shoutmix.com/?jaya" height="500" title="jaya">
<a href="http://www.shoutmix.com/?jaya">View shoutbox</a>
</iframe>
<br/><a href="http://www.shoutmix.com" title="Get your own free shoutbox at ShoutMix!"></a><br/>
<!-- End Shoutbox -->
</div> <!-- look at this code too -->

So, my widget code is like this :

<!-- Begin Shoutbox - http://www.shoutmix.com -->
<iframe scrolling="auto" width="170" frameborder="0" src="http://www.shoutmix.com/?jaya" height="500" title="jaya">
<a href="http://www.shoutmix.com/?jaya">View shoutbox</a>
</iframe>
<br/><a href="http://www.shoutmix.com" title="Get your own free shoutbox at ShoutMix!"></a><br/>
<!-- End Shoutbox -->

I hope with this post you become know how to backup your widget template. So, if you want change your template with a new template. Please don't forget to backup your template and your widgets too.

How to backup the template

If you were interested to replace new template or want to redesign your template, It is best to backup your template before you changing any code. this step was as prevented to reduce the fatal risk if the mistake happening in redesign or changing your template. For you that did not yet know how to backup your template, please followed steps below :

1. Login to blogger with your ID


2. After entering the dasboard page , click Layout. Please saw the picture :






3. Then click edit HTML tab. Please saw the picture :






4. Click the Download full template link. Please saw the picture :






5. After you click Download full template link, then will emerge new window just to download. Click the Save button. Saw the picture :






6. You could choose this data would in kept where and with what file name what, Afterwards ended with click of the Save button. Please saw the picture :






7. Finish.




Now you had back up the template, if next time you needed him, you could use this came back. But must be known, backing up the template like steps above could not back up the data inside widget.

Create Popup Image Viewer Using CSS in Blogger

To setup popup Image viewer in your blog First of all copy the following CSS Code and paste it between <head> and </head> Tags of your Template.

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 263px;
left:282px; /*position where enlarged image should offset horizontally */

}

</style>

Second step is to paste the following Code into your blog Posts.

<a class="thumbnail" href="#">
<img src="http://www.t2tibet.com/Images/mount-everest.jpg"
border="0" height="66" width="100" /><span>
<img src="http://www.t2tibet.com/Images/mount-everest.jpg" /></span></a>



Replace the Image Url above with your image Url and see your work done.