Tuesday, April 2, 2013
0
Tuesday, April 2, 2013
Unknown
Popup social sharing Blogger widget
Popup Sharing Google +, Twitter, Facebook widget for Blogger
Social sites are very important as it bring lots of visits at a click,pop up sharing widget is one of the most used widgets,that helps to share your website or blog instantly.In past we discussed about how to create facebook like box for blogger.This very new pop up sharing widget include google plus,twitter and facebook like.
Share to Enter This site Blogger widget
This popup up social sharing blogger widget contains all 3 major social sharing buttons which automatically loads when visitors loads any page of that blog.To disable this widget User need to share all the 3 social media.Then the this widget shutdown for them util they clear their browser coolie.
- Log in to blogger.
- Then add a html/javascript widget.
- Then paste the below code.
<style type="text/css">
.blackout {
display: none;
position:fixed;
_position:absolute;
width: 100%;
z-index:10000;
background-color:#000;
margin: 0px;
padding: 0px;
left:0;
top:0;
}
.blog4alsocialOuter {
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;
}
.blog4alsocial {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 3px 3px 3px 3px;
width: 460px;
}
.blog4alsocial .title {
border-bottom: 1px solid #E5E8EF;
font-weight: bold;
font-size: 19px;
font-weight: bold;
padding:16px 15px 10px 15px;
text-align:center;
}
.blog4alsocial .subtitle {
margin: 0px;
background:#2e6886;
color:#ffffff;
padding:4px;
text-align:center;
font-weight: bold;
font-size: 15px;
}
.blog4alsocial .warning {
margin: 0px;
background:#cb2026;
color:#ffffff;
padding:4px;
text-align:center;
}
.blog4alsocial .content {
padding: 0px 15px;
margin-top: 10px;
line-height: 17px;
}
.blog4alsocial .share {
padding: 0px 15px;
margin:20px 0px 15px 0px;
text-align:center;
height: 24px;
}
.blog4alsocial .close {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbTD51vJm7VIkiOO04qBK83zz-drq3FpfeDN6Q6jRL7UrvJJ8re9Eo2c29uyXG23RpNx_mO0lStuIYNgrwSsbe9JeJGfyvL4QucN718mF38qxIhcMCoHotzDo7tBpyuOcW768WECl0NQ/s1600/close.png") no-repeat;
cursor: pointer;
height: 12px;
position: absolute;
right: 15px;
top: 15px;
width: 12px;
display: none;
}
.blog4alsocial .button {
float: left;
width: 115px;
line-height: 24px;
height: 24px;
}
.blog4alsocial .like {
margin-left: 15px;
}
.blog4alsocial .twttr {
margin-left: 30px;
}
.blog4alsocial .plus {
width: 90px;
margin-left: 50px;
}
.blog4alsocial .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;
}
</style>
<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="https://blog4al.googlecode.com/files/share-to-enter-popup-widget.js" type="text/javascript"></script>
<script src="https://blog4al.googlecode.com/files/jquery-cookie.js" type="text/javascript"></script>
<script language="javascript">
$(function() {
$('body').blog4alsocial({
uniqueName: 'autoloadmodal',
subtitle: 'Like And +1 to Disable This Notification',
facebook: 'http://www.facebook.com/blog4al',
plusone: 'http://www.blog4al.com/',
count: 0,
manualClose: true,
});
$('body').blog4alsocial({
twitter: 'blog4al',
onclick: '#download',
callback: function(success) {
},
});
});
</script>
- Then change blog4al with you facebook page and website URL for blog give full URL then give twitter page URL.
- Then save the widget.
Related Articles :
Do you like this article? Spread the words!
If you enjoyed this post, please consider leaving a comment or subscribing to the E-mail feed to have future articles delivered to your feed reader.
Subscribe to:
Post Comments
(
Atom
)
0 Responses to “ Popup social sharing Blogger widget ”
Post a Comment