9/01/2017

settings_overscan print announcement


- إضافة زر منبثق بتقنية jQuery لأيقونات مشاركة التدوينة على مواقع التواصل الإجتماعي إضافة ضرورية في كل موقع الإختلاف فقط في الشكل أو المظهر وما يميز هذا الزر أنه سهل التخصيص متجاوب ذو ستايل FLAT UI والاهم أنه لايأخذ مكان واسع في القالب يمكن إضافته أسفل أو فوق التدوينة أو على البوست في الصفحة الرئيسية كما هو مفترض أو إعطائه خاصية position: absolute; وجعله يأخذ مكان فوق صورة التدوينة في الصفحة الرئيسية ...إلى غير ذلك  .
- لمعاينة الإضافة أنزل أسفل الصورة مباشرة وقم بتمرير الماوس على الزر.



معاينة الإضافة


طريقة تخصيص الإضافة



لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر 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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' id='facebook' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); 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='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='twitter' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); 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='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='google-plus' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); 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> 
    

    ملاحظة مهمة
    ستجد الكود مكرر أكثر من مرة المطلوب هو الذي تجد أسفله عبارة (إقرأ المزيد) أما في حالة لم تجدها قم بالتجريب على الكل حتى يظهر معك الزر إذا واجهت صعوبة في تخصيص الإضافة قم بإرفاق رابط مدونتك في التعليق وسنساعدك في تخصيصها.





add_commentإرسال تعليق

  1. ممكن اخليها تفتح لما اظغط عليها فقط ويريت تشرحهالى

    ردحذف