How to Create Your Own Cursor in HD

How to Create Your Own Cursor in HD

Read More

Compress 3 GB into 10 MB !!!!

See The Video

Read More

How To Change Text Selection Color In Blogger

• Go To Blogger >> Template >> Edit HTML
• and search for ]]>

 

Right above it, paste this code: 

::-moz-selection  { Background: #EB7F17; color: #FFFFFF; text-shadow: none;    
}
 ::selection   { background: #EB7F17; color: #FFFFFF; text-shadow: none;    }

• Now make these changes:
• Replace #EB7F17 with the highlight color
• Replace #FFFFFF with the Font color. By default the font color appears white.

Read More

Create A Grab Our Button/Badge Widget And Add It To Blogger

Grab our button/badge is a most amazing way to promote your blog via other blogs,Your blog fans or users can easily add this on their blog. 

• Go to Cooltext (Follow the image instructions below )

After you customize all windows hit RENDER LOGO button at bottom left and   

download the image.

• 4. Upload it and get URL of the downloaded image like .png or .jpg

CODE No. 1

<center> <div dir="ltr" style="text-align: center;" trbidi="on"> <a href="Blog URL"><img alt="" src="IMAGE URL" title="Title On Mouse Hovering" /></a></div> </center>

• Replace Blog URL with your blog address.
• Replace IMAGE URL with your uploaded badge url.
• Replace Title On Mouse Hovering with Title which you want on mouse hovering.

How To Add This

• Copy above code after customizing and paste it in Notepad (important)
• Encode copied code using HTML Code Encoder.
• Now Careful.....

CODE NO. 2

<center> <input type="text" onclick="this.focusundefined);this.selectundefined)" readonly value="Paste Encoded Code Here" /> </center>

• Replace Paste Encoded Code Here with encoded code. 
• Now go to Blogger >> Dashboard >>  Layout 
• Then select Add a Gadget >> HTML/JavaScript. 
• Copy and paste code no.1 just below that paste code no.2 and give title like Grab Our Button 


• Now save your changes and refresh your blog to see changes. 

Please write comments about this tutorial or tell me any faults which you found while creating and publishing. I will always there to help you....

Read More

Awesome Floating Facebook and Twitter Widget For Blogger

First See The Demo

Demo

How To Add This

 Go to Blogger Dashboard > Design > Page Layout.
2. Choose Add a Widget > HTML/Javascript.
3. Don't give any name to widget.

4. Paste code in content section.

<div id="footmod"> <div style="position:fixed; top:80px; right:10px;"> <a href="http://twitter.com/ShirazShakeel1" target="_blank"><img title="Follow Us On Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPDTQ_Ahe5sCCAX9DTak4R3ap-U7ZvMHUpM-0kho8-6jbnc3qFyvUdbs8_AnZhDQNJ83NrDe7eDOKqQgM7dk-TptmJJQL2mkgXU9T-wDtwl0lRVbZ6-jzNX2eguZSue0yZd_dq16L8kCU/s1600/btsnts.blogspotcom.png" border="0" /></a><div style="margin-top:15px; z-index:999px;"> <a href="http://www.facebook.com/GamesAndSoftwaresAndManyMore" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIxnNfCVN1l71UiuFGgXU5CrFQ8DaB9-t5xzM4LZKcQMudrpbUITB3kMV8YKRI-dHjJu_jDMxT7WSG7OcCYO4wvSb04hpqwGDc-Fmpo_r2JmzErKhMvkt3VMHTa0mcE9lEH6giBJZZeGg/s1600/facebook_btsnts.png" width="100px" alt=" Follow us on Facebook "/></a><center> <div style="font-size:10px;"><a href="http://goo.gl/DY2mx">Get This</a href="http:></div style="font-size:10px;"></center> </div> </div> </div>

Replace ShirazShakeel1 With Your Twitter Username

Replace GamesAndSoftwaresAndManyMore With Your Facebook User Name

Read More

Slide Out Social Bookmarking Gadget With jQuery For Blogger

How To Add This Gadget 

Gadget Demo

For better understanding I am dividing this tutorial in 3 simple steps,just follow them carefully and you will add this gadget very easily to your blog.

1.  Adding jQuery Plugin
2.  Adding Google +1 Button Script
3.  Adding the Gadget

1.  Adding jQuery Plugin

Note - Ignore this step,if you have already added 

jQuery plugin to your blog.

Go to Blogger Dashboard > Template

Click Edit HTML

Now find below code in your template

</head>

add below code just above it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

 2. Adding Google +1 Button Script

Find below code in your template

<head>

add below code just below of above code

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

3.Adding The Gadget

1. Now go to Page Layout
2. Click on Add a Gadget
3. Select HTML/JavaScript
4. Leave title field blank
5. Paste below code and save it
6. Drag the widget to bottom of your page.
7. Finally save your changes

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function () { jQuery(".hbslidebox").hover(function () { jQuery(this).stop().animate({ left: "0" }, "medium"); }, function () { jQuery(this).stop().animate({ left: "-70" }, "medium"); }, 500); }); /*]]>*/ </script> <style type="text/css"> .hbslidebox { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0q4j8JT4ushyphenhyphen8IoM6bs7LvMRYgnAFbyZ_ehs9lXsoGxTKA3eDE5AkvVcYrcR2gSXuR6riVkP_JHPxIbSaF596Zx9ALRtBCa1TDKDPiJ5EvOfDpmvplt_tGA63dpC7V48CuSE8VuVQcjo/s1600/helperblogger.com-tab_left_vertical.png") no-repeat scroll right top transparent !important; display: block; float: left; height: auto; padding: 0 45px 0 0px; width: 65px; z-index: 99999; position:fixed; left:-70px; top:20%; } .hbslidebox div { border:none; position:relative; display:block; } #floatingbuttons { background: #fff; border-radius: 5px 5px 5px 5px; border: 1px solid #CCCCCC; float:left; padding:0 0 3px 0; bottom:15%; z-index:399; } #floatingbuttons .floatbutton { float:left; clear:both; margin:5px 4px 0 4px; } .addbuttons { clear:both; text-align:center; padding-top:5px; } .addbuttons a span.getfloat, .addbuttons a span.sharebuttons { color:#000; background:none; font-family:arial, sans-serif; display:block; font-size:9px; font-weight:bold; text-decoration:none; line-height:11px; } .addbuttons a:hover span { color:#fff; background:none; text-decoration:underline; } </style> <div class="hbslidebox" style=""> <div> <div id='floatingbuttons' title="Share this post!"> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"> </script> <script type="text/javascript"> (function () { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script> <!-- Medium Button --> <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script> <div class='floatbutton' id='facebook'> <fb:like layout="box_count" show_faces="false" font=""></fb:like> </div> <div class='floatbutton' id='google+1'> <g:plusone size="tall"></g:plusone> </div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='floatbutton' id='digg'> <a class="DiggThisButton DiggMedium"></a> </div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> </div> <div class="addbuttons"> <a href="http://goo.gl/IIN1R" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a> </div> </div> </div> </div>


Hope all of you will like this gadget.Peace Buddies :)

Read More

Add Shareaholic Sassy Bookmarks To Blogger

How To Add Shareaholic Sassy Bookmarks To Blogger

• Go to Blogger Dashboard > Template
• Now find for below code in your template

</body>


add below piece of code just above/before of above code.

<!-- Start Shareaholic Sassy Bookmarks HTML (http://shirazshakeel.blogspot.com)--> <div class="shr_ss shr_publisher"> </div> <!-- End Shareaholic Sassy Bookmarks HTML (http://shirazshakeel.blogspot.com) --> <!-- Start Shareaholic Sassy Bookmarks settings --> <script type="text/javascript"> var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}}; </script> <!-- End Shareaholic Sassy Bookmarks settings --> <!-- Start Shareaholic Sassy Bookmarks script --> <script type="text/javascript"> (function() { var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true; sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s); })(); </script> <!-- End Shareaholic Sassy Bookmarks script (http://shirazshakeel.blogspot.com) -->

• Now save your template and you are done

• I hope you will like this gadget.

Read More

Smooth jQuery Multi Level Drop Down Menu For Blogger - V1

How To Add Multi Drop Down Menu To Blogger

• Go to Blogger Dashboard > Design > Layout. (In new User Interface Dashboard > Layout)
• Click on add a gadget link just below of Header

Paste below code and save it.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script><script type="text/javascript">ddsmoothmenu.init({ mainmenuid: "smoothmenu1", orientation: 'h', classname: 'ddsmoothmenu', contentsource: "markup" })</script> <style> .ddsmoothmenu { width: 100%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9yER6BpkIQXJX9ERzReolOG9mDLlqu5MnPTpOnVpYyLCYDOjKUyF2nW6UvMkRr_eEv_6zS4k04ZimiG_2G9iAGfSnEvpG97Jr15cCYY7rgzmVcPcjJDPo0b5vIc_afKbIoRqVlj3Gxi0/s1600/menu-bg.png); vertical-align: middle; height: 33px; font-family: Verdana; font-size: 13px; font-weight: bold;} .ddsmoothmenu ul { z-index: 100; margin: 0; padding: 0; list-style-type: none;} .ddsmoothmenu ul li { position: relative; display: inline; float: left;} .ddsmoothmenu ul li a { display: block; color: white; padding: 8px 10px; border-right: 1px solid #778; color: #666666; text-decoration: none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9yER6BpkIQXJX9ERzReolOG9mDLlqu5MnPTpOnVpYyLCYDOjKUyF2nW6UvMkRr_eEv_6zS4k04ZimiG_2G9iAGfSnEvpG97Jr15cCYY7rgzmVcPcjJDPo0b5vIc_afKbIoRqVlj3Gxi0/s1600/menu-bg.png);} * html .ddsmoothmenu ul li a { display: inline-block;} .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited { color: white;} .ddsmoothmenu ul li a.selected { background: black; color: white;} .ddsmoothmenu ul li a:hover { background: black; color: white;} .ddsmoothmenu ul li ul { position: absolute; left: 0; display: none; visibility: hidden;} .ddsmoothmenu ul li ul li { display: list-item; float: none;} .ddsmoothmenu ul li ul li ul { top: 0;} .ddsmoothmenu ul li ul li a { font: normal 13px Verdana; width: 160px; padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray;} * html .ddsmoothmenu { height: 1%;} .downarrowclass { position: absolute; top: 12px; right: 7px;} .rightarrowclass { position: absolute; top: 6px; right: 5px;} .ddshadow { position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver;} .toplevelshadow { opacity: 0.8;} </style> <div id="smoothmenu1" class="ddsmoothmenu"> <ul> <li> <a href="http://www.helperblogger.com/">Home</a> </li> <li> <a href="#">Folder 0</a> <ul> <li> <a href="#">Sub Item 1.1</a> </li> <li> <a href="#">Sub Item 1.2</a> </li> </ul> </li> <li> <a href="#">Folder 1</a> <ul> <li> <a href="#">Sub Item 1.1</a> </li> <li> <a href="#">Sub Item 1.2</a> </li> </ul> </li> <li> <a href="#">Item 3</a> </li> <li> <a href="#">Folder 2</a> <ul> <li> <a href="#">Sub Item 2.1</a> </li> </ul> </li> <li> <a href="http://shirazshakeel.blogspot.com/2013/01/smooth-jquery-multi-level-drop-down.html">Create This</a> </li> </ul> <br style="clear: left" /> <br style="clear: left" /></div>

That's It 

Read More

Breadcrumbs Navigation Widget For Blogger

Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title.There is also option for showing the multiple labels in this navigation i.e. if any post have more than one label then it will show all of them.

Add BreadCrumbs Navigation For Blogger

Go to Blogger Dashboard > Template

1. Click on Edit HTML
2. Hit Proceed
3. Now find below code,

<b:include data='top' name='status-message'/>

just above it copy and paste below code,

<b:include data='posts' name='breadcrumb'/>

Now find below code Tip : (if you find two occurrences of this, then locate the second one)

<b:includable id='main' var='top'>

just above it paste below code,

<!-- Breadcrumb Navigation By www.shirazshakeel.blogspot.com -->
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'>
 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
 <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
 <b:loop values='data:post.labels' var='label'>
 <b:if cond='data:label.isLast == "true"'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
 </b:if>
 </b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'>
 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
 <b:if cond='data:blog.pageName == ""'>
 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
 <b:else/>
 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>
 </b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<!-- Breadcrumb Navigation By www.shirazshakeel.blogspot.com -->

This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, then you will have to remove the code in line number 16 and 18.

Now find below code,

]]></b:skin>

add below CSS code just above it,

.breadcrumbs {
background: #F7F7F7;
float: left;
border: 1px solid #E6E6E6;
width: 575px;
font-size: 11px;
margin: 10px 10px 10px 10px;
padding: 5px 10px 5px 10px;
}

Now save your changes and you are done.

Thanks ! ! !

Read More

Fixed Position "Share This" Sharing Bar For Blogger

How To Add Share This Buttons To Blogger

Go to Blogger Dashboard > Design > Edit HTML.

Now search for

</head>

add below code just above it.

<script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

Now find for below code in your template,

</body>

add below piece of code just above it

<b:if cond='data:blog.pageType == "item"'> <script> var options={ "publisher": "ur-a2599f1-8136-72d-5d41-d74061e0b4fc", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "pinterest", "email", "sharethis"]}}; var st_hover_widget = new sharethis.widgets.hoverbuttons(options); </script> </b:if>

Now save your template and you are done...

Read More

Related Posts Widget With Image Thumbnail For Blogger

How To Add Related Posts With Thumbnail For Blogger

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Download a copy of your template first.
3. Tick  "Expand Widget Templates" checkbox.
4. Now search for below tag in your template

</head>

Just above it paste below code,

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float: center; text-transform: none; height: 100%; min-height: 100%; padding-top: 5px; padding-left: 5px; font-size } #related-posts h2 { font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “ Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a { color: black; } #related-posts a:hover { color: black; } #related-posts a:hover { background-color: #6E6E6E; color: #ffffff; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44n3HRSiB8041J-fNuHEc5R2UlP-w7qmLiQTgppA_Mgs_u0IKCuHGBY4oNeAQ18Ni1deaHQfsyi2gpr5OYiooPvBXcr8oJ6WpDHOyeYdK5Rgj5-E3_5JnjnOp1A-941l3V58ZeFMwhPc/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle=""; </script> <script src='http://code.helperblogger.com/hb-related-posts.js' type='text/javascript'/>> <!-- remove --> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

Now search for below code in your template,

<div class='post-footer-line post-footer-line-1'/>

Now place below code snippet just before of above line,

<!-- Related Posts with Thumbnails Code Start--> <!-- remove --> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div> <div style='clear:both'/> <!-- remove --> </b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a></b:if></b:if> <!-- Related Posts with Thumbnails Code End-->

Now save your template and go to your blog,you will watch this widget just below of your posts.

Customizations

• To change the title of widget find the Related Posts in 2nd code.
• To change the number of posts to display find this var maxresults=5; code in 2nd code.

Read More

Beautiful And Sleek Search Boxes For Blogger

How To Add Sleek Search Boxes To Blogger

1. First choose any search box below
2. Copy the code of that search box
3. Go to Blogger Dashboard > Layout
4. Click Add a Gadget
5. Select HTML/JavaScript
6. Paste code and save it
7. Drag it to the top of your siderbar,if you are good blogger :)

Search Box Style 1

<style type="text/css"> #helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjv73f9DsSaAuo_fpqGxnNqImkbzpA-PR6C06G__MmjDyVlSI1VIp4B7cEXMcnefDnj_-sw1hz0BHFH-QUgSbFURC7EiGR-oBblOHZMJkm6Hcyinn_cNB7GQg_YCuKsXSoi1ImM_qtkQg/s1600/www.shirazshakeel.blogspot.com-white.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent; } </style> <div id="helperblogger-searchbox"> <form id="helperblogger-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>

Search Box Style 2

<style type="text/css"> #helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiksGIeQHvTBFxnn7yA50Uilpf7xg-i3dtuyZVlhhyphenhyphen925-o6dTYGfSgZpRXSn4tedlzsmYPqH11LLUdzogavmomNS3QkwsrLGnM_8RVdPz_GXvf9Jmk3P73RA5U_OvdGfk-FC1E_gK3ep4/s1600/www.shirazshakeel.blogspot.com-blue.png no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent; } </style> <div id="helperblogger-searchbox"> <form id="helperblogger-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>

Search Box Style 3

<style type="text/css"> #helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnXcW-e5h-fvIQdGQQDI1QfTciOv3Dc5DPobSDjsapvVO3l7ne9ZcRt4H7MLB7cTQnWdtt4cphfKHMQkFU8xfDl13a6YKNDD0lZFuqjJB7EUlkHcGNDNQlFADuN0ur5cL5Hx5okohNPPk/s1600/www.shirazshakeel.blogspot.com-black.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent; } </style> <div id="helperblogger-searchbox"> <form id="helperblogger-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>

Search Box Style 4

<style type="text/css"> #helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNSCXrEuYGNPjCQZ9L6zaiw3lqgRDdLnuRboRv-MItcCL6zT8-CUC7MuMb5kCH2-uykjdk8jrMyU__KDfdwzQapHUmb6QH4397KZMY_u3hLW73P4Orcz1ib8tG4WNSiF3qPPPeUWZ87X8/s1600/www.shirazshakeel.blogspot.com-orange.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent; } </style> <div id="helperblogger-searchbox"> <form id="helperblogger-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>

Search Box Style 5

<style type="text/css"> #helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPq-V4ODqv-DhW9tAvyQ5ml0nAAlwbDOf74HnqmvNe8nLguKsDm2Mnfi6e902jQADTYWR57fecFDaHtbTPG52DnhqDkpV8Zi8sMaXCfqRdbzBLkyjnmyFjiCslH9TpeHz2o-ib2_56QhY/s1600/www.shirazshakeel.blogspot.com-pink.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent; } </style> <div id="helperblogger-searchbox"> <form id="helperblogger-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>



I hope you have enjoyed this all search boxes :)

Peace Buddies :)

Read More