من جديد إضافات بلوجر والتي تتمثل في مشاركة الموضوع على المواقع الإجتماعية بشكل جديد وهي متواجدة بإضافات ووردبريس، تتضمن الإضافة عداد وقد لا يشتغل فور مشاركة الموضوع قد يأخذ لحظة بمعنى زيادة عدد المشاركات لكنه يفي بالغرض ويعمل واجبه ناحية مشاركة الموضوع بالنسبة للمواقع المتوفرة من أساسياتها فيسبوك وتويتر ومن ثم يأتي جوجل+ والبقية كما يتضمن أيقونات 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 == "item"'>
<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 == "item"'>
<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='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); 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='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @Hmar1web - "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-twitter'/></div>
<div class='wrap'>غرّد</div>
<div class='share-btn' data-service='twitter'>
<div class='count'/></div>
</a>
</li>
<li class='btn_gplus'><a expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); 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='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); 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'/>
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).