Social media plugin with popup text
so now we will talk about how can you add this social plugin in your blogger website
How to add social plugin in website
- You need to copy the code and paste in your post
<ul class="wpr"> <li class="icn facebook"> <span class="tooltip">Facebook</span> <span><a href="#"><i class="fab fa-facebook-f"></i></a></span> </li> <li class="icn twitter"> <span class="tooltip">Twitter</span> <span><a href="#"><i class="fab fa-twitter"></i></a></span> </li> <li class="icn instagram"> <span class="tooltip">Instagram</span> <span><a href="#"><i class="fab fa-instagram"></i></a></span> </li> <li class="icn github"> <span class="tooltip">Github</span> <span><a href="#"><i class="fab fa-github"></i></a></span> </li> <li class="icn youtube"> <span class="tooltip">Youtube</span> <span><a href="#"><i class="fab fa-youtube"></i></a></span> </li> </ul> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .wpr { display: inline-flex; list-style: none; justify-content: center; margin: auto; width: 100%; } .wpr .icn { position: relative; top:20px; background: #ffffff; border-radius: 50%; padding: 15px; margin: 10px; width: 50px; height: 50px; font-size: 18px; display: flex; justify-content: center; align-items: center; flex-direction: column; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; cursor: pointer; transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wpr .tooltip { position: absolute; top: 0; font-size: 14px; background: #ffffff; color: #ffffff; padding: 5px 8px; border-radius: 5px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wpr .tooltip::before { position: absolute; content: ""; height: 8px; width: 8px; background: #ffffff; bottom: -3px; left: 50%; transform: translate(-50%) rotate(45deg); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .wpr .icn:hover .tooltip { top: -45px; opacity: 1; visibility: visible; pointer-events: auto; } .wpr .icn:hover span, .wpr .icn:hover .tooltip { text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); } .wpr .facebook:hover, .wpr .facebook:hover .tooltip, .wpr .facebook:hover .tooltip::before { background: #1877f2; color: #ffffff; } .wpr .twitter:hover, .wpr .twitter:hover .tooltip, .wpr .twitter:hover .tooltip::before { background: #1da1f2; color: #ffffff; } .wpr .instagram:hover, .wpr .instagram:hover .tooltip, .wpr .instagram:hover .tooltip::before { background: #e4405f; color: #ffffff; } .wpr .github:hover, .wpr .github:hover .tooltip, .wpr .github:hover .tooltip::before { background: #333333; color: #ffffff; } .wpr .youtube:hover, .wpr .youtube:hover .tooltip, .wpr .youtube:hover .tooltip::before { background: #cd201f; color: #ffffff; } </style> <link rel="stylesheet"href="https://site-assets.fontawesome.com/releases/v6.2.1/css/all.css"/>
- There is nothing extra steps just copy and paste
- But dont forget to chenge your social media links with #
- And it runs on fontawesome cdn so it can affect your site Speed
- But you can also use lazyload fontawesome cdn script 🙂
- Enjoy the beautiful social plugin
Last word
In this post we will provided information about Social media plugin with popup text , if you like this post then share with your friends and iff you have any queries then join our telegram groups for more informative materials bicouse most of tips provided only on telegram chenall ,your favourite DK technozone