إضافة المشاركات الإجتماعية بعداد

من جديد إضافات بلوجر والتي تتمثل في مشاركة الموضوع على المواقع الإجتماعية بشكل جديد وهي متواجدة بإضافات ووردبريس، تتضمن الإضافة عداد وقد لا يشتغل فور مشاركة الموضوع  قد يأخذ لحظة بمعنى زيادة عدد المشاركات لكنه يفي بالغرض ويعمل واجبه ناحية مشاركة الموضوع بالنسبة للمواقع المتوفرة من أساسياتها فيسبوك وتويتر ومن ثم يأتي جوجل+ والبقية كما يتضمن أيقونات Font Awesome التي تضفي الجمالية والخفة في نفس الوقت لذا بدون إطالة أترككم مع المعاينة

• معاينة

شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>

.ar1web_share_button{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}
.ar1web_share_button .share_blog {display:block;}
.ar1web_share_button .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.ar1web_share_button .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.ar1web_share_button .share_blog ul {margin:0;padding:0;}
.ar1web_share_button .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:right;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}
.ar1web_share_button .share_blog ul li a,.ar1web_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.ar1web_share_button .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}
.ar1web_share_button .share_blog .btn_fb{background:#3a579a}.ar1web_share_button .share_blog .btn_fb:hover{background:#314a83}.ar1web_share_button .share_blog .btn_twtr{background:#00abf0}.ar1web_share_button .share_blog .btn_twtr:hover{background:#0092cc}.ar1web_share_button .share_blog .btn_gplus{background:#df4a32}.ar1web_share_button .share_blog .btn_gplus:hover{background:#be3f2b}.ar1web_share_button .share_blog .btn_pntrst{background:#656463}.ar1web_share_button .share_blog .btn_pntrst:hover{background:#565555}.ar1web_share_button .share_blog .btn_linkdin{background:#2554BF}.ar1web_share_button .share_blog .btn_linkdin:hover{background:#224EB4}
.ar1web_share_button .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}
.ar1web_share_button .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.ar1web_share_button .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}
.ar1web_share_button .share_blog .btn_fb .share-btn,.ar1web_share_button .share_blog .btn_twtr .share-btn,.ar1web_share_button .share_blog .btn_gplus .share-btn,.ar1web_share_button .share_blog .btn_pntrst .share-btn,.ar1web_share_button .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}
 @media only screen and (max-width: 979px) {
 .ar1web_share_button .share_blog .btn_linkdin {width:34px;}
.ar1web_share_button .share_blog .btn_fb .share-btn,.ar1web_share_button .share_blog .btn_twtr .share-btn,.ar1web_share_button .share_blog .btn_linkdin .share-btn,.ar1web_share_button .share_blog .btn_gplus .share-btn,.ar1web_share_button .share_blog .btn_pntrst .share-btn{display:none}}
 @media only screen and (max-width:768px) {
.ar1web_share_button .share_blog ul li a,.ar1web_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.ar1web_share_button .share_blog .wrap{min-width:34px}.ar1web_share_button .share_blog .btn_linkdin,.ar1web_share_button .share_blog .btn_pntrst{width:30px}.ar1web_share_button .share_blog ul li{margin:1px 3px}}
 @media only screen and (max-width:479px) {
 .ar1web_share_button .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.ar1web_share_button .share_blog ul li{width:25px;margin:2px;}.ar1web_share_button .share_blog .wrap{display:none}.ar1web_share_button .share_blog ul li .fa{width:25px}}

2. ضع الكود التالي فوق </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});
//]]>
</script>
</b:if>

3. أضف الكود الآتي إما فوق أو أسفل هذا : <data:post.body/> أو هذا <div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ar1web_share_button'>
<div class='share_blog'>
<ul>
<li class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='share h6'>المشاركات</div>
</div>
</li>
  <li class='btn_fb'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-facebook'/> </div>
  <div class='wrap'>شاركه</div>
  <div class='share-btn' data-service='facebook'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @Hmar1web - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
  <div class='wrap1'><i class='fa fa-twitter'/></div>
  <div class='wrap'>غر&#1617;د</div>
  <div class='share-btn' data-service='twitter'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'>
  <div class='wrap1'><i class='fa fa-google-plus'/></div>
  <div class='wrap'>شاركه</div>
  <div class='share-btn' data-service='google'>
        <div class='count'/></div>
  </a>
  </li>
  
 <li class='btn_pntrst'><a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class='wrap1'><i class='fa fa-pinterest'/></div>
  <div class='wrap'>شاركه</div>
  <div class='share-btn' data-service='pinterest'>
        <div class='count'/></div>
  </a>
  </li>
</ul>
</div>
</div>
</b:if>

التغييرات
* غير @Hmar1web بإسم حسابك بتويتر
* إذا لم تظهر لك الأيقونات الخاصة بالحسابات الإجتماعية أضف الكود التالي فوق </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>

By glok

Similiar tagsأزرار المشاركةاضافات بلوجر