تم الكشف عن مانع الإعلانات

الإعلانات تساعدنا في تمويل موقعنا، فالمرجو تعطيل مانع الإعلانات وساعدنا في تقديم محتوى حصري لك. شكرًا لك على الدعم ❤️

U3F1ZWV6ZTQ0OTg0ODg5MzE5X0FjdGl2YXRpb241MDk2MTY3Mjk0NzE=
اخبار انترنت
أخبار تقنية

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

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

    أفضل موقع تقني عربي للشروحات الحصرية و البرامج و الفيديوهات المصورة و المقالات الحصرية و الربح من الانترنت و قوالب بلوجر و شروحات ادسنس و يوتيوب
    تفضل بزيارة موقعنا الان : https://www.almoh3arif.com

    ردحذف
  2. تحميل قالب سمارتيك | من افضل قوالب بلوجر مجانية !
    هل تبحث عن قوالب بلوجر مجانية ؟ اقدم لكم اليوم قالب سمارتيك افضل قوالب بلوجر 2019 مجانية, قالب سمارتيك رائع جدا و يمكنك الحصول علي كثير من المميزات عن طريق هذا القالب و سوف يعطي لموقعك جمالية اكبر و يجعلك تظهر في محركات البحث
    مميزات القالب
    تصميم مميز يركز على تجربة المستخدم
    تم تصميم العمل بأحدث التقنيات
    متجاوب مع أغلب المتصفحات
    متجاوب مع جميع الأجهزة
    ألوان مميزة
    يدعم الإتصال المشفر https
    صفحة 404
    رابط تحميل القالب : https://www.almoh3arif.com/2019/05/smartech-blogger-template.html

    ردحذف
  3. قالب سيو بلس بكامل الاضافات للتحميل مجانا v4
    https://tecehnomasry.blogspot.com/2019/11/2019-v4.html



    ردحذف

إرسال تعليق

الاسمبريد إلكترونيرسالة