02‏/11‏/2015

بداية أسبوع موفقة لكم يا متابعينا، ننشر الإصدار الثاني من أزرار المشاركة على المواقع الإجتماعية بعداد لعدد المشاركات هذه المرة بشكل خاص عائم ومثبت بيمين الموضوع هذه النسخة مختلفة كليا عن الإضافة السابقة لأن هذه لا تتوفر على الأزرار العادية بل هي معدلة، جنبا إلى عدد المشاركات فكل زر إجتماعي يتوفر على عداد يظهر كل مشاركة تمت مشاركتها على المنصة الاجتماعية.
الإصدار الأول : إضافة المشاركات الإجتماعية بعداد
من مميزاتها أن جد خفيفة وبها خطوط الأيقونات Font Awesome وأيضا يمكن إخفائها كما أنها متجاوبة، لكن التجاوب على الهواتف تم إخفائه نظرا للمقاس الصغير لكن يمكن حذفه عبر كود ستايل صغير سنتطرق لطريقة في نهاية الموضوع... ولكي تحظى برؤية أكبر أدعوك لمعاينتها مباشرة عبر قالب رسالتي وتجربتها بنفسك
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث عن </head> ثم ضع الكود التالي فوقه
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.ar1web_SocialBar {
  position: fixed;
  bottom: 30%;
  padding: 0;
  right:0;
  background: none;
  text-align: center;
  margin: 0 auto;
  z-index: 99999999;
}
.ar1web_SocialBar label:hover {
  cursor: pointer;
  opacity:1;
}
.ar1web_SocialBar label {
  text-align: center;
  opacity: 0.4;
  width: 50px;
  background: #3A3939;
  color: #FFF;
  border: 0;
  font-family: FontAwesome;
  display: block;
  font-size: 12px;
  padding: 0px 0px;
  border-radius: 0;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  position: absolute;
  line-height: 1.5em;
  margin-top: 346px;
}
input.ShowHide_Button:checked + label {
     -webkit-transform-origin: 50% 0%!important;
    opacity: 1;
    transform: translateX(0px) rotateY(-180deg);
    transition-delay: 0.2s;
    border: 1px solid #3A3939;
    border-radius: 0 50px 50px 0;
    width: 30px;
    max-width: 30px;
}
input.ShowHide_Button ~ .ShowHideMe {
  -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked ~ .ShowHideMe {
  margin-right: -75px !important;
}
input.ShowHide_Button {
  display: none;
}
.ar1web_SocialBar .social_menu {
  display: inline-block;
  float: right;
  list-style:none;
  max-width:50px;
  margin: 0;
  padding: 0;
}
.ar1web_SocialBar .social_menu .button_facebook {
  background: #3a579a;
}
.ar1web_SocialBar .social_menu .button_facebook:hover {
  background: #314a83;
}
.ar1web_SocialBar .social_menu .button_twitter {
  background: #00abf0;
}
.ar1web_SocialBar .social_menu .button_twitter:hover {
  background: #0092cc;
}
.ar1web_SocialBar .social_menu .button_googleplus {
  background: #df4a32;
}
.ar1web_SocialBar .social_menu .button_googleplus:hover {
  background: #be3f2b;
}
.ar1web_SocialBar .social_menu .button_pinterest {
  background: #cd1c1f;
}
.ar1web_SocialBar .social_menu .button_pinterest:hover {
  background: #ae181a;
}
.ar1web_SocialBar .social_menu .button_stumbleupon {
  background: #ea4b24;
}
.ar1web_SocialBar .social_menu .button_stumbleupon:hover {
  background: #c7401f;
}
.ar1web_SocialBar .social_menu .button_linkedin {
  background: #2554BF;
}
.ar1web_SocialBar .social_menu .button_linkedin:hover {
  background: #224EB4;
}
.ar1web_SocialBar .social_menu .button_facebook .count,
.ar1web_SocialBar .social_menu .button_twitter .count,
.ar1web_SocialBar .social_menu .button_googleplus .count,
.ar1web_SocialBar .social_menu .button_pinterest .count,
.ar1web_SocialBar .social_menu .button_stumbleupon .count,
.ar1web_SocialBar .social_menu .button_linkedin .count {
  color: #fff!important;
  padding-top: 4px;
  font-size: 13px !important;
  line-height: 1.2em;
  font-family: sans-serif;
  font-weight: bold;
}
.ar1web_SocialBar .social_menu &gt; ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar1web_SocialBar .social_menu .share {
  background: #FFF;
  color: #807F7F;
  font-size: 11px;
  height: 45px !important;
}
.ar1web_SocialBar .social_menu .share .count.h4 {
  font-size: 18px;
  font-family: sans-serif;
  color: #424242;
  height: 25px !important;
  line-height: 1.5em;
  font-weight: bold;
  margin: 0px !important;
}
.ar1web_SocialBar .social_menu .share .h6 {
  padding-bottom: 3px;
  font-family: &#39;Droid Arabic Naskh&#39;,sans-serif;font-weight: bold;
  margin: 0px !important;
  line-height: 1.5em;
  font-size: 11px;
}
.ar1web_SocialBar .social_menu &gt; ul &gt; li {
  margin: 0px 0px 0px 0px;
  position: relative;
  text-align: center;
  list-style: none;
  list-style-type: none;
  padding: 0px;
  border: 0px;
  border-left: 0 solid rgba( 0,0,0,.4);
  height: 50px;
  width: 50px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  background: none;
  box-sizing: content-box;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ar1web_SocialBar .social_menu &gt; ul &gt; li a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5px 0px;
  cursor: pointer;
  text-decoration: none;
}
.ar1web_SocialBar .social_menu &gt; ul &gt; li:hover {
  border-right: 5px solid rgba( 0,0,0,.3);
  width: 40px;
}
.ar1web_SocialBar .social_menu &gt; ul &gt; li i {
  color: #fff !important;
  font-family: FontAwesome;
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  line-height: 1em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ar1web_SocialBar .social_menu &gt; ul &gt; li:hover i {
  opacity: 0.9;
}
@media only screen and (min-width:768px) and (max-width:979px) {
.ar1web_SocialBar {
  bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.ar1web_SocialBar {
  bottom: 15% !important;
}
}
 @media only screen and (max-width:479px) {
.ar1web_SocialBar {
  bottom: 10% !important;
  display: none !important; /*---أحذف هذا السطر بكامله ليظهر على الهاتف--*/
}
}
</style>
</b:if>
* إذا أردت أن تظهر الأزرار على الهاتف أحذف السطر الاخير المحدد بالأحمر
3. أضف الكود الآتي فوق : <data:post.body/>
* تنويه ستجد الكود متكرر المنشود هو الثاني
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='ar1web_SocialBar'>
  <input class='ShowHide_Button' id='twiSter' type='checkbox'/>
  <label for='twiSter'><i class='fa fa-arrow-right'/></label>
  <div class='ShowHideMe'>
  <div class='social_menu'>
<div class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'/>
        <div class='h6'>المشاركات</div>
  </div></div>
<ul>
<li class='button_facebook'>
<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'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<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'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.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'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<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'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&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'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
        <div class='count'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('http://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
</b:if>
</b:if>
التغييرات الأساسية
* غير @Hmar1web بإسم حسابك بتويتر
* إذا لم تظهر لك الأيقونات الخاصة بالحسابات الإجتماعية أضف الكود التالي فوق </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
كذلك أضف كود الجافا إذ لم يكن مضاف سلفا
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
بداية أسبوع موفقة لكم يا متابعينا، ننشر الإصدار الثاني من أزرار المشاركة على المواقع الإجتماعية بعداد لعدد المشاركات هذه المرة بشكل خاص عائم ومثبت بيمين الموضوع هذه النسخة مختلفة كليا عن الإضافة السابقة لأن هذه لا تتوفر على الأزرار العادية بل هي معدلة، جنبا إلى عدد المشاركات فكل زر إجتماعي يتوفر على عداد يظهر كل مشاركة تمت مشاركتها على المنصة الاجتماعية.
الإصدار الأول : إضافة المشاركات الإجتماعية بعداد
من مميزاتها أن جد خفيفة وبها خطوط الأيقونات Font Awesome وأيضا يمكن إخفائها كما أنها متجاوبة، لكن التجاوب على الهواتف تم إخفائه نظرا للمقاس الصغير لكن يمكن حذفه عبر كود ستايل صغير سنتطرق لطريقة في نهاية الموضوع... ولكي تحظى برؤية أكبر أدعوك لمعاينتها مباشرة عبر قالب رسالتي وتجربتها بنفسك
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث عن </head> ثم ضع الكود التالي فوقه
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.ar1web_SocialBar {
  position: fixed;
  bottom: 30%;
  padding: 0;
  right:0;
  background: none;
  text-align: center;
  margin: 0 auto;
  z-index: 99999999;
}
.ar1web_SocialBar label:hover {
  cursor: pointer;
  opacity:1;
}
.ar1web_SocialBar label {
  text-align: center;
  opacity: 0.4;
  width: 50px;
  background: #3A3939;
  color: #FFF;
  border: 0;
  font-family: FontAwesome;
  display: block;
  font-size: 12px;
  padding: 0px 0px;
  border-radius: 0;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  position: absolute;
  line-height: 1.5em;
  margin-top: 346px;
}
input.ShowHide_Button:checked + label {
     -webkit-transform-origin: 50% 0%!important;
    opacity: 1;
    transform: translateX(0px) rotateY(-180deg);
    transition-delay: 0.2s;
    border: 1px solid #3A3939;
    border-radius: 0 50px 50px 0;
    width: 30px;
    max-width: 30px;
}
input.ShowHide_Button ~ .ShowHideMe {
  -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked ~ .ShowHideMe {
  margin-right: -75px !important;
}
input.ShowHide_Button {
  display: none;
}
.ar1web_SocialBar .social_menu {
  display: inline-block;
  float: right;
  list-style:none;
  max-width:50px;
  margin: 0;
  padding: 0;
}
.ar1web_SocialBar .social_menu .button_facebook {
  background: #3a579a;
}
.ar1web_SocialBar .social_menu .button_facebook:hover {
  background: #314a83;
}
.ar1web_SocialBar .social_menu .button_twitter {
  background: #00abf0;
}
.ar1web_SocialBar .social_menu .button_twitter:hover {
  background: #0092cc;
}
.ar1web_SocialBar .social_menu .button_googleplus {
  background: #df4a32;
}
.ar1web_SocialBar .social_menu .button_googleplus:hover {
  background: #be3f2b;
}
.ar1web_SocialBar .social_menu .button_pinterest {
  background: #cd1c1f;
}
.ar1web_SocialBar .social_menu .button_pinterest:hover {
  background: #ae181a;
}
.ar1web_SocialBar .social_menu .button_stumbleupon {
  background: #ea4b24;
}
.ar1web_SocialBar .social_menu .button_stumbleupon:hover {
  background: #c7401f;
}
.ar1web_SocialBar .social_menu .button_linkedin {
  background: #2554BF;
}
.ar1web_SocialBar .social_menu .button_linkedin:hover {
  background: #224EB4;
}
.ar1web_SocialBar .social_menu .button_facebook .count,
.ar1web_SocialBar .social_menu .button_twitter .count,
.ar1web_SocialBar .social_menu .button_googleplus .count,
.ar1web_SocialBar .social_menu .button_pinterest .count,
.ar1web_SocialBar .social_menu .button_stumbleupon .count,
.ar1web_SocialBar .social_menu .button_linkedin .count {
  color: #fff!important;
  padding-top: 4px;
  font-size: 13px !important;
  line-height: 1.2em;
  font-family: sans-serif;
  font-weight: bold;
}
.ar1web_SocialBar .social_menu &gt; ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ar1web_SocialBar .social_menu .share {
  background: #FFF;
  color: #807F7F;
  font-size: 11px;
  height: 45px !important;
}
.ar1web_SocialBar .social_menu .share .count.h4 {
  font-size: 18px;
  font-family: sans-serif;
  color: #424242;
  height: 25px !important;
  line-height: 1.5em;
  font-weight: bold;
  margin: 0px !important;
}
.ar1web_SocialBar .social_menu .share .h6 {
  padding-bottom: 3px;
  font-family: &#39;Droid Arabic Naskh&#39;,sans-serif;font-weight: bold;
  margin: 0px !important;
  line-height: 1.5em;
  font-size: 11px;
}
.ar1web_SocialBar .social_menu &gt; ul &gt; li {
  margin: 0px 0px 0px 0px;
  position: relative;
  text-align: center;
  list-style: none;
  list-style-type: none;
  padding: 0px;
  border: 0px;
  border-left: 0 solid rgba( 0,0,0,.4);
  height: 50px;
  width: 50px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  background: none;
  box-sizing: content-box;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ar1web_SocialBar .social_menu &gt; ul &gt; li a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5px 0px;
  cursor: pointer;
  text-decoration: none;
}
.ar1web_SocialBar .social_menu &gt; ul &gt; li:hover {
  border-right: 5px solid rgba( 0,0,0,.3);
  width: 40px;
}
.ar1web_SocialBar .social_menu &gt; ul &gt; li i {
  color: #fff !important;
  font-family: FontAwesome;
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  line-height: 1em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ar1web_SocialBar .social_menu &gt; ul &gt; li:hover i {
  opacity: 0.9;
}
@media only screen and (min-width:768px) and (max-width:979px) {
.ar1web_SocialBar {
  bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.ar1web_SocialBar {
  bottom: 15% !important;
}
}
 @media only screen and (max-width:479px) {
.ar1web_SocialBar {
  bottom: 10% !important;
  display: none !important; /*---أحذف هذا السطر بكامله ليظهر على الهاتف--*/
}
}
</style>
</b:if>
* إذا أردت أن تظهر الأزرار على الهاتف أحذف السطر الاخير المحدد بالأحمر
3. أضف الكود الآتي فوق : <data:post.body/>
* تنويه ستجد الكود متكرر المنشود هو الثاني
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='ar1web_SocialBar'>
  <input class='ShowHide_Button' id='twiSter' type='checkbox'/>
  <label for='twiSter'><i class='fa fa-arrow-right'/></label>
  <div class='ShowHideMe'>
  <div class='social_menu'>
<div class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'/>
        <div class='h6'>المشاركات</div>
  </div></div>
<ul>
<li class='button_facebook'>
<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'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<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'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.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'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<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'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&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'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
        <div class='count'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('http://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
</b:if>
</b:if>
التغييرات الأساسية
* غير @Hmar1web بإسم حسابك بتويتر
* إذا لم تظهر لك الأيقونات الخاصة بالحسابات الإجتماعية أضف الكود التالي فوق </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
كذلك أضف كود الجافا إذ لم يكن مضاف سلفا
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
7 Blogger تعليقات
Disqus
7 التعليقات
المشرف
avatar

شكرا لك اخى على االضافة الاكثرمن رائعه
سؤال اخى بعد اذنك هل توجد طريقة لاضافة عدد مشاهدة الموضوع على صورة الموضوع مثل مدونتك وقالب رسالتى وشكرا لك

المشرف
avatar

حاليا لا توجد لكن سيكون لها شرح إن شاء الله

المشرف
avatar

رائع أخي
لكن لي رجاء لو سمحت
في هذه الصفحة (صفحة المعاينة ) http://blog-ar1web.blogspot.com.eg/2015/09/blog-post_14.html
ايقونات تحميل ومعاينة
أرجو بيان كيفية اضافاتها ولك جزيل الشكر

المشرف
avatar

هل تستعمل قالب رسالتي؟ لأن به الأزرار مرفقة بالشرح أم تطلب الأزرار لإستخدامها بقالب آخر، على العموم أنظر للتدوينات التالية خاصة بالأزرار:
http://www.ar1web.com/2014/08/2.html
http://www.ar1web.com/2014/10/css-button-ar1web.html
http://www.ar1web.com/2015/01/simple-button-v5.html
http://www.ar1web.com/2014/11/simple-button-v2.html
http://www.ar1web.com/2014/11/simple-css-button.html

المشرف
avatar

جربته علي قالب رسالتي لكن للأسف مظهرش أي حاجة خالص حتي تعليقات الفيس بوك منفعتش , ايه المشكلة بقا

المشرف
avatar

المعاينة هي من قالب رسالتي لذا لابد أنك أخطأت في شيء ما... ضع معاينة حتى أرى

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