إضافة صندوق منزلق لمشاركة التدوينة بشكلين مميزين

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



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


تركيب الإضافة


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

الخطوة الأولى: لوحة التحكم

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر 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>

    ملاحظة مهمة:
    ستجد الوسم <data:post.body/> الذي نبحث عنه مكرر أكثر من مرة المطلوب هو غالبا الثاني تجده داخل حقل البوست <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 المحدد بهذا اللون هو لون الزر عند إغلاق الأداة قم بتغييره بما يتناسب مع لون قالب مدونتك.





تعليقات

إرسال تعليق

إرسال تعليق

قد يهمك ايضا

  • إنشاء صفحة الإتصال على بلوجر متعددة الإستخدامات | نموذج طلب الإنضمام للمدونة

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

  • سكريبت إضافة صفحة إعادة توجيه الروابط لمدونتك | Custom Redirects In Blogger

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

  • مجانا - سكريبت إضافة أداة عربة التسوق إلى المدونة بإستخدام مكتبة simpleCart (js)

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

  • إضافة خاصية تقييم المحتوى على شكل نجوم 🌟 بإستخدام تطبيق Firebase

    المطور
    صورة
    إضافة ستسمح لمتابعيك وزوار مدونتك يراجعون أعمالك الإبداعية ومنتجاتك وخدماتك من خلال خاصية التقييم بالنجوم بشكل رسمي فهي ليست مجرد واجهة أو زينة بل هي أداة رسمية بكل المقايس كونها تعرض لك نفس البيانات في نتائج بحث  Google  كما أنها ذكية التخصيص ويمكن التحكم في أغلب عناصرها بسهولة..والجميل في الموضوع أن الإضافة تابعة لـخدمات Google على رأسهم منصة - Blogger - وهذا يعني أنك لن تضطر للتسجيل في أي موقع للحصول على الأداة بل ستعمل وفقا لقاعدة بياناتك الخاصة على - Firebase -  والتي تتحكم بها كما تريد. الرجاء قبل إكمال الموضوع أحرص على أنك تملك معرف خاص بك لتطبيق - Firebase - إذا لاتملك واحد راجع هذا الموضوع بسرعة..ثم نكمل. إنشاء معرف تطبيق firebase من خلال واجهة المستخدم الجديدة 2020
    أظهر المزيد

  • أداة ستجعل من الصعب فك تشفير شفرة المصدر | JavaScript Obfuscator Tool

    المطور
    صورة
    أداة مجانية متوفرة على النت تتيح لكم تحويل شفرة مصدر JavaScript الأصلية إلى تمثيل جديد يصعب فهمه ونسخه وإعادة استخدامه أوتعديله دون إذن. والرائع هو أنه مهما كان حجم وتداخل السكريبت المراد تشفيره سيكون للنتيجة المبهمة الوظيفة الدقيقة للرمز الأصلي..أقصد بدون الحصول على خطا بنسبة 99.99% أوليس هذا رائعا!!. ومن الرائع كذلك في هذه الأداة التي من خلال استخدام مختلف التحولات و"الفخاخ"، مثل ، الدفاع عن النفس و حماية التصحيح ستصعب قراءته باستخدام أدوات مضادة كأداة JS Beautifier إلا طبعا من محترف. لماذا أرغب في تعتيم رمز JavaScript الخاص بي؟ دعني أخبرك أن هناك العديد من الأسباب التي تجعل من الأفضل حماية التعليمات البرمجية الخاصة بك ، منها ماهو تقني ومنها ماهو تجاري على سبيل المثال إزالة التعليقات والمساحة البيضاء التي ليست مطلوبة. جعله أسرع في التحميل وصعوبة الفهم ؛ حماية المنتج المدفوع كالقوالب والإضافات التي سهرت على بنائها أشهر وأعوام فمن غير العدل أن تسرق منك وتنسب لغيرك..وفي المجمل لاتكن متساهل حتى لايفقد المجال رونقه والجمال الكامن في شطط البحث ومايصحبه من لذة النجاح فهل
    أظهر المزيد

  • قالب فلامينغو - Flamingo - قالب مجلة عصري بـ 10$ - الإصدار v2.0.0

    المطور
    صورة
    أحببنا نحن فريق عمل بلوجر كود قبل الدخول في مجموعة المترياليز إطلاق آخر نسخة v2 من قالب -flamingo- وجاء هذا الإجراء تلبيتا لطلب عملائنا الاعزاء واللذي طالبوا بنسخة حديثة تدعم الإصدار 3 الأخير للوحة التحكم الخاصة بالبلوجر. مع العلم أن القالب لن يتم الإستغناء عنه بل سيكون متوفر بحلة جديدة في مجموعة -Themes - Materialize. هذا القالب برعاية موقع حلولي
    شراء المنتج