إضافة زر منبثق بتقنية jQuery لأيقونات مشاركة التدوينة على مواقع التواصل الإجتماعي إضافة ضرورية في كل موقع الإختلاف فقط في الشكل أو المظهر وما يميز هذا الزر أنه سهل التخصيص متجاوب ذو ستايل FLAT UI والاهم أنه لايأخذ مكان واسع في القالب يمكن إضافته أسفل أو فوق التدوينة أو على البوست في الصفحة الرئيسية كما هو مفترض.
معاينة الإضافة
طريقة التركيب
لاتنسى أخذ نسخة إحتياطية من القالب
الخطوة الأولى: لوحة التحكم
- قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
- إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير Edit HTML
- إضغط في وسط محرر الأكواد ثم F + Ctrl لإضهار مربع البحث
- بإستعمال الزر C +Ctrl للنسخ و V +Ctrl للصق قم بوضع الأكواد في المكان المناسب
لاتنسى أخذ نسخة إحتياطية من القالب
الخطوة الثانية: تركيب الأكواد
- قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود css
/*============================= BA88 [botton-jQuery-CSS3] ===============================*/ .social-share-btn{position:relative;display:inline-block;margin:0 5px;} .social-share-btn .fg-facebook{color:#FFF;background-color:#3b5998;border-color:#0087bb!important;} .social-share-btn .fg-facebook:hover{color:#FFF;background-color:#4c70ba;border-color:#4264aa!important;} .social-share-btn .fg-facebook:focus,.social-share-btn .fg-facebook:active{color:#FFF;background-color:#2d4373;border-color:#344e86!important;} .social-share-btn .fg-twitter{color:#FFF;background-color:#00acee;border-color:#0087bb;} .social-share-btn .fg-twitter:hover{color:#FFF;background-color:#22c2ff;border-color:#09bbff!important;} .social-share-btn .fg-twitter:focus,.social-share-btn .fg-twitter:active{color:#FFF;background-color:#0087bb;border-color:#009ad5!important;} .social-share-btn .fg-google-plus{color:#FFF;background-color:#d34836;border-color:#b03626!important;} .social-share-btn .fg-google-plus:hover{color:#FFF;background-color:#dc6e60;border-color:#d85b4b!important;} .social-share-btn .fg-google-plus:focus,.social-share-btn .fg-google-plus:active{color:#FFF;background-color:#b03626;border-color:#c43d2b!important;} .social-share-btn .social-selector{position:relative;margin-left:10px;outline:none!important;border:none!important;display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;white-space:nowrap;padding:6px 12px;font-size:15px!important;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;} .social-selector .arrow{font-size:1em;} .social-selector:hover ul.social-baloon,.social-selector.opened ul.social-baloon{opacity:1;visibility:visible;-webkit-transform:scale(1) translate(100%,-50%);-ms-transform:scale(1) translate(100%,-50%);transform:scale(1) translate(100%,-50%);-webkit-transition-delay:0ms;transition-delay:0ms;} .social-selector ul.social-baloon{position:absolute;visibility:hidden;list-style:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin:0;padding:0;top:50%;right:12.7em;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:scale(0) translate(100%,-50%);-ms-transform:scale(0) translate(100%,-50%);transform:scale(0) translate(100%,-50%);-webkit-transform-origin:100% 0%;-ms-transform-origin:100% 0%;transform-origin:100% 0%;-webkit-transition:all .1s ease;transition:all .1s ease;opacity:0;-webkit-transition-delay:500ms;transition-delay:500ms;} .social-selector ul.social-baloon li{display:block;float:right;list-style-type:none;-webkit-transition:all 0.075s cubic-bezier(0,1.8,1,1.8);transition:all 0.075s cubic-bezier(0,1.8,1,1.8);} .social-selector ul.social-baloon li:hover{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3);} .social-selector ul.social-baloon li:hover a{border-radius:2px!important;} .social-selector ul.social-baloon li:first-child a{border-top-right-radius:2px;border-bottom-right-radius:2px;} .social-selector ul.social-baloon li:first-child a:after{right:-0.9em;top:50%;border:solid transparent;content:'';height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-left-color:#3b5998;border-width:0.5em;margin-top:-0.5em;} .social-selector ul.social-baloon li:first-child a:hover:after{border-left-color:#4c70ba;} .social-selector ul.social-baloon li:first-child a:focus:after,.social-selector ul.social-baloon li:first-child a:active:after{border-left-color:#2d4373!important;} .social-selector ul.social-baloon li:last-child a{border-top-left-radius:2px;border-bottom-left-radius:2px;} .social-selector ul.social-baloon li a{font-size:15px;padding:0.25em;min-width:2em;min-height:2em;display:flex;align-items:center;justify-content:center;} - قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود js
<!--botton-jQuery-CSS3 --> <script type='text/javascript'> //<![CDATA[ $("body").on("click",".social-baloon li a",function(e){var s=$(this),a=s.attr("id");console.log("sadfasdf"),$(this).parent().parent().find("span.selected").removeClass("active"),s.find("span.selected").addClass("active"),console.log(s.find(".selected.active")),$(".social-selector > i:first").removeClass().addClass("fa fa-fw fa-"+a),$(".social-selector").removeClass().addClass("social-selector btn btn-primary fg-"+a)}),setTimeout(function(){$(".social-selector").addClass("opened")},800),setTimeout(function(){$(".social-selector").removeClass("opened")},1800); //]]> </script>ملاحظة مهمة
الأن يبقى كود html المسؤول عن إظهار الإضافة في المكان الذي يوضع فيه..و كما أشرت سابقا يوجد عدة أماكن تختارها أنت..المهم لايخرج الموضع عن حقل البوست لأن الزر مسؤول عن مشاركة الموضوع أي أن الكود يوضع في أي مكان داخل الوسم <b:includable id='post' var='post'> والأحسن أن تضيفه مكان الأزرار القديمة الخاصة بمشاركة الموضوع هذا إذا كانت موجودة طبعا؟! - قم بالبحث عن هذا الوسم <data:post.body/> أسفله أي بعده قم بوضع كود html
<div class='social-share-btn'> <button class='social-selector btn fg-google-plus'> <ul class='social-baloon'> <li> <a class='fg-facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' id='facebook' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='facebook'><i class='fa fa-fw fa-facebook'/></a> </li> <li class=''> <a class='fg-twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' id='twitter' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='twitter'><i class='fa fa-fw fa-twitter'/></a> </li> <li> <a class='fg-google-plus' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' id='google-plus' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='+google'><i class='fa fa-fw fa-google-plus'/></a> </li> </ul> <i class='fa fa-share-alt fa-fw'/> <i class='arrow fa fa-chevron-left fa-fw'/> </button> </div>ملاحظة مهمة
ستجد الكود مكرر أكثر من مرة المطلوب هو الذي تجد أسفله عبارة (إقرأ المزيد) أما في حالة لم تجدها قم بالتجريب على الكل حتى يظهر معك الزر إذا واجهت صعوبة في تخصيص الإضافة قم بإرفاق رابط مدونتك في التعليق وسنساعدك في تخصيصها.
ممكن اخليها تفتح لما اظغط عليها فقط ويريت تشرحهالى
ردحذف