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

مرحباً بكم الكثير من الناس تستعمل منصة بلوجر و طبعا هاته المنصة تفتقر نوعاََ ما للإضافة الجميلة كونها منصة جميلة تابعة لجوجل ، لكن اليوم سأشارك معكم واحدة من أفضل الإضافات التي يمكن وضعها على موقعك و تكون خفيفة و جميلة و يمكنك وضعها عند نهاية المواضع حيث يوجد بها ثلاث أزرار مشاركة المواضيع مع رابط مختصر على الموقع الشهري 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> و طبعا ستنسخهما و تضع الكود بينها فقط .