Another Stay Connected Metro Style Responsive Social Subscription widget

  After 5 days we back with super cool widget tutorial. There are to many simple ways to display the Subscription options for your blog. But Stay Connected widget also known as social bookmarking buttons are the most used blogger widgets and Subscribing plays very important role in increasing traffic on your blog. Keeping that things in mind I am creating social subscription widgets and today we created cool social subscription also responsive gadget for our valuable readers. This widget is similar to Metro style widget but I made some changes to give it more impressive look. Adding the gadget is easy and here we will show you how to add it to your below your blog header. we will also show you how to add it in footer section, when someone reaches the end of a post if they like it they will often subscribe. Your readers will also get an opportunity to stay connected blog with feed burner.G et ready to see the amazing beauty in action which will nurture your blog . Lets see the Demo.

 

Live Preview

 

Add It To Blogger

1. Go to your blogger dashboard>>layout>>add gadget.

2. Scroll down the Add A Gadget window and select HTML/Javascript.

3. Leave the title box empty.

4. Copy and paste the HTML code below into the content box.

 

<style>

.Mbt-Social-metro {
    width: 960px;
    float: left;
    margin: 0;
    padding: 1em 0;
}

.Mbt-Social-metro ul {
    margin: 0;
    padding: 0;
}

.Mbt-Social-metro ul li {
    list-style: none;
    list-style-type: none;
    padding: 0;
    text-transform: none;
    margin: 0;
    float: left;
    display: inline-block;
    width: 20%;
}

.Mbt-Social-metro ul li a {
    font-size: 80%;
    color: #fff!important;
    display: block;
}

.Mbt-Social-metro ul li a:hover {
    color: #000!important;
    background-color: #999;
    text-decoration: none;
}

idc-scoail ul li a, ul li a:hover {
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

.Mbt-Social-metro ul li .rss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFYFKifDsteo9GyVhtBVuli0qPJ7t206L6RzhGjJNWuxcbo-PbiQgn3vE41gLVGp1kHhe1Vimeoyp5yrdfczZhAcHWYbEZP56R5dTgkWHVDRKAAlzWFMpP-yKTWPctFWqczSbalSqumf-v/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12;
    background-size: 20px;
    padding: 10px 50px;
}

.Mbt-Social-metro ul li .twitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG-9lbwbM1pjzvgugsqFyEYqYG-diVMIfk3Nn_mNzQfXDcsfFaWzFOL31kfO5nbFjxtsZBjzHdW2kty3SHGfMk0taKogmSJVl9EHZgsgAvfW5DOG7OJrwOztWD62_jXM0seEnXyp4baHOk/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE;
    background-size: 20px;
    padding: 10px 50px;
}

.Mbt-Social-metro ul li .facebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9zAv5lb7VY9QZhUf7LnWClPMhbifLPW3vkApSMnOndb6UxuTCOkHOoGPw1YPEuKm63tk8FCFZg6t4vrBzNiD7t9rom3886luatceO-GR7kv0FoKyH1qWtb9rTlwwHdS_lrSpnV5RYzXMj/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998;
    background-size: 20px;
    padding: 10px 50px;
}

.Mbt-Social-metro ul li .google {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV9RRA0Ggc4-VWfjSoEi5x2jU8il7mDaIvKOqIBULY4RTy6E08nedVcRa-eT3_xz7uepysgzgr69MQfSf1tCCmvuxgu8Y1koGWlUe0DgNXBHsS7F5Y38ENPI6EjjavdfK1jyDHu1mctDXy/s1600/google.png") no-repeat scroll 10px center #D44937;
    background-size: 20px;
    padding: 10px 50px;
}

.Mbt-Social-metro ul li .linkedin {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixkFeLBDouv1krHdr7BW_z866iZeAQFuEX30N1bMLjSSt8VP5WtlbZDVPsgvOyEURaPaiIJLdcYH5DZynhDlQv1JVZzYAFphezcVDqCubPAt0xFRCMtviZcfdNYAcCIoUDqcagk1drj1EQ/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3;
    background-size: 20px;
    padding: 10px 50px;
}

/* width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .Mbt-Social-metro ul li {
        width: 50%;
    };
}

/* width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .Mbt-Social-metro ul li {
        width: 50%;
    };
}

/* width of 320px */
@media only screen and (max-width: 480px) {
    .Mbt-Social-metro ul li {
        width: 100%;
    };
}

</style>

<div class='Mbt-Social-metro'>
<ul>
<li><a class='rss' href='http://feeds.feedburner.com/bl0gger-tricks'>Subscribe our Feed</a></li>
<li><a class='twitter' href='https://twitter.com/mybloggertriks'>Follow me on Twitter</a></li>
<li><a class='facebook' href='https://www.facebook.com/mybloggertriks'>Find me on Facebook</a></li>
<li><a class='google' href='https://plus.google.com/#'>Join me on Google+</a></li>
<li><a class='linkedin' href='http://in.linkedin.com/in/mybloggertriks'>Connect with LinkedIn</a></li>
</ul>
</div>

 

Note:- Replace Profile links with your own profile username ( bl0gger-tricks, mybloggertriks, and (#) with your Google plus page or profile id).

 

How To Drag and Drop Widget in Blogger Layout

• First place your mouse cursor on the widget which you want to move from the current place and hold your mouse left click.
• Now you have to move or drag that widget to the place where you want to move. Carefully see the image below. (In the below image I want to move my widget from place 1 to place 2)

• After positioning it in your required place you just leave the mouse means release your mouse from hold.
• Then at last you have to do one main thing that is you have to click the "Save arrangement" option on the above means in top right corner of your layout window. That's it.

So here is the simple way to how to add, move as well as remove a widget or gadget from blogger. Hope you enjoyed this. Newbie's if you have any query or problem feel free to ask us below in the comment section. and also happy Ramzan-Ul-Mubarak with Lot’s of Blessing From MyBloggerTricks Team..