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

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

يوجد الآن مشاهدة التعليقات : 8

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 8 تعليقات:

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

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

      حذف
  2. شكرا لك اخى

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

    ردحذف
    الردود
    1. هل تستعمل قالب رسالتي؟ لأن به الأزرار مرفقة بالشرح أم تطلب الأزرار لإستخدامها بقالب آخر، على العموم أنظر للتدوينات التالية خاصة بالأزرار:
      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

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

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

      حذف
  5. هل يوجد لها عداد

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم