Metro Style Social Subscription Widget For Blogger

After the launch Microsoft windows 8 (OS), metro style has became popular in web designing arena. Many WordPress themes, Blogger templates, menu bars, etc has been released based on this metro style. But what this metro style is? Actually metro is a design language from Microsoft, and Windows 8 start screen is designed based on that. Whatever, today what I have here for you is a metro style social subscription widget.

As its name is, the metro social subscription widget is inspired from the metro styled windows 8 start screen. The widget contains a Facebook, twitter, pinterest, LinkedIn, Google +, RSS and a YouTube button. The button zooms out when the mouse is hovered.

Screenshot:

Adding Metro Style Social Subscription Widget

Step 1: Go to your blogger dashboard, Layout >> Add a Gadget.

Step 2: From the list of gadgets, select HTML/JavaScript gadget and add the below code into it

<style>
.metro-social{width:285px} 
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} 
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} 
.metro-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbJ0q6kIN8S3gRxIU_tMbQunVeJQGGe2d_Mb1hs0cYY3GiazwUJ0tXeK4iOSOSwJXAE9n0Demn_6NXagXxrg2NdwLiXBmXx_5xWWGfsBHkbaAX-AWnrkef1IHQApjnTygThu922kXNBQ9R/s75/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px} 
.metro-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2v9xpq_g5vAhrkLpypvlnFLmMZ_vkHp9Ov8_JsVg8JYRIywqr73Xcd4FXrMkZh-FEBHiUky7xtKr3CDuLP6Q8LtynxG1OOVYG8UyPHw_2w-tVq0bJVoNkNMqtn46sVmCU8Fb1dJlPQQ0k/s60/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;width:68px;height:70px} 
.metro-social .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixr7Zv2zWDKfke9c9StobHxh06x5mLLewXtNXegmWFWs0yxZzMxddlX14rBlb3GCCyU6koI2IU8FFV-GSMW0sPnx1AyhSXzv4YPEfdjcYMvBsM7IF9Va03MCyAbGLhCB8X12yl2KxEKBfh/s50/google%252Bplus.png) no-repeat center center #da4a38;width:69px;height:70px} 
.metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3poTBAnxCdoR_7iqsd5Yimf_CKD3ovpl1SrWJAPv4ppWjkyzVCrMRreQAS_wqC3-VtuX8Nf5vqZiEKzaqu9DcoPa7uRRgpr1rAxYQGnhbp2BO_4PVbOr6dN0a1oM7I9OgNgIEmMGWgF8/s40/pinterest.png) no-repeat center center #d73532;width:68px;height:69px} 
.metro-social .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_sJQTbJJBjLTqpuStE5CfTUY7wH3qMl7sXdXVOqEfkwbl3tma9Rd0N3f_9NH3v3yWDIfgwiDt-OwhHc1JUF-TJ0JwIy-pbo8XjcmAEkPWLQBgG5y2L3ciq69nJE_JWl9SNgK-JONorzQ/s40/linkedin.png) no-repeat center center #0097bd;width:69px;height:69px} 
.metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDOtTVkiPNlGOthWJJ7D33MPHBl4k0A4w66b4DxmX8JnSdjGhN40lknNQV4e40JMLofzGqZCDJOlYkyJeIAjzEZh6dm1RiqcwJ4OhKifbVbvGYvn_zL3dhdGXIMcRDkKsn0xfBai5IIx4/s40/youtube.png) no-repeat center center #e64a41;width:140px;height:69px} 
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKtE8Exthno8xfIZPRfWTpZWpHL7S0S93l8SLKNSkq4ilAjC8tNVJRxw7xR6-dNOA1apI0m1BEeIlJLW3oEo2vSihk9St89WVTbm70lZOg9bmHdnQKg2pu17NVZ_IQN1cgom7_kgQc4iWE/s40/feed.png) no-repeat center center #e9a01c;width:140px;height:69px} 
.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbJ0q6kIN8S3gRxIU_tMbQunVeJQGGe2d_Mb1hs0cYY3GiazwUJ0tXeK4iOSOSwJXAE9n0Demn_6NXagXxrg2NdwLiXBmXx_5xWWGfsBHkbaAX-AWnrkef1IHQApjnTygThu922kXNBQ9R/s200/facebook.png) no-repeat center center #1f69b3} 
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2v9xpq_g5vAhrkLpypvlnFLmMZ_vkHp9Ov8_JsVg8JYRIywqr73Xcd4FXrMkZh-FEBHiUky7xtKr3CDuLP6Q8LtynxG1OOVYG8UyPHw_2w-tVq0bJVoNkNMqtn46sVmCU8Fb1dJlPQQ0k/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5} 
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixr7Zv2zWDKfke9c9StobHxh06x5mLLewXtNXegmWFWs0yxZzMxddlX14rBlb3GCCyU6koI2IU8FFV-GSMW0sPnx1AyhSXzv4YPEfdjcYMvBsM7IF9Va03MCyAbGLhCB8X12yl2KxEKBfh/s200/google%252Bplus.png) no-repeat center center #da4a38} 
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3poTBAnxCdoR_7iqsd5Yimf_CKD3ovpl1SrWJAPv4ppWjkyzVCrMRreQAS_wqC3-VtuX8Nf5vqZiEKzaqu9DcoPa7uRRgpr1rAxYQGnhbp2BO_4PVbOr6dN0a1oM7I9OgNgIEmMGWgF8/s45/pinterest.png) no-repeat center center #d73532} 
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_sJQTbJJBjLTqpuStE5CfTUY7wH3qMl7sXdXVOqEfkwbl3tma9Rd0N3f_9NH3v3yWDIfgwiDt-OwhHc1JUF-TJ0JwIy-pbo8XjcmAEkPWLQBgG5y2L3ciq69nJE_JWl9SNgK-JONorzQ/s45/linkedin.png) no-repeat center center #0097bd} 
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDOtTVkiPNlGOthWJJ7D33MPHBl4k0A4w66b4DxmX8JnSdjGhN40lknNQV4e40JMLofzGqZCDJOlYkyJeIAjzEZh6dm1RiqcwJ4OhKifbVbvGYvn_zL3dhdGXIMcRDkKsn0xfBai5IIx4/s45/youtube.png) no-repeat center center #e64a41} 
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKtE8Exthno8xfIZPRfWTpZWpHL7S0S93l8SLKNSkq4ilAjC8tNVJRxw7xR6-dNOA1apI0m1BEeIlJLW3oEo2vSihk9St89WVTbm70lZOg9bmHdnQKg2pu17NVZ_IQN1cgom7_kgQc4iWE/s45/feed.png) no-repeat center center #e9a01c} 
</style>

<div class="metro-social"> 
<li><a class="fb" href="http://www.facebook.com/USERNAME"></a></li> 
<li><a class="tw" href="http://twitter.com/USERNAME"></a></li> 
<li><a class="gp" href="https://plus.google.com/USERNAME"></a></li> 
<li><a class="pi" href="http://pinterest.com/USERNAME"></a></li> 
<li><a class="in" href="https://www.linkedin.com/in/USERNAME"></a></li> 
<li><a class="yt" href="http://www.youtube.com/USERNAME"></a></li> 
<li><a class="fd" href="http://feeds.feedburner.com/USERNAME"></a></li> 
</div>  

Step 3: Replace USERNAME with your usernames.

Step 4: Click the orange save button.

If you have faced any problems while installing the widget on your blog, then please let me know it through the  comment box below. Before you go, make sure to check out our other posts on blogger widgets.

How to Hide a Specific Blogger Share Button

In our previous posts, we have showed you how to remove the official blogger share buttons as well as to hide the buttons from post pages alone. Today we are here with some other tweak on the official blogger share buttons. i.e. to hide a specific button from the blogger share buttons. Still hadn't understood what the hell am I talking about? Let me explain, as you all know, the official blogger share buttons consist of 5 separate buttons, the Facebook, twitter, email,  Google +1 and blogger button. What we are going to show is to hide Facebook button or any of the five buttons.

How to Hide Twitter/Google +1/Blogger/Email/Facebook Button?

Step 1: Go to your blogger dashboard, Template >> Edit HTML,

Step 2: Using Ctrl+F, search for <b:skin> and click on the corresponding line number.

Step 3: Using Ctrl+F, search for ]]></b:skin> and above that place any of the below codes according to your need.

To hide Facebook button,

.sb-facebook {
display: none !important;
}

To hide twitter button,

.sb-twitter {
display: none !important;
}

To hide email button,

.sb-email {
display: none !important;
}

To hide the blogger button,

.sb-blog {
display: none !important;
}

To hide the Google +1 button,

.post-share-buttons .dummy-container {
display: none !important;
}

Step 4: Click the save template button.

Now just move on to your blog and you can see blogger share buttons without a specific button which you have hid. If you have faced any difficulties while hiding any of the button, please let me know it through the comment box below.

How to Add a Link to Widget Titles in Blogger

It will be utterly useless, talking to you all about "What widget title is?". 99% of the blogger widgets comes with titles. Now, you will be thinking about the widgets without titles... Yes, there are widgets which don't have any titles. The '+1 Button' widget, 'Feed' widget are some among them. Whatever, lets come back to the topic, adding a link to the widget titles. If you have added the profile widget and want to add the link to your about page to its title or something like that. Through this post, we will show you how to add a link to the widget titles in blogger.

Adding a Link to Widget Titles in Blogger

 

As of WordPress, we don't have any plugins, which will do the work for us. We just have to add the links manually to the template. Even though, its not that hard to do and is simple. Follow the below steps and you are done.

Step 1: Go to your blogger dashboard >> Template >> Edit HTML.

Step 2: Check the 'Expand Widget Templates' check box on top left.

Step 3: Using Ctrl+F, Search for the widget title or widget ID of the widget for which you want to add a link to the title.

Now you can see something like what is shown below.

<b:widget id='PlusFollowers1' locked='false' title='Google+ Followers' type='PlusFollowers'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:profileUrl != &quot;&quot;'>

Step 4: Now, replace <data:title/> with the below code.

<a href="URL"><data:title/></a>

Where URL is the link you want to add to.

Step 5: Click the orange save template button.

That's it! We hope this post had helped you in adding a link to the widget titles. Before you go, make sure to check out more of our blogger tutorials. If you faced any problems while adding the link, then do inform us it through the comment box below.

How to Find Blog ID, Widget ID, Section ID & Post ID in Blogger

What is an ID? Simply, it is the short from of identification. IDs are usually unique in nature and is used to identify specific elements. IDs are generally a collection of numbers and alphabets. In blogger, each and everything from a simple blog post to a blog has an unique ID. In this post, I will show you how to find out the IDs of your blogs, widgets, posts and sections.

What is Blog ID & Post ID?

Each and every posts of your blog have an unique ID and that is referred as post ID. Where as blog ID is the unique ID of your blog, each and every blogger blogs have a unique ID.

How to Find Blog ID & Post ID?

1) Go to your blogger dashboard, Posts >> Click on the Edit button below any of your post.

2) Carefully look into the URL, which will be something like http://www.blogger.com/blogger.g?blogID=2221137549901974272#editor/target=post;postID=3209053198020903311. Here, 3209053198020903311 is the post ID and 2221137549901974272 is the blog ID.

What is Section ID & Widget ID?

Most probably you will be familiar with the widgets, they are the elements which you add to you blog using Add a Gadget link in the layout. Some of the widgets are popular posts widget, search widget... Now, you will be asking what this section is? If you have played with blogger then you know that too. Simply you are adding the widgets to particular sections, some sections are header, sidebar, etc. If you still have any doubts, the below picture will clarify it.

How to Find Section ID & Widget ID?

1) Go to your blogger dashboard, layout >> click the 'Edit' button corresponding to a widget, and a window will popup.

2) Here too look in to the URL, which will be something like http://www.blogger.com/rearrange?blogID=2221137549901974272&action=editWidget&sectionId=sidebar-right-1&widgetType=null&widgetId=PopularPosts1. Here, the widget ID is PopularPosts1 and section ID is sidebar-right-1.

That's it! This is how we can understand the blog ID, Post IDs, Widget IDs and Section IDs of a blog. Hope this will help you a lot. If you have faced any difficulties amidst, please let me know it through the comment box!

Customize Popular Posts Widget in Blogger | Style #2

If you're a regular reader of our blog then you could have already seen the popular posts widget style #1. Today I am back with the next style, i.e. Style #2. Entirely different from style #1, style #2 is simple as well as have a classic look. The customization is purely a CSS based one and no complex steps are evolved.

Actually there is nothing big with this customization. A simple hover effect is added as well as the default list marker is replaced with an arrow. Anyway lets start...

Screen Shot:

Adding Popular Posts Widget To Your Blogger Blog

Before we move further, it's important to add the popular posts widget from the list of widgets. You can add the widget as per your wish, i.e. with/without snippet, with/without thumbnail,etc. After you make the selections, click the orange save button.

Customize Popular Posts Widget in Blogger

On the blogger dashboard >> Template >> Edit HTML, now using Ctrl+F search for ]]></b:skin> and paste the below code above it.

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-type: none;
text-align:justify;
margin:0 0 5px 0px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKDMMDPhW1a4rO1pfnlAjjeTNhUTbVtEoaQLDfKMzhQVaglxgt6X67zPNfl86v_P-J1aWBjbS7A1kIb4CfsvTg48bYFeu5z5wBcXIEpwgN-TVbkTTCRcds3jcAEP3LkVedN7JoW0MWLf_/s1600/cat_bullet.gif) no-repeat scroll 5px 10px;
padding:5px 5px 5px 20px !important;
border-bottom:1px solid #e7e7e7;
}

.popular-posts ul li:hover{background:#E8F5FC;
border-left:3px solid #00b9ed;
}
.popular-posts ul li:last-child{border-bottom:none;
}

After that, click the orange 'Save template' button.

Customization

• To change the default background color on hover, replace #E8F5FC.
• To change the default border color on hover, replace #00b9ed.
• To change the arrow image with some other image, replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYKDMMDPhW1a4rO1pfnlAjjeTNhUTbVtEoaQLDfKMzhQVaglxgt6X67zPNfl86v_P-J1aWBjbS7A1kIb4CfsvTg48bYFeu5z5wBcXIEpwgN-TVbkTTCRcds3jcAEP3LkVedN7JoW0MWLf_/s1600/cat_bullet.gif with URL of any other image.

That's it! Hope this customization will help you in your blogging journey. Please let me know if you need any further help for making the widget more beautiful.

Adding a Simple Email Subscription Widget Below Every Posts in Blogger

Having a blog with fresh contents and less subscribers is much worse than anything. Subscribers are the backbone of a blog, they are the peoples who read your blog regularly. So as I always say, increasing your email subscribers is something essential.

I have previously shared some email subscription widgets that can be placed in the sidebar of your blog. Different from that, today I have a simple email subscription widget for you and I will show you how to place that widget below every posts of your blogger blog. The widget is just a simple one with a simple hover effect and has no social profile buttons placed in it. The widget is easy to add and can be done with a couple of clicks...

Adding a Simple Email Subscription Widget Below Every Posts in Blogger:

Step 1: Go to your blogger dashboard >> Template >> Edit HTML.

Step 2: Check the "Expand Widget Templates" check box on the left top.

Step 3: Using Ctrl+F search for ]]></b:skin> and paste the below code above it:

#subscription-box {border-left: 10px solid #ff690e; padding: 10px 10px; color: rgb(34, 34, 34); background-color: #f4f4c4; line-height: 1.2; margin-bottom: 10px;}
#subscription-box .title {font-size:1.2em; font-weight:bold;}
#subscription-box:hover{background:#E8F5FC;border-left:10px solid #00b9ed}
.sbutton {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    background: -moz-linear-gradient(
        top,
        #00baed 0%,
        #00baed);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#00baed),
        to(#00baed));
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border: 1px solid #00baed;
    -moz-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.7);
    -webkit-box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.7);
    box-shadow:
        0px 1px 3px rgba(000,000,000,0.5),
        inset 0px 0px 2px rgba(255,255,255,0.7);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.4),
        0px 1px 0px rgba(255,255,255,0.3);
}

Step 4: Now, using Ctrl+F search for  <data:post.body/> and paste the below code below it:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='subscription-box'>
<p style='margin-bottom:8px;'><span class='title'>Did you enjoy this post?</span><br> If you wish to be informed whenever a new post is published, then subscribe by entering your email! </br></p>
<p/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=Tweaks123&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'>
<input class='emailfield textfield' name='email' onblur='if(this.value==&apos;&apos;){this.value=&apos;your email here!&apos;;}' onfocus='if(this.value==&apos;your email here!&apos;){this.value=&apos;&apos;};' placeholder='Email address...' style='width:200px; margin-right:5px;' type='text' value='your email here!'/>
<input class='sbutton' type='submit' value='Send Me Updates!'/>
<input name='uri' type='hidden' value='Tweaks123'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</b:if>

Step 5: Click the orange 'Save' button!

Customization:

• Replace Tweaks123 with your own feedburner ID.
• Replace #f4f4c4 with some other color code to change the background color of the widget.
• Replace #E8F5FC with some other color code to change the background color of the widget on mouse hover.
• Replace #ff690e with some other color code to change the border color of the widget.
• Replace #00b9ed with some other color code to change the border color of the widget on mouse hover.

Now, reload your blog and you can see the widget glowing below each and every posts of your blog. If you have faced any troubles while placing the widget, then let me know it through the comment box below!

Stunning Search Box (No Button) Widget For Blogger

Have you ever seen a search box widget without a button? Whatever your answer is, today I have a cool search box widget to share with you. As said above, the widget doesn't have any button as you think. The visitor can search by entering their query in the search box and can finish the search by pressing the enter button in the keyboard. As of all our widgets, this widget too is highly customizable and uses the default blogger search form. Want to add it to your blog? Then just follow the below steps to do so...

Adding Stunning Search Box(No Button):

Step 1: Move on to your Blogger Dashboard >> Layout >> Add Gadget:

Step 2: Choose HTML/JavaScript Gadget and add the below code into it.

<style>
@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: local('Abel'), local('Abel-Regular'), url(http://themes.googleusercontent.com/static/fonts/abel/v3/EAqh528fFdbUek8UOky4sA.woff) format('woff');
}
.search #s {width:190px; padding:5px; border:0px; font-size:13px; color:#333; background:#d5d5d5; font-family: 'Abel', arial, serif !important;}
</style>

<div class="search"><form action="/search" class="search_form" method="get"><p>
            <input name="q" type="text" onblur="if (this.value == &#39;&#39;) {this.value = &#39;search this site&#39;;}" onfocus="if (this.value == &#39;search this site&#39;) {this.value = &#39;&#39;;}" id="s" name="s" value="search this site" class="text_input" />
            <input type="hidden" value="Search" id="searchsubmit" />
</p></form></div>

Step 3: Now click the orange save button.

Want to Make the Widget Float?

If you wish to make the widget stick to the top of the screen like our previous floating search box, then you have to add a small piece of code to the above code. The same CSS fixed property is used to do so. Follow the below steps to make the widget float...

Just below the <style> in the above code, paste the below code.

.search {
position: fixed;
right: 12px;
top: 1%;
z-index: 100;
}

Customization

• Replace #d5d5d5 with some other color code to change the color of the widget.
• Replace 190px with any other value to change the width of the widget.
• "search this site" shows the text inside the search box, you can replace it with your own text.

That's it! Now you have a cool and stunning search box in your blog! If you liked this widget and wish to stay connected with our blog the please follow us on twitter at @BloggerGarage!

Replace Blogger Newer, Older Posts & Home Links With Image

Have you ever thought of replacing the boring older post, newer post and home link shown below your posts? If you haven't, then start thinking of it from now. Those links even though placed at the bottom has a greater role to play. Making it even more beautiful and eye-catching can simply increase you some page views.

Even though it looks bit harder, its quiet easy and no knowledge is required to replace it with something you like. So lets look in to it...

Replacing Blogger Newer, Older Posts & Home Links

Go to your blogger dashboard >> Template >> Edit HTML

Check the "Expand Widget Templates" check box on the left top.

Replacing Older Posts Link

Using Ctrl+F, Search for <data:olderPageTitle/> and replace it with the below code.

<img src="Image URL"/>

Replacing Newer Posts Link

Using Ctrl+F, Search for <data:newerPageTitle/> and replace it with the below code.

 <img src="Image URL"/>

Replacing Home Link

Using Ctrl+F, Search for <data:homeMsg/> and replace it with the below code.

 <img src="Image URL"/>

Now click the orange save button.

Coustomization

• Replace Image URL with corresponding image URLs.

That's it! You have successfully replaced the boring older posts, newer posts, home links. If you have faced some errors the please let me know it through the comment box below!