Nail The Information...

Home » Archives for 10/30/16

Oct 30, 2016

Custom Floating Social Media Share Button For Blogger (A Complete Guide)

Great idea putting up a social media share button on your blog, this helps creating awareness and in the other hand get you more traffic.

Read the post carefully for a complete guide on how to add a Social media share buttons on your blog.

How to add custom floating social media share button on blogger template.

On your blog template search for the

<head> tag.

Using ctrl+f to open a search box.

Copy the font awesome code below and paste it under or after the <head> tag

rel='stylesheet'/>

Copy the code below to Add Google javascript library link. First check if the code already exists on your template if yes skip the below code.

Adding the css part of the code.

Click inbthe template, use ctrl+f to seacrh for </head> tag, copy the code below and paste it above or before </head> tag.

<b:if cond='data:blog.pageType ==
"item"'>
<style type='text/css'>
/
*-------------------------------------------------------
-----
Floating Social Share Button Bar Version
2.0
Designed by:: http://
www.twistblogger.com
Shares Count Code by:: http://
http://ift.tt/2aspvmS
issued under GNU GPL Licence
Icons:: FontAwesome 4.2.0
**************** Do Not Remove These
Credits *****************
--------------------------------------------------------
----*/
.twistBlogger_SocialBar {
position: fixed;
bottom: 30%;
padding: 0;
left:0;
background: none;
text-align: center;
margin: 0 auto;
z-index: 99999999;
}
.twistBlogger_SocialBar label:hover {
cursor: pointer;
opacity:1;
}
.twistBlogger_SocialBar label {
text-align: center;
opacity: 0.4;
width: 50px;
background: #3A3939;
color: #FFF;
border: 0;
font-family: FontAwesome;
display: block;
font-size: 12px;
padding: 0px 0px;
border-radius: 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
position: absolute;
line-height: 1.5em;
margin-top: 346px;
}
input.ShowHide_Button:checked + label {
transform-origin: 50% 0%!important;
-webkit-transform-origin: 50% 0%!
important;
-moz-transform-origin: 50% 0%!important;
-ms-transform-origin: 50% 0%!important;
-o-transform-origin: 50% 0%!important;
opacity: 1;
-webkit-transform: translateX(0px) rotateY
(-180deg);
-moz-transform: translateX(0px) rotateY
(-180deg);
-ms-transform: translateX(0px) rotateY
(-180deg);
-o-transform: translateX(0px) rotateY
(-180deg);
transform: translateX(0px) rotateY
(-180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
border: 1px solid #3A3939;
border-radius: 50px 0px 0px 50px;
width: 30px;
max-width: 30px;
}
input.ShowHide_Button ~ .ShowHideMe {
-webkit-transition: .6s all cubic-bezier
(0.730, -0.485, 0.145, 1.620);
-moz-transition: .6s all cubic-bezier
(0.730, -0.485, 0.145, 1.620);
-ms-transition: .6s all cubic-bezier(0.730,
-0.485, 0.145, 1.620);
-o-transition: .6s all cubic-bezier(0.730,
-0.485, 0.145, 1.620);
transition: .6s all cubic-bezier(0.730,
-0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked ~
.ShowHideMe {
margin-left: -75px !important;
}
input.ShowHide_Button {
display: none;
}
.twistBlogger_SocialBar .social_menu {
display: inline-block;
float: left;
list-style:none;
max-width:50px;
margin: 0;
padding: 0;
}
.twistBlogger_SocialBar .social_menu
.button_facebook {
background: #3a579a;
}
.twistBlogger_SocialBar .social_menu
.button_facebook:hover {
background: #314a83;
}
.twistBlogger_SocialBar .social_menu
.button_twitter {
background: #00abf0;
}
.twistBlogger_SocialBar .social_menu
.button_twitter:hover {
background: #0092cc;
}
.twistBlogger_SocialBar .social_menu
.button_googleplus {
background: #df4a32;
}
.twistBlogger_SocialBar .social_menu
.button_googleplus:hover {
background: #be3f2b;
}
.twistBlogger_SocialBar .social_menu
.button_pinterest {
background: #cd1c1f;
}
.twistBlogger_SocialBar .social_menu
.button_pinterest:hover {
background: #ae181a;
}
.twistBlogger_SocialBar .social_menu
.button_stumbleupon {
background: #ea4b24;
}
.twistBlogger_SocialBar .social_menu
.button_stumbleupon:hover {
background: #c7401f;
}
.twistBlogger_SocialBar .social_menu
.button_linkedin {
background: #2554BF;
}
.twistBlogger_SocialBar .social_menu
.button_linkedin:hover {
background: #224EB4;
}
.twistBlogger_SocialBar .social_menu
.button_facebook .count,
.twistBlogger_SocialBar .social_menu
.button_twitter .count,
.twistBlogger_SocialBar .social_menu
.button_googleplus .count,
.twistBlogger_SocialBar .social_menu
.button_pinterest .count,
.twistBlogger_SocialBar .social_menu
.button_stumbleupon .count,
.twistBlogger_SocialBar .social_menu
.button_linkedin .count {
color: #fff!important;
padding-top: 4px;
font-size: 13px !important;
line-height: 1.2em;
font-family: sans-serif;
font-weight: bold;
}
.twistBlogger_SocialBar .social_menu > ul
{
margin: 0;
padding: 0;
list-style: none;
}
.twistBlogger_SocialBar .social_menu
.share {
background: #FFF;
color: #807F7F;
font-size: 11px;
height: 45px !important;
}
.twistBlogger_SocialBar .social_menu
.share .count.h4 {
font-size: 18px;
font-family: sans-serif;
color: #424242;
height: 25px !important;
line-height: 1.5em;
font-weight: bold;
margin: 0px !important;
}
.twistBlogger_SocialBar .social_menu
.share .h6 {
padding-bottom: 3px;
font-family: sans-serif;
margin: 0px !important;
line-height: 1.5em;
font-size: 11px;
}
.twistBlogger_SocialBar .social_menu > ul
> li {
margin: 0px 0px 0px 0px;
position: relative;
text-align: center;
list-style: none;
list-style-type: none;
padding: 0px;
border: 0px;
border-left: 0 solid rgba( 0,0,0,.4);
height: 50px;
width: 50px;
overflow: hidden;
display: block;
box-sizing: border-box;
background: none;
box-sizing: content-box;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul
> li a {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 5px 0px;
cursor: pointer;
text-decoration: none;
}
.twistBlogger_SocialBar .social_menu > ul
> li:hover {
border-left: 5px solid rgba( 0,0,0,.3);
width: 40px;
}
.twistBlogger_SocialBar .social_menu > ul
> li i {
color: #fff !important;
font-family: FontAwesome;
font-size: 20px;
font-style: normal;
font-weight: normal;
line-height: 1em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul
> li:hover i {
opacity: 0.9;
}
@media only screen and (min-
width:768px) and (max-width:979px) {
.twistBlogger_SocialBar {
bottom: 20% !important;
}
}
@media only screen and (min-
width:480px) and (max-width:767px) {
.twistBlogger_SocialBar {
bottom: 15% !important;
}
}
@media only screen and (max-
width:479px) {
.twistBlogger_SocialBar {
bottom: 10% !important;
display: none !important; /*---delete this
code line to make it appear on mobile--*/
}
}
</style>

</b:if>

How to customize the above code to appear on mobile devices.

Simply delete the highlited(display: none !important )code.

Now search for this code

<div class='post-footer-line post-footer-line-3'>

Copy the code whole css and javascript Api below and paste it below the above tag.

<b:if cond='data:blog.pageType ==
"item"'>
<b:if cond='data:blog.pageType !=
"static_page"'>
<div class='twistBlogger_SocialBar'>
<input class='ShowHide_Button'
id='twiSter' type='checkbox'/>
<label for='twiSter'><i class='fa fa-arrow-
left'/></label>
<div class='ShowHideMe'>
<div class='social_menu'>
<div class='share'>
<div class='share-btn' data-
service='total'>
<div class='count h4'/>
<div class='h6'>SHARES</div>
</div></div>
<ul>
<li class='button_facebook'>
<a expr:href='" http://
http://ift.tt/2f7owvh;
src=bm& u=" + data:post.url
+ " & t=" +
data:post.title' onclick='window.open
(this.href," sharer" ,"
toolbar=0,status=0,width=626,height=436
" ); return false;'
rel='nofollow'><strong><i class='fa fa-
facebook'/>
<div class='share-btn' data-
service='facebook'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='"expr:href='"https://twitter.com/
intent/tweet?url=" + data:blog.url +

"&text=" + data:post.title +

" via @chi_obinna - "'

onclick='window.open(this.href,"
sharer" ,"
toolbar=0,status=0,width=626,height=436
" ); return false;'
rel='nofollow'><strong><i class='fa fa-
twitter'/>
<div class='share-btn' data-
service='twitter'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='" https://
http://ift.tt/1aPl4SG; +
data:post.url'
onclick='javascript:window.open
(this.href," " ,"
menubar=no,toolbar=no,resizbutton_le=ye
s,scrollbars=yes,height=600,width=600&
quot; ); return false; '
rel='nofollow'><strong><i class='fa fa-
google-plus'/>
<div class='share-btn' data-
service='google'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside'
expr:href='" http://pinterest.com/
pin/create/button/?url=" +
data:post.url + "
&media=" +
data:blog.postImageUrl +
"&description=" +
data:post.title' onclick='window.open
(this.href," sharer" ,"
toolbar=0,status=0,width=626,height=500
" ); return false;'
rel='nofollow'><strong><i class='fa fa-
pinterest'/>
<div class='share-btn' data-
service='pinterest'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='" http://
http://ift.tt/113u5R1?
url=" + data:post.url + " &
title=" + data:post.title'
onclick='window.open(this.href,"
sharer" ,"
toolbar=0,status=0,width=626,height=500
" ); return false;'
rel='nofollow'><strong><i class='fa fa-
stumbleupon-circle'/>
<div class='share-btn' data-
service='stumbleupon'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='" http://
http://ift.tt/1fuePzD?
mini=true& url=" +
data:post.url + " &
title=" + data:post.title + "
& summary=& source="
' onclick='window.open(this.href,"
sharer" ,"
toolbar=0,status=0,width=626,height=500
" ); return false;'
rel='nofollow'><strong><i class='fa fa-
linkedin'/>
<div class='share-btn' data-
service='linkedin'>
<div class='count'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
var shareUrl = $("link[rel=canonical]").attr
("href");
$.getJSON('$.getJSON('https://
http://ift.tt/1qiaY4C' +
encodeURIComponent(shareUrl) +
"&callback=?", function (data) {
shares = data.shares;
$(".count").each(function (index, el) {
service = $(el).parents(".share-
btn").attr("data-service");
count = shares[service];
if (count > 1000) {
count = (count / 1000).toFixed(1);
if (count > 1000) count = (count /
1000).toFixed(1) + "M";
else count = count + "k";
}
$(el).html(count);
});
});
});
//]]></script>
</b:if>

</b:if>

Editing the code<b:if cond='data:blog.pageType ==
"item"'>
<b:if cond='data:blog.pageType !=
"static_page"'>
<div class='twistBlogger_SocialBar'>
<input class='ShowHide_Button'
id='twiSter' type='checkbox'/>
<label for='twiSter'><i class='fa fa-arrow-
left'/></label>
<div class='ShowHideMe'>
<div class='social_menu'>
<div class='share'>
<div class='share-btn' data-
service='total'>
<div class='count h4'/>
<div class='h6'>SHARES</div>
</div></div>
<ul>
<li class='button_facebook'>
<a expr:href='" http://
http://ift.tt/2f7owvh;
src=bm& u=" + data:post.url
+ " & t=" +
data:post.title' onclick='window.open
(this.href," sharer" ,"
toolbar=0,status=0,width=626,height=436
" ); return false;'
rel='nofollow'><strong><i class='fa fa-
facebook'/>
<div class='share-btn' data-
service='facebook'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='"expr:href='"https://twitter.com/
intent/tweet?url=" + data:blog.url +
"&text=" + data:post.title +
" via @TwistBlogger - "'
onclick='window.open(this.href,"
sharer" ,"
toolbar=0,status=0,width=626,height=436
" ); return false;'
rel='nofollow'><strong><i class='fa fa-
twitter'/>
<div class='share-btn' data-
service='twitter'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='" https://
http://ift.tt/1aPl4SG; +
data:post.url'
onclick='javascript:window.open
(this.href," " ,"
menubar=no,toolbar=no,resizbutton_le=ye
s,scrollbars=yes,height=600,width=600&
quot; ); return false; '
rel='nofollow'><strong><i class='fa fa-
google-plus'/>
<div class='share-btn' data-
service='google'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside'
expr:href='" http://pinterest.com/
pin/create/button/?url=" +
data:post.url + "
&media=" +
data:blog.postImageUrl +
"&description=" +
data:post.title' onclick='window.open
(this.href," sharer" ,"
toolbar=0,status=0,width=626,height=500
" ); return false;'
rel='nofollow'><strong><i class='fa fa-
pinterest'/>
<div class='share-btn' data-
service='pinterest'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='" http://
http://ift.tt/113u5R1?
url=" + data:post.url + " &
title=" + data:post.title'
onclick='window.open(this.href,"
sharer" ,"
toolbar=0,status=0,width=626,height=500
" ); return false;'
rel='nofollow'><strong><i class='fa fa-
stumbleupon-circle'/>
<div class='share-btn' data-
service='stumbleupon'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='" http://
http://ift.tt/1fuePzD?
mini=true& url=" +
data:post.url + " &
title=" + data:post.title + "
& summary=& source="
' onclick='window.open(this.href,"
sharer" ,"
toolbar=0,status=0,width=626,height=500
" ); return false;'
rel='nofollow'><strong><i class='fa fa-
linkedin'/>
<div class='share-btn' data-
service='linkedin'>
<div class='count'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
var shareUrl = $("link[rel=canonical]").attr
("href");
$.getJSON('$.getJSON('https://
http://ift.tt/1qiaY4C' +
encodeURIComponent(shareUrl) +
"&callback=?", function (data) {
shares = data.shares;
$(".count").each(function (index, el) {
service = $(el).parents(".share-
btn").attr("data-service");
count = shares[service];
if (count > 1000) {
count = (count / 1000).toFixed(1);
if (count > 1000) count = (count /
1000).toFixed(1) + "M";
else count = count + "k";
}
$(el).html(count);
});
});
});
//]]></script>
</b:if>

</b:if>

Editing the code

Delete my twitter username and input your own in there @chi_obinna.

Delete the Html code within the <li> and </li> tag, if you want to delete any button.

What the author Says.

Hi if you are finding it difficult doing this your self, kindly drop a comment below and I will help you out, and don't forget to share our Posts.

Simple Side Bar Email Subscription Widget For Blogger.

Get more Email subscribers to your blog, with this stylish Emails subscription widget made with pure css code.

This will help increase your blog load speed.

1. Login to your blogger account.

Click on Template, Edit Html, click on the blog Template, click on the ctrl+f key on you keyboard for windows and cmd+f on Mac.

Features Of The Sidebar Subscription Box.

1) Fully Responsive Design.

2) simple and Super easy to customize the colors and text content.

3) Social Profiles' Links in the bottom.

4) Beautifu hover effect, with font awesome icons.

5) Loads faster, because it is made up of pure CSS code.

Now search for the <head> rage and paste the font awesome code below it.

rel='stylesheet'/>

Save your template and go to layout click on the Add Gadget option. A new pop up window will appear, click on the + sign on the right side of add a HTML code.

Copy the code below and paste it inside the box that appear, leave the title box at the top empty.

Don't click on the save button yet

http://ift.tt/ttr54b?

uri=legendyechny.blogspot', 'popupwindow',

'scrollbars=yes,width=550,height=520');ret
urn true">
<input type="text" name="email"
placeholder="Enter your email address...">

<input type="hidden"

value=" legendtechny.blogspot" name="uri">

<div class="bottom_lock_policy">We

Respect Your Privacy | <a href="http://ift.tt/2eoQuT6">Get This Widget</a> </

div>
<div class="social_profiles">

<a href=" http://ift.tt/eIlFV0

Legendtechny.blogspot " target='_blank' rel='nofollow'

title="Join on Facebook"><i class="fa fa-
facebook"></i></a>

<a href=" http://www.twitter.com/

Chi_obinna" target='_blank' rel='nofollow'

title="Follow on Twitter"><i class="fa fa-
twitter"></i></a>

<a href=" http://plus.google.com/

+ostani " target='_blank' rel='nofollow'

title="Follow on Google+"><i class="fa fa-
google-plus"></i></a>

#FF5959

title="Follow on Pinterest"><i class="fa fa-
pinterest"></i></a>
</div>

</div>

How to customize the css code.

1. Change this 3 highlighted #FF5959 color code to any code of your choice.

2. Change the three highlited social profile URL to your own URL.

<a href=" http://plus.google.com/

+ostani " target='_blank' rel='nofollow

<a href=" http://www.twitter.com/

Chi_obinna

<a href=" http://ift.tt/eIlFV0

Legendtechny.blogspot

3. Edit the bold highlited texts with any text of your choice, except my blog name replace it with your blog name.

...After Customizing The CSS Code, Now Click On Save Button.

How To Hack A Saved Wi-Fi Password On Android

Note: before you get started, make sure your Android phone is rooted and you ES File Explorer is also installed.

Read The Guide Below

1. first of all move up a folder to the root folder, open ES file Explorer, locate the code named DATA

2. After that, go to “data/misc/wifi” folder, and locate the file name, “wpa_supplicant.conf”.

3. Open the file, and make use of the ES File Explorer‘s built-in text/HTML viewer to view through the text file.

4. With the help of this app you should see the network SSID and their passwords next to it, simply note or write down the name and password.

Comming soon: How to view a saved Wi-Fi password on laptop computer.

Custom Popular Post Widget With Counter Box

This popular post widget will make your blog look nice we'd help vistors easily navigate you posts. 
Login to your blogger Dashboard>>click on Template>>>Edit Html.
On the blog Template click on it and click ctrl+f on windows and cmd+f on Mac.

First step=Adding javascrip to before </bod> tag.

Copy the code below, and paste it before the </body>tag in your template.

Style One

/* Sidebar Popular Posts */
.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
font-family: "Oswald",sans-serif;
height: 130px;
font-weight: bold;
list-style: none !important;
overflow: hidden;
padding: 0px !important;
position: relative;
margin: 2px;
border: 0;
width: 100%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail
{margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /
*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla
Animation duration*/
-o-transition-duration: 1.0s; /*Opera
Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit:
0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5
times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5
times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 16px;
font-weight: bold;
line-height: normal;
font-family: "Oswald",sans-serif;
padding: 10px 0px 5px 10px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-
title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;border-width: 0px 2px 2px 0px;

Style Two

/* Sidebar Popular Posts - Style 1 */.sidebar .popular-posts ul {
counter-reset: popcount;
margin: 0;
padding: 0;
}
.sidebar .popular-posts ul li:first-child {}
.sidebar .popular-posts ul li {
font-family:'Oswald','Open
Sans','Helvetica Neue',Arial,Tahoma,sans-
serif;
  height: 130px;
  list-style: none !important;
overflow: hidden;
padding: 0 !important;
position: relative;
margin: 2px;
border: 0;
width: 48%;
float: left;
}
.sidebar .PopularPosts .item-thumbnail
{margin: 0; width: 100%;}
.sidebar .PopularPosts ul li img {
display: block;
float: left;
padding: 0;
width: 100%;
height: 130px;
-webkit-transition-duration: 1.0s; /
*Webkit: Animation duration*/
-moz-transition-duration: 1.0s; /*Mozilla
Animation duration*/
-o-transition-duration: 1.0s; /*Opera
Animation duration*/
transition:1.0s;
}
.sidebar .PopularPosts ul li img:hover {
-webkit-transform:scale(1.06); /*Webkit:
0.5 times the original Image size*/
-moz-transform:scale(1.06); /*Mozilla 0.5
times the original Image size*/
-o-transform:scale(1.06); /*Opera 0.5
times the original Image size*/
transform:scale(1.06);
overflow: hidden;
}
.sidebar .PopularPosts .item-title {
bottom:0;
left: 0;
right: 0;
padding-bottom: 0;
position: absolute;
z-index: 999;
}
.sidebar .PopularPosts .item-title a {
background: rgba(32, 32, 32, 0.77);
color: #FFFFFF;
display: block;
font-size: 12px;
line-height: normal;
padding: 5px 0px 2px 5px;
text-transform: capitalize;
transition: all .4s ease-in-out;
}
.sidebar .popular-posts ul li:hover .item-
title a {
color: rgba(255, 255, 255, 1);
background: rgba(231, 76, 60, 0.88);
text-decoration: none;
}
.sidebar .popular-posts ul li:before {
background: rgba(255, 252, 8, 1);
color: #000;
content: counter(popcount, decimal);
counter-increment: popcount;
float: left;
font-size: 14px;
line-height: 20px;
list-style-type: none;
padding: 0px 8px 1px 1px;
border-radius: 0px 0px 10px 0px;
position: absolute;
top: 0;
z-index: 4;
border: solid #FFF;
border-width: 0px 2px 2px 0px;}

Now got to your blog Layout and change you popular post settings according to the Image Below.

posted from Bloggeroid

Nail The Information...

Search

Oct 30, 2016

Custom Floating Social Media Share Button For Blogger (A Complete Guide)

Simple Side Bar Email Subscription Widget For Blogger.

How To Hack A Saved Wi-Fi Password On Android

Custom Popular Post Widget With Counter Box

Popular posts

Labels

Blog Archive

Labels

Follow us

Nail The Information...

Search

Oct 30, 2016

Popular posts

Labels

Blog Archive

Subscribe via Email

Subscribe To

Labels

Follow us