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