09‏/08‏/2015

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

أخي لماذا رابط المشاركة ل الغوغل بلس مختصر

المشرف
avatar

اخى لم تظهر الأيقونات
حتى بعد اضافه الكود الاخير فوق head

المشرف
avatar

يا حسام ان كود مكرر عندي ثلاثة مرات

المشرف
avatar

انا كذالك لم تظهر لدي الايقونات بعد اضافه الكود

المشرف
avatar

اخي كلمه مشاركه لم تظهر فوق كل الايقونات لماذا ؟

المشرف
avatar

اخي العزيز الرجاء النظر في هذه الصوره فا مشاركه لا تظهر عليها http://store2.up-00.com/2016-06/1465836166991.png

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة