إضافة أزرار المشاركة عائمة. جديد!!!!

إضافة أزرار المشاركة عائمة. جديد!!!!

السلام عليكم ورحمة الله وبركاتو
أقدم لكم في هذه التدوينة  ازرار المشاركة عائمة بتأثرات جديدة و حصرية

المعاينات

معاينة الأضافة على مدونة

 معاينة الأضافة بالجهة اليمنى   معاينة الأضافة بالجهة اليسرى

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

 <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> 

ابحث عن الكود التالي <data:post.body/> ستجده مكرر عدة مرات الاخير هو المقصود
ألصق الكود التالي بعده/اسفله

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' defer='defer' src='https://apis.google.com/js/platform.js?publisherid=100595159044200768359'></script>

<div class="shareclick">
     <ul> 
        <li class="main" title="شاركها الأن">
         <span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-share-alt fa-stack-1x fa-inverse"></i>
</span>
         </li> 
        <li class="main2" title="شاركها الأن">
            <span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-share-alt fa-stack-1x fa-inverse"></i>
</span>
        </li>
        <li class="fb"><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank' title='شارك عبر فيسبوك'>
            <span class="fa-stack fa-lg" title='شارك عبر فيسبوك'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
            </a></li> 
        <li class="pr">
        <a href='javascript:print(document)' title='طباعة الصفحة'>
<span class="fa-stack fa-lg" title='طباعة الصفحة'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-print fa-stack-1x fa-inverse"></i>
</span></a>
        </li> 
        <li class="tw"><a expr:href='"http://twitter.com/share?url=" + data:post.url' style='margin-left:10px' target='_blank' title='شارك عبر تويتر'>
            <span class="fa-stack fa-lg" title='شلرك عبر تويتر'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
            </a></li> 
        <li class="gp"><a expr:href='"https://plus.google.com/share?url=" + data:post.url' style='margin-left:10px' target='_blank' title='شارك عبر جوجل بلس'>
            <span class="fa-stack fa-lg" title='شارك عبر جوجل بلس'>
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
</span>
            </a></li> 
         <li class="gp2"><span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'>
</span>  </li>
    </ul> 
</div>
</b:if>     

لإضافتها على اليمين أستعمل الأكواد التالية

ابحث عن الوسم ]]></b:skin> و ألصق فوقه/قبله الكود التالي

 /* Css Sharing Button Jquery */
.shareclick{margin:0;padding:0;text-align:center;position:fixed;bottom:40px;right:10px;z-index:100000}
.shareclick ul{list-style:none;color:#555;text-align:center}
.shareclick ul a{color:#555}
.shareclick ul li{list-style:none;transition:all .3s ease-in-out}
.shareclick ul li.main,.shareclick ul li.main2{position:absolute;top:0;right:0;z-index:2;color:#181818!important;cursor:pointer;font-size:18px}
.shareclick ul li.main2{display:none}
.shareclick ul li a:hover,.shareclick ul li.main:hover,.shareclick ul li.main2:hover{color:#aaa!important;text-decoration:none}
.shareclick ul li.fb,.shareclick ul li.tw,.shareclick ul li.gp,.shareclick ul li.pr{position:absolute;top:0;right:0;opacity:0;z-index:1;transition:all .3s ease-in-out;font-size:18px}
.shareclick ul li.gp2{position:absolute;top:13px;right:0;opacity:0;z-index:1;transition:all .3s ease-in-out}
.shareclick:hover ul li.fb{color:#324b81 !important}
.shareclick:hover ul li.tw{color:#01a7de !important}
.shareclick:hover ul li.gp{color:#ba3227 !important}
.shareclick ul li.fb a{color:#324b81 !important}
.shareclick ul li.tw a{color:#01a7de !important}
.shareclick ul li.gp a{color:#ba3227 !important} 

ابحث عن الوسم </body> وألصق فوقه/قبله الكود التالي

 <script type='text/javascript'>
//<![CDATA[
$(function(){$(".shareclick ul li.main").click(function(){$(".shareclick ul li.main").hide();$(".shareclick ul li.main2").show();$(".shareclick:hover ul li.fb").css({right:"220px",opacity:"1"});$(".shareclick:hover ul li.tw").css({right:"175px",opacity:"1"});$(".shareclick:hover ul li.gp").css({right:"120px",opacity:"1"});$(".shareclick:hover ul li.pr").css({right:"55px",opacity:"1"});$(".shareclick:hover ul li.gp2").css({right:"265px",opacity:"1"})});$(".shareclick ul li.main2").click(function(){$(".shareclick ul li.main").show();$(".shareclick ul li.main2").hide();$(".shareclick:hover ul li.fb,.shareclick:hover ul li.tw,.shareclick:hover ul li.gp,.shareclick:hover ul li.pr,.shareclick:hover ul li.gp2").css({right:"0",opacity:"0"})})});
//]]>
</script>

لإضافتها على اليسار استعمل الأكواد التالية

ابحث عن الوسم ]]></b:skin> و ألصق فوقه/قبله الكود التالي

 /* Css Sharing Button Jquery */
.shareclick{margin:0;padding:0;text-align:center;position:fixed;bottom:40px;left:10px;z-index:100000}
.shareclick ul{list-style:none;color:#555;text-align:center}
.shareclick ul a{color:#555}
.shareclick ul li{list-style:none;transition:all .3s ease-in-out}
.shareclick ul li.main,.shareclick ul li.main2{position:absolute;top:0;left:0;z-index:2;color:#181818!important;cursor:pointer;font-size:18px}
.shareclick ul li.main2{display:none}
.shareclick ul li a:hover,.shareclick ul li.main:hover,.shareclick ul li.main2:hover{color:#aaa!important;text-decoration:none}
.shareclick ul li.fb,.shareclick ul li.tw,.shareclick ul li.gp,.shareclick ul li.pr{position:absolute;top:0;left:0;opacity:0;z-index:1;transition:all .3s ease-in-out;font-size:18px}
.shareclick ul li.gp2{position:absolute;top:13px;left:0;opacity:0;z-index:1;transition:all .3s ease-in-out}
.shareclick:hover ul li.fb{color:#324b81 !important}
.shareclick:hover ul li.tw{color:#01a7de !important}
.shareclick:hover ul li.gp{color:#ba3227 !important}
.shareclick ul li.fb a{color:#324b81 !important}
.shareclick ul li.tw a{color:#01a7de !important}
.shareclick ul li.gp a{color:#ba3227 !important} 

ابحث عن الوسم </body> وألصق فوقه/قبله الكود التالي

 <script type='text/javascript'>
//<![CDATA[
$(function(){$(".shareclick ul li.main").click(function(){$(".shareclick ul li.main").hide();$(".shareclick ul li.main2").show();$(".shareclick:hover ul li.fb").css({left:"55px",opacity:"1"});$(".shareclick:hover ul li.tw").css({left:"100px",opacity:"1"});$(".shareclick:hover ul li.gp").css({left:"155px",opacity:"1"});$(".shareclick:hover ul li.pr").css({left:"220px",opacity:"1"});$(".shareclick:hover ul li.gp2").css({left:"280px",opacity:"1"})});$(".shareclick ul li.main2").click(function(){$(".shareclick ul li.main").show();$(".shareclick ul li.main2").hide();$(".shareclick:hover ul li.fb,.shareclick:hover ul li.tw,.shareclick:hover ul li.gp,.shareclick:hover ul li.pr,.shareclick:hover ul li.gp2").css({left:"0",opacity:"0"})})});
//]]>
</script> 

أتمنى أن تكون الإضافة قد أعجبتكم 

ألقاكم في تدوينة أخرى

في أمان الله