Add stiles search box in blogger

 

You can see. In my right sidebar has a search box and it is very stiles. You can also use it in your blogger blog.

Fast log in your blogger account and go to Design>Edit HTML and find this code.

]]></b:skin>

Now paste this code just before   ]]></b:skin>

.searchbox {

overflow:hidden;

padding:0 0 10px;

}

.searchbox .searchformtop {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ_eHOzBDx5kHDAaZraXV2He8rRzitvsWOiCfqLWFS0yu8nxLm0frMRmokH54sOwyzlj82bTefmOzPEIgbX8YiDNtiJcMH8G8jbjYzQ17B1r6aw2a_sSdEaXhs0uqg2DnXUc9QqzCkiNg/s1600/searchformtop.png) no-repeat scroll right top;

border:medium none;

color:#999999;

float:left;

font-family:Verdana,Helvetica,sans-serif;

font-size:14px;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:normal;

height:28px;

line-height:normal;

margin:5px 0 0;

overflow:hidden;

padding:6px 5px 0;

width:129px;

}

.searchbox input.gosearch {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoi2KdvHZbaZg-4W8wXz-x5938YfJGCPWCoY61Dvehc5bjSsBPOzmrmJKk-ZNP8KixI9LnNbX7ESqXm2gmUo-7X5Tmqm35BIbKdQOInSyUTgRyuD_bF6Ss_YVsu2Wgw9VEUkH37scplIM/s1600/searchbutton.png) no-repeat scroll 0 0;

float:left;

height:28px;

margin:5px 0 0;

width:63px;

}

.searchbox input.gosearch:hover {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiue17avja0Jj3qCUcGPt6zFhLi76RSR-hKidx1ejQWB7kmHToEynel9qRQbhqvNTZS6LdGaZZGnUlAhhpBJann3AceBXFF1yxLDJDKpVotYfBdYxF5LGgTaoTYSxPg3IktxrIDDBr45qw/s1600/searchbuttonh.png) no-repeat scroll 0 0;

}

 Go to the Page Elements >Add a Gadget > HTML/Javascript
Now copy and paste this code in to the widget:

< form action='/search' id='searchthis' method='get'> < input class='searchformtop' name='q' type='text' value=''/> < input class='gosearch' src='http://2.bp.blogspot.com/_qJFbsMHBJNg/SoaVwtb_tmI/AAAAAAAAAKY/AozFO3K- i9w/s1600/trans.png' type='image'/> < /form>

Save your  Gadge /Widget.



Note: This search box made by Klodian.

Continue Reading →

How to Change Blogger Header font Size

I thought this is very simple tips but useful.   Fast log in your blogger account.  Go to the Design> Edit HTML .

Find this code or some think like that.

#header h1 {

font-size:42px;

font-size-adjust:none;

font-weight:bold;

letter-spacing:-1px;

line-height:normal;

margin:5px 5px 0;

padding:1px 1px 3px 0;

text-transform:none;

}

Change  font-size:42px; and save your template.

Continue Reading →

How to Add Smiley Icon in blogger Comment

Fast log in blogger.

Go to Design> Edit HTM and find this code and click Expand Widget Templates

<b:if cond='data:post.embedCommentForm'>

Paste this code after <b:if cond='data:post.embedCommentForm'> code.

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

You have also find  </body> and paste this code just after.

<script src='https://sites.google.com/site/neshibly24/tuakurti/smiley.js' type='text/javascript'/><noscript><a href="http://blogger-shibly.blogspot.com/" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript>

Now save your template.

Scorch:  http://bloggerstop.net/ and http://MyDataNest.com

Continue Reading →

How to Change Blogger blog Post font Size

Much time we need to change our blog post font size. We can do it easily.

• Fast log in your blogger account and go to Design> Edit HTML
• Now fond this code or some think like that.

.post h3 {
color:#007ACC;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:25px;
font-weight:normal;
text-align:left;
line-height:1.4em;
margin:0;
padding:0 0 8px;
}

• Change the font-size: or don’t remove the px;.

Just save your template.

Continue Reading →

How To add Keyword and Description on blogger blog

Meta keyword is one important way to optimize your website search ranking. So, meta keyword important.
Fast log in Blogger and go to Design>HTML and Find <b:include data='blog' name='all-head-content'/> this code (You can also use Ctrl+F keyboard shortcut)

Now copy this code just after <b:include data='blog' name='all-head-content'/> .

<meta content='DESCRIPTION' name='description'/>
<meta content='KEYWORDS' name='keywords'/>

And customizes the red color code.

DESCRIPTION= Your blog Description.
KEYWORDS= Your blog Keywords.

Now save your template.

Continue Reading →

How To Add Widget Beside The Blogger blog Header

How to add widget beside the blogger blog Header? It is very easy and useful to add adsense winget.

1. Fast log in your blogger. Go to Design > Edit HTML and find this code and knew your blog size

#header-wrapper {

width:950px;

margin:0 auto 10px;
border:1px solid $bordercolor;
}

2. Now find

#header {
color:#000000;
text-align:left;
}
Some think lick that.

3. Change to

#header {
width: 400px;
float: left;
margin: 5px;
text-align: center;
color:#000000;
}
#header-right {
width: 400px;
float: right;
margin: 5px;
color:#000000;
}

This way you will get header to right and the sidebar widget section to left.

4. Now comes the part where it would add a widget section to blogger header. Find the bellow section:

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="YOUR BLOG TITLE (Header)" type="Header">
</b:section>
</div>

5. And replace it with:

<b:div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="YOUR BLOG TITLE (Header)" type="Header">
</b:section>
<section class="header" id="header-right" showaddelement="yes"></section></div>
</b:section>
</div>

Now seve your themplate.

Continue Reading →

How to Change Post Title Font Size Blogger Blog

Go to Design>HTML and find the following code:

.post h3 {
color:#007ACC;
font-family:Georgia,"Times New Roman",Times,serif;
font-size:25px;
font-weight:normal;
text-align:left;
line-height:1.4em;
margin:0;
padding:0 0 8px;
}

Now change size and save template.

Continue Reading →

How to use custom favicon in blogger blog

For those who don't know what Favicon is 'Favicon is a small icon(image) displayed at the beginning of the address bar of the browser.It is also called Favourite Icon,Pageicon and urlicon.


The main advantage of creating and using favicon is ,it makes it easy to find your blog or site when someone favourited or bookmarked your site/blog among several other sites.

Follow those steps to add your favicon in blogger blog.

1. Fast Create a 16x16 .png format icon.

2. Upload it any host. You can also use draft blogger post.

3. Now the favicon link copy a notepad and log in in your blogger dashboard > layout> HTML.

4. Press CTRL+F and find <title><data:blog.pageTitle/></title> code.

5. Add <link href='PNG FORMET ICON LINK' rel='shortcut icon' type='image/png'/> code just after <title><data:blog.pageTitle/></title>.

Now save your Template.

Continue Reading →