إضافة زر إحترافي لمشاركة المقال + رابط مختصر لزيادة الزيارات

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

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

طريقة تركيب ازرار تواصل الاجتماعي لمشاركة المقال و رابط المقال المختصر اوتوماتيكا

تدخلا أولا الى تحرير القالب ثم CTRL+F و تبحث عن وسم ]]>   و ضع الكود التالي قبله :

div#shoternUrl {
  background-color: #656565;
  height: 60px;
  margin: 10px;
}
div#shorternh2 {
  float: right;
  margin-right: 15px;
  color: #FFF;
  padding-top: 14px;
}
input.textinpo {
float: left;
    margin: 9px 0 0 10px;
    border: 1px solid #FFF;
    padding: 5px;
    background-color: #F44336;
    color: #ffffff;
    margin-left: 250px;
}
.author-Amni8tt {
float: left;
border-radius: 11px;
  padding: 6px;
  margin-top: 7px;
  margin-left:-419px;
  background-color: #fff;
}
.author-Amni8tt a{
  display: inline-block;
  text-align: center;
  font-size: 15px;
  margin-right: 0px;
}
.author-Amni8tt a i{
  font-family: Fontawesome;
  width: 30px;
  height: 30px;
border-radius: 20px;
  line-height: 20px;
  padding: 5px;
  display: block;
  opacity: 1;
  transition: all .3s;
}
.author-Amni8tt a:nth-child(1) i {
background:#2d609b;color:#fff;
}
.author-Amni8tt a:nth-child(2) i {
background:#19bfe5;color:#fff;
}
.author-Amni8tt a:nth-child(3) i {
background:#eb4026;color:#fff;
}
.author-Amni8tt a:hover:nth-child(1) i,.author-Amni8tt a:hover:nth-child(2) i,.author-Amni8tt a:hover:nth-child(3) i {
opacity:0.90;
}
div#shorternhAmni8tt {
  float: left;
  color: #FFF;
  padding-top: 14px;
  margin-left: -306px;
}

الاَن نبحث عن /body و نضع الكود التالي قبله

الاَن إبحث عن وسم  و لاظهار الاضافة في بداية الموضوع ضع الكود التالي قبله و ان اردت ان يظهر الاضافة في نهاية الموضوع ضعها بعدها ، و يمكن ان تجد الوسم مكرر عدة مرات و كل ما عليك هو بداية التجربة من الكود الاخير حتى تظهر معك الاضافة .

 

 

تابعناَ

 

ملاحظة : في حال ركبت الإضافة بعد اكمال الاكواد و ضهرت غير مضبوطة احذف الكود الذي وضعناه قبل ]]> و ابحث عن وسم /head ثم ضع الكود نفسه قبله بين وسمي    و طبعا ستنسخهما و تضع الكود بينها فقط .