SHDTricks4U: Widgets

HOW TO ADD SOCIAL MEDIA ICONS TO BLOGGER HEADER

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-4IRGK5-6B-4/VYK0DDIiL7I/AAAAAAAADpc/PDdARXuDm4s/s1600/sociail%2Bicons.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="550" src="http://3.bp.blogspot.com/-4IRGK5-6B-4/VYK0DDIiL7I/AAAAAAAADpc/PDdARXuDm4s/s1600/sociail%2Bicons.png" width="640" /></a></div>
This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like adding a new widget section to the blog header but now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them. 
<h2 style="background-color: white; border: none; color: #444444; font-family: Roboto, sans-serif; font-size: large; list-style: none; margin: 0px; outline: none; padding: 0px 0px 10px;">
 </h2>
<h2 style="background-color: white; border: none; color: #444444; font-family: Roboto, sans-serif; font-size: large; list-style: none; margin: 0px; outline: none; padding: 0px 0px 10px;">
Adding Social Media Icons to Blogger Header</h2>
Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button: 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4BGGu1Y6ylu_HlRF-OFZN7jNYDrlnBd3Lwjyt4Q_LxNmCuAAQKVCAXD1S1vDECir9YMT-ZLJttUAHym9CW3sERO3lu1oXAGuANk21VTpZkyegEbCGcLGxK6VLaDMsXXmAhpQ2Sc2rOYeJ/s1600/555.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4BGGu1Y6ylu_HlRF-OFZN7jNYDrlnBd3Lwjyt4Q_LxNmCuAAQKVCAXD1S1vDECir9YMT-ZLJttUAHym9CW3sERO3lu1oXAGuANk21VTpZkyegEbCGcLGxK6VLaDMsXXmAhpQ2Sc2rOYeJ/s640/555.jpg" width="640" /></a></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Step 2. To expand the style, click on the small arrow on the left of <b:skin>...</b:skin> (screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) and add this code just above it: 
<blockquote class="tr_bq" style="-webkit-user-select: text; background-attachment: scroll; background-clip: initial; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLy2gvbr4KMGrHneqvVM-eHq9yDMZD21r4s70VDZpTzdhn9gHn-9Vj_t7VhbboMCmk2Ftvvy9N02L13zgFCDLaIEdBm-sFvtgeN1RrwB_JKjbM2XdSqhDKME0VQR3uXNBZHpATVSx_FRmm/s1600/blockquote-bg.png); background-origin: initial; background-position: 50% 0%; background-repeat: repeat; background-size: initial; border-color: rgb(240, 235, 218) rgb(240, 235, 218) rgb(240, 235, 218) rgb(202, 202, 202); border-style: solid; border-width: 2px 2px 2px 6px; color: #666666; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: none; word-wrap: break-word;">
  /* Social icons for Blogger 
----------------------------------------------- */ 
 
#social-icons { 
margin-bottom:-30px; 
height:50px; 
width:100%; 
clear:both; 
z-index: 2; 
position: relative; 
} 
.social-media-icons { 
display:table 
} 
.social-media-icons ul { 
text-align:right; 
padding:5px 5px 0 0 
list-style-image:none; 
list-style-position:outside; 
list-style-type:none; 
} 
.social-media-icons ul { 
margin-bottom:0; 
padding:0; 
float:right; 
} 
.social-media-icons li.media_icon { 
margin-left:6px; 
padding-left:0 !important; 
background:none !important; 
display:inline; 
float:left; 
} 
.social-media-icons li:hover { 
-moz-transform: rotate(360deg); 
-webkit-transform: rotate(360deg); 
-o-transform: rotate(360deg); 
transform: rotate(-360deg); 
-moz-transition: all 0.5s ease-in-out; 
-webkit-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
-ms-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
}</blockquote>
<div style="background-color: white; color: #666666; font-family: Roboto, sans-serif; font-size: 14px; line-height: 22.3999996185303px; margin: 0px; padding: 0px; text-align: center;">
 
Screenshot 1:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqDqPZA4tcqcLeOnDGTrjq3BkHuxHo7P4jfaFzTRta4nOT-403VRCgUhc0rmvtZppWOSdY0KYTBkgZnvaewpxo-9-Ef4W9dPiqQgDcHOoaO69h2hFgRchOzwNKk1pJELjgK4vJ8pr6tu80/s1600/blogger-template-editor-css-styles.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqDqPZA4tcqcLeOnDGTrjq3BkHuxHo7P4jfaFzTRta4nOT-403VRCgUhc0rmvtZppWOSdY0KYTBkgZnvaewpxo-9-Ef4W9dPiqQgDcHOoaO69h2hFgRchOzwNKk1pJELjgK4vJ8pr6tu80/s1600/blogger-template-editor-css-styles.png" width="640" /></a></div>
 
 
 
 
 
<div style="text-align: center;">
Screenshot 2:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjuWAudfIp8Sf54S4e4-qRQeiiDShRTX-3xRfz_c1B_mnP2EqCuiY7YXzqK9HxfsXPjDKHHL10h3-y3JAbWGLONA5hTNW3ZqhV5rxsJ7O5qkC_H5g-VNEe1bXirn-W-Uj51Kw2aNQYGzum/s1600/how_to_search_in_blogger_template_editor.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjuWAudfIp8Sf54S4e4-qRQeiiDShRTX-3xRfz_c1B_mnP2EqCuiY7YXzqK9HxfsXPjDKHHL10h3-y3JAbWGLONA5hTNW3ZqhV5rxsJ7O5qkC_H5g-VNEe1bXirn-W-Uj51Kw2aNQYGzum/s1600/how_to_search_in_blogger_template_editor.png" width="640" /></a></div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
 </div>
<div id="adsmiddle16780263969908444111" style="background-color: white; color: #444444; font-family: Roboto, sans-serif; font-size: 14px; line-height: 22.3999996185303px; margin: 0px; padding: 0px;">
Step 3. Now search for this line 
<blockquote style="-webkit-user-select: text; background-attachment: scroll; background-clip: initial; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLy2gvbr4KMGrHneqvVM-eHq9yDMZD21r4s70VDZpTzdhn9gHn-9Vj_t7VhbboMCmk2Ftvvy9N02L13zgFCDLaIEdBm-sFvtgeN1RrwB_JKjbM2XdSqhDKME0VQR3uXNBZHpATVSx_FRmm/s1600/blockquote-bg.png); background-origin: initial; background-position: 50% 0%; background-repeat: repeat; background-size: initial; border-color: rgb(240, 235, 218) rgb(240, 235, 218) rgb(240, 235, 218) rgb(202, 202, 202); border-style: solid; border-width: 2px 2px 2px 6px; color: #666666; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: none; word-wrap: break-word;">
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'></blockquote>
 
Step 4. And just above it, add this code: 
<blockquote class="tr_bq" style="-webkit-user-select: text; background-attachment: scroll; background-clip: initial; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLy2gvbr4KMGrHneqvVM-eHq9yDMZD21r4s70VDZpTzdhn9gHn-9Vj_t7VhbboMCmk2Ftvvy9N02L13zgFCDLaIEdBm-sFvtgeN1RrwB_JKjbM2XdSqhDKME0VQR3uXNBZHpATVSx_FRmm/s1600/blockquote-bg.png); background-origin: initial; background-position: 50% 0%; background-repeat: repeat; background-size: initial; border-color: rgb(240, 235, 218) rgb(240, 235, 218) rgb(240, 235, 218) rgb(202, 202, 202); border-style: solid; border-width: 2px 2px 2px 6px; color: #666666; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: none; word-wrap: break-word;">
 <div class='social-media-icons' id='social-icons'> 
<ul> 
 
<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEPuuqL7nhdIkfxwJOpB6wXeBbxKmlQ9kWO8P63VILMdMXj9JL8XNpkjrGHXpnZsV6JBFHotFvmdla2CYiIMt-C4jugw6eaHrJyqlUO26Kgh0vXQl7czRZPWZggCFRviNPp8emIdMOAX8/s1600/Facebook.png'/></a></li> 
 
<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaGvtK1OCXs9Bil5QdgP-khlwbDi6NkGsQERNLWpqHOvs76dglrH9rCuSUqWIMdBLM20SasdNYbyEvvtArMPpgWStYiXBsNliQjSK9cc4x9iNyW0O6g-fcqMx7Xyc_hPRGj3Je6XcXF_k/s1600/Twitter.png'/></a></li> 
 
<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglY7SPK35tSRtRxGqgoWsQrxAvs_ycw5p8W0Lzo14oiVIBvpfPYaCJrDBhrJFo3V845r15MqdWPuuKfIyVr7-DmXNeIG46pQz6cRk3f1DIiFLiSvDcQYC6KbQbrOjXus85DBgAmcFLkU0/s1600/googleplus.png'/></a></li> 
 
<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc9DM-Ikre63Ohh9s4sfx2GL0OodaUV3x3LRwF0H6x5LbNQRwCWHbDQygvl4EJDPGioGvskrbqWskr0fNOgpaVF8cZRHHYUY-uuONGgDQhheakC45b2E_-MryVioyOeoFjhHdSrR5jvYk/s1600/RSS.png'/></a></li> 
 
</ul></div></blockquote>
 
Customization - Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog. - To change the icons, just replace the urls in blue with the ones of your images. - You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want: 
<blockquote style="-webkit-user-select: text; background-attachment: scroll; background-clip: initial; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLy2gvbr4KMGrHneqvVM-eHq9yDMZD21r4s70VDZpTzdhn9gHn-9Vj_t7VhbboMCmk2Ftvvy9N02L13zgFCDLaIEdBm-sFvtgeN1RrwB_JKjbM2XdSqhDKME0VQR3uXNBZHpATVSx_FRmm/s1600/blockquote-bg.png); background-origin: initial; background-position: 50% 0%; background-repeat: repeat; background-size: initial; border-color: rgb(240, 235, 218) rgb(240, 235, 218) rgb(240, 235, 218) rgb(202, 202, 202); border-style: solid; border-width: 2px 2px 2px 6px; color: #666666; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: none; word-wrap: break-word;">
 <li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li></blockquote>
 
Step 5. Finally, Save the Template to apply the changes.</div>
 
<div id="adsmiddle26780263969908444111" style="background-color: white; color: #666666; font-family: Roboto, sans-serif; font-size: 14px; line-height: 22.3999996185303px; margin: 0px; padding: 0px;">
The effect is done with CSS3, so this effect will not work in older browsers.</div>

HOW TO ADD SOCIAL MEDIA ICONS TO BLOGGER HEADER

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that reader...

DIFFERENT STYLES FOR THE POPULAR POSTS WIDGET

Blogger allows us to easily add a "Popular Posts" widget, that we select from its list of gadgets, and we can do that by going to the "Layout" of our Blog. 
 
This gadget, as the name implies, shows which are the most visited blog posts, and you can set it to display the info you want in four possible combinations: (1) only the title of the post, (2) a thumbnail of the image and the post title, (3) post title with a summary, and (4) post title with a thumbnail and a post snippet. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9y4-ICXvqi3KXe2AN6RY6YX_MxHWCnGDjWdGQC9uWxtKxxkD-KfB0pRODQiImh3Psqm78B0snOOyjovCSjSxKcFXAOtb8Ap5OCxuNs9xNOp14sWCZk0J8pAfIuQ3XjA_GaQBM0fnl2QM/s1600/blogger-popular-posts-gadget-style.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9y4-ICXvqi3KXe2AN6RY6YX_MxHWCnGDjWdGQC9uWxtKxxkD-KfB0pRODQiImh3Psqm78B0snOOyjovCSjSxKcFXAOtb8Ap5OCxuNs9xNOp14sWCZk0J8pAfIuQ3XjA_GaQBM0fnl2QM/s1600/blogger-popular-posts-gadget-style.png" width="640" /></a></div>
This is an element that you shouldn't miss in your blog because it encourages your visitors to navigate through your content and that can result in higher income if you're monetizing your blog because it would generate an increase in the number of pages visited, and in turn, can attract the users' interest to subscribe to the blog and to read interesting content. 
 
Preliminary steps: Add the gadget, if you haven't done it yet. 
 
1. Select the "Layout" tab and add the "Popular Posts" gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on "Add a Gadget". 
 
2. Configure the widget to show only the post titles. You can do this by clicking on the "image thumbnail" and "snippet" checkboxes, as shown in the following image. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7tNr0f3VN7MeWW0-YgkBqpAO3iVgI6f1c4Z844SDkWo2hRuAbyDrGsB8jbNicCegzctnz314gzLTScZTjnnxhX6pniat7KOzQTCrwi22wnh8bfRAgLUW1hANs2QzoZh2cJMrUOLlxLLLq/s320/configure-blogger-popular-posts.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="594" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7tNr0f3VN7MeWW0-YgkBqpAO3iVgI6f1c4Z844SDkWo2hRuAbyDrGsB8jbNicCegzctnz314gzLTScZTjnnxhX6pniat7KOzQTCrwi22wnh8bfRAgLUW1hANs2QzoZh2cJMrUOLlxLLLq/s320/configure-blogger-popular-posts.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
3. After configuring the widget, save the changes by clicking on Save, and then Save arrangement.</div>
<h3 style="background-color: white; border: none; color: #555555; font-family: Roboto, sans-serif; font-size: large; list-style: none; margin: 0px; outline: none; padding: 0px 0px 10px;">
How to add the CSS to create the style of the Popular Posts widget</h3>
<div class="separator" style="clear: both; text-align: center;">
 1. Choose a style, then copy the CSS that appears below the image that shows the style. 2. Select the "Template" tab, then click on Customize > Advanced > Add CSS and then paste the CSS style that you like the most.</div>
<div class="separator" style="background-color: white; clear: both; color: #666666; font-family: Roboto, sans-serif; font-size: 14px; line-height: 22.3999996185303px; margin: 0px; padding: 0px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNjwgpIqebuDmZ1S29am-eQu1muSQZU5KvCD0iIlWBk4NlP2PUQ5jHoo1zj2C51cKq-N7Q9KB8mu1fCpBy5SXzW2eO3uyrnxidWLh37tvnD-Y_y509HmisSosspnA7E9R4LTK842MUdrN/s1600/adding-css-in-blogger-template-designer.png" imageanchor="1" style="-webkit-transition: all 0.25s; border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none; transition: all 0.25s;"><img alt="blogger tutorials" border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzNjwgpIqebuDmZ1S29am-eQu1muSQZU5KvCD0iIlWBk4NlP2PUQ5jHoo1zj2C51cKq-N7Q9KB8mu1fCpBy5SXzW2eO3uyrnxidWLh37tvnD-Y_y509HmisSosspnA7E9R4LTK842MUdrN/s640/adding-css-in-blogger-template-designer.png" style="background: rgb(242, 246, 247); border: none; height: auto; list-style: none; margin: 0px; max-width: 800px; outline: none; padding: 0px; vertical-align: middle;" title="adding css in blogger template designer" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
3. Once you add the CSS, Save changes by clicking on the "Apply to Blog" button. Note: Some Blogger templates might not allow adding CSS in that location. In that case, for adding the CSS style you need to access the Template's HTML - from your Blogger Dashboard, go to Template > Edit HTML and paste the code just above the ]]></b:skin> tag (press the CTRL + F keys to find it - you might need to click on the arrow to expand the code and after that search it again) And that's it! You've already customized the popular posts widget when it shows only post titles.</div>
 
Styles Here is the CSS of each style, just choose the one you like the best and put it on your blog. You can see each of these styles in action in the following demo blog: Style 1: 
<div class="separator" style="background-color: white; clear: both; color: #666666; font-family: Roboto, sans-serif; font-size: 14px; line-height: 22.3999996185303px; margin: 0px; padding: 0px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9y4-ICXvqi3KXe2AN6RY6YX_MxHWCnGDjWdGQC9uWxtKxxkD-KfB0pRODQiImh3Psqm78B0snOOyjovCSjSxKcFXAOtb8Ap5OCxuNs9xNOp14sWCZk0J8pAfIuQ3XjA_GaQBM0fnl2QM/s1600/blogger-popular-posts-gadget-style.png" imageanchor="1" style="-webkit-transition: all 0.25s; border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none; transition: all 0.25s;"><img alt="blogger gadgets, blogger widgets, popular posts widget" border="0" height="343" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9y4-ICXvqi3KXe2AN6RY6YX_MxHWCnGDjWdGQC9uWxtKxxkD-KfB0pRODQiImh3Psqm78B0snOOyjovCSjSxKcFXAOtb8Ap5OCxuNs9xNOp14sWCZk0J8pAfIuQ3XjA_GaQBM0fnl2QM/s640/blogger-popular-posts-gadget-style.png" style="background: rgb(242, 246, 247); border: none; height: auto; list-style: none; margin: 0px; max-width: 800px; outline: none; padding: 0px; vertical-align: middle;" title="styles for blogger popular posts gadget" width="640" /></a></div>
<blockquote style="-webkit-user-select: text; background-attachment: scroll; background-clip: initial; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLy2gvbr4KMGrHneqvVM-eHq9yDMZD21r4s70VDZpTzdhn9gHn-9Vj_t7VhbboMCmk2Ftvvy9N02L13zgFCDLaIEdBm-sFvtgeN1RrwB_JKjbM2XdSqhDKME0VQR3uXNBZHpATVSx_FRmm/s1600/blockquote-bg.png); background-origin: initial; background-position: 50% 0%; background-repeat: repeat; background-size: initial; border-color: rgb(240, 235, 218) rgb(240, 235, 218) rgb(240, 235, 218) rgb(202, 202, 202); border-style: solid; border-width: 2px 2px 2px 6px; color: #666666; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: none; word-wrap: break-word;">
 #PopularPosts1 h2{ 
padding:7px 0 3px 0; 
width:100%; 
margin-bottom:10px; 
font-size:1.3em; 
text-indent:-12px; 
font-size:18px; 
text-align:center; 
color: #757575; /* Color of the widget's title */ 
} 
#PopularPosts1 ul{ 
list-style:none; 
counter-reset:li; 
padding:8px 0px 1px; 
left:-7px; 
width:290px; 
} 
#PopularPosts1 li{ 
position:relative; 
margin:0 0 10px 0; 
padding: 3px 2px 0 17px; 
left:-5px; 
width:285px; 
} 
#PopularPosts1 ul li{ 
background: #eee; 
position: relative; 
display: block; 
padding: .4em .2em .4em 2em; 
*padding: .2em; 
margin: .5em 0; 
background: #ddd; 
text-decoration: none; 
border-radius: .3em; 
transition: all .3s ease-out; 
} 
#PopularPosts1 ul li:before{ 
content: counter(li); 
counter-increment: li; 
position: absolute; 
top: 50%; 
margin: -1.3em; 
height: 2em; 
width: 2em; 
line-height: 2em; 
font-size: 15px; 
color: #fff; /* text color of numbers */ 
background: #FB8835; /* background color of numbers */ 
border: .2em solid #fff; /* border color */ 
-webkit-box-shadow: 0 8px 5px -7px #888; 
-moz-box-shadow: 0 8px 5px -7px #888; 
box-shadow: 0 8px 5px -7px #888; 
text-align: center; 
font-weight: bold; 
border-radius: 2em; 
position: absolute; 
left: 0; 
transition: all .3s ease-out; 
} 
#PopularPosts1 ul li:hover{ 
background: #eee; 
} 
#PopularPosts1 ul li:hover:before{ 
transform: rotate(360deg); 
} 
#PopularPosts1 ul li a{ 
font: 14px Georgia, serif; /* font size of post titles */ 
text-shadow: 0 -1px 2px #fff; 
color: #444; 
display:block; 
min-height:25px; 
text-decoration:none; 
text-transform: uppercase; 
} 
#PopularPosts1 ul li a:hover{ 
color: #444; 
}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
 Style 2:</div>
<div class="separator" style="background-color: white; clear: both; color: #666666; font-family: Roboto, sans-serif; font-size: 14px; line-height: 22.3999996185303px; margin: 0px; padding: 0px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFPhQQJqXqH9kQ4bTODixY65a0RyttaTw8Q-p773C84u1uQnqrgPGDWnYeMI3q3eJjmWcdfXI-NQOFMYsKnb3LC1y6PFHSi6vbu8GUglu7jWXGWoz1W4Gj6KCM-LZ5xCqfvfyEfcVHzhGx/s1600/blogger-popular-posts-gadget-style-2.png" imageanchor="1" style="-webkit-transition: all 0.25s; border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none; transition: all 0.25s;"><img alt="blogger gadgets, blogger widgets, popular posts widget" border="0" height="323" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFPhQQJqXqH9kQ4bTODixY65a0RyttaTw8Q-p773C84u1uQnqrgPGDWnYeMI3q3eJjmWcdfXI-NQOFMYsKnb3LC1y6PFHSi6vbu8GUglu7jWXGWoz1W4Gj6KCM-LZ5xCqfvfyEfcVHzhGx/s640/blogger-popular-posts-gadget-style-2.png" style="background: rgb(242, 246, 247); border: none; height: auto; list-style: none; margin: 0px; max-width: 800px; outline: none; padding: 0px; vertical-align: middle;" title="styles for blogger popular posts gadget" width="640" /></a></div>
<blockquote style="-webkit-user-select: text; background-attachment: scroll; background-clip: initial; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLy2gvbr4KMGrHneqvVM-eHq9yDMZD21r4s70VDZpTzdhn9gHn-9Vj_t7VhbboMCmk2Ftvvy9N02L13zgFCDLaIEdBm-sFvtgeN1RrwB_JKjbM2XdSqhDKME0VQR3uXNBZHpATVSx_FRmm/s1600/blockquote-bg.png); background-origin: initial; background-position: 50% 0%; background-repeat: repeat; background-size: initial; border-color: rgb(240, 235, 218) rgb(240, 235, 218) rgb(240, 235, 218) rgb(202, 202, 202); border-style: solid; border-width: 2px 2px 2px 6px; color: #666666; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: none; word-wrap: break-word;">
 #PopularPosts1 h2{ 
position:relative; 
padding:8px 10px 6px 10px; 
width:100%; 
margin-bottom: 5px; 
font-size:17px; 
color:#757575; /* Color of the widget's title */ 
text-align:left; 
} 
#PopularPosts1 ul{ 
list-style:none; 
counter-reset:li; 
padding:10px; 
left:-8px; 
width:100%; 
} 
#PopularPosts1 li{ /* Styles of each element */ 
width:100%; 
position:relative; 
left:0; 
margin:0 0 1px 12px; 
padding:4px 5px; 
} 
#PopularPosts1 ul li:before{ 
content: counter(li); 
counter-increment: li; 
position: absolute; 
left: -30px; 
top: 50%; 
margin-top: -13px; 
background: #8E8E8E; /* background color of the numbers */ 
height: 1.9em; 
width: 2em; 
line-height: 2em; 
text-align: center; 
font-weight: bold; 
color: #fff; 
font-size: 14px; 
} 
#PopularPosts1 ul li:after{ 
position: absolute; 
content: ''; 
left: -2px; 
margin-top: -.7em; 
top: 50%; 
width: 0; 
height: 0; 
border-top: 8px solid transparent; 
border-bottom: 8px solid transparent; 
border-left:10px solid #8E8E8E; /* background color of the right arrow*/ 
} 
#PopularPosts1 ul li a{ 
color: #444; 
text-decoration: none; 
font-size:15px; 
} 
#PopularPosts1 ul li { 
position: relative; 
display: block; 
padding: .4em .4em .4em .8em; 
*padding: .4em; 
margin: .5em 0 .5em 0.4em; 
background: #ddd; 
transition: all .3s ease-out; 
text-decoration:none; 
transition: all .1s ease-in-out; 
} 
#PopularPosts1 ul li:hover{ 
background: #eee; /* Background color on mouseover */ 
} 
#PopularPosts1 ul li a:hover{ 
color:#444; /* Link color on mouseover */ 
margin-left:3px; 
}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
 Style 3:</div>
<div class="separator" style="background-color: white; clear: both; color: #666666; font-family: Roboto, sans-serif; font-size: 14px; line-height: 22.3999996185303px; margin: 0px; padding: 0px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6deH-VQjSMAH-9ECjrkUiQioAana8uQ2q1tbNkzFxsJ4mZxv73Bgoxs7HBFfElDWdvOiEHS1HXP4aL0GTFAQ_d67kThVMAxbNdSoN-w_4b2TF_0XRET0Ov4MH6BTVFjF-_KoVeuDgkxbF/s1600/blogger-popular-posts-gadget-style3.png" imageanchor="1" style="-webkit-transition: all 0.25s; border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none; transition: all 0.25s;"><img alt="blogger gadgets, blogger widgets, popular posts" border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6deH-VQjSMAH-9ECjrkUiQioAana8uQ2q1tbNkzFxsJ4mZxv73Bgoxs7HBFfElDWdvOiEHS1HXP4aL0GTFAQ_d67kThVMAxbNdSoN-w_4b2TF_0XRET0Ov4MH6BTVFjF-_KoVeuDgkxbF/s640/blogger-popular-posts-gadget-style3.png" style="background: rgb(242, 246, 247); border: none; height: auto; list-style: none; margin: 0px; max-width: 800px; outline: none; padding: 0px; vertical-align: middle;" title="styles for blogger popular posts gadget" width="640" /></a></div>
<blockquote class="tr_bq" style="-webkit-user-select: text; background-attachment: scroll; background-clip: initial; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLy2gvbr4KMGrHneqvVM-eHq9yDMZD21r4s70VDZpTzdhn9gHn-9Vj_t7VhbboMCmk2Ftvvy9N02L13zgFCDLaIEdBm-sFvtgeN1RrwB_JKjbM2XdSqhDKME0VQR3uXNBZHpATVSx_FRmm/s1600/blockquote-bg.png); background-origin: initial; background-position: 50% 0%; background-repeat: repeat; background-size: initial; border-color: rgb(240, 235, 218) rgb(240, 235, 218) rgb(240, 235, 218) rgb(202, 202, 202); border-style: solid; border-width: 2px 2px 2px 6px; color: #666666; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: none; word-wrap: break-word;">
 #PopularPosts1 h2{ 
position:relative; 
right:-2px; 
padding:8px 63px 6px 17px; 
width:100%; 
margin:0; 
font-size:16px; 
background:#4F4F4F; /* Background color */ 
color:#f2f2f2; /* Color of the widget's title */ 
text-align:left; 
text-indent:18px; 
} 
#PopularPosts1 h2:before{ 
position:absolute; 
content:""; 
top:36px; 
right:0px; 
width: 0px; 
height: 0px; 
border-bottom:12px outset transparent; 
border-left:12px solid #000000; 
} 
#PopularPosts1 h2:after{ 
position:absolute; 
content:""; 
top:-6px; 
left:-5px; 
width: 0px; 
height: 0px; 
border-bottom:24px outset transparent; 
border-top:24px outset transparent; 
border-left:24px solid #ffffff; /* Arrow background color on the left */ 
} 
#PopularPosts1 ul{ 
list-style:none; 
counter-reset:li; 
padding:10px; 
left:-8px; 
width:100%; 
} 
#PopularPosts1 li{ 
width:100%; 
position:relative; 
left:0; 
margin:7px 0 16px 12px; 
padding:10px  4px 0 5px; 
} 
#PopularPosts1 ul li:before{ 
content:counter(li); 
counter-increment:li; 
position:absolute; 
top:-2px; 
left:-20px; 
font-size:35px; 
width:20px; 
color:#888888; 
} 
 
#PopularPosts1 ul li a{ 
display:block; 
font-size:16px; /* Font size of the links */ 
color: #666; /* Color of the links */ 
text-decoration:none; 
transition: all .1s ease-in-out;font-weight: bold; 
} 
#PopularPosts1 ul li a:hover{ 
color:#3366FF; 
margin-left:3px; 
}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
 Style 4:</div>
<div class="separator" style="background-color: white; clear: both; color: #666666; font-family: Roboto, sans-serif; font-size: 14px; line-height: 22.3999996185303px; margin: 0px; padding: 0px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizvKBIQbAgFBTKhtlhxgSFrQXDolHTlq1GygilSSXrj0O9FnUanqkLVh0KV4EKbAX9TwmRQck1E9ig5FaVLXMbuZ7ysEn7fsXA2fRK4t4Ha_VKD5iDu3Y7Iz2AZT_AU68m86kyY0aBIuIO/s1600/style-4.png" imageanchor="1" style="-webkit-transition: all 0.25s; border: none; color: #0088b2; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: none; transition: all 0.25s;"><img alt="blogger gadgets, blogger widgets" border="0" height="447" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizvKBIQbAgFBTKhtlhxgSFrQXDolHTlq1GygilSSXrj0O9FnUanqkLVh0KV4EKbAX9TwmRQck1E9ig5FaVLXMbuZ7ysEn7fsXA2fRK4t4Ha_VKD5iDu3Y7Iz2AZT_AU68m86kyY0aBIuIO/s640/style-4.png" style="background: rgb(242, 246, 247); border: none; height: auto; list-style: none; margin: 0px; max-width: 800px; outline: none; padding: 0px; vertical-align: middle;" title="styles for blogger popular posts gadget" width="640" /></a></div>
<blockquote class="tr_bq" style="-webkit-user-select: text; background-attachment: scroll; background-clip: initial; background-color: #f9f9f9; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLy2gvbr4KMGrHneqvVM-eHq9yDMZD21r4s70VDZpTzdhn9gHn-9Vj_t7VhbboMCmk2Ftvvy9N02L13zgFCDLaIEdBm-sFvtgeN1RrwB_JKjbM2XdSqhDKME0VQR3uXNBZHpATVSx_FRmm/s1600/blockquote-bg.png); background-origin: initial; background-position: 50% 0%; background-repeat: repeat; background-size: initial; border-color: rgb(240, 235, 218) rgb(240, 235, 218) rgb(240, 235, 218) rgb(202, 202, 202); border-style: solid; border-width: 2px 2px 2px 6px; color: #666666; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: italic; line-height: 20px; margin: 1.5em 10px; padding: 0.5em 10px; quotes: none; word-wrap: break-word;">
 #PopularPosts1 h2{ 
padding:8px 10px 3px 0; 
width:100%; 
margin:0; 
font-size:16px; 
position:relative; 
left:-20px; 
display:block; 
border-bottom:2px solid #ccc; 
} 
#PopularPosts1 ul{ 
list-style:none; 
counter-reset:li; 
padding:10px; 
width:100%; 
} 
#PopularPosts1 li{ /* Styles of each element */ 
width:100%; 
position:relative; 
left:0; 
margin:0 0 6px 10px; 
padding:4px 5px; 
} 
#PopularPosts1 ul li:before{ /* Style of the numbers */ 
content:counter(li); 
counter-increment:li; 
position:absolute; 
top:3px; 
left:-39px; 
font-size:21px; 
width:28px; 
height:28px; 
border-radius: 50%; 
color:#777; /* Text color */ 
border: 2px solid #ddd; /* Rounded border color */ 
padding:0; 
text-indent:9px; 
} 
#PopularPosts1 ul li a{ 
display:block; 
position:relative; 
left:-45px; 
width:100%; 
margin:0; 
min-height:28px; 
padding: 5px 3px 3px 39px; 
color:#333; /* color of the links */ 
text-decoration:none; 
font-size:14px; /* Font size of the links */ 
font-style: italic; 
 
} 
#PopularPosts1 ul li a:hover{ 
color:#3366ff; 
margin-left:3px; 
}</blockquote>
<div class="separator" style="clear: both; text-align: center;">
 <span style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; color: #0b5394; list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: none; list-style: none; margin: 0px; outline: none; padding: 0px;">Final Notes All the CSS is valid. I just have to mention that the numbering is not visible in Internet Explorer 7, since that version of the browser does not support properties that make the numbers appear. For example in the 4th style, the circles look squared in IE8 and earlier versions since, these versions do not support a property that </div>

DIFFERENT STYLES FOR THE POPULAR POSTS WIDGET

Blogger allows us to easily add a " Popular Posts " widget, that we select from its list of gadgets, and we can do that by going t...

ADD METRO STYLE SOCIAL WIDGET FOR BLOGGER

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-BYmSxnlnwzY/VUwnZRcnfbI/AAAAAAAAC88/W77FiQlv3Q8/s1600/Add%2BMetro%2BStyle%2BSocial%2BWidget%2Bfor%2BBlogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="483" src="http://3.bp.blogspot.com/-BYmSxnlnwzY/VUwnZRcnfbI/AAAAAAAAC88/W77FiQlv3Q8/s1600/Add%2BMetro%2BStyle%2BSocial%2BWidget%2Bfor%2BBlogger.png" width="640" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #444444; font-family: Lora, Georgia, serif; font-size: 18px; line-height: 29px; margin: 0px; padding: 0px;">
Today i am sharing this articles how to add beautiful metro style social widget for blogger looks like windows 8 apps.</div>
<div class="separator" style="background-color: white; clear: both; color: #444444; font-family: Lora, Georgia, serif; font-size: 18px; line-height: 29px; margin: 0px; padding: 0px;">
 </div>
<h4 style="background-color: white; color: #444444; font-family: 'Bree Serif', serif; font-size: 28px; font-weight: normal; line-height: 36px; margin: 10px 0px; padding: 0px;">
Adding widget in blogger layout</h4>
<div style="background-color: white; color: #444444; font-family: Lora, Georgia, serif; font-size: 18px; line-height: 29px; margin: 0px; padding: 0px;">
<ul style="line-height: 1.4em; list-style-position: outside; margin: 0px 0px 0px 35px; padding: 10px 0px 20px;">
<li style="list-style-type: square; margin: 0px; padding: 0px 0px 5px;">Sign in blogger -</li>
<li style="list-style-type: square; margin: 0px; padding: 0px 0px 5px;">Go to layout -</li>
<li style="list-style-type: square; margin: 0px; padding: 0px 0px 5px;">Add a gadget -</li>
<li style="list-style-type: square; margin: 0px; padding: 0px 0px 5px;">Html/Java script -</li>
</ul>
<div style="margin: 0px; padding: 0px;">
<blockquote class="tr_bq" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHGRGovxI7BF_LpI-9zFzrk62wBhHzOVQBtMvVkK46546a8rql_QSw0l9hMz2nQH8CCrAUfCSMTenk2BF93_PmIQ16-8psT16Jx7ydvs1qRJSymSVW5goNSUL0vqcxNwOpwdjAoXDkdLm/s1600/quote.png); background-origin: initial; background-position: 5.40000009536743% 50%; background-repeat: no-repeat; background-size: initial; border-color: rgb(204, 204, 204); border-style: dashed; border-width: 2px 0px; font-style: italic; margin: 10px 0px 20px -24.1875px; padding: 1.5em 38px 10px 114px; quotes: none;">
 <div class="metro-social"> 
<li><a class="fb" href="Your Facebook URL here"></a></li> 
<li><a class="tw" href="Your Twitter URL here"></a></li> 
<li><a class="gp" href="Your GooGle + URL here"></a></li> 
<li><a class="fd" href="Your FeedBurner URL here"></a></li> 
</div> 
<style> 
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs 
Web link to gadget code: 
Distributed under license CC BY-NC-ND 3.0 INT 
Please keep license information intact while using this widget*/ 
.metro-social{width:285px} 
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} 
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} 
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px} 
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px} 
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px} 
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px} 
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3} 
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5} 
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38} 
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c} 
</style> 
 </blockquote>
 
 
<ul style="line-height: 1.4em; list-style-position: outside; margin: 0px 0px 0px 35px; padding: 10px 0px 20px;">
<li style="list-style-type: square; margin: 0px; padding: 0px 0px 5px;">Replace YOUT URL with your url -</li>
<li style="list-style-type: square; margin: 0px; padding: 0px 0px 5px;">Click on save - </li>
</ul>
 
Enjoy Blogging !</div>
</div>

ADD METRO STYLE SOCIAL WIDGET FOR BLOGGER

Today i am sharing this articles how to add beautiful metro style social widget for blogger looks like windows 8 apps. Adding widget ...

HOW TO ADD SOCIAL LOCKER IN BLOGGER

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-q3xLlsIiLF8/VP1mR3I2lxI/AAAAAAAABqo/NXR44wxFMxU/s1600/Social-media-locker-for-blogger.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="232" src="http://2.bp.blogspot.com/-q3xLlsIiLF8/VP1mR3I2lxI/AAAAAAAABqo/NXR44wxFMxU/s1600/Social-media-locker-for-blogger.PNG" width="640" /></a></div>
<div style="background-color: white; color: #444444; font-family: Arial, serif; font-size: 14px; line-height: 18.2000007629395px; margin: 0px; padding: 0px;">
To add This Social Locker widget in your blogger please <a href="http://bloghelpr.blogspot.com/2015/02/send-free-sms.html" style="-webkit-transition: all 0.25s; color: #637182; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.25s;" target="_blank">follow</a> the steps below carefully</div>
<div style="background-color: white; color: #444444; font-family: 'Open Sans'; font-size: 13px; line-height: 20.7999992370605px; margin: 0px; padding: 0px;">
<ul style="font-family: Arial, serif; font-size: 14px; line-height: 18.2000007629395px; list-style-position: outside; margin: 0.5em 0em 0.5em 3em; padding: 0px;">
<li style="margin: 0.5em 0px; padding: 0px;">Open your Blogger Blog Dashboard</li>
<li style="margin: 0.5em 0px; padding: 0px;">Go to template section</li>
<li style="margin: 0.5em 0px; padding: 0px;">Open Edit HTML section to integrate the code in blogger template</li>
<li style="margin: 0.5em 0px; padding: 0px;">Now find the Code and paste the below code under/below it</li>
</ul>
<link href='https://googledrive.com/host/0B34mC1Fbl7PmQnFySC1jaGs1OUU/tronicflow-social-locker-css.css' rel='stylesheet' type='text/css'/> 
<ul style="font-family: Arial, serif; font-size: 14px; line-height: 18.2000007629395px; list-style-position: outside; margin: 0.5em 0em 0.5em 3em; padding: 0px;">
<li style="margin: 0.5em 0px; padding: 0px;">Then You have to put below code end of the blog post in HTML section where you want to show your Social Locker widget</li>
</ul>
<article id="default-usage">     <div class="to-lock" style="display: none;">          <<span class="IL_AD" id="IL_AD11" style="background-attachment: scroll !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: 0% 50%; background-repeat: repeat !important; background-size: initial !important; border-bottom-color: rgb(27, 142, 222) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: Arial, serif; font-size: 18px; line-height: 28.7999992370605px; margin: 0px; padding: 0px 0px 1px !important; position: static;">div style="text-align: justify;"> THIS IS YOUR HIDDEN TEXT! </div>          </div> </article>     <script src="https://googledrive.com/host/0B34mC1Fbl7PmdFFLRVVvOG5iNkk" type="text/javascript"></script>         <script>     jQuery(document).ready(function ($) {     $("#default-usage .to-lock").socialLock({         text: {     header: "THE CONTENT IS LOCKED!",     message: "To unlock the content, Please use one of the social <span class="IL_AD" id="IL_AD1" style="background-attachment: scroll !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: 0% 50%; background-repeat: repeat !important; background-size: initial !important; border-bottom-color: rgb(27, 142, 222) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: Arial, serif; font-size: 18px; line-height: 28.7999992370605px; margin: 0px; padding: 0px 0px 1px !important; position: static;">buttons below. <span class="IL_AD" id="IL_AD9" style="background-attachment: scroll !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: 0% 50%; background-repeat: repeat !important; background-size: initial !important; border-bottom-color: rgb(27, 142, 222) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; font-family: Arial, serif; font-size: 18px; line-height: 28.7999992370605px; margin: 0px; padding: 0px 0px 1px !important; position: static;">Thank you for your support!"     },         style: "ui-social-locker-secrets",     buttons: {     order: ["twitter", "facebook", "google"]     },         // twitter options     twitter: {     url: "HTTP://YOURSITE.COM",     text: "TWEET TEXT"     },         // facebook options     facebook: {     url: "http://www.facebook.com/yourpage",     appId: "337462366354755"     },         google: {     url: "YOUR DOMAIN OR POST URL"     }     });     });;;;               </script> </div>
<div style="background-color: white; color: #444444; font-family: 'Open Sans'; font-size: 13px; line-height: 20.7999992370605px; margin: 0px; padding: 0px;">
Must read ::  <a href="http://bloghelpr.blogspot.com/2015/02/send-free-sms.html" style="-webkit-transition: all 0.25s; color: #637182; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.25s;" target="_blank">Send free sms in pakistan</a></div>
 
<div style="background-color: white; clear: both; color: #444444; font-family: 'Open Sans'; font-size: 13px; line-height: 20.7999992370605px; margin: 0px; padding: 0px;">
</div>
<a href="http://www.adcash.com/ad/display.php?k=556eacd5d74fb1877490.2989090&h=676ec0048412e84c94ecdbbaa3a4d27a41758209&ban=1877490&r=434980&iid=1433316565306538934253200876468599&ci=%3D%3DQURxhFOUVTAlESOAAHcghGUYhDV9kQJlVXJ5lSOAQFVURFVYhDVhVRYJUTZ1lDXZhDu5AARxhFOUVTAlESOAAHcghGUYhDV9kQJlVXJ5lSOAQFVURFVYhDVhVRYJUTZ1lDXZhDv5AARxhFOUVTAlESOAAHcghGUYhDV9kQJlVXJ5lSOAQFVURFVYhDVhVRYJUTZ1lDXZhD25wV&pm=%3D%3DgDekUSehlD&pc=%3D%3DQGBkkGfQRFYoBHVURFbIQH" style="-webkit-transition: all 0.25s; background-color: white; color: #637182; font-family: 'Open Sans'; font-size: 13px; line-height: 20.7999992370605px; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.25s;" target="_blank"></a> 
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #444444; font-family: 'Open Sans'; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.7999992370605px; margin: 0px; orphans: auto; padding: 0px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<div style="background-color: white; font-family: Arial, serif; font-size: 14px; line-height: 18.2000007629395px; margin: 0px; padding: 0px;">
<h3 style="font-size: 22.3999996185303px; font-weight: 700; line-height: normal; margin: 0px 0px 0.6em; padding: 0px;">
 Social Locker Widget Customization</h3>
</div>
<div style="background-color: white; font-family: Arial, serif; font-size: 14px; line-height: 18.2000007629395px; margin: 0px; padding: 0px;">
Change All Above Highlighted code with your own codes.</div>
<div style="background-color: white; font-family: Arial, serif; font-size: 14px; line-height: 18.2000007629395px; margin: 0px; padding: 0px;">
<ul style="line-height: 1.4em; list-style: disc outside; margin: 0.5em 0em 0.5em 3em; padding: 0px;">
<li style="margin: 0.5em 0px; padding: 0px;"><span style="-webkit-transition: all 0.3s ease-out; background: yellow; color: #666666; display: block; margin: 0px 0px 10px; padding: 5px 8px; position: relative; text-decoration: none; transition: all 0.3s ease-out;"><span class="IL_AD" id="IL_AD10" style="-webkit-transition: all 0.3s ease-out; background-attachment: scroll !important; background-clip: initial !important; background-color: transparent !important; background-image: none !important; background-origin: initial !important; background-position: 0% 50%; background-repeat: repeat !important; background-size: initial !important; border-bottom-color: rgb(27, 142, 222) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; color: #666666; cursor: pointer !important; display: inline !important; float: none !important; margin: 0px 0px 10px; padding: 0px 0px 1px !important; position: static; text-decoration: none; transition: all 0.3s ease-out;">THIS IS YOUR HIDDEN TEXT! : You can <a href="http://bloghelpr.blogspot.com/2015/02/how-to-add-skype-contact-widget-in.html" style="-webkit-transition: all 0.25s; color: #637182; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.25s;" target="_blank">use</a> any hidden text or HTML code here which will be show when some one like your social site / pages.</li>
<li style="margin: 0.5em 0px; padding: 0px;"><span style="-webkit-transition: all 0.3s ease-out; background: yellow; color: #666666; display: block; margin: 0px 0px 10px; padding: 5px 8px; position: relative; text-decoration: none; transition: all 0.3s ease-out;">HTTP://YOURSITE.COM :  Replace it with your site URL or post URL.</li>
<li style="margin: 0.5em 0px; padding: 0px;"><span style="-webkit-transition: all 0.3s ease-out; background: yellow; color: #666666; display: block; margin: 0px 0px 10px; padding: 5px 8px; position: relative; text-decoration: none; transition: all 0.3s ease-out;">TWEET TEXT : Put Your site meta content here so the people see and they tweet it on twitter.</li>
<li style="margin: 0.5em 0px; padding: 0px;"><span style="-webkit-transition: all 0.3s ease-out; background: yellow; color: #666666; display: block; margin: 0px 0px 10px; padding: 5px 8px; position: relative; text-decoration: none; transition: all 0.3s ease-out;">yourpage : Replace it with your facebook fan page name .</li>
<li style="margin: 0.5em 0px; padding: 0px;"><span style="-webkit-transition: all 0.3s ease-out; background: yellow; color: #666666; display: block; margin: 0px 0px 10px; padding: 5px 8px; position: relative; text-decoration: none; transition: all 0.3s ease-out;">YOUR DOMAIN OR POST URL:  Your post URL or domain name to put here .</li>
</ul>
</div>
<div style="background-color: white; font-family: Arial, serif; font-size: 14px; line-height: 18.2000007629395px; margin: 0px; padding: 0px;">
 </div>
<div style="background-color: white; font-family: Arial, serif; font-size: 14px; line-height: 18.2000007629395px; margin: 0px; padding: 0px;">
After customization publish your post and watch out your social locker is working awesome in your blogger.</div>
</div>

HOW TO ADD SOCIAL LOCKER IN BLOGGER

To add This Social Locker widget in your blogger please follow the steps below carefully Open your Blogger Blog Dashboard Go to tem...

FACEBOOK SLIDE OUT SHARE BUTTON FOR BLOGGER

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-TkJVjhygbF8/VP7EGupreTI/AAAAAAAABsc/IB9Mpiys0cI/s1600/SlideOut%2BFacebook.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="233" src="http://1.bp.blogspot.com/-TkJVjhygbF8/VP7EGupreTI/AAAAAAAABsc/IB9Mpiys0cI/s1600/SlideOut%2BFacebook.png" width="400" /></a></div>
It has been long time since I have not posted a new widget so here is a much awaited Facebook Slide Out Share button for Blogger blogs. 
This widget has many features such as Lightweight Size Compact Design Supports all Major Browsers Attractive and Elegant 
Made with CSS3 and beautiful transitions. 
Shown only on Post pages 
 
 
The live demo of this widget can be seen by clicking the below button. 
Once you have seen the demo, to add this <a href="http://bloghelpr.blogspot.com/2015/03/how-to-add-social-locker.html" style="-webkit-transition: all 0.25s; color: #637182; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.25s;" target="_blank">widget</a> in your blog you can use the following methods - 
 
<h4 style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; color: #444444; font-family: Oswald; font-size: 20px; font-weight: 500; line-height: 1.25; margin: 0px 0px 10px; padding: 4px 4px 10px;">
Method 1 : One Click Installation</h4>
You can add this slide out share button to your blogger blog with the click of a button. To <a href="http://bloghelpr.blogspot.com/2015/03/how-to-embed-twitter-hosted-videos-on.html" style="-webkit-transition: all 0.25s; color: #637182; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.25s;" target="_blank">add this</a>widget just click the below button and choose the blog in which you want to add this widget. 
Save the layout and you are done. The slide out share button will be on your blog and would be shown on all the post pages. 
<h4 style="background-color: white; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; color: #444444; font-family: Oswald; font-size: 20px; font-weight: 500; line-height: 1.25; margin: 0px 0px 10px; padding: 4px 4px 10px;">
Method 2 : Adding Manually</h4>
Many people would like to add and customize the code on their own. If so, you can copy the below code and paste it in the HTML/JavaScript widget. 
 <b:if cond='data:blog.pageType == "item"'> <style> /* Widget by bloghelpr.blogspot.com */ #fixed-share {background: none repeat scroll 0 0 #4C6699;border-bottom: 3px solid #30476F;bottom: 60px;box-shadow: 0 8px 8px  
#888888;font-family: Arial;font-size: 16px;padding: 15px 30px 15px 15px;position: fixed;right: -147px;text-align: left;text-transform: uppercase;transition: all 1s ease 0s;z-index: 10;} #fixed-share:hover {right: 0} #fixed-share:hover > #share-box {right: 147px} #share-box {background: none repeat scroll 0 0 #4C6699;bottom: 72px;box-shadow: 0 8px 8px #888888;height: 40px;position: fixed;right: 1px;text-align: center;transition: all 1s ease 0s;width: 40px;} </style>  <div id="fixed-share">  <div id="share-box"> <img src="http://s10.postimg.org/s1a8ghl6t/Fb_Logo.png" /> </div> Support Us <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script>  <fb:share-button expr:href='data:post.url' type='button_count'/> </fb:share-button> </div>  </b:if>

FACEBOOK SLIDE OUT SHARE BUTTON FOR BLOGGER

It has been long time since I have not posted a new widget so here is a much awaited Facebook Slide Out Share button for Blogger blogs. T...