Like Us To Enter Advanced Social Traffic Widget For Blogger 2016
Hey Whats Up Guys!Are you looking for an advance Social Traffic Pop, so that you can convert your regular visitors into Social Followers? The main intention of using Traffic pop is to get more exposure on Social websites i.e. Facebook, Twitter and Google Plus. Though there are tons of Traffic Pops available on the internet, but they neither have splendid features, nor they provide user friendly experience. So Today I gonna going to share Like Us to Enter Social Traffic Widget with you.
Let Start it Below:
Installing Like Us Widget for Blogger:
Let Start it Below:
Installing Like Us Widget for Blogger:
To install like us widget you need to follow the given steps:
1.Login to Your Blogger Dashboards >> Template >> Edit HTML.
2.Now within the Template coding Search For ]]></b:skin> and just above it paste the following CSS coding and save your template.
/*---MyBloggingschool.blogspot.com Like To Enter Advance Traffic POP ---*/
.blackout {
display: none;
position:fixed;
_position:absolute;
width: 100%;
z-index:10000;
background-color:#000;
margin: 0px;
padding: 0px;
left:0;
top:0;
}
.socialmodalOuter {
display: none;
font-family: arial;
color: #575E6D;
font-size: 14px;
line-height: 20px;
background: rgb(73, 73, 73); /* The Fallback */
background: rgba(0, 0, 0, 0.6);
border-radius: 10px;
left: 50%;
padding: 7px;
position: fixed;
_position:absolute;
top: 50%;
z-index: 10001;
}
.socialmodal {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 3px 3px 3px 3px;
width: 460px;
}
.socialmodal .title {
border-bottom: 1px solid #E5E8EF;
font-weight: bold;
font-size: 19px;
font-weight: bold;
padding:16px 15px 10px 15px;
text-align:center;
}
.socialmodal .subtitle {
margin: 0px;
background:#2e6886;
color:#ffffff;
padding:4px;
text-align:center;
font-weight: bold;
font-size: 15px;
}
.socialmodal .warning {
margin: 0px;
background:#cb2026;
color:#ffffff;
padding:4px;
text-align:center;
}
.socialmodal .content {
padding: 0px 15px;
margin-top: 10px;
line-height: 17px;
}
.socialmodal .share {
padding: 0px 15px;
margin:20px 0px 15px 0px;
text-align:center;
height: 24px;
}
.socialmodal .close {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTBHkb9l3P1kfX8jyQj2rbri0z_R7yjYYgDyEs-0tRxSt-4OgfjhjkBe7YwRbV8O-cmPNQz9aAicLTYqPQG9SR1I1Cs6Qa6yRPuo6DyPzhWapZL5qj2clbn2t2RjYjKNweK0RVNTSLOaE/s1600/close.png")
no-repeat;
cursor: pointer;
height: 12px;
position: absolute;
right: 15px;
top: 15px;
width: 12px;
display: none;
}
.socialmodal .button {
float: left;
width: 115px;
line-height: 24px;
height: 24px;
}
.socialmodal .like {
margin-left: 15px;
}
.socialmodal .twttr {
margin-left: 30px;
}
.socialmodal .plus {
width: 90px;
margin-left: 50px;
}
/*
// cusomize position of elements
*/
.socialmodal .footer {
clear: both;
background: none repeat scroll 0 0 #E8EAEF;
border-radius: 0 0 3px 3px;
border-top: 1px solid #DDE0E8;
padding: 10px 0;
color: #878D9C;
text-shadow: 0 1px 0 #FFFFFF;
text-align:center;
font-size:13px;
}
3.Now just Go to Blogger Dashboard>>Layout.
4.Now click in Add a Gadget>>Html/Javascript.
5.Then paste the following code there:
<script
src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
!window.jQuery && document.write('<script
src="js/jquery.js"><\/script>')
</script>
<script src="http://apis.google.com/js/plusone.js"
type="text/javascript"
gapi_processed="true"></script>
<script
src="http://connect.facebook.net/en_US/all.js#xfbml=1"
type="text/javascript"></script>
<script
src="http://platform.twitter.com/widgets.js"></script>
<script
src="http://mybloggerlab.com/Scripts/Sharetoenter.js"
type="text/javascript"></script>
<script
src="http://mybloggerlab.com/Scripts/jquery.cookie.js"
type="text/javascript"></script>
<script language="javascript">
$(function() {
$('body').socialmodal({
uniqueName: 'autoloadmodal',
subtitle: 'Like
And +1 to Disable This Notification',
facebook: 'http://www.facebook.com/mybloggingschool',
plusone: 'http://www.mybloggingschool.blogspot.com/',
count: 0,
manualClose: true,
});
$('body').socialmodal({
twitter: 'mybloggingschool',
onclick: '#download',
callback: function(success) {
},
});
});
</script>
Must replace the following things:
Facebook Replace http://www.facebook.com/mybloggingschool with your Fan Page or any URL that you want to target for Facebook likes.
To change Google Plus URL Replace http://www.mybloggingschool.blogspot.com/ with your Home page URL.
If you want to change the Notification message replace Like And +1 to Disable This Notification from the above coding.
And friend we have Done it!!!!!
I hope that after reading this article you easily Add Like Us To Enter Advanced Social Traffic Widget For Blogger.If you like this article share it on social media to help other blogger friends.
Let me know you if you have any problem regarding to this article.If you have any problem you can ask me in comment box.Thanks for reading this article.Stay tuned for more lectures.
No comments: