Don't Miss

Latest Posts
Browsing Category "Freebies"

Add 9 Beautiful Search Boxes to Blogger

- 1 Comment
Having a search box on your blog is always recommended. Search Boxes are the most essential element of a blog, allowing your visitors to dig and find contents. Search boxes allow your visitors search for the content that they are looking for. And as we know that flat design is the hottest design now-a-days so today we are going to share 9 search boxes including flat design boxes. Flat design search boxes are designed by me and i hope that you'll like it.

9 Beautiful Search Boxes to Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Layout >> Click on Add a Gadget and select HTML/JavaScript Gadget from the list of Gadgets
Step 3. Now Copy any 1 Search Box code from below and Paste it in the HTML/JavaScript Widget Box

Style 1

<style type="text/css">
#bgt-searchbox{background:url(http://2.bp.blogspot.com/-ryYzVirpx_U/UtQn1_UHmKI/AAAAAAAADXg/016hUbMuUHQ/s1600/blogolect-sb-style+1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 10px 12px;margin:0;}
form#bgt-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 2 

<style type="text/css">
#bgt-searchbox{background:url(http://1.bp.blogspot.com/-ko2KZ8inX9c/UtQoyIyeQCI/AAAAAAAADXw/HJ2DlYznqvA/s1600/blogolect-sb-style+2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 3

<style type="text/css">
#bgt-searchbox{background:url(http://1.bp.blogspot.com/-8ZCs84g9OBk/UtQqo_GMQeI/AAAAAAAADX4/q3DcrVHmW8s/s1600/blogolect-sb-style+3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 4

<style type="text/css">
#bgt-searchbox{background:url(http://1.bp.blogspot.com/-LkwpzL7FCkk/UtQsHBdjmSI/AAAAAAAADYE/jeVq2NFqxaw/s1600/blogolect-sb-style+4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 10px 12px;margin:0;}
form#bgt-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 5

<style type="text/css">
#bgt-searchbox{background:url(http://4.bp.blogspot.com/-Ntwh5ayMBN8/UtQx6deHsdI/AAAAAAAADYc/2XM3D1NjZLo/s1600/blogolect-sb-style+5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 6

<style type="text/css">
#bgt-searchbox{background:url(http://2.bp.blogspot.com/-3bs2MsjAa2g/UtQyra0jwDI/AAAAAAAADYk/SmKW8k-ZVak/s1600/blogolect-sb-style+6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 7

<style type="text/css">
#bgt-searchbox{background:url(http://4.bp.blogspot.com/--8QgfYEBUMI/UtTQXTwZSXI/AAAAAAAADas/Gs34V-o8qvk/s1600/blogolect-sb-style+7.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 8

<style type="text/css">
#bgt-searchbox{background:url(http://2.bp.blogspot.com/-ySsM9qbfZ74/UtTQ5iscgkI/AAAAAAAADa4/8eAGZ0hNT2Q/s1600/blogolect-sb-style+8.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 9

<style type="text/css">
#bgt-searchbox{background:url(http://1.bp.blogspot.com/-jhub1_JAUks/UtTTxsQnduI/AAAAAAAADbM/wFS2qno3QTQ/s1600/blogolect-sb-style+9.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>  
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Step 4. Hit the Save Button
That's it...
 

10 Free High Quality Flat UI Icon Sets

- 23 Comments
The hottest style right now is Flat UI. Flat UI is an evolutionary step in design. Every one is using this design, whatever its Windows or Cell phones. All the Big Brands are going Flat. Everyone’s talking about it and everyone is doing it. If you aren't using flat design so, let's jump together into this new trend.
Here's some hand picked list of flat designs. I hope you will like it :-)

1- 40 Social Media Flat Icons

2- Flat Social Icons


3- Flat Social Media Icons By Designmodo


4- Flatilicious - 48 Free Flat Icons


5- Free Colorful Icons


6- Flat Social Icons EPS


7- Free Flat Social Media Icon Set


8- Free program Icons


9- FREE PSD - Flat Icons


10- Free Web Icons


From Editors Desk

Whether Flat UI will stick or another design will be coming in next years remains to be seen.
What do you think? Let us know in the comments.