اضافة أزرار مواقع التواصل الاجتماعى بشكل احترافى

السلام عليكم رحمة الله اضافة جديده على مدونة عالم المدون وهى اضافة أزرار مواقع التواصل الاجتماعى بشكل احترافى اضافة رائع لكل من لديه مدونة وتدمج بين اهم مواقع التواصل استخداما فى وقت الحالى وبتاثير جميل وجذاب والإضافة سهلت الركيب على اى مدونه ويمكنك معاينة الإضافه من الرابط التالى.

شرح التركيب

اولا قم بالبحث فى قالب مدونه عن الوسم </head> ثم قم بوضع الكود التالى فوقه

<style>

.wdbloog-box {
  max-width: 753px;
  min-width: 290px;
  padding: 20px;
  text-align: center;
  position: relative;
  z-index: 5;
  margin: auto;
}
.wdbloog-box input[type="text"] {
  font-size: 0;
  letter-spacing: 0.1em;
  color: #888;
  height: 0;
  line-height: 1;
  border: 1px solid rgba(55, 58, 71, 0);
  transition: all 0.2s;
  box-sizing: border-box;
  width: 0;
  background: rgba(55, 58, 71, 0);
}
.overlay {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: rgba(36, 40, 66, 0.9);
 }
.overlay .overlay-close {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 0px;
  border: none;
  background: #b71c1c;
  color: #FFFFFF;
  outline: none;
  z-index: 100;
  border-radius: 50%;
  font-size: 24px;
}
.overlay .dialog-inner{
 text-align: center;
 position: relative;
 top: 50%;
 height: 60%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-30%);
}
.overlay-mbl {
 opacity: 0;
 visibility: hidden;
 z-index:100;
}
.overlay-mbl.open {
 opacity: 1;
 visibility: visible;
}
#trigger-overlay {
  float: left;
  cursor: pointer;
  margin-top: 9px;
  background: #b71c1c;
  border-radius: 50%;
  width: 33px;
  text-align: center;
  line-height: 33px;
  height: 33px;
}
#trigger-overlay a {
  color: #fff;
  font-size: 17px;
}
.topleft-wdbloog ul li {
  display: block;
  float: right;
  margin: 20px 0 20px 20px;
}
.topleft-wdbloog ul li a i {
  width: 70px;
  height: 70px;
  color: #fff;
  background: #000000;
  border-radius: 50%;
  line-height: 70px;
  font-size: 25px;
}
i.fa.fa-facebook {
  transition: all .3s;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  -moz-transition: all .3s;
}
i.fa.fa-facebook:hover {
  background-color: #3b5998;
}
i.fa.fa-twitter:hover {
  background-color: #55acee;
}
i.fa.fa-instagram:hover {
  background-color: #8E5134;
}
i.fa.fa-google-plus:hover {
  background-color: #CD201F;
}
i.fa.fa-youtube:hover {
  background-color: #CD201F;
}
i.fa.fa-rss:hover {
  background-color: #f26522;
}
i.fa.fa-android:hover {
  background-color: #a4c639;
}
i.fa.fa-apple:hover {
  background-color: #fff;
  color: #000;
}
</style>