10 Stylish Search Box For Blogger Blog

As we provide stylish labels widget for blogger blog now, we are going to tell you about some stylish search boxes for blogger blog.The search box is very important for every type of blogs because it allow your visitors to search on your blog and find anything that they need.

You can see the live demo of this widget in a sidebar of our template.

How To Add Search Box Widget In Blogger.

To Add this gadget to your Blogger template, please follow the below steps.

• First Copy the codes of any search box that are given below. 

• Go to your blog dashboard.

• Go to Layout.

• Click on add gadget in sidebar or footer where you want to show this.

• A new window will open.

• In the new window click on HTML?Java scripts

• Paste You codes in content box and hit click on save.

• Done! Go to your blog and see a result.

Dynamic Width (Expandable) Search box

Before Mouse Hover

After Mouse Hover Effect

<style>#nbc-searchexpandbox1{padding:10px;}#nbc-searchexpandsubmit1{border:1px solid #111111;background: #111111;padding:5px;color:#ffffff;font:14px verdana;}#nbc-searchexpandinput1{-moz-border-radius: 10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;border:1px solid #dcdcdc;background:#ffffff;padding:5px;color:#888888;font:14px verdana;transition: width 2s;-webkit-transition: width 2s; /* Safari */-o-transition: width 2s; /* Opera*/-moz-transition: width 2s; /* firefox*/width:65px;}#nbc-searchexpandinput1:hover{width:200px;}</style><div id='nbc-searchexpand1'>         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchexpandbox1">            <input name='q' id='nbc-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>            <input id='nbc-searchexpandsubmit1' type='submit' value='Search'/>         </form>      </div>

Animated stylish search box for blogger
                               

<style>fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {  margin: 0;  padding: 0;  border: 0;  font: inherit;  vertical-align: baseline;}/*-------------SEARCH-------------*/#searchForm fieldset {    width:240px;    position:relative;    display:block;}div.input {    width:120px;    padding:5px 15px 7px 15px;    border-radius:20px;    border:1px solid #c6d2db;    border-top:1px solid #b4c1cb;    box-shadow:inset 0 1px 2px rgba(0,0,0,0.08);    float:right;    background:#e8edf1;}    div.input.focus {        border:1px solid #9ecbe2;        box-shadow:0 0 6px #abdcff, inset 0 1px 2px rgba(0,0,0,0.08);    }input#s {    width:100%;    border:0;    border-radius:20px;    background:transparent;    height:16px;    color:#b4bdc4;    text-shadow:0 1px 1px #fff;}    input#s:focus {        outline:none    }input#searchSubmit {    width:19px;    height:19px;    text-indent:-9999px;    overflow:hidden;    background:url(../images/search-icon.png) no-repeat;    border:0;    position:absolute;    top:7px; right:13px;    z-index:5;    display:none;    cursor:pointer;}</style> <div id="main">            <form id="searchForm" action="/search">                <fieldset>                    <div class="input">                        <input type="text" name="q" id="s" placeholder="Enter your search" />                    </div>                    <input type="submit" id="searchSubmit" value="" />                </fieldset>            </form> </div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="http://pastebin.com/raw.php?i=J6Kpa2Pf"></script> <script src="http://pastebin.com/raw.php?i=yu6FUA1L"></script>

Search box for blogger with color changing effect

<div class="flexsearch"> <div class="flexsearch--wrapper"> <form class="flexsearch--form" action="/search" method="get"> <div class="flexsearch--input-wrapper"> <input class="flexsearch--input" type="text" placeholder="search here..." name="q" /> </div> <input class="flexsearch--submit" type="submit" value="&#10140;"/> </form> </div></div><style>/*********************** * Essential Structure * ***********************/.flexsearch--wrapper { height: auto; width: auto; max-width: 100%; overflow: hidden; background: transparent; margin: 0; position: static;} .flexsearch--form { overflow: hidden; position: relative;} .flexsearch--input-wrapper { padding: 0 66px 0 0; /* Right padding for submit button width */ overflow: hidden;}.flexsearch--input {  width: 100%;}/*********************** * Configurable Styles * ***********************/.flexsearch--input {  -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;  height: 40px;  padding: 0 46px 0 10px; border-color: #888;  border-radius: 35px; /* (height/2) + border-width */  border-style: solid; border-width: 3px;  margin-top: 15px;  color: #333;  font-family: 'Helvetica', sans-serif; font-size: 26px; -webkit-appearance: none; -moz-appearance: none;} .flexsearch--submit {  position: absolute; right: 0; top: -10px; display: block; width: 60px; height: 60px;  padding: 0;  border: none; margin-top: 20px; /* margin-top + border-width */  margin-right: 5px; /* border-width */ background: transparent;  color: #888;  font-family: 'Helvetica', sans-serif;  font-size: 27px;  line-height: 60px;}.flexsearch--input:focus {  outline: none;  border-color: #2288bb;}.flexsearch--input:focus.flexsearch--submit {  color: #333; }.flexsearch--submit:hover {  color: #2288bb;  cursor: pointer;}::-webkit-input-placeholder { color: #888;  }input:-moz-placeholder {  color: #888}</style>

You can change the orange text with your text.

Pure Clean Search Box

We are also using this box on your blog.

                     

<style>#searchbox {    background: #d8d8d8;    border: 4px solid #e8e8e8;    padding: 20px 10px;    width: 260px;}input:focus::-webkit-input-placeholder {    color: transparent;}input:focus:-moz-placeholder {    color: transparent;}input:focus::-moz-placeholder {    color: transparent;}#searchbox input {    outline: none;}#searchbox input[type="text"] {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZigraXTuxxVhpqtsA5cGV6lB2OA4GXgK-drTkF_7PC-vVo1tRCVM0q1V0UR84l3J4c6a5t4Mt3lHqCR_PKxYnHDaeDx-jtJBc0e0II2ngj6iOJ5aGE_eiswFOqcgS06-ld-om2_s-amh0/s1600/search-dark.png) no-repeat 10px 6px #fff;    border-width: 1px;    border-style: solid;    border-color: #fff;    font: bold 12px Arial,Helvetica,Sans-serif;    color: #bebebe;    width: 55%;    padding: 8px 15px 8px 30px;}#button-submit {    background: #6A6F75;    border-width: 0px;    padding: 9px 0px;    width: 23%;    cursor: pointer;    font: bold 12px Arial, Helvetica;    color: #fff;    text-shadow: 0 1px 0 #555;}#button-submit:hover {    background: #4f5356;}#button-submit:active {    background: #5b5d60;    outline: none;}#button-submit::-moz-focus-inner {    border: 0;}</style><form id="searchbox" method="get" action="/search"><input name="q" type="text" size="15" placeholder="Type here..." /><input id="button-submit" type="submit" value="Search" /></form>

just Clean Search Box 
                                        
                                           

<style>#nbc-searchsimplebox1{padding:10px;}#nbc-searchsimplesubmit1{border:1px solid orange;background: orange;padding:5px;color:#ffffff;font:14px verdana;}#nbc-searchsimpleinput1{-moz-border-radius: 10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;border:1px solid #dcdcdc;background:#ffffff;padding:5px;color:#888888;font:14px verdana;}</style><div id='nbc-searchsimple1'>         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchsimplebox1">            <input name='q' id='nbc-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>            <input id='nbc-searchsimplesubmit1' type='submit' value='Search'/>         </form>       </div> 

Search Box With Color Changing Button
This one is also clean and with go button, button will change its color on mouse hover
                                                 

<style>
.form-wrapper {
    width: 95%;    padding: 8px;
    margin: 100px auto;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: #dedede #bababa #aaa #bababa;
    box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
    border-radius: 10px;  
    background-color: #f6f6f6;
    background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
.form-wrapper #search {
    width: 89%;
    height: 20px;
    padding: 10px 5px;
    float: left;  
    font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
    border-radius: 3px;    
}
.form-wrapper #search:focus {
    outline: 0;
    border-color: #aaa;
    box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
}
.form-wrapper #search:-moz-placeholder {
    color: #999;
    font-weight: normal;
}
.form-wrapper #search:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
}
.form-wrapper #submit {
    float: right;  
    border: 1px solid #00748f;
    height: 42px;
    width: 100px;     padding: 0;
    cursor: pointer;
    font: bold 15px Arial, Helvetica;
    color: #fafafa;
    text-transform: uppercase;  
    background-color: #0483a0;
    background-image: linear-gradient(top, #31b2c3, #0483a0);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;    
    text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}

.form-wrapper #submit:hover,
.form-wrapper #submit:focus {    
    background-color: #31b2c3;
    background-image: linear-gradient(top, #0483a0, #31b2c3);
}

.form-wrapper #submit:active {
    outline: 0;  
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;  
}

.form-wrapper #submit::-moz-focus-inner {
    border: 0;
}
</style>
<form class="form-wrapper">
    <input type="text" id="search" placeholder="Search this site here...." name="q" required />    <input type="submit" value="go" id="submit" />
</form>

So these were searched boxes for you I hope you enjoy this and get one of them for your blog .If facing any problem let me know. 

Posted By: Unknown

2

Read More

Awesome Label Widget for Blogger with Hover Effect

Labels are superb to categorize our posts in different groups.As we know blogger also allow us to show our blogs labels on our blog in sidebar or footer.They can be show in two formats one is a list, and another is cloud and today we are going to make our labels widget beautiful by adding some CSS to our template.

Before we start I want to tell you what will be a result after customizing cloud label widget in blogger here are images of the result.

Before

After 

How To Make Labels Widget Beautiful In Blogger

To make changes follow the below steps.

• Go To Your Blogger Dashboard.
• Go to Template click on Edit Html.
• Find   ]]></b:skin> in your template.

Tip  :- Click inside Html editor press Ctrl+F and find codes quickly

• Now add the below codes just above to ]]></b:skin>.

/*-----Widget by ourbloggerhelp.blogspot.com start----*/.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:12px; color:#666; }
.label-size:hover { border:1px solid #6BB5FF; text-decoration: none;-moz-transition: all 0.5s ease-out;  -o-transition: all 0.5s ease-out;  -webkit-transition: all 0.5s ease-out;  -ms-transition: all 0.5s ease-out;  transition: all 0.5s ease-out; -moz-transform: rotate(7deg);  -o-transform: rotate(7deg);  -webkit-transform: rotate(7deg);  -ms-transform: rotate(7deg);  transform: rotate(7deg);  filter: progid:DXImageTransform.Microsoft.Matrix(                     M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1;  }
.label-size a  { text-transform: uppercase; float:left; text-decoration: none; }.label-size a:hover  { text-decoration: none; }

• You can also change the font size by changing the blue code.

• Save the template.

• Now Go to Layout 
• Click on add gadget in sidebar section or footer section.
• A pop-up window will open scroll down and Click on Labels.

• Now Set the setting of your tags gadget as shown in the image below and save it.

Go visit to your blog to see a result it will also change its color and position on hover.

So this was our awesome tag widget for blogger blog with hover effect.Have any question or want to regard or have any suggestion related to this post just comment below.

Posted By: Unknown

0

Read More

How to Add Image Alt Tag in blogger

After posting 10 On page Seo Tricks that you should this post will also teach you something about Seo.Image optimization for a search engine is useful to rank your images in Google or any other search engine image results.Image alt tag is one of the ways to do this, so we are going to tell you about how to add image alt tag in blogger. in this post 

What Is Image Alt & Why I should Add It?

Search engines can't watch images they can only read texts because they work with machines and Softwares.So by adding alt tag in our image we can tell crawler about our image.Crawler read images alts and show the result.If you want to rank your images, add these tags to your every picture on your site.

How to add Image Alt Tags In Blogger Post

To add alt tags to your images in blogger posts just follow me.

• Go to blogger posts editor.
• Click on the picture.
• Click on Properties.
                                          
  
  
  
  
• A new box will open just add your title and alt there.
                                      
• Click on ok.

Here you will see to options title text and image alt.The title text is a text that shows to the visitor on hovering mouse cursor on a photo.

How To Add Alt Tag To Image In Html.

We also put images in our blogger template like logo, fav icon and other images to add an alt tag to them add the below codes in HTML.

  <img src="Paste-Your-image-url-here" alt="write-Your-image-alt-here"></img>

Now change the text in red with your img URL and orange with your image-alt.

Tips to Write Smart Alt Tag

• Your Image alt tag should relate to your image
• Don't add same for every image
• Write short as possible
• You can also put "-" or "+" between words.
• Add Keywords.     7 places to add keyword in blogger
• Don't make it for Serch Engine Make it user-friendly easy to read and understand.

Need Any Help

Hy buddies if you have still a problem in adding image alt tag in blogger please let me know in the comment box.

Posted By: Unknown

8

Read More

How To Add Meta Description In Blogger

Seo is vital to get higher rank in the search result. Meta description is one of the most powerful parts of search engine optimization.Every web page should have descriptions.Without this I think your site is incomplete for SEO.You should add description to your blog to get more clicks on a post in SERPs.

What is Meta Description?

These are some Html or XHtml codes present in <head> section of our site.It tells a user about your posts in search-Result by showing just below to your title.It will not show on the blog.Most of the people clicks on content after reading their description so you should add these tags to your Blogger blog or any other site that you are using.

Benefits Of This Tags.

• The search engine can learn more about your post.
• Not only S-E it will also help visitors to identify what is in it, your web page.
• The awesome description can get more clicks on content.

How To Add Meta Description In Blogger

As we only teach something about blogger so here, I will only guide you how to add a description to Blogger blog and also in every single post.

• To add these tags just go to your blog dashboard
• Go to template click on edit HTML.
• Add the below codes just below to <head> in our template.

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Note: - If these tags are already present in your template then don't add this.

If you are using custom templates, also look there for codes look like this.If found them delete that tags.

<meta expr:content='Any words that are describing your blog or any thing else' name='description'/>

The text in orange color maybe change in your template.

• Save your template.

Now move to next steps.

• Go to blogger Setting>>>Search Preferences 
• Here you will see description option in the top just click on Edit.

• Check on the yes new box will appear and add a smart description here about your blog to define your blog.
                           
  Tip: - Use less than 150 characters.
• Hit click on save changes button.

Now you have successfully added meta description for your blogger blog.

Add Description For Every Single Post.

After enabling meta description for a blog, it is very easy to add meta description to every single post on the blog.

To do this follow these simple steps.

• Go to your Post Editor
• Now here you will see a search description option click on it and write some words about your article.

That's all we did enjoy!!

How To Write Killing Description For Post.

Here are some things that you should keep in mind while adding your post-description.

• You should cover it in under 150 characters.
• It must be related to your content.
• You can also add your keywords in it.
• Define your post well so visitors can understand it better.
• Add smart words to get clicks.

Have any problem.

If you have any problem in adding meta description in blogger template feel free to share with us, we will do our best to help you.

Posted By: Unknown

1

Read More