Popup social media HTML code

Many people ask about the HTML code for facebook and social media pop up menu. now we are revealing the secret code which will  help the blogger and other writers to set the page share by readers. 

step 1

go to BLOGGER - edit TEMPLATE - edit HTML

• then search </head>  just above it paste the code given below

 <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>

step 2 the final step

• finally search  </body>   just above it copy the next HTML code 
• orange marking shows that you can change the colour of appearance by editing 

<!--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/AVvXsEjm0xCeTnxYQlCE_GRakX0pynYUc153dfkt0A-Fjty6YMwsWkgJdfhXI49dKw88Y4XybnJ823lXmgZDbs2ye9-LYcJbNNhLbOLdQlEBTSNWqSInY8Sp2oJg2-pRrBUN0rax5nD-hcJ-DB_S/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/AVvXsEiVBGKcC1-8d91h7hvegBDQpXur5GVI16cxWmN1xsoNnS-4wCL9h8WfaOdwzj0INwgNYNZS9IMDlhNusQBOzwrUfhTJ9J6xdDmSVUSi9GkFaPrWFYc5RmSPCbybqE3CBucZxLvYzb_8gME/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://www.tuberssecret.com/2016/07/popup-social-media-html-code.html/" target="_blank">Get This</a> <a href="#" onclick="document.getElementById('overlay').style.display='none'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vzR-8yGC12yo9ILou4rfFhABGM3Vg0gZr-L0GCFppa11vCutqAmyaFwCIG2nEKwIsep4QLEVeIKMe_1IKyR3aIgSM9TbD0w_WjYsbmRsPqWmpHmEtSiE9xTfxWp0jiTHA_87q17cMKY/s1600/closebtn.png" style="position:relative; width: 70px; top: 6px" /></a>
</div>
</div>
</div><!--Overlay-->
<!--End of all-->

If you like it SHARE it and comment below more suggestions