Es posible que haya visto botones para compartir en redes sociales en muchos blogs de bloggers, pero esta vez tengo ventana emergente modal con botones para compartir en redes sociales para blogger.
Este es un tipo de widget de blogger que puede ayudar a sus usuarios a compartir sus artículos en sus perfiles de redes sociales y que los botones para compartir en redes sociales se mostrarán en una ventana emergente modal cuando hagan clic en un botón.
Para que pueda ver la demostración de estos botones de compartir en redes sociales emergentes modales a continuación, simplemente haga clic en el botón y verá la demostración de trabajo de estos botones de compartir en redes sociales en la ventana emergente modal.
Necesito esta ventana emergente modal con botones para compartir en redes sociales para mi plantilla de blogger recientemente compartida llamada AndroNido si no lo ha visto hasta ahora por favor véalo.
Un amigo mío descargó esta plantilla y me contrató para hacer algunas personalizaciones en ella y quería hacer esta ventana emergente modal con botones para compartir en redes sociales en esta plantilla.
Creé una ventana emergente modal con botones para compartir en redes sociales para él y decidí compartirla con usted para que pueda agregar fácilmente esta ventana emergente modal con botones para compartir en redes sociales en sus blogs de blogger, incluso si no está utilizando la plantilla de blogger de AndroNido.
Entonces, si desea agregar este widget a su blog de Blogger, debe seguir los pasos que se proporcionan a continuación y, si tiene alguna dificultad al seguir estos pasos, puede comentar su dificultad a continuación en la sección de comentarios.
- Ir Panel de Blogger
- Ir Sección de tema/plantilla
- Hacer clic Editar HTML
- Ahora busca
- Ahora copie el código provisto a continuación y péguelo arriba .
- Ahorrar Tema/Plantilla
Para buscar cualquier cosa en la sección de plantillas de Blogger, presione Control+F y luego escriba el término para buscar y presione 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://tongasoft.blogspot.com' rel='dofollow' style='text-decoration:none;font-size:10px;color:#fcf11ff;margin-top:10px;'>www.tongasoft.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-compartir es la identificación del botón donde el usuario debe hacer clic para que este modal sea visible.
Puede personalizar los widgets de este blogger de acuerdo con sus requisitos si tiene conocimiento sobre diseño web, pero si no tiene conocimiento sobre diseño web, puede contratarme para personalizarlo.
También puede agregar más sitios de redes sociales en este widget de blogger si lo desea, comente a continuación.
Conclusión:
Eso es todo, creo que sabe que podrá agregar una ventana emergente modal con botones para compartir en redes sociales en su blog de Blogger si tiene algún problema. Estoy aquí para ayudarlo.