You may have seen social share buttons on many blogger blogs but this time I am having modal popup with social share buttons for blogger.
This is a kind of blogger widget which may help your users to share your articles on their social media profiles and that social share buttons will be shown in modal popup when they click on a Button.
So you can see the demo of this modal popup social share buttons below just click on the button and you will see the working demo of this social share buttons in modal popup.
I need this modal popup with social share buttons for my recently shared blogger template called AndroNido if you don't have seen it till now please see it.
One my friend downloaded this template and hired me to make some customizations in it and he wanted to make this modal popup with social share buttons on this template.
I created modal popup with social share buttons for him and I decided to share it with you so that you can easily add this modal popup with social share buttons into your blogger blogs even if you are not using AndroNido blogger template.
So if you want to add this widget into your blogger blog you have to follow the steps which are provided below and if you have any difficulty while following these steps you can comment your difficulty below in comment section.
- Go to Blogger Dashboard
- Go to Theme/Template Section
- Click Edit HTML
- Now Search for </body>
- Now copy the code provided beloaw and paste it above </body>.
- Save Theme/Template
To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
<style>
@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css');
@import url('https://fonts.googleapis.com/css?family=Encode+Sans&display=swap');
/*Share Modal*/
.softwebtuts_share{text-align:center;font-family: 'Encode Sans', sans-serif;}
.softwebtuts_share a{margin:auto;display:inline-block;border:none;border-radius:0;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;position:relative}.softwebtuts_share .btn{font-size:14px;line-height:1.4;padding:13px 20px;border-radius:4px;transition:box-shadow 0.1s,top .1s;box-shadow:0 3px 0 rgba(0,0,0,0.3);top:0;background:#fff}.softwebtuts_share .btn:hover{box-shadow:0 3px 0 transparent;top:3px}.softwebtuts_share .btn:active{background:#f2f2f2}.softwebtuts_share .modal{z-index:999;pointer-events:none;opacity:0;transition:opacity .3s;position:fixed;top:30%;left:0;right:0;max-width:300px;margin:0 auto;padding:30px;background:#fff;border-radius:4px;box-shadow:0 3px 10px rgba(0,0,0,0.3)}.softwebtuts_share .modal-close-btn{position:absolute;right:10px;top:10px;font-size:20px}.softwebtuts_share .overlay{z-index:99;pointer-events:none;opacity:0;transition:opacity .3s;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:rgba(0,0,0,0.3)}.softwebtuts_share .is-visible{opacity:1;pointer-events:auto}.softwebtuts_share .social-media{margin-top:10px}.softwebtuts_share .social-media a{padding:5px 10px;width:15%;border-radius:40px}.softwebtuts_share .social-media a .fab{font-size:20px}.softwebtuts_share .social-media a:nth-child(1){border:2px solid #3b5998;background:#3b5998;color:#fff}.softwebtuts_share .social-media a:nth-child(2){border:2px solid #1da1f2;background:#1da1f2;color:#fff}.softwebtuts_share .social-media a:nth-child(3){border:2px solid #bd081c;background:#bd081c;color:#fff}.softwebtuts_share .social-media a:nth-child(4){border:2px solid #25d366;background:#25d366;color:#fff}
</style>
<!--share-modal-->
<div class='softwebtuts_share'>
<div class='overlay is-visible' id='overlay'></div>
<div class='modal is-visible' id='modal'>
<a class='modal-close-btn' id='close-btn'><i class='fa fa-times' title='Close'></i></a>
Sharing is caring please share this post on any social media site.
<div class='social-media'>
<a onclick='share('facebook')'><i class='fab fa-facebook'></i></a>
<a onclick='share('twitter')'><i class='fab fa-twitter'></i></a>
<a onclick='share('pinterest')'><i class='fab fa-pinterest'></i></a>
<a onclick='share('whatsapp')'><i class='fab fa-whatsapp'></i></a>
</div>
<a href='https://softwebtuts.blogspot.com' rel='dofollow' style='text-decoration:none;font-size:10px;color:#fcf11ff;margin-top:10px;'>www.softwebtuts.com</a>
</div>
</div>
<!--share-modal-->
<script>
//<![CDATA[
function share(e){var t="menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600,top=150, left="+(screen.width/2-300),o="Hey Buddy Read this article its awesome i think you will like it : ";"facebook"==e?window.open("https://facebook.com/sharer.php?t="+document.title+"&u="+window.location.href,"",t):"twitter"==e?window.open("https://twitter.com/share?text="+document.title+"&url="+window.location.href,"",t):"gplus"==e?window.open("https://plus.google.com/share?url="+window.location.href,"",t):"reddit"==e?window.open("http://www.reddit.com/submit?url="+window.location.href+"&title="+document.title,"",t):"linkedin"==e?window.open("https://www.linkedin.com/cws/share?url="+window.location.href,"",t):"email"==e?window.open("mailto:?subject="+document.title+"&body="+o+window.location.href,"",t):"pinterest"==e?window.open("https://pinterest.com/pin/create/button/?description="+document.title+"&media=https://s0.wp.com/i/blank.jpg&url="+window.location.href,"",t):"blogger"==e?window.open("https://www.blogger.com/blog-this.g?n="+document.title+"&t="+o+"&u="+window.location.href,"",t):"tumblr"==e?window.open("https://www.tumblr.com/share?t="+document.title+"&u="+window.location.href,"",t):"whatsapp"==e?window.open("https://web.whatsapp.com/send?text="+window.location.href,"",t):"vk"==e?window.open("https://vk.com/share.php?url="+window.location.href,"",t):"digg"==e?window.open("https://digg.com/submit?url="+window.location.href,"",t):"whatsapp"==e&&window.open("https://meneame.net/submit.php?url="+window.location.href,"",t)}document.getElementById("btn-modal-share").addEventListener("click",function(){document.getElementById("overlay").classList.add("is-visible"),document.getElementById("modal").classList.add("is-visible")}),document.getElementById("close-btn").addEventListener("click",function(){document.getElementById("overlay").classList.remove("is-visible"),document.getElementById("modal").classList.remove("is-visible")}),document.getElementById("overlay").addEventListener("click",function(){document.getElementById("overlay").classList.remove("is-visible"),document.getElementById("modal").classList.remove("is-visible")});
//]]>
</script>
btn-modal-share is the id of button where user have to click to make this modal visible.
You can customise this blogger widgets according to your requirements if you have knowledge about web design but if you don't have knowledge about web design you can hire me to make customizations in it.
You can also add more social media site into this blogger widget if you want that please comment below.