Search

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

<link href='http://
http://ift.tt/YLkwbr
awesome/4.2.0/css/font-awesome.css'
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 ==
&quot;item&quot;'>
<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 ==
&quot;item&quot;'>
<b:if cond='data:blog.pageType !=
&quot;static_page&quot;'>
<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='&quot; http://
http://ift.tt/2f7owvh;
  src=bm&amp; u=&quot; + data:post.url
+ &quot; &amp; t=&quot; +
data:post.title' onclick='window.open
(this.href,&quot; sharer&quot; ,&quot;
toolbar=0,status=0,width=626,height=436
&quot; ); 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='&quot;expr:href='&quot;https://twitter.com/
intent/tweet?url=&quot; + data:blog.url +
&quot;&amp;text=&quot; + data:post.title +
&quot; via @chi_obinna - &quot;'
onclick='window.open(this.href,&quot;
sharer&quot; ,&quot;
toolbar=0,status=0,width=626,height=436
&quot; ); 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='&quot; https://
http://ift.tt/1aPl4SG; +
data:post.url'
onclick='javascript:window.open
(this.href,&quot; &quot; ,&quot;
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='&quot; http://pinterest.com/
pin/create/button/?url=&quot; +
data:post.url + &quot;
&amp;media=&quot; +
data:blog.postImageUrl +
&quot;&amp;description=&quot; +
data:post.title' onclick='window.open
(this.href,&quot; sharer&quot; ,&quot;
toolbar=0,status=0,width=626,height=500
&quot; ); 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='&quot; http://
http://ift.tt/113u5R1?
url=&quot; + data:post.url + &quot; &amp;
title=&quot; + data:post.title'
onclick='window.open(this.href,&quot;
sharer&quot; ,&quot;
toolbar=0,status=0,width=626,height=500
&quot; ); 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='&quot; http://
http://ift.tt/1fuePzD?
mini=true&amp; url=&quot; +
data:post.url + &quot; &amp;
title=&quot; + data:post.title + &quot;
&amp; summary=&amp; source=&quot;
' onclick='window.open(this.href,&quot;
sharer&quot; ,&quot;
toolbar=0,status=0,width=626,height=500
&quot; ); 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 ==
&quot;item&quot;'>
<b:if cond='data:blog.pageType !=
&quot;static_page&quot;'>
<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='&quot; http://
http://ift.tt/2f7owvh;
  src=bm&amp; u=&quot; + data:post.url
+ &quot; &amp; t=&quot; +
data:post.title' onclick='window.open
(this.href,&quot; sharer&quot; ,&quot;
toolbar=0,status=0,width=626,height=436
&quot; ); 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='&quot;expr:href='&quot;https://twitter.com/
intent/tweet?url=&quot; + data:blog.url +
&quot;&amp;text=&quot; + data:post.title +
&quot; via @TwistBlogger - &quot;'
onclick='window.open(this.href,&quot;
sharer&quot; ,&quot;
toolbar=0,status=0,width=626,height=436
&quot; ); 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='&quot; https://
http://ift.tt/1aPl4SG; +
data:post.url'
onclick='javascript:window.open
(this.href,&quot; &quot; ,&quot;
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='&quot; http://pinterest.com/
pin/create/button/?url=&quot; +
data:post.url + &quot;
&amp;media=&quot; +
data:blog.postImageUrl +
&quot;&amp;description=&quot; +
data:post.title' onclick='window.open
(this.href,&quot; sharer&quot; ,&quot;
toolbar=0,status=0,width=626,height=500
&quot; ); 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='&quot; http://
http://ift.tt/113u5R1?
url=&quot; + data:post.url + &quot; &amp;
title=&quot; + data:post.title'
onclick='window.open(this.href,&quot;
sharer&quot; ,&quot;
toolbar=0,status=0,width=626,height=500
&quot; ); 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='&quot; http://
http://ift.tt/1fuePzD?
mini=true&amp; url=&quot; +
data:post.url + &quot; &amp;
title=&quot; + data:post.title + &quot;
&amp; summary=&amp; source=&quot;
' onclick='window.open(this.href,&quot;
sharer&quot; ,&quot;
toolbar=0,status=0,width=626,height=500
&quot; ); 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. 

<link href='http://
http://ift.tt/YLkwbr
awesome/4.3.0/css/font-awesome.css'
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

<style>
/* ----------------------------------------------------
Sidebar Subscription Box Widget = V.2
Designed by :: http://
www.TwistBlogger.com
Keep These Credits Intact, Do Not Remove
-----------------------------------------------------*/
#twist-blogger-sbox-v2 {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
width: 100%;
border-radius: 1px;
border: 0;
background: #363636;
}
#twist-blogger-sbox-v2 .main_tagline {
padding: 0px 0px;
line-height: 2.5em;
font-size: 26px;
margin: 0;
height: 95px !important;
overflow: hidden;
font-weight: normal;
color: #FFF;
text-align: center;
border: 0;
background-color: #FF5959;
}
#twist-blogger-sbox-v2 .email_icon {
display: table;
margin: -35px auto 0px;
font-size: 25px;
padding: 12px;
height: 25px;
width: 25px;
background-color: #363636;
color: #FFF;
border-radius: 50px;
border: 10px solid #FFFFFF;
line-height: 0;
}
#twist-blogger-sbox-v2 p {
font-size: 15px;
color: #F9F9F9;
text-shadow: 0px -1px 0px #000;
line-height: 27px;
padding: 5px 10px 5px;
text-align: center;
width: 80%;
margin: 5px auto 20px;
border-bottom: 2px solid #6A6A6A;
border-radius: 20px;
}
#twist-blogger-sbox-v2 .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#twist-blogger-sbox-v2 .rssform input {
padding: 8px;
margin: 20px auto 15px;
font-size: 13px;
color: #000;
text-align: center;
display: block;
font-family: inherit;
font-weight: normal;
width: 90%;
height: 38px;
text-transform: uppercase;
outline: none !important;
border: 1px solid #FFFFFF;
border-radius: 1px;
background-color: #FCFCFC;
box-sizing: border-box !important;
}
#twist-blogger-sbox-v2 .rssform
.button:hover {
background: #000000;
}
#twist-blogger-sbox-v2 .rssform .button {
background: #FF5959;
color: white!important;
border: 1px solid #FFFFFF;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
padding: 5px 2px !important;
float: none;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
cursor: pointer;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy {
background: url
(http://ift.tt/Pr3JSs
kYVqV9JYDHY/VPMC8jPKTGI/
AAAAAAAAA28/zxv0TYRIZe4/s1600/
Lock-twistblogger.png) no-repeat 3% -2px;
color: #959595;
text-align: center;
font-size: 12px;
margin: 0;
padding: 3px;
line-height: 25px;
}
#twist-blogger-sbox-
v2 .bottom_lock_policy a {
color: #959595;
text-decoration: none !Important;
}
#twist-blogger-sbox-v2 .social_profiles {
line-height: 1.2em;
display: table;
float: none;
margin: 0px auto;
text-align: center;
min-width: 157px;
padding: 5px 0px;
border: 0;
}
#twist-blogger-sbox-v2 .social_profiles
a:hover {
color: #FFF;
background-color: #FF5959;
border-color: #FFF;
}
#twist-blogger-sbox-v2 .social_profiles a {
color: #000000;
margin: 0 5px;
text-align: center;
float: left;
display: table;
padding: 4px 5px;
background-color: #FFFFFF;
border-radius: 50px;
border: 2px solid #2D2D2D;
width: 15px;
height: 15px;
line-height: 0;
font-size: 16px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#twist-blogger-sbox-v2 form {
margin-bottom: 10px !important;
}
</style>
<div id="twist-blogger-sbox-v2">
<div class="main_tagline"> Join Our
Newsletter
</div><div
class="email_icon"><i class="fa fa-
envelope"></i></div>
<p> Get All The Latest Updates
Delivered Straight Into Your Inbox For
Free!
</p>
   <div class="rssform">
<form action="http://
http://ift.tt/ttr54b"
method="post" target="popupwindow"
onsubmit="window.open('http://
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">
<input type="hidden" name="loc"
value="en_US">
<input value="Join Now"
class="button" type="submit">
</form>
</div>
<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.&nbsp;
Login to your blogger Dashboard>>click on Template>>>Edit Html.
On the blog Template click&nbsp;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.



<script src='http://ift.tt/nkWzpa
ajax/libs/jquery/1.7.1/jquery.min.js'
type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var tbn = 150;
$('#PopularPosts1').find('img').each
(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace
(/s\B\d{2,4}/,'s' + tbn)});
image.attr('width',tbn);
image.attr('height',tbn);
});
});//]]></script>
Note : Back up your blog template first.&nbsp;

Customizing the thumbnail size.&nbsp;Simply change the highlited&nbsp;digit 150, to any number of your choice.
In this, our thumbnail size will be 150x150px.&nbsp;
Step two adding the css style code.&nbsp;
Simply chose any of your choice style code and paste it before the&nbsp;]]></b:skin>


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;
&nbsp; height: 130px;
&nbsp; 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

Oct 29, 2016

How To Automatically Add Border To Your Blog Post Images

Read The Guid Below

Login to your blogger blog  dashboard>>Click on Template>>Edit Html.


Note:  First Backup Your Blogger Template 

Copy the code below and paste it above  the b:skin tag on your blog template.

.post img {border:5px solid #d2d2d2;padding:2px;}

You can change the #d2d2d2 border  color code to any code of your choice.

Oct 20, 2016

Complete Guide: Download And Install PES 2017 Apk, Data+Obb, On Your Android Phone.



PES (Pro Evolution Soccer), is one of the biggest video game known to all, here is a much improved version of it PES 2017, with great graphic display and features, buy and transfer players, no internet connection required, upgrade stadium to improve club earning et.c.

Related post: How To Install And Play PPSSPP Game: Download The Emulator Here.

I know many are looking for an uncorupted link to download this grea lucky you are here, you can download this gameAPK and play it with my complete guide for the installment.


Features of PES 2017


.Available manager Modesto play

.Sell and buy players

.Stadium upgrade to improve club earnings

.Improved graphics, player appears to be real with accurate graphic

.Added game modes such as training, quick match, seasons, cups and leagues modes

.Multiplayer mode available ( Wi-Fi connection required)

.Offline mode lay available, with all the features supported

.You can transfer new players up to 2017

.New club jersey for 2017

.Moderate game size

.What what a surprise!, nother great and newly added feature in PES 2017 is you will be able to play with female national teams



What Are The Materials Needed

1. PES 2017 APK- Gold Edition Download

2. PES 2017 Download Data+Obb

Download the game emulator Here

Must Read: If You Don't Have The Game Emulator Read This Post And Download It Here

Game Specification And Size

Name : Pes 2017
Size : 260 MB
Mode : Offline
Supported Android : Version 2.3 and above
Upload : 2016


Download Insructions

From the links above,
Download Pes 17 Apk file and Obb Data.
Extract the .zip Obb data.
Open the DATA folder and copy " com.konamiproduction.pes17 " folder to Android / Data Also, open the OBB folder and copy "com.konamiproduction.pes17" folder to Android / OBB.

Read More: What is it The Small Black Hole Between Your iPhone Flash And Camera

Finally install the Apk file, just as usual


Now You Can Play And Enjoy Pro Evolution Soccer 2017 On Your Android PHONE.

posted from Bloggeroid

Oct 19, 2016

Purpose, Wonder What The Small Black Hole Between Your Phone Camera And Flash



Some do make the mistake of poking the small black hole between the iPhone Camera and Flash.

...Read more

How to Schedule Wallpaper For Automatic Change

How To Schedule Text message On Android, ipad and iPhone

Purpose Of The Small Black Hole

The back hole is a microphone, The purpose of the small black helps filter loud noise within you when making call or voice recording.

This microphone is located in three places on your iPhone, Front, Back and Bottom.



Why I made this post is because of the hole between the camera and flash, because people have asked questions about that, some go to the extent of poking it which destroys the Microphone.



Handle you phone with care and don't rough handle any strange thing you see on your phone

...you are welcome friend.

posted from Bloggeroid

Oct 18, 2016

this cerazy apps, helps schedule text messages on Android, iphone and ipad

Yeah! I can vividly remember , my last post was on how to How To Automatically Change Wallpaper On Android Phone

Scheduling a text message is a life and time saving practice, it makes it possible to send a text at the Right time. Don't bother about sending that text message when busy over something so important, simply compose the text message at you leisure time then schedule it to be sent at the Right time.





Thinking of how to do this top secret trick on your android, iPad and iPhone.?

For android users download this app SMS Scheduler

This application comes with great features that makes it great in function and operation.



...Features Of The SMS Scheduler App.

... Sent and delivered Text Message history, available status bar for notification, multiple recipient selection from phone book or recipient type in option. Generated conversation thread for sent messages and many more.


Schedule Text Message On iPad And iPhone

You can also do this on iPhone and iPad, doing this is as simple as,A B C D.

Now I will brief you on how to download and setup the iPhone or iPad Message scheduling app.

1. visit the Apple Store with your iPhone or iPad.

2. search for Stock Messages app

3. Download and install this app. Now follow the on-screen tutorial for setup.


What The Author Have To Say!!!

Hi good friend, don't forget to read and share this post using our social share buttons provided, you are welcome.

posted from Bloggeroid

Oct 17, 2016

How To Schedule Wallpaper, For Automatic Change On Android Phones


DOWNLOAD AUTOMATIC WALLPAPER CHANGER.

This sound weird, hey bro! Doubt not, you can schedule wallpaper to automatically change when the set time is due, you can schedule wallpaper to change in minutes, hourly, daily or even weekly.


Read More: 2016 Top Amazing Facebook Tricks


This trick isn't an inbuilt phone functionality, with the help of a third party application called WALLPAPER CHANGER.





This application is the best Android App for changing wallpaper on Android phone, this app has a one-click setup and Time Setting option, to schedule auto wallpaper change.




DOWNLOAD AUTOMATIC WALLPAPER CHANGER.

Don't think of this app draining your phone battery, NO, this app is optimized for Battery life performance.


Read More: MTN 4G LTE Purpose And Setup


...Authors Advice...
How Helpful Is This Post Don't Forget To Share This Post To Friends, your Friends Might Need This Information.

posted from Bloggeroid

 

Follow us