BLOGGER: ADD A CUSTOM SEARCH BOX PART II

I assume you have already read the first part of my tutorial in adding a search box and you already have an idea which values to change when you want to change its size, color or its entire look. So this time we don't need to get into details.

Today I will give you the codes to create a search box that expands when you click it.

See it in action Click the magnifier to expand

Click anywhere inside the input box to expand

NOW THE CODES.
FOR THE FIRST ONE:

 <style>  
 .search-field {  
  background-color: transparent;  
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPgVVp8dTuNfkyP1bAhzn2XZbxrU9k8vNvC3Xpw-fdyiGNbiMDDKlKhkY__7SrF-B542Hs6gnvHp5-bb71qdGL8mlOT242vakC8B6r5Fs3dy3lw8LuZ6Mjpo3w9AuqOwmh84Qn8O642Yv/s35/grey.png);  
  background-position: 5px center;  
  background-repeat: no-repeat;  
  background-size: 25px 25px;  
  border: 2px solid transparent;  
  cursor: pointer;  
  height: 35px;  
  margin: 3px 0;  
  padding: 0 0 0 45px;  
  position: relative;  
  -webkit-transition: width 400ms ease, background 400ms ease;  
  transition: width 400ms ease, background 400ms ease;  
  width: 0;  
 color: #222;  
 font-family: Arial;  
 font-size:14px;  
 }  
 .search-field:focus {  
  background-color: #fff;  
  border: 2px solid #575757;  
  cursor: text;  
  outline: 0;  
  width: 250px;
 }  
 </style>  
 <form action='/search' id='search' method='get'>  
 <input class='search-field' name='q' placeholder='Search...' title='Click to Search!' type='text'/>  
 </form>  

FOR THE SECOND ONE:

 <style>  
 #search1 input{  
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwqkslmDw9lQNl21Qv_ULNiLYTKuWO2VJeaKKskKx3PPTQqiG5gFHRdKtiSxZka4Ti1SjLBZXCHcC_rEE1OwWeX6gOfZG_YDPR4MbL1EPLtAmiyHkiuXk8twNrv9Khcp9oLqXbshCK0dRY/s20/black.png) no-repeat 8px 4px #ffffff;  
 border: 2px solid #000000;  
 font: bold 12px calibri, serif;  
 color: #000000;  
 width: 160px;  
 padding: 5px 15px 5px 30px;  
 -webkit-transition: all 0.5s ease 0s;  
 -moz-transition: all 0.5s ease 0s;  
 -o-transition: all 0.5s ease 0s;  
 transition: all 0.5s ease 0s;  
 }  
 #search1 input:focus {  
 width: 200px;  
 outline: none;  
 border: 2px solid #777777;  
 }  
 </style>  
 <form action='/search' id='search1' method='get'>  
 <input name='q' placeholder='Search Tweak Peek' size='40' type='text'/>  
 </form>  

If you prefer the search boxes with rounded corners, or you need them in other colors CLICK HERE. I have a few search icons in different colors for these search boxes. :)

Read More...

BLOGGER: ADD A CUSTOM SEARCH BOX PART I

So Blogger's Search gadget is not working right for you? Same here! I had to find a way to make a working search box. Having one is essential to any blog. The use of the search box saves your visitors time and effort looking into your long list of archives. But we would like to customize our search boxes to match the overall look and feel of our blog. Hence, this post.

Below are two simple search boxes which you can easily customize to match your taste.
Just copy the codes below it and change what's necessary. I will teach you what code to change for each element of the search box.

1. SHARP CORNERS

 

CODE:

 <style>  
 #tpsearch-box {  
 position: relative;  
 width: 220px;  
 margin: 0;  
 }  
 #tpsearch-form   
 {  
 height: 30px;  
 border: 1px solid #999;  
 background-color: #fff;  
 overflow: hidden;  
 }  
 #tpsearch-text   
 {  
 font-size: 12px;  
 color: #ddd;  
 border-width: 0;  
 background: transparent;  
 }  
 #tpsearch-box input[type="text"]  
 {  
 width: 90%;  
 padding: 5px 0 2px 1em;  
 color: #333;  
 outline: none;  
 }  
 #tpsearch-button {  
 position: absolute;  
 top: 0;  
 right: 0;  
 height: 32px;  
 width: 40px;  
 font-size: 12px;  
 color: #fff;  
 text-align: center;  
 line-height: 12px;  
 border-width: 0;  
 background-color: #000000;  
 cursor: pointer;  
 }  
 </style>  
 <div id='tpsearch-box'>  
 <form action='/search' id='tpsearch-form' method='get' target='_top'>  
 <input id='tpsearch-text' name='q' placeholder='Search Tweak Peek' type='text'/>  
 <button id='tpsearch-button' type='submit'><span>Go</span></button>  
 </form>  
 </div>  

2. ROUNDED CORNERS

 

CODE:

 <style>  
 #tpsearchr-box {  
 position: relative;  
 width: 220px;  
 margin: 0;  
 }  
 #tpsearchr-form   
 {  
 height: 30px;  
 border: 1px solid #999;  
 -webkit-border-radius: 5px;  
 -moz-border-radius: 5px;  
 border-radius: 5px;  
 background-color: #fff;  
 overflow: hidden;  
 }  
 #tpsearchr-text   
 {  
 font-size: 12px;  
 color: #ddd;  
 border-width: 0;  
 background: transparent;  
 }  
 #tpsearchr-box input[type="text"]  
 {  
 width: 90%;  
 padding: 5px 0 2px 1em;  
 color: #333;  
 outline: none;  
 }  
 #tpsearchr-button {  
 position: absolute;  
 top: 0;  
 right: 0;  
 height: 32px;  
 width: 40px;  
 font-size: 12px;  
 color: #fff;  
 text-align: center;  
 line-height: 12px;  
 border-width: 0;  
 background-color: #000000;  
 -webkit-border-radius: 0px 5px 5px 0px;  
 -moz-border-radius: 0px 5px 5px 0px;  
 border-radius: 0px 5px 5px 0px;  
 cursor: pointer;  
 }  
 </style>  
 <div id='tpsearchr-box'>  
 <form action='/search' id='tpsearchr-form' method='get' target='_top'>  
 <input id='tpsearchr-text' name='q' placeholder='Search Tweak Peek' type='text'/>  
 <button id='tpsearchr-button' type='submit'><span>Go</span></button>  
 </form>  
 </div>  

You can customize your search box for your blog by editing a few codes. The codes you can edit are in fuschia.

Where it says:
#tpsearchr-box {
position: relative;
width: 250px;
margin: 0;
}
WIDTH. This is the width of the box where you input your query. This excludes the search button(the button where it says Go) Just change the 250 according to your liking.

Where it says:
#tpsearchr-form 
{
height: 30px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}

HEIGHT. If you change the width, you should also adjust the value of height. Change 30px to anything.

BORDER. The thickness of the border(the line around the area that gives it shape) can be changed by changing the value 1px. The larger the number, the thicker the border.

RADIUS. This is what makes the corners of the search box rounded(excluding search button). Adjust this to make it more rounded or less rounded.

BACKGROUND-COLOR. Under #tpsearchr-form, the background-color is the color of the box where you type your query.

Where it says:
#tpsearchr-text 
{
font-size: 15px;
border-width: 0;
background: transparent;
}

FONT SIZE. This is the size of the input text and the placeholder(where it says Tweak Peek). If you changed the width and height, you're gonna have to change this, too.

Where it says:
#tpsearchr-box input[type="text"]
{
width: 90%;
padding: 5px 0 2px 1em;
color: #333;
outline: none;
}

PADDING.  This is what distance between the input text(query) and the border.
COLOR. The color of the input text.

Where it says:
#tpsearchr-button {
position: absolute;
top: 0;
right: 0;
height: 32px;
width: 70px;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 12px;
border-width: 0;
background-color: #000000;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}

HEIGHT. The height of the search button alone.
WIDTH. The width of the search button alone.
FONT-SIZE. The size of text where it says Go.
COLOR. Color of the text where it says Go.
BACKGROUND COLOR. The color of the entire search button.
RADIUS. As mentioned above, this is what gives the round corners. This one is for the search button alone.

Where it says:
<div id='tpsearch-box'>  
 <form action='/search' id='tpsearch-form' method='get' target='_top'>  
 <input id='tpsearch-text' name='q' placeholder='Search Tweak Peek' type='text'/>  
 <button id='tpsearch-button' type='submit'><span>Go</span></button>  
 </form>  
 </div>

Texts in red are editable. 
You can change Search Tweak Peek to Enter keywords or anything that you like.
You can change Go to Search or anything that you like.

That's it! Having trouble? Leave a comment below. :)

 t

Read More...

BLOGGER: USE CUSTOM FONT

The font choices in the Template Designer are very limited and you may not find the best suited for your blog. You may have seen other blogs using fonts that are not available in the Blogger Template Designer and you're wondering how they did it. The easiest way to add a custom font to your blog is thru Google Fonts. There are over 600 fonts to choose from and it's impossible that you won't find a single font that you will like :)
So now I'm going to teach you how to do this.

1. Go to Google Fonts and choose the font you would like to use for your blog. And click the Quick Use button to get the code.

2. A new window will appear which lets you verify your settings and copy your code. Scroll down until you see 3 and 4 which contains the code you need.

3. Go back to Blogger, go to Template and click Edit HTML. Press Ctrl+F, type <head> and press enter. Below the <head> paste the code from number 3 which looks like this:

 <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>  

To avoid errors, close the link tag by adding a slash before the ">" (greater than sign)
So your code should now look like this:

 <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'/>  

4. To add the second code, go to Template Designer > Advanced> Add CSS
Paste the second code but don't save it yet. We need to add a selector above the code.
For changing the font of the POST TITLE, copy the code below and paste above the CSS code generated by Google Fonts.

 h3.post-title {  

5. Add a closing curly bracket at the last line. Your code should now look like this:

Done!


When changing the font of other elements, just change the selector and do the same steps.
Here are some selectors and their description

.Header h1 [blog title]
.Header .description [header description]
.post-body [the text in your posts, excluding sidebar texts]
.date-header [date above the post title]
.widget [text within a gadget/widget]

If there's an element you want to edit but is not listed above, just leave a comment.
Happy coding!

Read More...

BLOGGER: REMOVE THE ATTRIBUTION GADGET

You may have tried removing it like how you would remove other gadgets. Unfortunately, there is no option to remove when you click Edit. So now we will make the Remove button appear so you can finally remove the attribution gadget. Here's how:

1. Go to Template and click Edit HTML.
2. Find the code below by pressing Ctrl+F 



 <b:widget id='Attribution1' locked='true' title='' type='Attribution'>  



3. Where it says true, change to false and save template.





4. When you edit the gadget now, the remove button should appear.


Happy blogging!

Read More...