Social media plugin with popup text

Social media plugin with popup text


Hello guys today I will provide social media widget code which have a pop up text feature which looks beautiful and amazing on mouse Hover. 
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 enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.

Next Post Previous Post
No Comment
Add Comment
comment url