آخبار الموقع
recent
404
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة
  • العودة الى الصفحة الرئيسية
  • الثلاثاء، 15 نوفمبر، 2016

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

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


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

    شرح تركيب الإضافة :
    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. وحتي لا يحدث معك اي مشكلة أدعوك لمشاهدة الفيديو التالي.
     
    تابعونا على

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

    الكاتب : Adel Ibrahim

    ليست هناك تعليقات:

    إرسال تعليق

    تصميم : عالم المدون