How to Add Google Search Box in Header Section of Thesis Theme

Thesis theme is really magical theme for professional bloggers.It’s not tough to optimize design and layout of the different sections.You can add many sections in your thesis theme like latest stories in multiple lists,Google search box,recent posts with thumbnails and title etc.

Today I am discussing about the topic How to add Google Custom Search box in the header section of Thesis wordpress theme.Thesis theme is very easy to customize,you need to edit your custom function file to  add search box in header section.

Step #1: Open your custom_functions.php file and insert following hook but make sure to backup the copy of custom_functions.php in your computer.

function my_header_ad() { ?>
<div id="leaderboard_ad">
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>

  <div class="cse-branding-form">
    <form action="http://technogati.com/search" id="cse-search-box">
      <div>
         <input type="hidden" name="cx" value="partner-pub-5707807752184136:m3vtkk-9iia" />
        <input type="hidden" name="cof" value="FORID:10" />
        <input type="hidden" name="ie" value="ISO-8859-1" />
        <input type="text" value="Search Technogati" onfocus="this.value = '';" name="q" size="53"  style="background:#fff url(http://www.younghabits.com/wp-content/uploads/2010/03/textfield-bg.gif) repeat-x 0 1px; border: 2px solid #47A6B4;  color: #333; font-weight:bold;padding:2px; font-size:12px;"/>
        <input type="submit" name="sa" value="Search" style="background: #188A9B; border: 1px outset #78A024; color: #ffffff; font-weight:bold;padding:2px; font-size:12px;" />
     <img src="http://www.technogati.com/wp-content/uploads/2010/03/powered.gif"> </div>
    </form>
  </div>
<script type="text/javascript"><!--
google_ad_client = "pub-5707807752184136";
/* 468x15, created 4/10/09 */
google_ad_slot = "0259467523";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
  </div>
<?php }
add_action('thesis_hook_header', 'my_header_ad');

Edit and update your custom_functions.php

Step #2 : Now open your custom.css and edit following css code and then save it.

.custom #leaderboard_ad { float: right; position: absolute; width: 468px; height:50px;

 top: 30px;left: 500px;border:1px solid #eaeaea;padding:5px;

 -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px;

 -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; 

-webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}

Your Google search box is ready to make money for you.But you need to edit adsense code of your own adsense account to make money for you.