How To Add Sliding Google+ Followers Box
1. Go to Blogger > Layout > Add Gadget > HTML/JavaScript.
2. Paste the following code in it. Change https://plus.google.com/u/0/109374794840270407199 with your Google+ url.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9tpFdVpQ3PAA32ybDhkoLM2q0Ruf7mJ_WXrK0lv-p9AXNV6MyHKLK9Truvsrv5R8n7h4FqX4db8ghXPxs_kwuyeoTGDokClkAGxpEx05Hxwau_-GmFKGOrbX0Q3cVQHRV_C2pLByhRCY/s400/g%252B+softglad.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:40%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/u/0/109374794840270407199" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div></div>
How to Add Sliding FACEBOOK LIKE BOX
- Go to “LAYOUT” > “ADD A GADGET”.
- Select “HTML/JAVASCRIPT” from the list and add the following code:
$(document).ready (function() { $ (".fblikebox").hover (function() { $(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate ({right: "-250"}, "medium");}, 500);});
</script>
<style type="text/css">
.fblikebox{background: url("http://i1310.photobucket.com/albums/s658/ubaidh/FacebookBadge_zps8026204c.jpg?t=1366893812") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.fblikebox div{border:none;position:relative;display:block;}
.fblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.fblikebox span a{color: #808080;text-decoration:none;}
.fblikebox span a:hover{text-decoration:underline;}
</style>
<div class="fblikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fseosupports&width=245&colorscheme=light&show_faces=true& connections=12&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;">
</iframe>
</div>
</div>
Note: Change “seosupports” in URL, to your own facebook user/page name.
- Click “SAVE”.
That’s it, you are all done. Refresh your blog to see the widget.
Social Media Marketing(SMM) Tutorial
==============================================
Top 3 Productivity Tools - Social Media Marketing 2013
Add POP UP Facebook Like Box On your blog
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
Code Here :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://exeideasinternational.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
*/
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{background:#000;opacity:0.5 !important}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4)}#cboxTopLeft{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmXxd7dvWPAsErRDJlPcsJjmM0_xysP4WUeXhZVk54-jpyKVWik9Z9elAVAJfSCLxzazd_QD3B-YoPsg_onSGGc9_24nnawg230FbvT9-kSrHSsK5XZBQyGnEqcMA78R5R7DUN_liLG4/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPFJBioyLhfU0LSCD5m8WpeVsiU_5o08PxsJCWtz2dyFbjI-WxkG6h8ln8F6neSoFPcHIiN2W2hPklQwXL8jF80db_u6Ssw5Vl7UtvYj8RqYECW7s5lAGj4oi-UqY-W5LSnW9lLbw5wJY/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmXxd7dvWPAsErRDJlPcsJjmM0_xysP4WUeXhZVk54-jpyKVWik9Z9elAVAJfSCLxzazd_QD3B-YoPsg_onSGGc9_24nnawg230FbvT9-kSrHSsK5XZBQyGnEqcMA78R5R7DUN_liLG4/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmXxd7dvWPAsErRDJlPcsJjmM0_xysP4WUeXhZVk54-jpyKVWik9Z9elAVAJfSCLxzazd_QD3B-YoPsg_onSGGc9_24nnawg230FbvT9-kSrHSsK5XZBQyGnEqcMA78R5R7DUN_liLG4/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPFJBioyLhfU0LSCD5m8WpeVsiU_5o08PxsJCWtz2dyFbjI-WxkG6h8ln8F6neSoFPcHIiN2W2hPklQwXL8jF80db_u6Ssw5Vl7UtvYj8RqYECW7s5lAGj4oi-UqY-W5LSnW9lLbw5wJY/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmXxd7dvWPAsErRDJlPcsJjmM0_xysP4WUeXhZVk54-jpyKVWik9Z9elAVAJfSCLxzazd_QD3B-YoPsg_onSGGc9_24nnawg230FbvT9-kSrHSsK5XZBQyGnEqcMA78R5R7DUN_liLG4/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmXxd7dvWPAsErRDJlPcsJjmM0_xysP4WUeXhZVk54-jpyKVWik9Z9elAVAJfSCLxzazd_QD3B-YoPsg_onSGGc9_24nnawg230FbvT9-kSrHSsK5XZBQyGnEqcMA78R5R7DUN_liLG4/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmXxd7dvWPAsErRDJlPcsJjmM0_xysP4WUeXhZVk54-jpyKVWik9Z9elAVAJfSCLxzazd_QD3B-YoPsg_onSGGc9_24nnawg230FbvT9-kSrHSsK5XZBQyGnEqcMA78R5R7DUN_liLG4/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VTuV-mbipsuAnu3gPfvlc2vjYmYmLNfTnh507OAiai7jtGLyQ2FnxxuP4Y7Wo5gestzyYG_1COlPqfq5yWcmCpKmo1s5YzEd1qlU6G7NVrVY0hT-x68Dl0wys4dptWYOeLVi5ZX-ZHE/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrYfsqEHCklE34l9b69ULLHZfq36Nz_Vh7yg97J33LgARTNii1fNLXMWsaMzxmegpOrDZDuprPEHJhQPa9cRcf48TnHNuo-lr5RmLd7n-xNEyiKZcscLtBSJwCgSXfpGZRkG47eZuqas/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmXxd7dvWPAsErRDJlPcsJjmM0_xysP4WUeXhZVk54-jpyKVWik9Z9elAVAJfSCLxzazd_QD3B-YoPsg_onSGGc9_24nnawg230FbvT9-kSrHSsK5XZBQyGnEqcMA78R5R7DUN_liLG4/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{background-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important}
</style>
<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FEXEIdeas2010&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center><p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.exeideas.com">EXEIdeas</a></p>
</div></div>
Copy Above Code
Customization:
1.) Replace EXEIdeas2010 With Your Facebook Username.
2.) It Will Not POP Up Again And Again On Every Reload Or Every Pages. To Review The Widget Just Delete Your Browser Cookies And Refresh The Page To See It Appearing Again.
3.) If You Want To Appear This Widget On Every Reload Of Your Visitor On Every Page, Just Change true To false
4.) This Widget Will Again POPUP On Your Viewer Desktop After 30 Day If He Is Clearing His Browser Cookies, If You Want To Minimize This Time, Just Change*30 From The Above Code To Your Desire Day With 30.
5.) You Can Also Change The Text In Black Bold Text.
6.) Save And Done..
