إضافة زر احترافي لمشاركة الموضوع

إضافة زر احترافي لمشاركة الموضوع


نبذة عن الموضوع


في هذا اليوم أقدم لكم موضوع هام جداً لمستخدمي بلوجر وهذا الموضوع عن إضافة زر احترافي لمشاركة المقال + رابط مختصر لزيادة الزيارات .
و كما تعرفون فإن وجد الزائر محتوي المقال أو الموضوع الخاص بك مفيد سيقوم بالفور بمشاركة الموضوع علي وسائل التواصل الاجتماعية [ فيسبوك - تويتر - جوجل بلس ] ، و لذلك فإن زر المشاركة من أهم الأشياء التي يجب أن تضيفها لمدونتك .

معاينة الإضافة


اضغط هنا


طريقة التركيب

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

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

إرسال تعليق