9/17/2017

settings_overscan print announcement

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



إذن ماهو الحل المناسب؟

في الآونة الأخيرة أصبحت منتجات Google الأكثر إستعمالا لما توفره الشركة من خدمات إحترافية وأغلبها مجاني فالنتيجة المقابلة لهذا التميز تجدها 99% من مستخدمي الأنترنات عندهم حساب Gmail فلما لا نستغل هذه الميزة؟!
المقصود من كلامي هو إستخدام نموذج المراسلة الخاص بالــ Gmail في تخصيص زر التبليغ بطريقة منظمة وذكية وإليك مثال مباشر لتفهم ما نتكلم عليه (عليك أن تسجل حسابك بالــ Gmail كي تظهر لك المعاينة)


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

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

فتح فلترfilter جديد في حساب Gmail

خطوة إنشاء تصنيف جديد

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

خطوة إنشاء فلاتر للرسائل المطلوبة

  • من نفس الواجهة التي وقفنا عندها إضغط على تبويب الفلاتر والعناوين المحظورة لتظهر لك واجهة أخرى أنظر الصورة
  • من نفس الواجهة التي أمامك إضغط على الإسم إنشاء فلتر جديد لتنبثق لك نافذة بالشكل التالي...
  • ضع الإعدادات كمافي الصورة البريد الخاص بك وإسم المدونة بالإنجليزية (ركز على الإسم الذي تكتبه في الخانة الثانية لأننا سنحتاجه في الاخير)  ثم إضغط على إنشاء فلتر باستخدام معايير البحث هذه » ستتغير نفس النافذة إلى الشكل التالي...
  • هنا النقطة المهمة وستقوم بضبط الإعدادات كما في الصورة
  1. التعديل على الفلاتر
  2. ( تجاوز البريد الوارد ) معناها عدم عرض رسائل المتابعين في البريد الوارد ووضعها في التصنيف الجديد الذي قمنا بإنشائه بإسم متابعين المدونة هنا الخيار راجع لك لكن الأحسن (نحدد) 
  3. ( تعليمها بـ (مقروءة) هذا الخيار غير مستحسن يقوم بإهمال الرسالة الواردة (لا نحدد) 
  4. ( تمييز بنجمة) خيار مستحسن (نحدد) 
  5. ( تطبيق التصنيف) هنا نختار من القائمة إسم التصنيف الذي أنشأنها في المرحلة الأولى يجب أن (نحدد)  
  6. ( إعادة توجيه) هذا الخيار في حالة أردت إعادة توجيه الرسائل إلى بريد إلكتروني آخر (لا نحدد) 
  7. ( حذفها ) هذا يعني حذف رسائل المتابعين فور وصولها وطبعا هذا لانريده ): (لا نحدد) 
  8. ( عدم الإرسال مطلقًا إلى الرسائل غير المرغوب فيها)  (لا نحدد) 
  9. ( وضع علامة دومًا كمهمة ) خيار مستحسن (نحدد) 
  10. (عدم وضع علامة كمهمة ) مطلقًا هذا خيار يلغي سابقه (لا نحدد) 
  11. ( تصنيف كـ) هنا نختار تصنيف كـ: شخصية أو إجتماعية ...إلخ (نحدد) 
  12. ( تطبيق الفلتر أيضًا على 0 محادثة مطابقة ) هذا يعني إحتواء الجميع حتى لوكانت رسالة واحدة (نحدد) 
  13. وأخير بعد الإنتهاء من ضبط الإعدادات نضغط على زر إنشاء فلتر  





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



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

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

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


الشكل الأول


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

تركيب زر التبليغ داخل مواضيع المدونة (الشكل الأول)

  • قم بالبحث عن هذا الوسم <data:post.body/> أسفله أو قبله قم بوضع الكود التالي
  • ملاحظة مهمة
    ستجد الوسم <data:post.body/> الذي نبحث عنه مكرر أكثر من مرة المطلوب هو غالبا الثاني تجده داخل حقل البوست <b:includable id='post' var='post'> أو قم بالتجربة على الجميع حتى يظهر الزر المطلوب بالعلم ان وضع الكود فوق الوسم يعني ظهور الزر فوق صفحة التدوينة ووضعه أسفل الوسم يعني العكس.
    
     <div class='advertisementblogcode'>
    <a expr:href='&quot;https://mail.google.com/mail/?ui=2&amp;view=cm&amp;fs=1&amp;tf=1&amp;to=example@gmail.com&amp;su=&quot; + data:post.title + &quot;&amp;body=رسالة إلى مشرفي مدونة:blogg-code/الرابط المطلوب:&quot; + data:post.url' rel='nofollow' target='_blank' title='Reporting'>
    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
    </a>
    </div> 
    
    التعديل على الكود.HTML
    المحدد بهذا اللون خاص بالبريد قم بإستبداله بالبريد الإلكتروني الخاص بك
    المحدد بهذا اللون خاص بإسم مدونتك بالأحرف الإنجليزية قم بإستبداله بنفس الإسم الذي وضعته في الفلتر
    الكود المحدد بهذا اللون خاص بالأيقونة إذا أردت قم بإستبدالها عبر هذا الموقع fontawesome
  • والأن سنقوم بتركيب كود.css الخاص بالشكل الأول ستضع الكود التالي فوق ]]></b:skin>
  • 
    /*\
    =============> advertisemen CSS/style 01
    \*/
    .advertisementblogcode{position:relative;overflow:hidden;display:inline-block;}
    .advertisementblogcode a{
    width:40px;height:40px;padding:5px;margin:5px;position:relative;color:#c9511d;background:#f79029;font-size:1.1rem;text-transform:uppercase;font-weight:700;display:inline-flex;justify-content:center;align-items:center;line-height:1;vertical-align:baseline;text-align:center;cursor:pointer;z-index:2;}
    .advertisementblogcode:after{pointer-events:none;content:'';position:absolute;width:100%;height:100%;top:0;right:0;background:#fcd4ac;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);}
    .advertisementblogcode:hover:after{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
    .advertisementblogcode a,.advertisementblogcode:after{border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;-o-border-radius:100%;-ms-border-radius:100%;}
    /* transition */
    .advertisementblogcode a,.advertisementblogcode:after{-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;} 
    

الشكل الثاني


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

تركيب زر التبليغ داخل مواضيع المدونة (الشكل الثاني)

  • نفس العملية قم بالبحث عن هذا الوسم <data:post.body/> ثم ضع الكود التالي
  • ملاحظات مهمة حول هذا الشكل
    هذا الشكل مصمم ليوضع أسفل التدوينة لكن تستطيع تخصيصه في المكان الذي تريد المهم لايخرج عن حقل البوست كما لاتنسى تطبيق نفس الإجراءات التي قمنا بها في الشكل الأول (إستبدال البريد الإلكتروني وإسم المدونة بالأحرف الإنجلزية ضروري ) و الأيقونة .
    
     <div class='advertisementblogcode-styone'>
    <a expr:href='&quot;https://mail.google.com/mail/?ui=2&amp;view=cm&amp;fs=1&amp;tf=1&amp;to=example@gmail.com&amp;su=&quot; + data:post.title + &quot;&amp;body=رسالة إلى مشرفي مدونة:blogg-code/الرابط المطلوب:&quot; + data:post.url' rel='nofollow' target='_blank' title='Reporting'>
    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
    تبليغ
    </a>
    <p>التبليغ عن مشكل أو محتوى معطل</p>
    </div> 
    
  • تركيب كود.css الخاص بالشكل الثاني ستضعه فوق الوسم ]]></b:skin>
  • 
    /*\
    =============> advertisemen CSS/style 02
    \*/
    .advertisementblogcode-styone{position:relative;overflow:hidden;display:block;width:100%;background-color:#f79029;border-radius:0.25rem;-moz-border-radius:0.25rem;-webkit-border-radius:0.25rem;-o-border-radius:0.25rem;-ms-border-radius:0.25rem;padding:0;margin:10px 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
    .advertisementblogcode-styone a{width:100px;position:relative;padding:1.1875em 1em;color:rgba(0,0,0,0.39);background:#c9511d;font-size:0.875rem;text-transform:uppercase;font-weight:700;display:inline-block;line-height:1;vertical-align:baseline;text-align:center;cursor:pointer;}
    .advertisementblogcode-styone a:hover{background-color:#2f2f2f;color:#c9511d;text-indent:-9999px;}
    .advertisementblogcode-styone a:before{
    content:"\f178";font-family:FontAwesome;position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:100%;left:0;width:100%;height:100%;text-align:center;font-size:30px;}
    .advertisementblogcode-styone a:hover:before{top:0;text-indent:0;}
    .advertisementblogcode-styone p{display:inline-block;font-size:14px;color:#ffffff;margin:0 10px;padding:0;text-align:right;font-weight: 700;}
    /* transition */
    .advertisementblogcode-styone a, .advertisementblogcode-styone a:before{-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;}
    /* Page Responsive */
    @media screen and (max-width:580px){.advertisementblogcode-styone a{width:100%;padding:1.1875em 0;overflow:hidden;display:block;}}
    /*Microsoft lumia550*/
    

الشكل الثالث


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

تركيب زر التبليغ في القائمة الجانبية أو الفوتر (الشكل الثالث)

  • هنا ستنتقل إلى التخطيط ثم إضافة أداة HTML/JavaScript ثم ضع الكود التالي داخلها
  • ملاحظات مهمة حول هذا الشكل
    هذا الشكل مصمم ليوضع في القائمة الجانبية أو الفوتر لا تستطيع وضعه في حقل البوست وإلا لن يعمل الزر إلا إذاعدلت الرابط كما لاتنسى تطبيق نفس الإجراءات التي قمنا بها في الشكل الأول والثاني (إستبدال البريد الإلكتروني وإسم المدونة بالأحرف الإنجلزية ضروري ) والأيقونة وعبارات التعليمات إذا أردت
    
     <div class="flex box-outer-Gmail">  
    <div class="ui profile-Gmail">
      <img alt="@gmail" src="jpg"/>
    <h3>BA88</h3>
    <p>التبليغ عن مشكل أو محتوى معطل</p>
    </div>
    <div class="ui item-tit-sni">
    <div class="item-Conditions-gm">
    <h3>مراجعة التعليمات</h3>
    <ul>
    <li>
    أضف عنوان مناسب للرسالة
    </li>
    <li>
    أضف رابط الموضوع المبلغ عنه
    </li>
    <li>
    قم بكتابة أسطر واضحة باللغة العربية
    </li>
    <li>
    لاتحذف معلومات مشرفي الموقع
    </li>
    <li>
    تستطيع إرفاق محتويات مع الرسالة
    </li>
    </ul>
    </div>
    </div>
    <div class="ui button-primary"> 
    <a class="advertisement-faq" href="https://mail.google.com/mail/?ui=2&view=cm&fs=1&tf=1&to=example@gmail.com&su=[عنوان الرسالة]
    &body=رسالة إلى مشرفي مدونة:blogg-code/الرابط المطلوب:[url]" rel='nofollow' target='_blank' title='Reporting'>
    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
    تبليغ </a>
    </div>
    </div> 
    
  • تركيب كود.css الخاص بالشكل الثالث طبعا ستضعه فوق الوسم ]]></b:skin>
  • 
    /*\
    =============> advertisemen CSS/style 03
    \*/
    /*-------main--------*/
    .box-outer-Gmail{position:relative;display:-ms-flexbox;display:flex;max-width:250px;min-height:280px;margin:20px auto;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
    .box-outer-Gmail:before,.box-outer-Gmail:after{display:table;content:" ";}
    .box-outer-Gmail:after{clear:both;}
    /*-----ui------*/
    .box-outer-Gmail .ui h3 {margin: 1em 0;font-size: 1.3em;}
    .box-outer-Gmail .ui h3,.box-outer-Gmail .ui p,.box-outer-Gmail .ui li{cursor:context-menu;font-size:14px;font-weight:700;display:block;}
    .box-outer-Gmail .ui img{border-radius:50%;border:1px solid white;padding:8px;direction:ltr;font-family:arial,sans-serif;font-size:16px;width:60px;margin:20px auto;display:block;}
    /*-----profile Gmail------*/
    .ui.profile-Gmail{background:#f79029;text-align:center;padding:1em;color:#fff;}
    /*------ item tit sni-------*/
    .ui.item-tit-sni{background-color:#2f2f2f;color:#777;padding:0;margin:0;display:block;right:0;top:0;width:100%;height:100%;overflow:hidden;position:absolute;z-index:1;}
    .ui.item-tit-sni ul li{position:relative;text-align:right;font-size:11px;list-style:none;}
    .ui.item-tit-sni ul li:before{content:"\f00c";font:normal normal normal 14px/1 FontAwesome;position:relative;z-index:2;color:#c9511d;margin-left:5px;padding:0.5em;background-color:rgba(0,0,0,0.39);display:inline-block;text-align:center;}
    /*-----button primary------*/
    .box-outer-Gmail .ui.button-primary{width:100%;overflow:hidden;display:block;margin:30px 0;text-align:center;position:absolute;z-index:2;bottom:0;}
    .box-outer-Gmail .button-primary a{padding:1.1875em 2.5em;color:rgba(0,0,0,0.39);background:#c9511d;font-size:0.875rem;text-transform:uppercase;font-weight:700;display:inline-block;line-height:1;vertical-align:baseline;text-align:center;cursor:pointer;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;}
    .box-outer-Gmail .button-primary a:hover{background-color:rgba(0,0,0,0.43);color:#c9511d;}
    /*-------border-radius---------*/
    .ui.profile-Gmail,.item-tit-sni,.button-primary a{border-radius:0.25rem;-moz-border-radius:0.25rem;-webkit-border-radius:0.25rem;-o-border-radius:0.25rem;-ms-border-radius:0.25rem;}
    /*----------animat hover----------------*/
    .ui.profile-Gmail,.item-tit-sni,.ui.button-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:.1s max-height,.6s ease-in-out transform .1s;-moz-transition:.1s max-height,.6s ease-in-out transform .1s;-o-transition:.1s max-height,.6s ease-in-out transform .1s;-ms-transition:.1s max-height,.6s ease-in-out transform .1s;transition:.1s max-height,.6s ease-in-out transform .1s;}
    .ui.profile-Gmail{-webkit-transform:perspective(2000px) rotateY(0deg);transform:perspective(2000px) rotateY(0deg);-moz-transform:perspective(2000px) rotateY(0deg);-o-transform:perspective(2000px) rotateY(0deg);-ms-transform:perspective(2000px) rotateY(0deg);}
    .item-tit-sni,.box-outer-Gmail:hover .ui.profile-Gmail{-webkit-transform:perspective(2000px) rotateY(180deg);transform:perspective(2000px) rotateY(180deg);-moz-transform:perspective(2000px) rotateY(180deg);-o-transform:perspective(2000px) rotateY(180deg);-ms-transform:perspective(2000px) rotateY(180deg);}
    .box-outer-Gmail:hover .item-tit-sni{-webkit-transform:perspective(2000px) rotateY(0deg);transform:perspective(2000px) rotateY(0deg);-moz-transform:perspective(2000px) rotateY(0deg);-o-transform:perspective(2000px) rotateY(0deg);-ms-transform:perspective(2000px) rotateY(0deg);}
    .box-outer-Gmail:hover .ui.button-primary{-webkit-transform:rotateY(360deg);transform:rotateY(360deg);-moz-transform:rotateY(360deg);-o-transform:rotateY(360deg);-ms-transform:rotateY(360deg);}
    






add_commentإرسال تعليق

إرسال تعليق