Category: background

Posted on

Customizing Search Widget

Blogger has introduced its Search Widget so that we can search for terms that are not included in Labels but could be present in the posts. Just like any other widget, you may drag and drop this at any position at the Template – page elements section. Here I shall giving you some self-help instructions so that you can customize the appearance of the widget and the result to suit your blog’s color schema. Before I get into the widget-code and details of style sheet… let see which part related to which section of the code. Its possible to customize everything that appears here… however… I am going to emphasis mainly on the Tabs & Results pane

  1. THE SEARCH FORM

Once you add a search widget to the blog form the page elemets.. and see the HTML of the widget you will notice that
<div class=’widget-content’ style=’width:95%’>
<div expr:id=’data:widget.instanceId + “_form”‘>
<span class=’cse-status’><data:loadingMsg/></span>
</div>

<div class=’widget-content’ style=’width:95%’> Width =95 % determines that the search box occupied the 95% space of the area where you are placing this widget. Lets say you are keeping this widget in the sidebar .. then the search box & the search button together will occupy the 95% of the sidebar. Play around with this number .. you will see the search box decrease and increase in length accordingly

<div expr:id=’data:widget.instanceId + “_form”‘> Here you will notice “form” which means that the search box and the search button are put togather in a form when this widget was created… and the developer has deiced to make them appear in the same line. So If you feel like putting the search button below the search box.. then I am afraid.. it doesn’t seem to be possible now. However.. we can always play with the width and decide on the optimum width that suits your blog

<data:loadingMsg/>This is something that shows the “LOADING…..” message when the page is being downloaded in the browser… you can delete this tag and add you own custom message as …” Wait..” or something else

  1. TABS ( OPTIONS YOU CHOOSE WHILE CONFIGURING THIS WIDGET)

If you remember… while configuring the search widget in the Page Elements Section.. you have the options to allow search to be performed amongst the posts / texts in Your Blog – Links that you have given in your blog – The Entire Web. Now the results for these options appear as Tabs ( see pic). Blogger has provided us with the default style sheets for the search widget so that we can modify the appearance of the Tabs & Results ( after all this is what the reader sees after hitting the search button)

The Edit-HTML of your template ( Check the Expand widgets box) will have the following. You can give the color codes of your choice and see the difference it makes in the appearance of the tabs

For ..ACTIVE Title -TAB For…INACTIVE Title-TABS

#uds-searchControl .gsc-tabhActive
{
border-color:<data:borderColor/>;
border-top-color:<data:activeBorderColor/>;
background-color:transparent;
color:<data:textColor/>;
}
#uds-searchControl .gsc-tabhInactive
{
border-color:<data:borderColor/>;
background-color:transparent;
color:<data:linkColor/>;
}

  1. DISPLAY RESULTS

The Results pane is always displayed above all of your blog posts. You will see the following in your template which is responsible for the appearance of the Results in your blog . You may see that I have changed the background color to the value of the pale turquoise color

#uds-searchControl .gsc-results
{
border-color:#cccccc;
background-color:#D7FDFC;
color:black;
}
With a little customization.. the dull looking ( but very effective) search box can be given a total makeover so that it begins to look like a part of your blog.If this post has been helpful you… pass the word and dont forget to link back
Your appreciation is my motivation

From Deepa’s Template Tips

Posted on

Have a Static Background

How about a picture that stays in its place as a background for your blog.. and the rest of the blog contents moves over it..Something that you can see here.Instructions to do this to your blog is as follows.Read on..

  1. SAVE AND BACK UP YOUR TEMPLATE< /span>
  2. Its my personal experience that uplaoding the pic to blogger and then using that URL to act as background does not work quite the way we want it to.So its best to use some file hosting service that allows backlinking.I have used Fileden.

  3. In your Template-Edit HTML Locate the
    body {
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    }

  4. To that add the following
    background-image: url(“URL of the background picture“);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center top;

  5. Now your final code might look like this
    body
    {
    background-image: url(“(“URL of the background picture“);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center top;
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    }

  6. Save and View

hope you were able to include this in your blog.Do drop a word at the comments page..And it will make me extra happy if you included this link in the CREDITS list.Tell us how you liked this…

From Deepa’s Template Tips

Posted on

To have Background picture for your header

Many custom templates offered by blogger beta either does not have a Background picture.. or the picture presented by default may not suit our taste. You too can have a custom looking header to your blog.Just follow the instructions closely

  1. SAVE YOUR TEMPLATE
  2. in TEMPLTE -EDIT HTML LOOK FOR
    #header-wrapper
    {
    width:700px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }
  3. Add the background-image: url(THE URL OF YOUR PICTURE); to your header-wrapper
  4. So that your final code should look something like this
    #header-wrapper
    {
    width:700px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    background-image: url(THE URL OF YOUR PICTURE);
    }
    • If the picture of your choice is in the web.. then give the webURL
    • IF the Picture is in your hard disc then
      1. Then have a new post and insert that picture
      2. Go to edit html page…. You will see the html code for that picture
      3. Copy paste that code into a notepad
      4. Publish this new post (don’t worry u can delele later)

    • Use the URL u got from the previous step to get that picture on the header
    • IF you are satisfied with the new look of the header then you can delete the post having the picture. Don’t worry.. this will not affect the header…as the picture is stored in blogger
  5. SAVE and view your blog

You make me happy by comming and reading this post.You can make me feel little more happier by dropping in your comments.Good luck to have your customised header picture

From Deepa’s Template Tips

Posted on

3 colum Header

Many would like to have header with compund attributes.The header you see here has single picture in the background with 3 colums.The middle colum has the Blog Title and description the right-colum has a clock and i have left the left-colum empty.

PHASE: 1

  1. Look for
    &ltb:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=‘no’>

  2. delete–maxwidget=’1′

  3. change–showaddelement=’yes’

  4. save

  5. Your final line of code should look like this
    &ltb:section class=’header’ id=’header’ showaddelement=’yes’>

PHASE:2

  1. Template—Page Elements

  2. You must be able to see the “Add Page elements” in the header section

  3. Delete the Existing header

  4. Add new page HTML-JavaScript element

  5. Copy paste the code into a Notepad and make required URL changes

  6. After making the changes Copy paste the code to the HTML-Javascript widjet that you just added in the header section

  7. Save and view your blog

PHASE:-3 Addendum Thanks to jsanchirico
You may change the following to suit your template color-schema

  1. This uses the “Table within a table” kind of logic

    2. Table 1—— has one Row and one colum
    |   First row of this table has the picture
    |
    |___Table 2 is inserted into the row1 of table 1
    | |______Table 2 has 1-row and 3-colums
    |
    Now the title is written inside the 2nd colum of the table 2
    I have left the 1st colum blank and insert a JScript code for clock in 3rd colum

  2. So feel free to come up with your own version

  3. &width=”760px” background=”URL_OF THE HEADER PICTURE” height=”150px Just change the height of you find your header to be too large

  4. Sometime the larger font size will also affect the header height.In such case make required alterations herespan style=”font-size:21.0pt; color:white” YOUR BLOG DESCRIPTION

  5. If your header stylesheet has a bacground image..just delete it

    6. As for Example:-

    #header {
    background-color: #A9B5BF;
    background-image: url(http://nea.ngi.it/templates/img/33-onde.jpg);
    background-position: top;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px;
    border-color: #375267;
    height: 150px;
    margin-bottom: 5px;
    }

IF you liked this feature do let me know. It will make me happy.If you face any difficulty do drop a comment, i shall respond at the earliest.
And..dont forget to include me in your credits section

From Deepa’s Template Tips

Privacy Policy - Terms and Conditions