كيف تستطيع فتح المواقع رغم وجود ضغط كبير علية

مقدمه :-

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

طريقة اضافات الايقونات :-

1. توجه الى المدونه
2. اضغط على تحرير HTML
3. ضع هذه الاكواد في المكان المخصص لها .

body {
  background-color:#d34c65;
  text-align:center;
}

div {
  display: inline-block;
  position:absolute;
  top:50%;
  left:50%;
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

/* Icons */

a {
  color:#fff;
  background: #DB6E82;
  border-radius:4px;
  text-align:center;
  text-decoration:none;
  font-family:fontawesome;
  position: relative;
  display: inline-block;
  width:40px;
  height:28px;
  padding-top:12px;
  margin:0 2px;
  -o-transition:all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
   -webkit-font-smoothing: antialiased;
}

a:hover {
  background: #ef92a3;
}

/* pop-up text */

a span {
  color:#666;
  position:absolute;
  font-family:sans-serif;
  bottom:0;
  left:-25px;
  right:-25px;
  padding:5px 7px;
  z-index:-1;
  font-size:14px;
  border-radius:2px;
  background:#fff;
  visibility:hidden;
  opacity:0;
  -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* pop-up text arrow */

a span:before {
  content:'';
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position:absolute;
  bottom:-5px;
  left:40px;
}

/* text pops up when icon is in hover state */

a:hover span {
  bottom:50px;
  visibility:visible;
  opacity:1;
}

/* font awesome icons */

a:nth-of-type(1):before {
content:'\f09a';
}
a:nth-of-type(2):before {
content:'\f099';
}
a:nth-of-type(3):before {
content:'\f0d5';
}
a:nth-of-type(4):before {
content:'\f113';
}
a:nth-of-type(5):before {
content:'\f17d';
}
a:nth-of-type(6):before {
content:'\f1cb';
}

الان قد تمت الاضافه في القالب الان يأتي دور اكواد HTML

اكود HTML

<div>
  <a href="#"><span>Facebook</span></a>
  <a href="#"><span>Twitter</span></a>
  <a href="#"><span>Google+</span></a>
  <a href="#"><span>Dribbble</span></a>
  <a href="#"><span>CodePen</span></a>

</div>