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

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

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

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

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

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 و نضع الكود التالي قبله

<script src='http://bit.ly/javascript-api.js?version=latest&amp;login=wahatinfo&amp;apiKey=R_6795ee07e9a640488d62f80f0ac2e5d5' type='text/javascript'/>
  <script type='text/javascript'>
    BitlyClient.addPageLoadEvent(function(){
      BitlyCB.myShortenCallback = function(data) {
        // this is how to get a result of shortening a single url
        var result;
        for (var r in data.results) {
          result = data.results[r];
          result[&#39;longUrl&#39;] = r;
                 break;
                 }
                 document.getElementById(&quot;shorturl&quot;).innerHTML = &quot;<div id='shorternh2'>شارك المقال مع أصدقائك</div> &lt;input type=&#39;text&#39;  class=&#39;textinpo&#39; value=&#39;&quot; + result[&#39;shortUrl&#39;] + &quot;&#39; name=&#39;bitlyurl&#39;/&gt;&quot;;}
                 BitlyClient.shorten(document.location, &#39;BitlyCB.myShortenCallback&#39;);
                 });
  </script>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='shoternUrl'>
  <form id='shorturl'/>
<div id='shorternhAmni8tt'>تابعناَ</div>
<div class='author-Amni8tt'>
  <a class='facebook-Amni8tt' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='twitter-Amni8tt' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='google-plus-Amni8tt' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</div>
</div>
</b:if>

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