5 Aralık 2012 Çarşamba

how to customise blogger search box


GOODLOOKING SEARCH BOX FOR YOUR BLOG
Search box is another important part of your blog. A visitor uses your searchbox to find a text. A good-looking searchbox makes funny to search. We'll learn how to create a searchbox from zero, and how to customise default search box in your blog.
An ordinary searchbox looks like bellow


This is very simple, i think it needs some clothes, i don't like naked search box, we'll dress it up with some CSS code.
Demo:
Log in blogger dashboard and:
(!) Back up full template first
1- Dashboard >> Design >> Add a Gadget >> HTML/Javascript. After these steps copy-paste following code
FORM CODE


2-Save it and follow the steps:
Dasboard >> design >> edit HTML >> Expand Widget Templates. Then search the tag </head> with CTRL + F key combination, add bellow CSS code just before/above it.

CSS CODE


MORE CUSTOMIZATION

.searchsubmit{ background-color:#000;
background-image:url(ADD an URL);
width:106px; height:30px;
font-size:13px; font:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFF;
font-weight:bold; border:1px #000 solid;}
background-color: #1a1a1a;
border: 2px solid #FF0000;
height:30px;
text-align:left;
text-decoration: none;
font-size: 1.05em;
color:#FFF;
text-indent:30px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;














LOOK AT THE IMAGE FOR CUSTOMIZATION

0 yorum:

Yorum Gönder