Saturday, July 30, 2016

Pop Up Social Media Share With FaceBook Like And Recommendation Buttons

No comments
I got the idea of creating this popup Facebook like, After creating this popup social media share box for bloggers. It is very easy and actually the same. The only different they are just only the design and idea used in making them.  It also has Facebook like button. Your visitor might simply click on the like button instead of sharing when they will be in an urgency mode. You might not recognize this but a single like or recommendation from a power Facebook user can bring you a lot of traffic.


Now let me show you how you can make this widget work on your blogger blog.


STEP 1.

Go To Login To Your Bloggers Acct. Go To Your Template, Click Edith Template Then Find This Code </Head> With the Use of Ctrl F and place the below code just above it 


STEP 2. 


<script type="text/javascript" language="javascript">
function ccpop()
{
document.getElementById("overlay").style.display = 'block';
}
window.onload = ccpop;
</script>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
STEP3.
 Search any of this code <tbody> or </body> then place this below code above it.
<!--Popup social media share buttons by codingcrazy.com-->
<style>
@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);
#overlay {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWsnsgCKzsGcF0YoSE9zBO6UsYSd3DXArKzYlPOecvrrNf6NpfTdtMgWp3SowZCeW0DMnvXwcoY0jzuviuuPaEY60Up4lKIf4cR-Saaevv0-iTqkXfNK-Oq35CK2D-X7wUdacbdP_JW9OK/s1600/overlay.png');position:fixed;z-index: 99998;width:100%;height:100%;top:0;
}
#ccshare {
position:fixed;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
width:550px;
max-height: 300px;
margin-left:-275px;
top:50px;
left:50%;
height:auto;
overflow:hidden;
z-index: 99999;
padding:10px;
border: 2px solid #ffaa22;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
#ccshare h2 {
color: #000;
font-size:24px;
text-align:center;
font-family: 'Shadows Into Light', cursive;
}
.cc-credit {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
float:right;
width: 130px;
}
.cc-credit a{
color: #999;
text-decoration:none;
}
.cc-credit a:hover{
text-decoration:none;
}
</style>
<div id="overlay" style="display:none;">
<div id="ccshare">
<h2><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0L9zWfb36B5w2DDFCGsqHdyF4SDR4YrFj0xyeyj-Hkld1QS_SojIJ6hf76n15jfj16lwtOxdFcqIH_kWNhADlr1gYqoj2oid8VCKK5oxpft6-3-ZSd3DHctgknq7rMSl2sonNMziNRpM/s1600/03-512.png" style="position:relative;width: 30px;
top:7px;
right: 5px;
" />Sharing Is Awesome. Make Your Visit Count....</h2>
<center>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_delicious_large' displayText='Delicious'></span>
<span class='st_stumbleupon_large' displayText='StumbleUpon'></span>
<span class='st_reddit_large' displayText='Reddit'></span>
<span class='st_digg_large' displayText='Digg'></span>
<span class='st_myspace_large' displayText='MySpace'></span>
<span class='st_email_large' displayText='Email'></span><br/>
<span class='st_fblike_large' displayText='Facebook Like'></span>
<span class='st_fbrec_large' displayText='Facebook Recommend'></span>
</center>
<!--Do not change the code-->
<hr size="1" color="#ffec64" />
<div class="cc-credit">
<a href="http://codingcrazy.com/popup-social-media-share-and-facebook-like-button-for-blogger/" target="_blank">Get This</a> <a href="#" onclick="document.getElementById('overlay').style.display='none'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgER24UqxExyjZFgO7JI_g6qMXn_gNEO9pyrmCaTfc8crWhf2lCEZE0TQFWENS-jwjKAO6N8HBZ_84i5QLioeFIlbsyWmiVQ7gq3mdrMa9OMcDKQ7E9m6Hf216U3Xp2mMWmlkO6u6Pet6Y/s1600/closebtn.png" style="position:relative; width: 70px; top: 6px" /></a>
</div>
</div>
</div><!--Overlay-->
<!--End of all-->

That the end you can now save your template. leave a reply

No comments :

Post a Comment