9/12/2017

settings_overscan print announcement


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




قبل أن نركب الأداة قم بالمعاينة المباشرة


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


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

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

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب


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

الخطوة الثانية

  • قم بالبحث عن هذا الوسم <data:post.body/> أسفله أي بعده قم بوضع كود.html

  • 
     
    
        <!-- Social Sharing Widget for Blogger html -->
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='mba-social-sharing'>
    <div class='closethis'><i class='fa fa-times'></i></div>
    <div class="titel-soc-shar">
    <h1>شارك التدوينة</h1>
    <p>إذا أعجبك الموضوع قم بمشاركته مع أصدقائك</p>
    </div>
    <ul>
    <li class='fb'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' 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'><i class='fa fa-facebook'></i>Facebook</a></li>
    <li class='tw'><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' 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'><i class='fa fa-twitter'></i>Twitter</a></li>
    <li class='gp'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' 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'><i class='fa fa-google-plus'></i>Google Plus</a></li>
    <li class='re'><a expr:href='&quot;https://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' 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'><i class='fa fa-reddit-alien'></i>Reddit</a></li>
    <li class='in'><a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' 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'><i class='fa fa-linkedin'></i>Linkedin</a></li>
    <li class='bl'><a expr:href='&quot;http://www.blogger.com/blog_this.pyra?t&amp;u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title + &quot;&amp;pli=1&quot;' 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'><i class='fa fa-bold'></i>Blogger</a></li> 
    </ul>
    </div>
      </b:if>
     
    

    ملاحظة مهمة
    ستجد الوسم الذي نبحث عنه مكرر أكثر من مرة المطلوب هو الذي تجده داخل حقل البوست <b:includable id='post' var='post'>
  • قم بالبحث عن هذا الوسم <body> فوقه أي قبله قم بوضع كود.js

  • 
        <!-- Social Sharing Widget for Blogger javascript -->
      <b:if cond='data:blog.pageType == &quot;item&quot;'>  
    <script type='text/javascript'>
    //<![CDATA[
    jQuery(document).ready(function(o){var a=o(".post-body").offset().top
    setInterval(function(){o(window).scrollTop()>=a&&o("#mba-social-sharing").addClass("come-in")},0)
    o(".closethis").click(function(){o(".come-in").toggleClass("come-back")})})
    //]]>
    </script>
      </b:if> 
    

    التعديل على كود.js
    الإسم .post-body المحدد بهذا اللون يجعل الإضافة تظهر عند نهاية الموضوع إذا أردت الأداة تظهر بمجرد الدخول إلى التدوينة قم بإستبدله بـ body
  • الآن سنقوم بتركيب الشكل الذي نريده عبر نسخ الكود المطلوب في الأسفل...ثم ضعه فوق الوسم ]]></b:skin>

كود الشكل الأول

    
     /*\
    ======================================>
    Social Sharing Widget for Blogger no:01
    ======================================>
    \*/  
    #mba-social-sharing ul{display:block;position:relative;overflow:hidden;line-height:2em!important;padding:0!important;margin:0!important;}
    #mba-social-sharing{z-index:9999999999;position:fixed;bottom:0;right:0;max-width:400px;height:auto;background:#fff;padding:0;margin:0;font-size:12px;color:#666;display:none;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
    .titel-soc-shar{position:relative;display:block;overflow:hidden;}
    #mba-social-sharing h1{color:#666;text-shadow:2px 2px 0 rgba(0,0,0,0.2);font-size:24px;font-weight:700;line-height:.5;padding:0!important;margin:10px!important;display:block;text-decoration:none;letter-spacing:normal;text-align:right;}
    #mba-social-sharing p{margin:5px 10px!important;font-size:12px;color:#b5bac5;}
    #mba-social-sharing ul li{float:none;display:inline-block;margin:0 15px 5px 0;}
    #mba-social-sharing ul li a{cursor: pointer;font-size:12px;font-weight:700;color:#fff;width:111.6px;padding:10px 0 5px;text-align:center;display:block;position:relative;overflow:hidden;font-family:'Open Sans',helvetica,arial,sans-serif;}
    #mba-social-sharing ul li a{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;}
    #mba-social-sharing ul li a:hover{text-decoration:none;opacity:.9;}
    #mba-social-sharing ul li a i{margin: 0 auto;pointer-events:none;font-size:16px;width:100%;height:45px;display:inline-flex;justify-content:center;align-items:center;position:relative;z-index:99;}
    #mba-social-sharing ul li a i:after{pointer-events:none;content:'';position:absolute;width:40px;height:40px;background:rgba(0,0,0,.1);-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-ms-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}
    #mba-social-sharing ul li a i:after{-webkit-border-radius:100%;-moz-border-radius:100%;-ms-border-radius:100%;-o-border-radius:100%;border-radius:100%;}
    #mba-social-sharing ul li a:hover i:after{-webkit-transform:scale(6);-moz-transform:scale(6);-ms-transform:scale(6);-o-transform:scale(6);transform:scale(6);}
    /*-----add class-------*/
    .come-in{display:block!important;}
    .come-back{max-width:400px!important;-webkit-transform:translate(315px,0px);-moz-transform:translate(315px,0px);-o-transform:translate(315px,0px);-ms-transform:translate(315px,0px);transform:translate(315px,0px);}
    #mba-social-sharing .closethis{position:absolute;left:0;margin-left:-35px;top:0;cursor:pointer;background-color:#ffffff;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-ms-border-radius:4px 0 0 4px;-o-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}
    .come-back .closethis{background-color:#d74628!important;color:#ffffff!important;}
    .come-back .closethis i:before{content:"\f1e0";}
    #mba-social-sharing .closethis i{font-size:25px;margin:10px;}
    /*------color------*/
    #mba-social-sharing ul li.fb a{background:#38559c;}
    #mba-social-sharing ul li.tw a{background:#00aaf3;}
    #mba-social-sharing ul li.gp a{background:#d74628;}
    #mba-social-sharing ul li.re a{background:#666666;}
    #mba-social-sharing ul li.in a{background:#e14929;}
    #mba-social-sharing ul li.bl a{background:#f79029;}
    /* Page Responsive */
    /*---min----*/
    @media screen and (min-width:325px){.come-back{-webkit-transform:translate(365px,0);-moz-transform:translate(365px,0);-o-transform:translate(365px,0);-ms-transform:translate(365px,0);transform:translate(365px,0);}}
    @media screen and (min-width:380px){.come-back{-webkit-transform:translate(380px,0);-moz-transform:translate(380px,0);-o-transform:translate(380px,0);-ms-transform:translate(380px,0);transform:translate(380px,0);}}
    @media screen and (min-width:400px){.come-back{-webkit-transform:translate(400px,0);-moz-transform:translate(400px,0);-o-transform:translate(400px,0);-ms-transform:translate(400px,0);transform:translate(400px,0);}}
    /*---max---*/
    @media screen and (max-width:640px){
    #mba-social-sharing h1 {font-size: 14px;}
    #mba-social-sharing p {font-size: 10px;}
    #mba-social-sharing ul li {width: 46%;margin: 0 5px 5px 0;}
    #mba-social-sharing ul li a {width: 100%;padding: 10px 0 5px;}}/*ipad pro*/
    @media only screen and (max-width:568px){#mba-social-sharing {max-width: 280px;}}/* iphon 4/5 + nok lumia 520 */
    @media screen and (max-width:320px){#mba-social-sharing {max-width: 280px;}}/* iphon 4/5 + nok lumia 520 */ 
    

كود الشكل الثاني

    
     /*\
    ======================================>
    Social Sharing Widget for Blogger no:02
    ======================================>
    \*/ 
    #mba-social-sharing ul{display:block;position:relative;overflow:hidden;line-height:2em!important;padding:0!important;margin:0!important;}
    #mba-social-sharing{z-index:9999999999;position:fixed;bottom:0;right:0;max-width:400px;height:auto;background:#fff;padding:0;margin:0;font-size:12px;color:#666;display:none;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
    .titel-soc-shar{position:relative;display:block;overflow:hidden;}
    #mba-social-sharing h1{color:#666;text-shadow:2px 2px 0 rgba(0,0,0,0.2);font-size:24px;font-weight:700;line-height:.5;padding:0!important;margin:10px!important;display:block;text-decoration:none;letter-spacing:normal;text-align:right;}
    #mba-social-sharing p{margin:5px 10px!important;font-size:12px;color:#b5bac5;}
    #mba-social-sharing ul li{float:none;display:inline-block;margin:0 5px 5px 0;}
    #mba-social-sharing ul li a{cursor: pointer;font-size:12px;font-weight:700;color:#fff;width:123.6px;padding:0;text-align:center;position:relative;overflow:hidden;font-family:'Open Sans',helvetica,arial,sans-serif;display:block;line-height:3.4em;}
    #mba-social-sharing ul li a{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;}
    #mba-social-sharing ul li a:hover{text-decoration:none;opacity:.9;}
    #mba-social-sharing ul li a i{pointer-events:none;font-size:16px;width:40px;height:40px;float:left;position:relative;z-index:99;display:inline-flex;justify-content:center;align-items:center;line-height:2.5em;}
    #mba-social-sharing ul li a i:before,#mba-social-sharing ul li a i:after,#mba-social-sharing ul li a:after{width:100%;height:100%;display:block;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-ms-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}
    #mba-social-sharing ul li a i:after{content:"\f1e0";margin-left:-40px;left:0;top:0;position:absolute;}
    #mba-social-sharing ul li a:hover i:before{margin-left:40px;margin-top:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;}
    #mba-social-sharing ul li a:hover i:after{margin-left:0;}
    #mba-social-sharing ul li a:after{pointer-events:none;content:'';position:absolute;width:40px;top:0;left:0;background:rgba(0,0,0,.1);}
    #mba-social-sharing ul li a:hover:after{-webkit-transform:scale(10,2);-moz-transform:scale(10,2);-ms-transform:scale(10,2);-o-transform:scale(10,2);transform:scale(10,2);}
    /*-----add class-------*/
    .come-in{display:block!important;}
    .come-back{max-width:400px!important;-webkit-transform:translate(315px,0px);-moz-transform:translate(315px,0px);-o-transform:translate(315px,0px);-ms-transform:translate(315px,0px);transform:translate(315px,0px);}
    #mba-social-sharing .closethis{position:absolute;left:0;margin-left:-35px;top:0;cursor:pointer;background-color:#ffffff;-webkit-border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-ms-border-radius:4px 0 0 4px;-o-border-radius:4px 0 0 4px;border-radius:4px 0 0 4px;}
    .come-back .closethis{background-color:#d74628!important;color:#ffffff!important;}
    .come-back .closethis i:before{content:"\f1e0";}
    #mba-social-sharing .closethis i{font-size:25px;margin:10px;}
    /*------color------*/
    #mba-social-sharing ul li.fb a{background:#38559c;}
    #mba-social-sharing ul li.tw a{background:#00aaf3;}
    #mba-social-sharing ul li.gp a{background:#d74628;}
    #mba-social-sharing ul li.re a{background:#666666;}
    #mba-social-sharing ul li.in a{background:#e14929;}
    #mba-social-sharing ul li.bl a{background:#f79029;}
    /* Page Responsive */
    /*---min----*/
    @media screen and (min-width:325px){.come-back{-webkit-transform:translate(365px,0);-moz-transform:translate(365px,0);-o-transform:translate(365px,0);-ms-transform:translate(365px,0);transform:translate(365px,0);}}
    @media screen and (min-width:380px){.come-back{-webkit-transform:translate(380px,0);-moz-transform:translate(380px,0);-o-transform:translate(380px,0);-ms-transform:translate(380px,0);transform:translate(380px,0);}}
    @media screen and (min-width:400px){.come-back{-webkit-transform:translate(400px,0);-moz-transform:translate(400px,0);-o-transform:translate(400px,0);-ms-transform:translate(400px,0);transform:translate(400px,0);}}
    /*---max---*/
    @media screen and (max-width:640px){
    #mba-social-sharing h1 {font-size: 14px;}
    #mba-social-sharing p {font-size: 10px;}
    #mba-social-sharing ul li {width: 47%;margin: 0 5px 5px 0;}
    #mba-social-sharing ul li a {width: 100%;}}/*ipad pro*/
    @media only screen and (max-width:568px){#mba-social-sharing {max-width: 280px;}}/* iphon 4/5 + nok lumia 520 */
    @media screen and (max-width:320px){#mba-social-sharing {max-width: 280px;}}/* iphon 4/5 + nok lumia 520 */ 
    
    التعديل على كود.css
    الكود #d74628 المحدد بهذا اللون هو لون الزر عند إغلاق الأداة قم بتغييره بما يتناسب مع لون قالب مدونتك.





add_commentإرسال تعليق

إرسال تعليق