راسلنا من خلال النمودج التالي :

الاسم

بريد إلكتروني *

رسالة *

أكتب ما تود البحث عنـه .....

إعلان
إعلان

آخر الأخبار

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

اضافة ازرار التواصل الأجتماعي بعداد لمدونات بلوجر

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



اضافة ازرار التواصل الأجتماعي لمدونات بلوجر بشكل عامودي و بتأثير خيالي


الاضافة ذو تاثير رائع يمكنكم مشاهدتها بشكل متحرك

الأضافة سهلة التركيب تعطي جمالية كبيرة للمدونة التي ركبت عليها 

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


التركيب

توجه لقالب >> تحرير
ابحث عن </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>

اذا أردت أن تظهر الأزرار على الهاتف أحذف هذا السطر من الكود

display: none !important; /*---أحذف هذا السطر بكامله ليظهر على الهاتف--*/


نبحث عن هذا الكود  <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 @halateck - &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>


غير @halateck بإسم حسابك بتويتر
إذا لم تظهر لك الأيقونات الخاصة بالحسابات الإجتماعية أضف الكود التالي فوق </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>


كذلك أضف كود الجافا إذ لم يكن مضاف عندك فوق </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>




و شكرا


hala teck
الكاتب : MAHER

مدون عربي صاحب مدونة هلا تك يهتم بكل جديد بعالم التقنية و المعلومات

شارك الموضوع
تعليقات
إعلان