Tags: Widgets

Add Beautiful Notification Bar to Blogger

- 6 Comments

Do you have something amazing? You want to notify your users about what you are going to do next or whatever you want to tell your visitors then notification bar is the best way. Notifications bars always remains on the top, floats with the page and helps you to notify your visitors about your popular posts, upcoming events etc. So, today we are going to share a beautiful notification bar for your blogger blog. This notification bar shows marquee animation and you can easily customize it according to your taste.

Adding this Notification Bar 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 the below code and Paste it in the HTML/JavaScript Widget Box

<style>
#bgtnot-cont
{
top:0px;
left:0px;
z-index:9999999;
position:fixed;
width:100%;
background:#222222;
color:#ffffff;
font:16px georgia;
box-shadow:2px 2px 5px #444444;
-moz-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
}

#bgt-movtext
{
text-align:center;
padding:8px;
font-family: Verdana,"Times New Roman",Georgia,Serif;
font-size:12px;
color: #ffffff;
}

#bgt-movtext a
{
color:#ffffff;
text-decoration:none;
font:16px georgia;
}
#bgt-movtext a:hover
{
color:yellow;
text-decoration:none;
}

</style>
<div id='bgtnot-cont'>
<div id="bgt-movtext">
<marquee behavior='alternate' direction="left"
            onmouseover="this.stop();"
            onmouseout="this.start();">

          <p>
<a href='Link'>Title</a>

|        <a href='Link'>Title</a>

|        <a href='Link '> Title</a>

|        <a href='Link'> Title</a>

|        <a href='Link'>Title</a>
</p>
      </marquee>
</div>
<div></div></div>

Customization:

Replace Link with your post links and Title with your post titles

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

Tags: Widgets

Attractive CSS3 Slider to your Blogger Posts

- 6 Comments

Sliders have been around for a long time and today we've an amazing and attractive slider for your blog. If you want to add a number of photos to your blogger post, then adding them separately one by one doesn't looks impressive and attractive. Today we are going to share a slider for your blogger posts so that you can show all of your photos in one block and it'll also help your users to navigate easily. In this slider you can add 10 photos with their respective titles, descriptions and post links.

Demo

How to Add this CSS3 Slider

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template and click on Edit HTML Button

Step 3. Search ( Ctrl +F ) for the following tag :

]]></b:skin>

Step 4. Now copy the below code and paste it just above/before it ( ]]></b:skin> ).

#slider {
padding: 0;
width:100%;
height:400px;
margin:0 auto;
background:#000;
position:relative;
border:3px solid #00cc00;
overflow:hidden;
}
#slider .gallery {
padding:0;
margin:0 auto;
}
#slider .gallery input {
display:none;
}
#slider .gallery li {
list-style-type:none;
margin:0;
padding:0;
}
#slider .gallery img {
width:100%;
height:100%;
position:absolute;
-moz-transition:all 900ms linear;
-o-transition:all 900ms linear;
-webkit-transition:all 900ms linear;
transition:all 900ms linear;
opacity:0;
visibility:hidden;
}
#slider input:checked ~ img,
#slider input:checked ~ img#motion-left,
#slider input:checked ~ img#move-down,
#slider input:checked ~ img#move-over,
#slider input:checked ~ img#run-around,
#slider input:checked ~ img#move-right,
#slider input:checked ~ img#italic {
-moz-transform:rotate(0deg) scale(1);
-ms-transform:rotate(0deg) scale(1);
-o-transform:rotate(0deg) scale(1);
-webkit-transform:rotate(0deg) scale(1);
transform:rotate(0deg) scale(1);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
opacity:1;
top:0 !important;
left:0;
right:0;
visibility:visible;
}
#slider .nav {
padding:2px;
background:000000;
color:#green;
text-decoration:none;
margin:0;
position:absolute;
top:0;
left:0;
right:0;
text-align:center;
}
#slider label {
padding:1px 10px;
background:rgba(252, 252, 252, 0.31);
color:#FFF;
font:bold 12px/20px Arial,sans-serif;
text-decoration:none;
margin:1px 4px 1px 0;
display:inline-block;
cursor:pointer;
position:relative;
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
#slider label:hover {
background: #00cc00;
}
#slider .gallery li .description {
position:absolute;
padding:5px;
background:rgba(10, 10, 10, 0.59);
color:#fff;
left:0;
right:0;
bottom:-1000px;
font:bold 14px/20px Arial,sans-serif;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
opacity:0;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
#slider input:checked ~ .description {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
opacity:1;
bottom:0;
-moz-transition-delay:0.5s;
-o-transition-delay:0.5s;
-webkit-transition-delay:0.5s;
transition-delay:0.5s;
}
#slider .gallery li .description a,
#slider .gallery li .description a:visited {
color:#ff0;
text-decoration:none;
}
#slider .gallery img#motion-left,
#slider .gallery img#move-right,
#slider .gallery img#move-down,
#slider .gallery img#move-over,
#slider .gallery img#run-around,
#slider .gallery img#italic {
-moz-transition-delay:0.5s;
-o-transition-delay:0.5s;
-webkit-transition-delay:0.5s;
transition-delay:0.5s;
}
#slider .gallery img#motion-left {
left:-100%;
}
#slider .gallery img#move-right {
left:100%;
}
#slider .gallery img#move-down {
top:100%
}
#slider .gallery img#move-over {
top:-100%
}
#slider .gallery img#run-around {
-moz-transform:rotate(1230deg) scale(0);
-ms-transform:rotate(1230deg) scale(0);
-o-transform:rotate(1230deg) scale(0);
-webkit-transform:rotate(1230deg) scale(0);
transform:rotate(1230deg) scale(0);
}
#slider .gallery img#italic {
opacity:0;
-moz-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
-ms-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
-o-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
-webkit-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
}

Step 5. Hit the Save Template Button
Step 6. Now add the following HTML wherever you want in the post

<div id="slider">
<div class="gallery">
<li><input checked="true" id="a" name="system" type="radio" />
<img id="motion-left" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="b" name="system" type="radio" />
<img id="move-right" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="c" name="system" type="radio" />
<img id="move-over" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="d" name="system" type="radio" />
<img id="move-down" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="e" name="system" type="radio" />
<img id="run-around" src="YOUR IMAGE URL" />
<div class='description'>Image Description</div>
</li>
<li><input id="f" name="system" type="radio" />
<img id="italic" src="YOUR IMAGE URL" />
<div class='description'>Image Description</div>
</li>
<li><input id="g" name="system" type="radio" />
<img id="run-around" src="YOUR IMAGE URL" />
<div class='description'>Image Description</div>
</li>
<li><input id="h" name="system" type="radio" />
<img id="move-right" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="i" name="system" type="radio" />
<img id="move-over" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="j" name="system" type="radio" />
<img src="YOUR IMAGE URL" />
<div class='description'>Image Description</div>
</li>
</div>
<div class='nav'>
<label for='a'>1</label>
<label for='b'>2</label>
<label for='c'>3</label>
<label for='d'>4</label>
<label for='e'>5</label>
<label for='f'>6</label>
<label for='g'>7</label>
<label for='h'>8</label>
<label for='i'>9</label>
<label for='j'>10</label>
</div>
</div>

Note: To Add this HTML code to a Blogger Post you have to click on the HTML Button below the post title in your post editor
Customization:

Replace YOUR IMAGE URL with the URL of images you want to add
Replace Image Description with your Image descriptions

That's it !

Tags: Widgets

Add Go to Top Button with jQuery to Blogger

- 3 Comments

Recently, we've shared Flat UI style Go to Top Button with jQuery for Blogger and today we've another jQuery Scroll to Top button similar to that one. Today we are going to share a simple Scroll to Top button with jQuery.Scroll to Top widget allow you users to go to top of the page with ease of a click. This button only appears when the user scrolls down the page and disappears as he scrolls up. So follow the steps below to add this widget to your blog:

How to Add Go to Top Button with jQuery

Step 1. Log in to your Blogger Dashboard

Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

</body>

Step 3. Copy the Below code and Paste it just above/before the </body> tag

<style type="text/css">
#bgt-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type='text/javascript'>
jQuery(function($) {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr("href");
    if ($(window).scrollTop() != "0") {
        $(this).fadeIn("slow")
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == "0") {
        $(scrollDiv).fadeOut("slow")
        } else {
        $(scrollDiv).fadeIn("slow")
        }
    });
    $(this).click(function() {
        $("html, body").animate({
        scrollTop: 0
        }, "slow")
    })
    }
});
jQuery(function($) {
    $("#bgt-StoTop").scrollToTop();
});
</script>
<a href='#' id='bgt-StoTop' style='display:none;'>Scroll to Top </a>

Step 4. Hit the Save Button
And you're Done

Tags: Widgets

Flat UI style Go to Top Button with jQuery for Blogger

- No Comments

Today we have another amazing widget for your "Scroll to top Widget". This widget allow you users to go to top of the page with ease of a click. This is a flat UI style Scroll to Top button and it only appears when the user scrolls down the page and disappears as he scrolls up. Follow the steps below to add this widget to your blog:

Add Metro Style Go to Top Button to Blogger

Step 1. Log in to your Blogger Dashboard

Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

</body>

Step 3. Copy the Below code and Paste it just above/before the </body> tag

<style type='text/css'>
#bgt-StoTop {-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px; width:100px;background-color: #02ab68;background-color: #02ab68;filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9902ab68',EndColorStr='#9902ab68');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #02ab68;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($) {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr("href");
    if ($(window).scrollTop() != "0") {
        $(this).fadeIn("slow")
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == "0") {
        $(scrollDiv).fadeOut("slow")
        } else {
        $(scrollDiv).fadeIn("slow")
        }
    });
    $(this).click(function() {
        $("html, body").animate({
        scrollTop: 0
        }, "slow")
    })
    }
});
jQuery(function($) {
    $("#bgt-StoTop").scrollToTop();
});
</script>
<a href='#' id='bgt-StoTop' style='display:none;'>Back to Top </a>

Step 4. Hit the Save Button
And you're Done

Tags: Widgets

Beautiful Popular Posts Widget for Blogger

- 2 Comments

Popular posts widget displays the most viewed posts of your blog. Blogger also provides its Default popular posts widget but it is not so much attractive and doesn't attract your visitors. Blogger default widget only allows you to set the number of posts you want to show, most viewed pages of all time, 7 days or 30 days and what you want to show post title with image/snippet or both. But you can also customize it to your own taste using simple techniques. Today we are going to learn that how your can customize Blogger Default Popular posts widget. In the image below the preview on right side is before hover and on hover it slides out a short description of that post just like the left one.
Recommended for you:
3 Different Popular Posts Styles for Blogger
Add 2 Stylish Custom Popular Posts Widget to Blogger
Multi-Colored Popular Posts widget for Blogger

How to Customize Popular Posts widget

Step 1. Add the Default Blogger Popular Posts with Image and snippet
Step 2. Go to Template and click on Edit HTML Button

Step 3. Search ( Ctrl +F ) for the following tag :

]]></b:skin>

Step 4. Now copy the below code and paste it just above/before it ( ]]></b:skin> ).

.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {
font-size: 90%;
line-height: 1.2em;
position: absolute;
width: 230px;
background-color: whiteSmoke;
padding: 7px;
border-top: 2px solid #FF0202;
z-index: 2;
left: 300px;
top: 60%;
height: 4.5em!important;
visibility: hidden;
opacity: 0;
transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}
.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}

Step 5. Hit the Save template Button
Congratulations : You've customized your Popular Posts Successfully.

Tags: Blogging Tips / Widgets

7 Websites for Adding Contact forms to your Blog

- 1 Comment

Having a contact form in your blog is the best way get in touch with your visitors. Your visitors can ask you questions, queries and can give you suggestions. Blogger also provides its official contact form that you can add in your blog's sidebar, but by using the websites we are going to share with you today you can add contact forms to blogger static pages. All you have to do is to Create a Contact Form >> Customize it >> Copy the code and paste it in your static page. Below we've shared 7 Websites for Adding Contact forms to your Blog.

1- Emailmeform

2- Kontactr

3- Freecontactform

4- Foxyform

5- Rushforms

6- 123contactform

7- FormLogix

From Editors Desk

Now add a contact form to your blog and get in touch with your blog visitors :)

Tags: Widgets

5 Handpicked Blogger Plugins and Widgets

- 1 Comment

Blogger is one of the great blogging platforms. Millions of blogs are hosted on blogger and blogger is in competition with wordpress and all other blogging platforms. Our blog is also promoting blogger widgets and tips.We've shared a lot of blogger widgets with you and today we've selected some of the great blogger widgets, which you must have in your blog. So, here's a collection of some great blogger widgets for your blogger blog :

1- Flat UI Email Subscription box for Blogger

Email subscription boxes are the best way to collect your visitors/readers and provide them your latest updated directly to them email. It's important to increase your subscribers list because increasing your subscribers list will increase your traffic and if you want to make some money from your blog so subscribers are important. Just recently, we've created another Email Subscription widget and on the basis of its design we named it Flat UI Email Subscription Box and it will definitely attract your visitors.
Install Now

2- Related Posts widget with Thumbnail and Summary

Displaying related posts with their thumbnails and summaries is a smart way for keeping your visitors around and it will also help you to increase your blog traffic and here's an amazing trick for showing related posts along with their thumbnails and summaries below every post.
Install Now

3- Multi-Colored Popular posts Widget for Blogger

Here's another amazing widget Multi-Colored popular posts widget. Popular posts widget Displays the most viewed posts of your blog. This widget shows you blog's popular posts in a beautiful and great manner.
Install Now

4- Metro style Social Subscription widget for Blogger

Here's another social subscription widget for your blog. Social subscription widget helps you to increase your social appearance and traffic as well. This widget looks great and will attract your visitors so, add this widget to increase your social appearance.
Install Now

5- Social Subscription widget V2 for Blogger

Social Subscription widgets are one of the best way for increasing your loyal readers. These widgets are important for increasing your social activity. This Social Subscription Widget includes Facebook, Twitter, Google+, RSS and email subscription form.
Install Now

From Editors Desk

So, we've shared some geareat widgets with you and we hope that you'll like these widgets. Don't forget to share these widgets with your friends and enjoy blogging.

Tags: Blog Design / Widgets

Flat UI Email Subscription Box For Blogger

- 1 Comment

Email subscription boxes are the best way to collect your visitors/readers and provide them your latest updates directly to their inbox . It's important to increase your subscribers list because increasing your subscribers list will increase your traffic and if you want to make some money from your blog so subscribers are important. Bloggers are trying different methods to increase their email subscribers list and one of the best method is to add an Email Subscription Box to your sidebar or anywhere on your blog. We've also shared some of them. Just recently, we've created another Email Subscription widget and on the basis of its design we named it Flat UI Email Subscription Box and it will definitely attract your visitors. This widget has a header, a message just below it and two field one for Name and the other for Subscriber email and at the end a beautiful Sign Up button.

Flat UI Email Subscription Widget For Blogger

<div align="center" id="blogolect">
<div id="bgt-subscription" filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;">
<h4 id="blogolect-title-text" style="color: #000000; font-size: 20px;">
Sign Up Now !</h4>
<div id="blogolect-sub-title-txt" style="color: #333333; font-size: 14px;">
Sign Up to Receive Updates Straight in your Inbox</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogolect', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="blogolect_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Your Name" /><br />
<input class="email" id="blogolect_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="blogolect" /><input name="loc" type="hidden" value="en_US" /> <input id="blogolect_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access !" /></form>
</div>
</div>
<style>
#bgt-subscription {margin: 0px;padding: 10px;height: auto!important;padding: 0px 10px 15px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;background: #2aa4cf;border-top: 3px solid #F4836A; border-bottom: 3px solid #F4836A;}#bgt-subscription p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#bgt-subscription input.name {
background: #008080 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquS6Hvjsz7kN6mgHhxdsEf7h2GXJETOtamGiHPtiUKv0CRDEIcoMYxrSGvvg-U76OHy_PGjiVuUVH-ppJotCSIqkVksdbjuBnOsRCGt860HRbKuw9ex8C9E1LW7oxsKL4Qx0lSMagwmQ/s1600/name+icon.png) no-repeat center right;}
#bgt-subscription input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#bgt-subscription input.email {background: #008080 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMbS3QZ8tHjGu-tbdja3Ea7k-w8TItpema-CCytK8AkmYoEUt401UUmWmtohtMp07OOMtznh2xiSn9zCrX6HMscVya-P9wRC_6uEJpTPkSVnLb6f2GYu0v1QK2AQya2mFugjhJEAb9KoI/s1600/email+icon.png) no-repeat center right;}#bgt-subscription input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;box-shadow: 0 0px 0px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#bgt-subscription h4 {margin-bottom: 8px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: red;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#bgt-subscription input[type="submit"] {background: #008080;border-bottom: 3px solid #59b3b2; !important;color: #d3d3d3;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: 1px 1px #3A060A !important;width: 94% !important;height: auto !important;line-height: 24px !important;}
#bgt-subscription input[type="submit"]:hover {color: #ffffff;}
</style>

Customization :

All you've to do is to Replace Both blogolect with your feed name.

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

From Editors Desk

We've created this free widget for you and we hope you've liked this widget. Give us your feedback, share this widget with your friends and don't forget to subscribe us for other amazing widgets we are going to release soon. Stay tuned :)

Tags: Freebies / Widgets

Add 9 Beautiful Search Boxes to Blogger

- No Comments

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8VcPCwVlDECY8l60Bvk10ulh5oykC1OxZpe_7AuprXFkTTQ1PDbzKciHN8fDLE4HjO4VCFXA4LwcoICTnz8rVap6mpq_uwNK5njEXAJICvR3zqt0uaajcmDvyQXiuT1cSlRIaWH_fuYLk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDBnltjv5oT0ssAXEzfUYlXQoBFM57dBJnzWe90ktRgScCfzGBDqJ5Jp2owH_Lx0jIzWsudMiXwQRF06w-i7X-kqY5zDIwOLnGpdeCGuvXzSKFiEfOC_FgDhfkV9J9pGAaDJ1d54hcZvBF/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidnCFx_BiZcwaKpVGCIzhH_NXb1_hk9gq0-0xhp0_QLVQxVo0kktl5P543_M1yIJM7yP8u5-ryS7E7kq95Yu-yll1sOu6yPlspRboqBFO-0f31vte0MpgOJhYhJ0PcoC4JBQ21mzj345j7/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJwDhPG403uflfiKAAl96bGGZYzLfENkbRU5npezsHOFPLGyYm1iGE_OeFo5Z3IMIb5n4bD4jM9yt_blgM1CLFxHMNumb3TVzNAguKmAWS1J2AgZVUBIquZX6POvDBnz9BQpR7ZKHL3vLM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-lQmfYtzR-JQebEsdQ6s_OfUoutO-R3w-TiYYxKb19_EzKj6QeehUTu8N76QJGgN8ivc0Mlxdy0FRRu5a4Ff7aqg_0dqE2BVxRsJ2j5VKm-I6xWD2h5BICy8zwSqD1h95ekP1MVDsjfUM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbdP5PhzeT5zIhQbjp-zbD2I_cp-_eYy-JStnV7dDrWBgc5oCRAvBlFQiORaX3aNF5f929rmXobMJf7ryaodV1lpabqPgg6PkIFziNtEp6v_yrD0X6PEDXefZ1nHOpirwF3QAVdqVFjHhq/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirC-D8J0E-7uDIAog98ibRwtdimg8oqvRImZ8yzjSTloNXizEfm6OaVeC-w9NLtpET41f7n1a-7pYSB5IZ_4gXq2cQVLhbdDsppmbAhdUjt_j7OqrnMJn602jhuFh-In2CLj1Iz9Xee3f/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDeojnqT4CtLsFdh4lDvTpvFNkrYpm-pM7O1KhGBMin2dhP-Bo8KUp2S0ytDbrtRaa5yvdrd0Vl9NOpC5IVAZ8T93EGZCYmLdYjXQzeO4oWBJ_wXkOEQEpsQModkK1r0wWmPBiFhl2LpJ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS0vCjwQZc-qypd4JIl5n_-DUWaHdc3KVFNARsksYV2-wBj78LohZqtBeCRNp9MnsdqKkZfP6dN24CBSSG3vD-B95gJEgWdF5YhPj03FfSxLry6bzmco_VDFyVntrfVtyfCALvgAytUYLs/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...

Tags: Widgets

Social Subscription Widget V2 For Blogger

- 88 Comments

Social Subscription widgets are one of the best way for increasing your loyal readers. These widgets are important for increasing your social activity. The social subscription widget I'm going to share with you today is designed by me and i hope that you'll like it and it will definitely increase your social fans. This Social Subscription Widget includes Facebook, Twitter, Google+, RSS and email subscription form. So, without wasting your time let's come to the point :

Social Subscription Widget V2 For Blogger

<style type="text/css">

            #bgt-ssw-wrap

            {

                height:250px; /* height of the box */

                width:280px; /* width of the box */

                background:#F2F2F2; /* Background color */

                color:#009;

                font-family:Georgia, "Times New Roman", Times, serif;

                padding:3px;

                border:3px solid #00cc00; /* width and color of border */

                border-radius: 0px;

            }



            #bgt-ssw-icons-wrap

            {

                text-align:center;

                height:50px;

                padding: 5px 0px;

            }



            .bgt-ssw-icons

            {

                height:50px; /* height of the social icons */

                width:50px; /* width of the social icons */

                float:left;

                margin-left:15px;

                margin-bottom:10px;

            }



            .bgt-ssw-icons:hover

            {

                opacity: .7;

                filter:alpha(opacity=70);

                height:50px; /* height of the social icons on hover */

                width:50px; /* width of the social icons on hover */

                cursor:pointer;

            }



            .bgt-ssw-lbl

            {

                color:#000000; /* Text color */

                font-weight:500;

                text-align:center;

                padding: 2px 0px 10px 0px;

            }



             .bgt-email-field

             {

                 -moz-border-radius:4px;

                 -webkit-border-radius:4px;

                 background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zkZWMBVhigSyhO1tKJ5lv3Z3cBmMjImL8taFkXAC_R_JSkwHTegHsSU7fcF8NRh1vU2voQFSyn3m2StbKtb1X_eoaD6s2Jx39iwY7JfmLtrwy2qkwJv9CV9RSoHfYPnTxnvAzEIuUb3J/s1600/icons.png) no-repeat 0 -27px;

                 border:1px solid #dcdcdc;

                 border-radius:0px;

                 color:#444;

                 margin:0 0 15px;

                 padding:10px 40px;

                 width: 190px; /* width of the email subscription form */

             }



             #bgt-ssw-submit

             {

                height:40px; /* height of the Subscribe button */

                width:200px; /* width of the Subscribe button */

                background:#00cc00; /* Background color of subscribe button */

                color:#FFF;

                font-weight:bold;

                text-align:center;

                margin-left: 42px;

                border-radius: 0px;

             }

        </style>

         <div id="bgt-ssw-wrap">

            <div class="bgt-ssw-lbl">Subscribe to Us!!</div>

            <div id="bgt-ssw-icons-wrap">

                <a href="https://www.facebook.com/blogolect" rel="nofollow" title="Like us">

                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_hTCwRkdaWmqNGf7n4tRTXYxLpaQOqsdwCJ4nyjJALnA7GwqyghqfxQ4ra6xNeVcpg2mFkHYiAkgikphnDAhXCy1Du0Jn-qkBpqk-tsUPpgPMGzR-KoEyQl1CXi92xybAaV61jD4mwRFv/s1600/fb+button+blogolect+subs.png" class="bgt-ssw-icons" alt="FB"/>

                </a>

              <a href="https://www.twitter.com/blogolect" rel="nofollow" title="Follow Us">

                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGrh15Ex5Xx3cK5Mi1ksQmtidwxVIxBhjkdRqVikbAcShKGlBSE4-2oZrn82tkdbzvlgswpnr51R9vmbTnugBPQ1RzYOZrSnN3BusfhEIaafZL3Q_Z-rqv-8Z84zhHLr0VZ81T84HurQLm/s1600/twitter_64.png" class="bgt-ssw-icons" alt="TW" />

                </a>

                <a href="https://plus.google.com/+zohaibliaqat" rel="nofollow" title="Follow us">

                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtm5A8bUN3OS4fbibBof3UfHG2jXLFaCsnXCQKPrAtOBXAzNAfi_Pm8DaHaC-3rcx2Kl81ekRh4R_qzj4QSv4CPIgKeeHELxjanT6Q9wn6jYa5N8dmqK90gUIPBnwc705FMWSc4Tv2vEdV/s1600/google-plus_64.png" class="bgt-ssw-icons" alt="G+"/>

                </a>

                <a href="http://feeds.feedburner.com/blogolect" title="Subscribe Us">

                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikQdh0H4X-9SDlE30wz1GDB2Au9I99RUH9WY6lfJ_s_vPLv5yKA7yIlhO-JfjIEWO4VwB3E6B5nkVedvS8Rw4cKBelP_MvpgLsXby7vP-8ppJ7s-fAQsuXG5hmMILIT2f-cnjkspYsEzzL/s1600/rss_64.png" class="bgt-ssw-icons" alt="RSS"/>

                </a>

            </div>

            <div class="bgt-ssw-lbl">Get Pro Tutorials directly<br /> in to your Inbox</div>

            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogolect', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

                <input type="text" class="bgt-email-field" name="email" autocomplete="off" placeholder="Enter your email address"/><br />

                <input type="hidden" value="Blogolect" name="uri"/>

                <input type="hidden" name="loc" value="en_US"/>

                <input type="submit" value="Subscribe" id="bgt-ssw-submit"/>

            </form>

        </div>

Customization :

Replace https://www.facebook.com/blogolect with your Facebook Fan Page URL
Replace https://www.twitter.com/blogolect with your twitter profile URL
Replace https://plus.google.com/+zohaibliaqat with your Google+ Profile URL
Replace http://feeds.feedburner.com/blogolect with your RSS Feed URL
Replace Blogolect with your RSS Feed Name

Step 4. Hit the Save Button
Tadaahh !! That's it...
If you have any problem regarding this widget, kindly leave your comment below and don't forget to Subscribe Us via Email.

Subscribe to: Posts ( Atom )

Don't Miss

Adding this Notification Bar to Blogger

How to Add this CSS3 Slider

How to Add Go to Top Button with jQuery

Add Metro Style Go to Top Button to Blogger

How to Customize Popular Posts widget

1- Emailmeform

2- Kontactr

3- Freecontactform

4- Foxyform

5- Rushforms

6- 123contactform

7- FormLogix

From Editors Desk

1- Flat UI Email Subscription box for Blogger

2- Related Posts widget with Thumbnail and Summary

3- Multi-Colored Popular posts Widget for Blogger

4- Metro style Social Subscription widget for Blogger

5- Social Subscription widget V2 for Blogger

From Editors Desk

Adding Related Posts Widget with Thumbnails and Summary to Blogger

Flat UI Email Subscription Widget For Blogger

From Editors Desk

9 Beautiful Search Boxes to Blogger

Style 1

Style 2

Style 3

Style 4

Style 5

Style 6

Style 7

Style 8

Style 9

Social Subscription Widget V2 For Blogger