How To Add Search Box to Search in Your Blogsite(Website)

Hi my dear visitors. today im gonna show you how to a search box to blogger, I my self find out that Blogger Search engine is not good . Its result is not accuracy . I search for a term but it give me some posts that is not related to what I search . so here is the custom search box to blogger. i hope you really like my bpost. thank you for visitng my blog! we will meet again in next post.!

1.Login to your blogger account.Go Design--> Add a Gadget --> Select “HTML/JavaScript

2.Copy below code and paste it.Click save and refresh your site

<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>NAME OF YOUR BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>



Note: Remember to replace "YOUR BLOG URL" and "NAME OF YOUR BLOG" with your
details.
If you want to change the size of your search box than just change the value 20 to 35(any
value you like to get a bigger search box.
You can also change the “Search” button to say, “Hit” or “Go” or "Enter" or "Read more",
by changing the Value in the above html code.

3.You can see search box like below one.

Tips n Tricks

How To Add Message Box Like Wordpress With Close Button

How To Add Message Box Like Wordpress With Close Button 

1.Login to your blogger dashboard--> desing- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag.

3.Copy below code and immediately after it paste ]]></b:skin> tag.

<script src='https://sites.google.com/site/bloggertricksandtoolz/massegebox-jquery.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.close&quot;).click(function(){
$(&quot;#info&quot;).animate({left:&quot;+=10px&quot;}).animate({left:&quot;-5000px&quot;});
});
blink();
});
function blink(){
$(&quot;#info&quot;).fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).fadeOut(400).fadeIn(400);
}
function nudge(){
$(&quot;#info&quot;).animate({left:&quot;+=5px&quot;},20).animate({top:&quot;+=5px&quot;},20).animate({top:&quot;-=10px&quot;},20).animate({left:&quot;-=10px&quot;},20)
.animate({top:&quot;+=5px&quot;},20).animate({left:&quot;+=5px&quot;},20)
.animate({left:&quot;+=5px&quot;},20).animate({top:&quot;+=5px&quot;},20).animate({top:&quot;-=10px&quot;},20).animate({left:&quot;-=10px&quot;},20)
.animate({top:&quot;+=5px&quot;},20).animate({left:&quot;+=5px&quot;},20);
}
</script>



<style type='text/css'>

#info{
border: 1px solid;
margin: 0px 0px;
padding:5px 5px 15px 5px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #00529B;
background-color: #BDE5F8;
background-image: url(&#39;info.png&#39;);
}

</style>

4.Scroll down to where you see <data:post.body/> tag.

5.Copy below code and paste it just after <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style="" id="info"> YOUR MASSAGE HERE <a href="#" class="close"> CLOSE !</a></div>

</b:if>

Note: Replace YOUR MASSAGE HERE with your text.

6.Now click "Save template" your are done.

Cheers

How To Add Animated Notice Box to Blogger

How To Add Animated Notice Box to Blogger

1.Login to your blogger Dashboard and go to Desing --> Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<style>

#info{

border: 1px solid;

margin: 10px 0px;

padding:15px 10px 15px 50px;

background-repeat: no-repeat;

background-position: 10px center;

position:relative;

color: #FFF;

background-color: #000000;

background-image: url('http://i46.tinypic.com/jzf8tk.jpg');

}

</style><script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">

</script>



<script type="text/javascript">

$(document).ready(function(){

$(".close").click(function(){

$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});

});

$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)

.fadeOut(400).fadeIn(400);

});



</script>

<div id="info">

<a class="close" href="#close" style="float: right;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-VsNiQMyKJVS0lrg5oAKb16DoCjOAqIAvISiVh76JR7TPU_c_FjvSTNweQx_4pcrPctLMY4hWi8x8Yks3044E8hsTtoPIKFvImFjKh5JKFlL3SuTKM7ZGv5GemSqtCkJyjIBiEDA82gs/s1600/images.jpg" /></a>

Hello This is test Notice...

Note: Replace Hello This is test Notice. with your notice..

4.Now Save "Html java Script" your are done.

Cheers

How To Make Text Area With Auto highlight on Mouse Over

How To Make Text Area With Auto highlight on Mouse Over

1.Login to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

<textarea rows="5" cols="15" onfocus="this.select()" onmouseover="this.focus()" style="display: inline;" name="txt" onclick="this.focus();this.select()">

Enter your text or code here

</textarea>

Note : Replace Enter your text or code here with your text or code

Look at the example below.





Now you are done..