Awesome Multi-Colored Popular Posts Widget for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <h2 class="post-title entry-title"> </h2> <div class="post-header"> </div> <div class="akash" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3X0D_-gIofd3YPLMSkrsZ09durG9MwQ_ldO-OZPs7QWogVw060dd3jleHVtrpO2rgE21cLr9Qo_fh-O9HcmfJ6xa-sEyWoQ9cyvfDOn5kLxubFI2dX4yg723ygH0TkKmaQeIH-LBYFU8/s1600/popular-posts.jpg" /></div> Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is not so good.<br /> <br /> <a href="http://www.blogger.com/null" name="more"></a><br /> <div class="demo"> <blockquote class="tr_bq"> Demo shows in bottom right side  <span style="font-size: 41px;">→</span><br /> Features of this Widget</blockquote> <blockquote class="tr_bq" style="text-align: left;"> <ul style="text-align: left;"> <li><blockquote> Flat UI colors used (it will attract users attention)</blockquote> </li> </ul> <blockquote> </blockquote> <ul style="text-align: left;"> <li><blockquote> Automatic Post Numbering</blockquote> </li> </ul> <blockquote> </blockquote> <ul style="text-align: left;"> <li><blockquote> CSS3 Hover Animation </blockquote> </li> </ul> </blockquote> </div> <br /> <h4 class="notice"> Sign in to your Blogger Account and Active Popular Posts Widget </h4> <br /> <ul style="text-align: left;"> <li><b>First Add Popular post Widget to Blogger</b></li> <ul> <li>Go to <b>Layout</b> -> Select <b>"Add a Gadget"</b> and take Popular Posts Widget from the Widget List appear.</li> <li>Give Title of widget, select how the popular posts should be appeared(in Month,or Week or All time) and click Save </li> </ul> <li>Go to <b>Template</b> -> <b>Edit HTML</b>, Find ( <a href="http://netoopsblog.blogspot.com/2012/01/use-search-bar-find-code-blogger-blog.html" target="_blank">Ctrl + F</a> ) <b>]]></b:skin></b></li> <li>Copy the following code and Paste just above it</li> </ul> <blockquote class="tr_bq"> <div class="code"> <!-- Popular posts multi colored UI theme --><br /> #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}<br /> #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}<br /> #PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}<br /> #PopularPosts1 ul li:first-child:after{content:"1"}<br /> #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}<br /> #PopularPosts1 ul li:first-child + li:after{content:"2"}<br /> #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}<br /> #PopularPosts1 ul li:first-child + li + li:after{content:"3"}<br /> #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}<br /> #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}<br /> #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}<br /> #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}<br /> #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}<br /> #PopularPosts1 ul li:first-child:after,<br /> #PopularPosts1 ul li:first-child + li:after,<br /> #PopularPosts1 ul li:first-child + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,<br /> #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}<br /> #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}<br /> #PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}<br /> #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}<br /> #PopularPosts1 img{<br /> -moz-border-radius: 130px;<br /> -webkit-border-radius: 130px;<br /> border-radius: 130px;<br /> -webkit-transition: all 0.3s ease;<br /> -moz-transition: all 0.3s ease;<br /> transition: all 0.3s ease;<br /> padding:4px;<br /> border:1px solid #fff !important;<br /> }<br /> #PopularPosts1 img:hover {<br /> border-radius: 0 0 0 0;<br /> -moz-transform: scale(1.2) rotate(-711deg) ;<br /> -webkit-transform: scale(1.2) rotate(-711deg) ;<br /> -o-transform: scale(1.2) rotate(-711deg) ;<br /> -ms-transform: scale(1.2) rotate(-711deg) ;<br /> transform: scale(1.2) rotate(-711deg) ;<br /> }<br /> <!-- popular posts multicolored UI theme --></div> </blockquote> <br /> <ul style="text-align: left;"> <li>Click on Preview Template (You can see the template without saving)</li> <li>Save the Template.</li> </ul> View Your Blog it is ready to attract users. I think this article will help you if so please share and Like us to spread our Blog.<br /> If any problems with this trick don't hesitate to ask, do comment here...</div>

Awesome Multi-Colored Popular Posts Widget for Blogger

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of ...

Read more »

Awesome Google Contact Form Widget for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="akash" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZV3-oREqQcNFGq5Uxqx_smo35XsJvLeN-C7Avq0o-R4jzdGZ3Rc2-TN1dEkNmFQJuOgs7ZOv6koy2SFu9u5-hB8Qr9hBhbX_Wcr4gGx-Tvw2ROBfcGro-h_M3Ix856GNM6kEPft_WHZo/s1600/Contact+Us.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZV3-oREqQcNFGq5Uxqx_smo35XsJvLeN-C7Avq0o-R4jzdGZ3Rc2-TN1dEkNmFQJuOgs7ZOv6koy2SFu9u5-hB8Qr9hBhbX_Wcr4gGx-Tvw2ROBfcGro-h_M3Ix856GNM6kEPft_WHZo/s320/Contact+Us.png" width="320" /></a></div> Today I am going to show you how you can add a really awesome and cool looking <a href="http://www.allbloggertricks.com/2013/05/official-contact-form-widget-released.html" target="_blank">Contact form</a> in a page of your blogger blog. This contact form looks really elegant and is very eye-catching.<br /> <br /> This contact form inspired from Bloggertut works on CSS and has a very rich feel in it.  You can make your Contact page more awesome by adding this widget to one of your blog's pages. A live working demo of this widget can be seen by clicking the below button.<br /> <br /> <br /> <blockquote class="tr_bq"> <div style="text-align: center;"> <a href="http://www.soundmix.tk/p/contact-us.html" target="_blank"><span style="font-size: large;"><b><span style="color: #38761d;">Live Demo </span></b></span></a></div> </blockquote> <br /> <br /> After seeing the demo if you wish to add this contact form in your blog then follow the steps below.<br /> <br /> <br /> <h4 style="text-align: left;"> Step 1 : Adding the Contact Form</h4> <br /> First of all add a Contact form widget to your blog. To do so go to my post <a href="http://www.allbloggertricks.com/2013/05/official-contact-form-widget-released.html" target="_blank">Official Contact Form Widget released for Blogger</a>.<br /> Do not worry about that the widget will be visible everywhere on the blog and our motive is to show contact us form only on a particular page. We will fix it in the second step.<br /> <br /> <h4> Step 2 : Adding the CSS</h4> <br /> Once you have added the Contact form widget go to Blog Title → Template → Edit HTML. Now add the below given CSS code just above <b>]]></b:skin></b> .<br /> <br /> <blockquote class="tr_bq"> #ContactForm1{<br /> display:none;<br /> }<br /> #contact_wrap {<br /> margin: auto;<br /> width: 321px;<br /> height: 380px;<br /> padding: 25px;<br /> border-radius: 1em;<br /> border-top:1px solid #dbdbdb;<br /> border-right:1px solid #b2b2b2;<br /> border-left:1px solid #dbdbdb;<br /> border-bottom:1px solid #9d9d9d;<br /> background-color:#cccccc;<br /> filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');<br /> background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br /> background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br /> background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br /> background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br /> background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);<br /> box-shadow: 1px 1px 5px #ccc;<br /> }<br /> #contact_wrap h3{<br /> color: #e8f3f9;<br /> font-family:Georgia;<br /> font-size: 20px;<br /> font-style:italic;<br /> font-weight:bold;<br /> margin: 0 -36px 20px -36px;<br /> padding: 12px;<br /> text-align: center;<br /> text-shadow: 2px 0 0 #1f4962;<br /> -webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;<br /> -moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;<br /> box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;<br /> background-color: #3689b9;<br /> position: relative;<br /> }<br /> #contact_wrap h3:before {<br /> content: ' ';<br /> position: absolute;<br /> bottom: -10px;<br /> left: 0;<br /> width: 0;<br /> height: 0;<br /> border-style: solid;<br /> border-width: 10px 0 0 10px;<br /> border-color: #333 transparent transparent transparent;<br /> }<br /> #contact_wrap h3:after {<br /> content: ' ';<br /> position: absolute;<br /> bottom: -10px;<br /> right: 0;<br /> width: 0;<br /> height: 0;<br /> border-style: solid;<br /> border-width: 0 0 10px 10px;<br /> border-color: transparent transparent transparent #333;<br /> }<br /> #ContactForm1_contact-form-name{<br /> width: 270px; <br /> height:auto;<br /> margin: 5px auto; <br /> padding: 10px 10px 10px 40px;<br /> background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij6nD5LYdQ1BccpWA7f2evHurhhjDXf1Jo8FdhBT5ys6RMVlYjxNeQ7eF1nbtoTt5Cdlsxc2rGu8Fqa6Ve-b8LQtKrg_8UpirUUHoEAB4CpNTWclhUOTEQtwc_qA9Tj27iy732VKhV-cY/s1600/user.png)no-repeat 10px center; <br /> color:#777;<br /> border:1px solid #ccc;<br /> -webkit-border-radius: 4px;<br /> -moz-border-radius: 4px;<br /> border-radius: 4px;<br /> -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br /> box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br /> }<br /> #ContactForm1_contact-form-email{<br /> width: 270px; <br /> height:auto;<br /> margin: 5px auto; <br /> padding: 10px 10px 10px 40px;<br /> background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlaOde50PXSpikdSeHcrXqIyrLm_lATiKgA1iYIJZRBJdyQDoDbxnHIQa_oh2mDcrwJicQcy23nGw4vD_HElcasE8FA58MGj3d-N0xgZpJ042DgfsrKazcHYHGIA9T4aD053kbzKb_Gs8/s1600/pen.png)no-repeat 10px center; <br /> color:#777;<br /> border:1px solid #ccc;<br /> -webkit-border-radius: 4px;<br /> -moz-border-radius: 4px;<br /> border-radius: 4px;<br /> -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br /> box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br /> }<br /> #ContactForm1_contact-form-email-message{<br /> width: 270px; <br /> height: 150px; <br /> margin: 5px auto; <br /> padding: 10px 10px 10px 40px;<br /> font-family:Arial, sans-serif;<br /> background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6riGAGjFJjrrnW8EPyMEnPhE-AhP1h5EqAqe-zkazWYKaH7HPwkfrQvAw5MOr9lyEBGLTNKMwxlYJSbW0p-GJPg5SJWsV7G24Ch6fgQ0ok_7a4Lc7NN2MwRRlOYcGLJyJwhUt9xZlj0g/s1600/msg2.png)no-repeat 10px 10px; <br /> color:#777;<br /> border:1px solid #ccc;<br /> -webkit-border-radius: 4px;<br /> -moz-border-radius: 4px;<br /> border-radius: 4px;<br /> -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br /> box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;<br /> }<br /> #ContactForm1_contact-form-submit {<br /> width: 95px; <br /> height: 30px; <br /> float: right; <br /> color: #FFF;<br /> padding: 0; <br /> cursor:pointer;<br /> margin: 25px 0 3px 0 0;<br /> background-color:#005a8a;<br /> border-radius:4px;<br /> text-shadow: 1px 0 0 #1f4962;<br /> -webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br /> -moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br /> box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;<br /> background-color: #3689b9;<br /> border:1px solid #194f6d;<br /> }<br /> #ContactForm1_contact-form-submit:hover {<br /> background:#4c9bc9;<br /> }<br /> #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{<br /> width: 320px;<br /> margin-top:35px;<br /> } </blockquote> <br /> After adding the code save the template.<br /> <br /> <h4 style="text-align: left;"> Step 3 : Adding the HTML in Page</h4> <br /> First of all we need to create a new page and to do this firstly go to Blog Title → Pages → New Page → Blank Page. Page editor will open, now click on HTML tab and paste the below given code in it.<br /> <br /> <blockquote class="tr_bq"> <div id="contact_wrap"><br /> <h3>Contact Us</h3><br /> <form name="contact-form"><br /> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br /> <input id="ContactForm1_contact-form-submit" type="button" value="Submit" /><br /> <div style="max-width: 222px; text-align: center; width: 100%;"><br /> <div id="ContactForm1_contact-form-error-message"><br /> </div><br /> <div id="ContactForm1_contact-form-success-message"><br /> </div><br /> </div><br /> </form><br /> </div><br /> <br /> <style type="text/css"><br /> #comments, #blog-pager, .breadcrumbs, .post-footer{display:none}<br /> </style></blockquote> <br /> After adding the above code, publish the page.<br /> <br /> You are done now. Now you and your visitors can see this awesome and cool contact form widget in your blog. </div>

Awesome Google Contact Form Widget for Blogger

Today I am going to show you how you can add a really awesome and cool looking Contact form in a page of your blogger blog. This contact...

Read more »

Extreme CSS3 Floating Google Search Bar for Blogger FREE..!!

<div dir="ltr" style="text-align: left;" trbidi="on"> <h2 class="post-title entry-title"> </h2> <div class="post-header"> </div> <div dir="ltr" style="text-align: left;"> <div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"> </div> <div class="akash" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizT1IvI1Fhak2LpR8kAf9ZurBy2nsl7CjO5nrrm9EPzI6rOucAs1oVQTqVMRqoJDvi8O_czMssdqmZflMjBaT3g2NlMfRFIOmxEZY8phvTTn-dxNrdslLF96YhqXxTc2s6p_MBLMtqVjI/s1600/google-search-bar-for-blogger.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizT1IvI1Fhak2LpR8kAf9ZurBy2nsl7CjO5nrrm9EPzI6rOucAs1oVQTqVMRqoJDvi8O_czMssdqmZflMjBaT3g2NlMfRFIOmxEZY8phvTTn-dxNrdslLF96YhqXxTc2s6p_MBLMtqVjI/s1600/google-search-bar-for-blogger.jpg" /></a></div> <span id="goog_2104566990"></span><span id="goog_2104566991"></span>All of you know about <a href="http://www.google.com/" target="_blank">Google</a> Search bar. You'd see the style of search bar used in <a href="http://www.google.com/" target="_blank">Google</a>. If you didn't see Google search bar either go to <a href="http://www.google.com/" target="_blank">Google</a> or please see the right top of  our blog, you can see a static <a href="http://www.google.com/" target="_blank">Google</a> search bar. Here is a trick to add this Google search bar to your blog. This is not the real Google search bar, instead this is a CSS3 styled search bar using <a href="http://www.blogger.com/" target="_blank">Blogger's</a> search method. If you need <a href="http://www.google.com/" target="_blank">Google's</a> real search bar[but it can't get <a href="http://www.google.com/" target="_blank">Google's</a> search box style] go to <a href="http://www.google.co.in/cse/">http://www.google.co.in/cse.</a> Let's see how to add Google type search bar to your blog...<br /> <br /> <a href="http://www.blogger.com/null" name="more"></a><br /> <div class="demo"> <blockquote class="tr_bq" style="text-align: left;"> <span style="font-size: small;"><span style="font-family: inherit;">Demo shows in right top →</span></span><br /> <span style="font-size: small;"><span style="font-family: inherit;">Features....</span></span></blockquote> <blockquote class="tr_bq" style="text-align: left;"> <blockquote style="text-align: left;"> <span style="font-size: small;"><span style="font-family: inherit;">Floating Static (Fixed) Search bar</span></span></blockquote> <blockquote style="text-align: left;"> <span style="font-size: small;"><span style="font-family: inherit;">CSS3 styled search bar</span></span></blockquote> <blockquote style="text-align: left;"> <span style="font-size: small;"><span style="font-family: inherit;">CSS3 animated</span></span></blockquote> </blockquote> </div> <ul style="text-align: left;"> <li>Go to <b>Layout</b> -> Click on <b>Add a Gadget</b></li> <li>Select <b>HTML/JavaScript</b> from the list</li> <li>Leave the <b>Title</b> as Blank and copy paste the following code inside the <b>Content</b> portion</li> </ul> <div style="text-align: left;"> <blockquote class="tr_bq">         <span style="font-size: large;">                    <span style="color: red;"><b>OR </b></span></span><br /> <ul style="text-align: left;"> <li>Sign in to Blogger Dashboard and go to <b>Template</b> -> <b>Edit HTML</b></li> <li>Search (Ctrl+F) <span style="font-size: medium;"><b><body</b> </span></li> <li>Copy and paste the following code after it</li> </ul> </blockquote> </div> <br /> <br /> <blockquote class="tr_bq"> <div class="code"> <!-- Noop Google search box --><br />     <div class='noop-searchbox' id='noop-searchbox'><br />       <form action='/search' id='noop-searchform' method='get'><br />         <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/><br />         <button id='sbutton' type='submit'><br />           <span id='simg'/><br />         </button><br />       </form><br />     </div><br /> <style type="text/css"><br /> #sbutton {<br /> background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));<br /> background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);<br /> background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);<br /> background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);<br /> background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;<br /> border: 1px solid #3079ED;<br /> border-radius: 2px 2px 2px 2px;<br /> color: #FFFFFF;<br /> height: 27px;<br /> min-width: 76px;<br /> padding: 0 21px;padding-bottom: 2px;<br /> }<br /> #sbutton:hover{ background-color: #357AE8;<br /> background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));<br /> background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br /> background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br /> background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br /> background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);<br /> border: 1px solid #2F5BB7;<br /> box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}<br /> #simg {<br /> background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXM2pefcG074F5jnMbbE5PY2AH2f8cdEHoZOyAhllLeleGs7VTl6sq3PmcKSrte22k0KnRa_gy0ihZ3a2jgxgKPerQMu0GVq6hb3-8kvGBMzuNombmqGZKMZW0gL4wFXcev1OECeE6Ung/s1600/searchicon.png") no-repeat scroll 0 0 transparent;<br /> display: inline-block;<br /> height: 14px;<br /> margin: 0;<br /> width: 17px;z-index:101;<br /> }#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}<br /> #s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}<br /> #s:focus {width: 200px;}<br /> .noop-searchbox {<br /> display: block;<br /> position: fixed;<br /> right: 0;<br /> top: 1%;<br /> max-width: 300px;min-width: 238px;<br /> z-index: 100;<br /> }<br /> </style><br /> <!-- Noop Google search box --></div> </blockquote> <br /> I hope this article will help you. If any problem with this please do comment.</div> </div>

Extreme CSS3 Floating Google Search Bar for Blogger FREE..!!

All of you know about Google Search bar. You'd see the style of search bar used in Google . If you didn't see Google sear...

Read more »