mawke3ea

من جديد إضافات بلوجر والتي تتمثل في مشاركة الموضوع على المواقع الإجتماعية بشكل جديد وهي متواجدة بإضافات ووردبريس، تتضمن الإضافة عداد وقد لا يشتغل فور مشاركة الموضوع  قد يأخذ لحظة بمعنى زيادة عدد المشاركات لكنه يفي بالغرض ويعمل واجبه ناحية مشاركة الموضوع بالنسبة للمواقع المتوفرة من أساسياتها فيسبوك وتويتر ومن ثم يأتي جوجل+ والبقية كما يتضمن أيقونات 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'/>