BLOGGER TEMPLATE: EARTHY

A modified version of the Binary Template, now called Earthy

 It now looks girly with its very light floral background and earthy touch of color. I didn't change anything with the layout as it looks perfect as it is--neat and clean! I also wanted to change the social media icons and the search box to match the femininity of this template but I need a break, so I guess next time :D

Download
Downloads:

Read More...

FREEBIE: KLAUS SEARCH BOX

The Klaus search box is written in pure CSS so there's no need to download anything. And because it's purely CSS, this search box is fully customizable. You can change the size, the style and thickness of the border, the color and the text of the search button and everything else.
The codes for the first search box:

 <style>    
  #search-btn1 {   
  background:#3d3d3d;   
  color:#ffffff   ;   
  font: 'trebuchet ms', trebuchet;   
  padding:10px 20px;   
  border:0 none;   
  font-weight:bold;   
  }   
  #search-box1 {   
  background: #f3f3f3;   
  padding:10px;   
  border:0 none;   
  width:180px;   
  }   
  </style>   
  <form id="searchthis1" action="/search" style="display:inline;" method="get">   
  <input id="search-box1" name="q" size="40" type="text" placeholder=" Search Tweak Peek"/>   
  <input id="search-btn1" value="Search" type="submit"/>   
  </form>   

If you want it with rounded corners like in the second image, add these lines before each closing bracket.

 -webkit-border-radius: 20px;  
 -moz-border-radius: 15px;  
 border-radius: 7px;  

Happy coding!

Read More...

FREEBIE: LEXUS SEARCH BOX

Download

Downloads:

A simple search box with rounded corners. Size is 300x30 pixels. The width and height cannot be adjusted by editing the css codes as the entire search box is a PNG file. So if you find the image too big for your blog, you can use your favorite photo editor to shrink its size and change some of the css codes to make it look perfect. This pack contains 11 different colors of the Lexus Search Box.

Instructions:

1. Extract the images from the zip file.
2. Upload the png file in your preferred color to your favorite file host. (Tinyurl, Picasa, Photobucket, etc)
3. Get the link and replace the code highlighted in fuschia below.

CODE

 <style type="text/css">  
 #searchbox {  
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1YgqOhpLufH0ETJTWgqBdFFVUIocNhqUpC0P7kYON19BYAqx5KVqvgjeGFRqLkfhLB9QFE_7-fOV9Are3lCUtt0fuUvPvUGpMn_k77Sy6pXjigGIaY20bWMtd_N_yGQ_GhJ8RQzRuISZq/s300/red.png) no-repeat scroll center center transparent;  
 width:307px;  
 height:50px;  
 display:block;  
 }  
 form#searchform {  
 display: block;  
 padding: 12px;  
 margin:0;}  
 form#searchform #s {  
 padding: 6px 6px 6px 16px;  
 margin:0;  
 width: 257px;  
 font-size:14px;  
 vertical-align: top;  
 border:none;  
 background:transparent;  
 }  
 form#searchform #sbutton {  
 margin:0;  
 padding:0;  
 height:30px;  
 width:30px;  
 vertical-align: top;  
 border:none;  
 background:transparent;  
 }  
 </style>  
 <div id="searchbox">  
 <form id="searchform" action="/search/max-results=8" method="get">  
   <input type="text" id="s" name="q" value=""/>  
 </form>  
 </div>  

That's it! Having trouble? Leave a comment :D

Read More...

FREEBIE: SEARCH ICON IN DIFFERENT COLORS FOR EXPANDABLE SEARCH BOX

Lazy or don't know how to edit the search icon for your expandable search box?
I'm here to help :)

While other elements of the search box can be modified by making a few changes with the css codes, we can't do it to the search icon. So we're gonna have to replace the icon with a different one in a different color to match it with your blog's template. Below are the colored search icons you can choose from. To use them, simply right click on each image, and click COPY IMAGE URL. Paste it to your code where it says:

 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwqkslmDw9lQNl21Qv_ULNiLYTKuWO2VJeaKKskKx3PPTQqiG5gFHRdKtiSxZka4Ti1SjLBZXCHcC_rEE1OwWeX6gOfZG_YDPR4MbL1EPLtAmiyHkiuXk8twNrv9Khcp9oLqXbshCK0dRY/s20/black.png) no-repeat 8px 4px #ffffff;  

Replace the text in fuschia with your copied URL. Save it and you're done!

I hope you found the perfect shade. Happy blogging!

Read More...