Loading
Rujacksalad


Change Appereance Of Search Widget On Blogger





In this content Rujacksalad posts about Change Appereance Of Search Widget On Blogger


Search widget in blogger is very necessary for the convenience of visitors, but most of blogger are very uncomfortable with usual or classic appereance on the search widget. In this tutorial I will tell you about Change appereance Of Search Widget On Blogger. Switch the search widget was just replace the css code and appearance will change.

1.  Go to Blogger.com and choose your blog to start.

Change Appereance Of Search Widget On Blogger


2. Add search widget on the layout by clicking "Layout and select Add A Gadged".

Change Appereance Of Search Widget On Blogger


3. If you have installed a search widget, it will look like the image below.

Change Appereance Of Search Widget On Blogger

4. Go to Google Custom Search Engine make Search Engine Widget (you should read "How To Make Search Engine For Your Website Or Blog" first for the details). 

5. Click your Search Engine Widget you have made. Click "Control Panel" to edit.

Change Appereance Of Search Widget On Blogger

6. Click "Look And Feel" to edit the appearance.

Change Appereance Of Search Widget On Blogger

7. At "Choose or customize style", Choose "New! Default" then click customize. to get more detail of the appereance.


Change Appereance Of Search Widget On Blogger

8. In the "Global Settings" tab you select the type of font that you like. And Choose color "Element Styling".

Change Appereance Of Search Widget On Blogger
9. In the "Search Controls" Tab Select colors on the "Search Input" and "Refinement Tab (normal style)". Just skip "The Results and Promotion" tab. If you have set the colors and fonts click "Save & Get Code".

Change Appereance Of Search Widget On Blogger

10. In this stage, just click "Switch To Search Element V1 Code" for getting the css code.

Change Appereance Of Search Widget On Blogger

11. You will see the script, then copy all the script into the notepad.

Change Appereance Of Search Widget On Blogger


12. If you have copied the script into the notepad, now delete some script of the javascript :

<div id="cse" style="width: 100%;">Loading</div>
.....

And

....
var customSearchOptions = {};
    var orderByOptions = {};
    orderByOptions['keys'] = [{label: 'Relevance', key: ''},{label: 'Date', key: 'date'}];
    customSearchOptions['enableOrderBy'] = true;


Change Appereance Of Search Widget On Blogger

13. After you deleting some code of the javascript, now the complete script will be like this, and copy the complete script to your blog template.

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    customSearchOptions['orderByOptions'] = orderByOptions;  var customSearchControl = new google.search.CustomSearchControl(
      '004166051086885592503:hafk4x4wml0', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    customSearchControl.draw('cse', options);
  }, true);
</script>

<style type="text/css">
  .gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gsc-control-cse .gsc-table-result {
    font-family: Arial, sans-serif;
  }
  input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
    border-color: #ffff00;
  }
  input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
    border-color: #ffcc00;
    background-color: #ffcc33;
    background-image: none;
    filter: none;
  }
  .gsc-tabHeader.gsc-tabhInactive {
    border-color: #ffcc33;
    background-color: #FFFFFF;
  }
  .gsc-tabHeader.gsc-tabhActive {
    border-color: #ffcc33;
    border-bottom-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gsc-tabsArea {
    border-color: #ffcc33;
  }
  .gsc-webResult.gsc-result,
  .gsc-results .gsc-imageResult {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gsc-webResult.gsc-result:hover,
  .gsc-imageResult:hover {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
  }
  .gs-webResult.gs-result a.gs-title:link,
  .gs-webResult.gs-result a.gs-title:link b,
  .gs-imageResult a.gs-title:link,
  .gs-imageResult a.gs-title:link b {
    color: #1155CC;
  }
  .gs-webResult.gs-result a.gs-title:visited,
  .gs-webResult.gs-result a.gs-title:visited b,
  .gs-imageResult a.gs-title:visited,
  .gs-imageResult a.gs-title:visited b {
    color: #1155CC;
  }
  .gs-webResult.gs-result a.gs-title:hover,
  .gs-webResult.gs-result a.gs-title:hover b,
  .gs-imageResult a.gs-title:hover,
  .gs-imageResult a.gs-title:hover b {
    color: #1155CC;
  }
  .gs-webResult.gs-result a.gs-title:active,
  .gs-webResult.gs-result a.gs-title:active b,
  .gs-imageResult a.gs-title:active,
  .gs-imageResult a.gs-title:active b {
    color: #1155CC;
  }
  .gsc-cursor-page {
    color: #1155CC;
  }
  a.gsc-trailing-more-results:link {
    color: #1155CC;
  }
  .gs-webResult .gs-snippet,
  .gs-imageResult .gs-snippet,
  .gs-fileFormatType {
    color: #333333;
  }
  .gs-webResult div.gs-visibleUrl,
  .gs-imageResult div.gs-visibleUrl {
    color: #009933;
  }
  .gs-webResult div.gs-visibleUrl-short {
    color: #009933;
  }
  .gs-webResult div.gs-visibleUrl-short {
    display: none;
  }
  .gs-webResult div.gs-visibleUrl-long {
    display: block;
  }
  .gs-promotion div.gs-visibleUrl-short {
    display: none;
  }
  .gs-promotion div.gs-visibleUrl-long {
    display: block;
  }
  .gsc-cursor-box {
    border-color: #FFFFFF;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-page {
    border-color: #ffcc33;
    background-color: #FFFFFF;
    color: #1155CC;
  }
  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    border-color: #ffcc33;
    background-color: #FFFFFF;
    color: #1155CC;
  }
  .gsc-webResult.gsc-result.gsc-promotion {
    border-color: #F6F6F6;
    background-color: #F6F6F6;
  }
  .gsc-completion-title {
    color: #1155CC;
  }
  .gsc-completion-snippet {
    color: #333333;
  }
  .gs-promotion a.gs-title:link,
  .gs-promotion a.gs-title:link *,
  .gs-promotion .gs-snippet a:link {
    color: #1155CC;
  }
  .gs-promotion a.gs-title:visited,
  .gs-promotion a.gs-title:visited *,
  .gs-promotion .gs-snippet a:visited {
    color: #1155CC;
  }
  .gs-promotion a.gs-title:hover,
  .gs-promotion a.gs-title:hover *,
  .gs-promotion .gs-snippet a:hover {
    color: #1155CC;
  }
  .gs-promotion a.gs-title:active,
  .gs-promotion a.gs-title:active *,
  .gs-promotion .gs-snippet a:active {
    color: #1155CC;
  }
  .gs-promotion .gs-snippet,
  .gs-promotion .gs-title .gs-promotion-title-right,
  .gs-promotion .gs-title .gs-promotion-title-right *  {
    color: #333333;
  }
  .gs-promotion .gs-visibleUrl,
  .gs-promotion .gs-visibleUrl-short {
    color: #009933;
  }</style>



14. Back to the blogger again for editing the Search Widget Appereance, Click "Template" > "Edit HTML".

Change Appereance Of Search Widget On Blogger

15. The whole of the template script will show, Click "Expand Widget Templates", Search the script like "CustomSearch" or Pressing "Ctrl + F" (this shortcut usually takes for everey browsers) to find "CustomSearch". 

Change Appereance Of Search Widget On Blogger


16. After you find "CustomSearch", now let's take a look to the CSS Code . Replace the CSS Code script from 

<style type="text/css">

.......

until

.....

</style>

To the Script shown the previous step (Look Number 13).

17. Yes now the search widget appearence is changed, and it will be like the picture below.

Change Appereance Of Search Widget On Blogger

18. I Hope You Enjoy This Tutorial. : D

0 Comment:

Google Plus  Twitter  Youtube  RSS Feedburner

Categories

Computer
Creative
Gadget
Game
Hardware
Internet
Laptop
Movie
Music
Phone
Photography
Software
Tablet