إضافة رابط مختصر لمواضيع المدونة مع مواقع التواصل الإجتماعية

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

شرح تركيب الإضافة :

1. أولا من لوحة تحكم القالب ثم إلي قسم القالب وبالضغط علي تحرير HTML.
2. قم بالبحث في القالب عن هذا الوسم ]]></b:skin>
3. وقم بوضع الأكواد الاتيه فوقه.

div#shoternUrl {
  background-color:#3d5166;
  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: #55ACEE;
  color: #FFF;
  margin-left: 250px;
}
.author-wdbloog {
float: left;
  padding: 6px;
  margin-top: 7px;
  margin-left:-419px;
  background-color: #fff;
}
.author-wdbloog a{
  display: inline-block;
  text-align: center;
  font-size: 15px;
  margin-right: 0px;
}
.author-wdbloog a i{
  font-family: Fontawesome;
  width: 30px;
  height: 30px;
  line-height: 20px;
  padding: 5px;
  display: block;
  opacity: 1;
  transition: all .3s;
}
.author-wdbloog a:nth-child(1) i {
background:#2d609b;color:#fff;
}
.author-wdbloog a:nth-child(2) i {
background:#19bfe5;color:#fff;
}
.author-wdbloog a:nth-child(3) i {
background:#eb4026;color:#fff;
}
.author-wdbloog a:hover:nth-child(1) i,.author-wdbloog a:hover:nth-child(2) i,.author-wdbloog a:hover:nth-child(3) i {
opacity:0.90;
}
div#shorternhwdbloog {
  float: left;
  color: #FFF;
  padding-top: 14px;
  margin-left: -306px;
}

1. بعد هذا قم ايضا بوضع كود الجافا سكربت التالي قبل هذا الوسم </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>

1. بعد هذا وضع كود الجافا سكربت قم بالبحث في القالب عن هذا الوسم <data:post.body/> 
2. ستجد هذا الكود مكرر الكود الأخير هو المقصود
3. تقوم بوضع الأكود الأتية أسفله.

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

1. ثم قم بالحفظ النموذج 
2. وحتي لا يحدث معك اي مشكلة أدعوك لمشاهدة الفيديو التالي.