إضافة صفحة سجل الزوار بإستخدام تطبيق firebase الإصدار الثاني v2

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




مميزات الإضافة

  1. قائمة مميزات الإصدار v2
  2. -واجهة عصرية منظمة وسهلة الإستخدام.
  3. -لا تشترط أن تكون مسجل حسابك فقط تدخل البريد الخاص بك في حال إحتاج المشرف التواصل معك.
  4. -خصوصية تامة بحيث لا يتم إظهار بريدك الإلكتروني علنا.
  5. -نشر متزامن للتعليق وعرضه في المقدمة فور إرساله.
  6. -ميزة البحث السريع أو الفلترة التي تمكنك من مراجعة تعليقك أو البحث عن محتوى معين فور إدخال أحرف دلالية معينة.
  7. -دمج زر التبليغ   عبر البريد داخل الصفحة حتى يتمكن الزائر من تبليغ المشرف عن مشكل.
  8. -عرض تاريخ نشر التعليق مع كل بطاقة.
  9. -إمكانية إدراج رابط مخصص لصفحة الزائر كإعلان مجاني (دون تتبع محركات البحث).

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

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

الخطوة الأولى: إنشاء الصفحة و تركيب الأكواد

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى الصفحات >> صفحة جديدة >> ثم إنتقل إلى تبويب  HTML  
  • ستقوم أولا بتعطيل صندوق التعليقات من على الصفحة الجديدة وذلك بالضغط على خيارات ثم حدد على عدم السماح
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الكود التالي داخل حقل الصفحة 
    <div class="gb-noselect" id="guestbook">
  <div class="row">
    <div class="col s12 m12 l5">
      <div class="gb-card blue-grey darken-1 gb-shadow gb-radius5">
        <div class="gb-cardtitle">
          <div class="advertisementblogcode01">
          </div>
          <h4>
            مرحبا بكم في سجل الزوار
          </h4>
        </div>
        <div class="gb-cardcontent">
          <b>
            تم إنشاء هذه الصفحة خصيصا لزوارنا ومتابعينا الأفاضل ليدلو بأرائهم حول هذه المدونة وترك إنطباع نتشرف بعطره
            <br />
            ها أنت ذا!..فاكتب كيف تجد المدونة ؟.. نحتاج نصيحتك ؟.. أواكتب ان شئت نقدك ؟ المهم نحافظ على العرف والأصول
          </b>
          <br />
          <div class="item-general-info">
            <h5>
              يشرفنا رأيكم، لكن يرجى مراعاة الشروط التالية:
            </h5>
            <dl>
              <dt>
                يرجى كتابة عبارات مفهومة باللغة العربية تصف المحتوى
              </dt>
              <dt>
                تجنب وضع روابط أو عبارات إشهارية
              </dt>
              <dt>
                عدم وضع أكثر من تعليق واحد
              </dt>
              <dt>
                رجاءا إذا لاحظت أي إنتهاك يرجى إستعمال زر التبليغ
              </dt>
            </dl>
          </div>
        </div>
      </div>
      <form id="form">
        <label for="formname">
          <i aria-hidden="true" class="fa fa-user-circle-o"></i>
          الإسم الكريم (ضروري)
        </label>
        <input class="gb-radius30" id="formname" name="name" placeholder="أكتب الإسم..." required="required" type="text"/>
        <br />
        <label for="formemail">
          <i aria-hidden="true" class="fa fa-at"></i>
          البريد الإلكتروني (إختياري)
        </label>
        <input class="gb-radius30" id="formemail" name="email" placeholder="أدخل بريدك الإلكتروني..." type="email"/>
        <br />
        <label for="formweb">
          <i aria-hidden="true" class="fa fa-globe"></i>
          رابط مدونتك أو صفحتك (إختياري)
        </label>
        <input class="gb-radius30" id="formweb" name="url" placeholder="أدخل الرابط..." type="url"/>
        <br />
        <label for="formmessage">
          <i aria-hidden="true" class="fa fa-commenting"></i>
          عبر عن رأيك (ضروري)
        </label>
        <textarea class="gb-radius5" id="formmessage" name="message" placeholder="أكتب تعليقك..." required="required" type="text"></textarea>
        <br />
        <button class="gb-radius5" onclick="" type="submit">إرسال</button>
      </form>
      <div id="messageLog">
      </div>
    </div>
    <div class="col s12 m12 l7 messages">
      <div class="light-table-filter-search gb-radius30">
        <label for="forsearch">
          <i aria-hidden="true" class="fa fa-search">
          </i>
        </label>
        <input class="light-table-filter" id="forsearch" data-table="order-table" placeholder="فرز وتصفية الرسائل..." type="text"/>
      </div>
      <div id="messagearea" class="blue-grey darken-1">
        <table class="order-table">
          <tbody id="messageDiv">
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<style type="text/css">
/*<![CDATA[*/
#guestbook{position:relative;overflow:hidden;display:block;margin:0 auto;padding:20px;max-width:1280px;width:100%;}
#guestbook a,#guestbook a:hover{text-decoration:none;}
#guestbook .gb-btn{display:inline-block;background-color:#e0e0e0;color:#5a5a5a;font-size:14px;width:30px;height:30px;line-height:30px;text-align:center;}
#guestbook .gb-btn:hover{background-color:transparent;}
#guestbook #messagearea:after{content:'';position:absolute;left:0;right:0;bottom:0;background-image:-webkit-linear-gradient(top,rgba(255,255,255,0) 0,#fff 55%);background-image:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 55%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffffff',GradientType=0);width:100%;height:50px;}
#guestbook .row{margin-left:-0.75rem;margin-right:-0.75rem;}
#guestbook .row .col.s12{width:100%;margin-left:auto;left:auto;right:auto;}
#guestbook .row .col{position:relative;float:right;box-sizing:border-box;padding:0 0.75rem;}
#guestbook .gb-card{background-color:#ffffff!important;}
#guestbook .blue-grey.darken-1{max-height:900px;min-height:100px;overflow:auto;padding:10px;}
#guestbook .gb-card .gb-cardcontent{padding:20px;}
#guestbook .gb-card .gb-cardcontent .gb-cardtitle{line-height:48px;}
#guestbook .row .col.l5 .gb-cardtitle{padding:15px;font-weight:normal;position:relative;display:block;text-align:start;}
#guestbook .gb-cardcontent{position:relative;overflow:hidden;display:block;}
#guestbook .item-general-info{color:#777;padding:0;margin:0;display:block;overflow:hidden;position:relative;}
#guestbook .item-general-info dl{padding:0 30px 0 0;}
#guestbook .item-general-info dl dt{position:relative;text-align:right;font-size:12px;list-style:none;margin:5px 0;display:list-item;list-style:circle;}
#guestbook .gb-cardpanel{background:#ffffff;color:#000000;position:relative;font-size:17px;display:block;padding:0 0 20px;margin:5px 0 10px;text-align:start;}
#guestbook .gb-cardpanel .gs-info,#guestbook .gb-cardpanel .gs-name,#guestbook .gb-cardpanel .gs-message{position:relative;overflow:hidden;margin:0 0 5px;padding:0 15px;}
#guestbook .gb-cardpanel .gs-name{font-size:14px;}
#guestbook .gb-cardpanel .gs-name i{font-size:17px;margin:0 5px;}
#guestbook .gb-cardpanel .gs-message{font-size:13px;line-height:normal;padding:0 25px;}
#guestbook .gb-cardpanel .gs-info{background:#eeeeee;padding:8px 15px;}
#guestbook .gb-cardpanel .gs-info a.disabled{pointer-events:none;cursor:default;opacity:.2;}
#guestbook .gb-cardpanel .gs-info abbr,#guestbook #messageLog a{background-color:rgba(0,0,0,0.06);color:#201c29;min-width:64px;margin:0 5px;padding:2px 12px;font-size:12px;line-height:normal;font-family:sans-serif;text-decoration:none!important;}
#guestbook .gb-cardpanel em{margin:0 5px;color:#1165f1;font-size:12px;text-decoration:none;font-style:normal;}
#guestbook table.order-table,#guestbook tbody#messageDiv{width:100%;}
#guestbook input,#guestbook textarea{resize:none;position:relative;overflow:hidden;background-color:#f8f8f8;border:0;outline:none;width:98%;width:-webkit-calc(100% / 1 - 10px);width:-moz-calc(100% / 1 - 10px);width:calc(100% / 1 - 10px);height:25px;min-height:25px;font-size:12px!important;margin:0 0 10px 0;padding:8px 5px;box-sizing:content-box;line-height:normal;color:inherit;font:inherit;text-indent:10px;}
#guestbook textarea{height:100px;}
#guestbook form#form{margin:50px 0;}
#guestbook #form label{text-align:start;width:100%;display:block;color:#1165f1;font-size:12px;margin:5px 0;text-indent:5px;}
#guestbook .light-table-filter-search{position:relative;overflow:hidden;background:#f8f8f8;margin:0 0 10px;}
#guestbook #form button{background-color:#1165f1;border:2px solid #1165f1;color:#ffffff;font-size:14px;font-family:inherit;padding:5px 20px;cursor:pointer;}
#guestbook #form button:hover{background-color:#ffffff;color:#1165f1;border-color:#eeeeee;}
#guestbook .light-table-filter-search label{display:inline-block;padding:0 10px;margin:0 10px 0 0;color:#dcdcdc;}
#guestbook .light-table-filter-search input{margin:0!important;width:50%;width:-webkit-calc(100% / 1 - 100px);width:-moz-calc(100% / 1 - 100px);width:calc(100% / 1 - 100px);text-indent:0;}
#guestbook h4,#guestbook h5{color:#000;font-weight:700;}
#guestbook h4{font-size:1em;line-height:normal;margin:0;padding:0;}
#guestbook h4 i{color:#1165f1;}
#guestbook h5{font-size:14px;margin:5px 0;padding:10px 0;}
#guestbook b{margin:0 5px;color:#777;font-size:13px;text-align:right;line-height:normal;font-weight:normal;}
#guestbook .advertisementblogcode01{position:absolute;display:inline-block;top:0;left:0;margin:10px;z-index:2;}
#guestbook .advertisementblogcode01 a:before{display:none;}
#guestbook #messageLog p{text-align:center;font-size:11px;padding:8px 5px;color:#000000;}
#guestbook #messageLog p.success{background-color:#e2eeec;}
#guestbook #messageLog p.error{background-color:#fff1e5;}
#guestbook #messageLog pre{display:none;background:#f8f8f8;color:#1165f1;padding:10px;margin:10px 0;white-space:pre;word-wrap:break-word;overflow:hidden;position:relative;text-align:left;direction:ltr;font:12px 'Consolas','Monaco',monospace,Courier,Courier New;line-height:normal;font-weight:normal;}
/*===loading animations===*/
.gb-loader *{display:none!important;}
.gb-loader.owl-margin{margin:2em auto;}
.gb-loader{position:relative;overflow:hidden;padding:0!important;width:auto;height:50px;text-align:center;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-moz-box-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.gb-loader:before,.gb-loader:after{content:"";display:block;width:25px;height:25px;border-width:2px;border-style:solid;border-color:#cecece;margin:0 auto;font-size:10px;position:absolute;left:0;right:0;}
.gb-loader:after{border-left-color:#1165f1;-webkit-animation:loadercall 1.1s infinite linear;animation:loadercall 1.1s infinite linear;}
@-webkit-keyframes loadercall{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@keyframes loadercall{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
/*==each==*/
.gb-noselect *{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
#guestbook .gb-flexbetween{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-moz-box-pack:center;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
#guestbook .gb-shadow{-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,0.2),0px 1px 1px 0 rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);-moz-box-shadow:0 1px 3px 0 rgba(0,0,0,0.2),0px 1px 1px 0 rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);-ms-box-shadow:0 1px 3px 0 rgba(0,0,0,0.2),0px 1px 1px 0 rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);-o-box-shadow:0 1px 3px 0 rgba(0,0,0,0.2),0px 1px 1px 0 rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);box-shadow:0 1px 3px 0 rgba(0,0,0,0.2),0px 1px 1px 0 rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);}
#guestbook .gb-radius5{border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
#guestbook .gb-radius30{border-radius:30px;-o-border-radius:30px;-ms-border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;}
#guestbook .gb-radius100,.gb-loader:before,.gb-loader:after{border-radius:100%;-o-border-radius:100%;-ms-border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;}
/*===Page Responsive===*/
@media only screen and (min-width:601px){#guestbook .row .col.m12{width:100%;margin-left:auto;left:auto;right:auto;}}
@media only screen and (min-width:993px){#guestbook .row .col.l5{width:41.6666666667%;margin-left:auto;left:auto;right:auto;}#guestbook .row .col.l7{width:58.3333333333%;margin-left:auto;left:auto;right:auto;}}
/*]]>*/
</style>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$[\'\\f\\8\'][\'\\7\\m\\1\\r\\0\\a\\i\\0\\3\\4\\j\\6\\6\\H\']=u(h){w 1m={\'\\i\\5\\7\':B,\'\\e\\1\\7\\2\':B,\'\\s\\6\\5\\9\':[\'\\X\\1n\\21\\z\',\'\\22\\23\\1o\\x\\x\\M\\1n\\18\\c\\1p\\X\\c\\y\\z\\Y\\X\\y\\M\\y\\N\',\'\\1q\\Z\\10\\y\\x\\x\\N\\19\\c\\y\\z\\24\\10\\1r\\y\\z\\c\\Y\\M\\25\\y\\1s\',\'\\y\\z\\N\\Y\\z\\X\\26\\c\\27\\M\\c\\19\\1q\\Z\\z\',\'\\1o\\Z\\N\\Y\\c\\10\\1r\\y\\z\\N\\Z\\c\\28\\M\\y\\x\\x\\x\',\'\\18\\1p\\1s\\29\\c\\y\\z\\19\\18\\2a\\10\'],\'\\7\\8\\p\\i\\4\':\'\\C\\f\\6\\5\\3\\0\\1\\5\\b\\m\',\'\\3\\0\\2\\0\\b\\4\\6\\5\':\'\\4\\1\\j\\2\\0\',\'\\b\\m\\7\\2\\9\':\'\\4\\5\\c\\k\\c\\4\\9\',\'\\e\\7\\8\\1t\\1\\2\\O\\0\\8\\a\\4\\m\':11,\'\\2\\1\\8\\a\':u(1u,1v){12 1u[2b(1v-13)]},\'\\E\\6\\i\\8\\9\':u(1w,2c){$(1w)[\'\\p\\1\\5\\0\\8\\4\']()[\'\\3\\m\\6\\s\']()},\'\\1a\\6\\4\\E\\6\\i\\8\\9\':u(1x,2d){$(1x)[\'\\p\\1\\5\\0\\8\\4\']()[\'\\m\\7\\9\\0\']()},\'\\D\\f\\4\\0\\5\':u(1y){A(!1y[\'\\r\\1\\2\']()[\'\\2\\0\\8\\a\\4\\m\'])$(\'\\4\\1\\j\\2\\0\\c\\4\\5\')[\'\\3\\m\\6\\s\']()},\'\\1b\\0\\f\\6\\5\\0\':u(2e){},\'\\a\\0\\4\\P\\1\\4\\0\':u(1z){w F=1A 2f();w 1c={\'\\1B\':F[\'\\a\\0\\4\\1B\\0\\b\\6\\8\\9\\3\'](),\'\\1d\':F[\'\\a\\0\\4\\1d\\7\\8\\i\\4\\0\\3\'](),\'\\1C\':F[\'\\a\\0\\4\\1C\\6\\i\\5\\3\'](),\'\\9\':F[\'\\a\\0\\4\\P\\1\\4\\0\'](),\'\\e\':F[\'\\a\\0\\4\\1d\\6\\8\\4\\m\']()+13,\'\\I\':F[\'\\a\\0\\4\\E\\i\\2\\2\\2g\\0\\1\\5\']()};12 1z[\'\\5\\0\\p\\2\\1\\b\\0\'](/([2h])/g,u(1e){12(1c[1e]<2i?\'\\v\':\'\')+1c[1e]})}};w h=$[\'\\0\\Q\\4\\0\\8\\9\'](1m,h);w 14=$(R);w S=$(h[\'\\7\\8\\p\\i\\4\']);A(h[\'\\i\\5\\7\']==B||h[\'\\7\\8\\p\\i\\4\']==B||h[\'\\3\\0\\2\\0\\b\\4\\6\\5\']==B||h[\'\\b\\m\\7\\2\\9\']===B||15 h[\'\\1a\\6\\4\\E\\6\\i\\8\\9\']!=\'\\f\\i\\8\\b\\4\\7\\6\\8\'||15 h[\'\\E\\6\\i\\8\\9\']!=\'\\f\\i\\8\\b\\4\\7\\6\\8\'||15 h[\'\\D\\f\\4\\0\\5\']!=\'\\f\\i\\8\\b\\4\\7\\6\\8\'||15 h[\'\\1b\\0\\f\\6\\5\\0\']!=\'\\f\\i\\8\\b\\4\\7\\6\\8\'){12![]}S[\'\\6\\8\'](\'\\H\\0\\I\\i\\p\',u(){h[\'\\1b\\0\\f\\6\\5\\0\'](S);A($(R)[\'\\r\\1\\2\']()[\'\\2\\0\\8\\a\\4\\m\']>=h[\'\\e\\7\\8\\1t\\1\\2\\O\\0\\8\\a\\4\\m\']){$(h[\'\\3\\0\\2\\0\\b\\4\\6\\5\'])[\'\\f\\7\\8\\9\'](h[\'\\b\\m\\7\\2\\9\'])[\'\\0\\1\\b\\m\'](u(){A($(R)[\'\\4\\0\\Q\\4\']()[\'\\4\\6\\O\\6\\s\\0\\5\\16\\1\\3\\0\']()[\'\\7\\8\\9\\0\\Q\\2j\\f\'](S[\'\\r\\1\\2\']()[\'\\4\\6\\O\\6\\s\\0\\5\\16\\1\\3\\0\']())==-13){h[\'\\1a\\6\\4\\E\\6\\i\\8\\9\']($(R))}1D{h[\'\\E\\6\\i\\8\\9\']($(R))}})}h[\'\\D\\f\\4\\0\\5\'](S)});w 17=1A 2k(h[\'\\i\\5\\7\']),T=$(\'\\C\\f\\6\\5\\e\'),J=$(\'\\C\\e\\0\\3\\3\\1\\a\\0\\O\\6\\a\'),1E=$(\'\\C\\e\\0\\3\\3\\1\\a\\0\\1\\5\\0\\1\'),1F=$(\'\\C\\f\\6\\5\\e\\8\\1\\e\\0\'),1G=$(\'\\C\\f\\6\\5\\e\\0\\e\\1\\7\\2\'),1H=$(\'\\C\\f\\6\\5\\e\\e\\0\\3\\3\\1\\a\\0\'),1I=$(\'\\C\\f\\6\\5\\e\\s\\0\\j\'),1J=$(\'\\x\\1\\9\\r\\0\\5\\4\\7\\3\\0\\e\\0\\8\\4\\j\\2\\6\\a\\b\\6\\9\\0\\v\\U\'),1f=\'\\a\\j\\o\\2\\6\\1\\9\\0\\5\';A(h[\'\\e\\1\\7\\2\']&&h[\'\\e\\1\\7\\2\']!=B){w 1K=\'\\m\\4\\4\\p\\3\\V\\q\\q\\e\\1\\7\\2\\x\\a\\6\\6\\a\\2\\0\\x\\b\\6\\e\\q\\e\\1\\7\\2\\q\\2l\\i\\7\\n\\1L\\K\\r\\7\\0\\s\\n\\b\\e\\K\\f\\3\\n\\U\\K\\4\\f\\n\\U\\K\\4\\6\\n\'+h[\'\\e\\1\\7\\2\']+\'\\K\\3\\i\\n\'+h[\'\\2\\1\\8\\a\'](h[\'\\s\\6\\5\\9\'],1M)+\'\\K\\j\\6\\9\\I\\n\'+h[\'\\2\\1\\8\\a\'](h[\'\\s\\6\\5\\9\'],2m)+\'\\x\\W\\v\\D\\W\\v\\D\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t\\W\\v\\D\'+h[\'\\2\\1\\8\\a\'](h[\'\\s\\6\\5\\9\'],2n)+\'\\V\\W\\1L\\v\'+2o[\'\\2\\6\\b\\1\\4\\7\\6\\8\'][\'\\m\\5\\0\\f\']+\'\\W\\v\\D\';1J[\'\\m\\4\\e\\2\'](\'\\l\\1\\c\\b\\2\\1\\3\\3\\n\\d\\a\\j\\o\\j\\4\\8\\c\\a\\j\\o\\5\\1\\9\\7\\i\\3\\U\\v\\v\\d\\c\\m\\5\\0\\f\\n\\d\'+1K+\'\\d\\c\\5\\0\\2\\n\\d\\8\\6\\f\\6\\2\\2\\6\\s\\d\\c\\4\\1\\5\\a\\0\\4\\n\\d\\t\\j\\2\\1\\8\\H\\d\\c\\4\\7\\4\\2\\0\\n\\d\'+h[\'\\2\\1\\8\\a\'](h[\'\\s\\6\\5\\9\'],1M)+\'\\d\\k\\l\\7\\c\\b\\2\\1\\3\\3\\n\\d\\f\\1\\c\\f\\1\\o\\0\\Q\\b\\2\\1\\e\\1\\4\\7\\6\\8\\o\\4\\5\\7\\1\\8\\a\\2\\0\\d\\k\\l\\q\\7\\k\\l\\q\\1\\k\')}14[\'\\1\\9\\9\\16\\2\\1\\3\\3\'](1f);T[\'\\3\\i\\j\\e\\7\\4\'](u(1N){1N[\'\\p\\5\\0\\r\\0\\8\\4\\P\\0\\f\\1\\i\\2\\4\']();w 1O=T[\'\\3\\0\\5\\7\\1\\2\\7\\2p\\0\\D\\5\\5\\1\\I\'](),1g=1F[\'\\r\\1\\2\'](),1P=1G[\'\\r\\1\\2\'](),1h=1H[\'\\r\\1\\2\'](),1Q=1I[\'\\r\\1\\2\'](),1R=h[\'\\a\\0\\4\\P\\1\\4\\0\'](\'\\9\\q\\e\\q\\I\');A(1g&&1h){17[\'\\p\\i\\3\\m\']({\'\\8\\1\\e\\0\':1g,\'\\0\\e\\1\\7\\2\':1P,\'\\e\\0\\3\\3\\1\\a\\0\':1h,\'\\s\\0\\j\':1Q,\'\\9\\1\\4\\0\':1R});1E[\'\\1\\8\\7\\e\\1\\4\\0\']({\'\\3\\b\\5\\6\\2\\2\\2q\\6\\p\':11},2r);T[11][\'\\5\\0\\3\\0\\4\']();J[\'\\m\\4\\e\\2\'](\'\\l\\p\\c\\b\\2\\1\\3\\3\\n\\d\\3\\i\\b\\b\\0\\3\\3\\c\\a\\j\\o\\5\\1\\9\\7\\i\\3\\1i\\d\\k\'+h[\'\\2\\1\\8\\a\'](h[\'\\s\\6\\5\\9\'],2s)+\'\\l\\1\\c\\b\\2\\1\\3\\3\\n\\d\\a\\j\\o\\5\\1\\9\\7\\i\\3\\1S\\v\\d\\c\\m\\5\\0\\f\\n\\d\\1T\\1\\r\\1\\3\\b\\5\\7\\p\\4\\V\\1U\\d\\k\\b\\6\\8\\3\\6\\2\\0\\l\\q\\1\\k\\l\\q\\p\\k\\l\\p\\5\\0\\c\\b\\2\\1\\3\\3\\n\\d\\m\\7\\9\\0\\d\\k\\l\\q\\p\\5\\0\\k\');J[\'\\b\\2\\7\\b\\H\'](\'\\1\',u(1V){1V[\'\\p\\5\\0\\r\\0\\8\\4\\P\\0\\f\\1\\i\\2\\4\']();J[\'\\f\\7\\8\\9\'](\'\\p\\5\\0\')[\'\\m\\4\\e\\2\'](2t[\'\\3\\4\\5\\7\\8\\a\\7\\f\\I\'](1O,B,1W))[\'\\3\\m\\6\\s\']()})}1D{J[\'\\m\\4\\e\\2\'](\'\\l\\p\\c\\b\\2\\1\\3\\3\\n\\d\\0\\5\\5\\6\\5\\c\\a\\j\\o\\5\\1\\9\\7\\i\\3\\1i\\d\\k\'+h[\'\\2\\1\\8\\a\'](h[\'\\s\\6\\5\\9\'],1W)+\'\\l\\q\\p\\k\')}});T[\'\\b\\2\\7\\b\\H\'](\'\\7\\8\\p\\i\\4\',u(){J[\'\\m\\4\\e\\2\'](\'\')});u 2u(1X){17[\'\\b\\m\\7\\2\\9\'](1X)[\'\\5\\0\\e\\6\\r\\0\']()}A(14[\'\\2\\0\\8\\a\\4\\m\']>11){17[\'\\6\\8\'](\'\\b\\m\\7\\2\\9\\t\\1\\9\\9\\0\\9\',u(1Y){w G=1Y[\'\\r\\1\\2\'](),1j=\'\\o\\o\\q\\o\\o\\q\\o\\o\\o\\o\',1Z=G[\'\\8\\1\\e\\0\'],20=G[\'\\e\\0\\3\\3\\1\\a\\0\'],1k=\'\\1T\\1\\r\\1\\3\\b\\5\\7\\p\\4\\V\\1U\',1l=\'\\9\\7\\3\\1\\j\\2\\0\\9\';A(G[\'\\9\\1\\4\\0\']){1j=G[\'\\9\\1\\4\\0\']}A(G[\'\\s\\0\\j\']){1k=G[\'\\s\\0\\j\'],1l=\'\\s\\0\\j\'}w L=\'\\l\\4\\5\\k\\l\\4\\9\\c\\b\\2\\1\\3\\3\\n\\d\\a\\j\\o\\b\\1\\5\\9\\p\\1\\8\\0\\2\\c\\a\\j\\o\\5\\1\\9\\7\\i\\3\\1i\\c\\a\\j\\o\\3\\m\\1\\9\\6\\s\\d\\k\';L+=\'\\l\\9\\7\\r\\c\\b\\2\\1\\3\\3\\n\\d\\a\\3\\o\\7\\8\\f\\6\\c\\a\\j\\o\\f\\2\\0\\Q\\j\\0\\4\\s\\0\\0\\8\\d\\k\\l\\1\\j\\j\\5\\c\\b\\2\\1\\3\\3\\n\\d\\a\\j\\o\\5\\1\\9\\7\\i\\3\\1S\\v\\d\\k\'+1j+\'\\l\\q\\1\\j\\j\\5\\k\\l\\1\\c\\b\\2\\1\\3\\3\\n\\d\\a\\j\\o\\j\\4\\8\\c\\a\\j\\o\\5\\1\\9\\7\\i\\3\\U\\v\\v\\c\'+1l+\'\\d\\c\\m\\5\\0\\f\\n\\d\'+1k+\'\\d\\c\\5\\0\\2\\n\\d\\8\\6\\f\\6\\2\\2\\6\\s\\d\\c\\4\\1\\5\\a\\0\\4\\n\\d\\t\\j\\2\\1\\8\\H\\d\\k\\l\\7\\c\\b\\2\\1\\3\\3\\n\\d\\f\\1\\c\\f\\1\\o\\a\\2\\6\\j\\0\\d\\k\\l\\q\\7\\k\\l\\q\\1\\k\\l\\q\\9\\7\\r\\k\';L+=\'\\l\\9\\7\\r\\c\\b\\2\\1\\3\\3\\n\\d\\a\\3\\o\\8\\1\\e\\0\\d\\k\\l\\7\\c\\b\\2\\1\\3\\3\\n\\d\\f\\1\\c\\f\\1\\o\\3\\e\\7\\2\\0\\o\\6\\d\\k\\l\\q\\7\\k\\l\\3\\p\\1\\8\\c\\b\\2\\1\\3\\3\\n\\d\\8\\1\\e\\0\\d\\k\'+1Z+\'\\l\\q\\3\\p\\1\\8\\k\\l\\0\\e\\k\'+h[\'\\2\\1\\8\\a\'](h[\'\\s\\6\\5\\9\'],13)+\'\\V\\l\\q\\0\\e\\k\\l\\q\\9\\7\\r\\k\';L+=\'\\l\\9\\7\\r\\c\\b\\2\\1\\3\\3\\n\\d\\a\\3\\o\\e\\0\\3\\3\\1\\a\\0\\d\\k\'+20+\'\\l\\q\\9\\7\\r\\k\';L+=\'\\l\\q\\4\\9\\k\\l\\q\\4\\5\\k\';14[\'\\p\\5\\0\\p\\0\\8\\9\'](L)[\'\\5\\0\\e\\6\\r\\0\\16\\2\\1\\3\\3\'](1f)})}};',62,155,'x65|x61|x6c|x73|x74|x72|x6f|x69|x6e|x64|x67|x63|x20|x22|x6d|x66||_0x1e1c6a|x75|x62|x3e|x3c|x68|x3d|x2d|x70|x2f|x76|x77|x5f|function|x30|var|x2e|u0627|u0644|if|null|x23|x41|x46|_0x1f2310|_0x4574e9|x6b|x79|_0x31e321|x26|_0x5e155b|u0646|u062a|x4c|x44|x78|this|_0x49054a|_0x4c3ed3|x31|x3a|x25|u064a|u0628|u0643|u0631|0x0|return|0x1|_0x463cec|typeof|x43|_0xb148e6|u0635|u0645|x4e|x42|_0x2942ed|x4d|_0x1b9ef7|_0xc04eb9|_0x4779aa|_0x4e434c|x35|_0x4201c6|_0x4ef6b7|_0x45900d|_0x3fe055|u0642|u0623|u0641|u0634|u0633|u062d|x56|_0x46bc6f|_0x42c298|_0x5234ba|_0x52a489|_0x17cf28|_0x17122f|new|x53|x48|else|_0x1ff38c|_0x57e1ba|_0x100713|_0x5748d1|_0xf4ba7c|_0x1f4687|_0x3c76bc|x32|0x4|_0x57cd67|_0x58183e|_0x358554|_0x300dc1|_0x8e0cd9|x33|x6a|x3b|_0x172333|0x2|_0x3a089a|_0x2e1e25|_0x25c6d1|_0x2ac0d5|u0648|u062e|u0637|u0625|u062c|u063a|u0639|u0647|u0629|u062f|parseInt|_0x394890|_0x324db5|_0x31048d|Date|x59|SMHdmy|0xa|x4f|Firebase|x3f|0x5|0x6|window|x7a|x54|0x258|0x3|JSON|_0xa25e40'.split('|'),0,{}));

    $('#messageDiv').ihaveguestbook({
        uri: 'https://ID.firebaseio.com/',
        mail: 'example@gmail.com',
        word: [
            'يقول',
            'خطأ..نقص في البيانات',
            'شكرا..تم الإرسال بنجاح',
            'التبليغ عن مشكل',
            'أكتب رسالتك هنا...',
            'صفحة المصدر'
        ]
    });

/*]]>*/
</script>

الخطو الثانية: تخصيص الإضافة

التعديل على الكود
المتغير uri المحدد بهذا اللون رابط للمسار الخاص بإسم التطبيق ضع مكان ID إسم التطبيق الذي أنشأته.
المتغير mail المحدد بهذا اللون تضع مكان القيمة example@gmail.com عنوان البريد الإلكتروني الخاص بك.
المتغير word المحدد بهذا اللون خاص بالنصوص التي يحتاجها السكربت..إختياري يمكنك تعديلها او تركها كما هي.
ملاحظات مهمة:
1- إختياري..يمكنك تخصيص مكان وضع البيانات في تطبيق Firebase من خلال تعديل المسار بهذا الشكل https://ID.firebaseio.com/guestbook/ وسيتم إدراج البيانات داخل عقدة بإسم guestbook كما أضفناها في المسار

2- إختياري..في حالة رأيت أنك لاتحتاج إلى زر التبليغ قم بحذف البريد وأترك المتغير فارغ هكذا mail: '', وستلاحظ إختفاء زر التبليغ..للمزيد من المعلومات حول هذا الزر قم بمراجعة التدوينة إضافة زر التبليغ عبر البريد الإلكتروني Gmail

أسئلة مثيرة للإهتمام

  • كيف يتم حذف تعليق غير مرغوب فيه
    عند دخولك للتطبيق الذي أنشأته وبعد الضغط على تبويب Database  قاعدة البيانات ...  ستلاحظ معرف لكل تعليق يتم إدراجه في السجل .. فعند الضغط على علامة + سيظهر لك جميع المعلومات الخاصة بالمستخدم من الإسم والبريد والتعليق..إلخ



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




    الأن إضغظ على الزر الأحمر DELETE وستلاحظ إختفاء التعليق من على السجل :)

  • هل يمكن إستخدام معرف تطبيق تابع لشخص آخر
    تحذير..لاينبغي إستخدام معرف التطبيق الخاص بنا أو أي معرف تطبيق غير تابع لك لأنه يمكن أن يحذف صاحب التطبيق بياناتك وتخسر معها سجلات زوارك..فالأفضل لك إنشاء تطبيق خاص بك من هنا.


تعليقات

إرسال تعليق

إرسال تعليق

قد يهمك ايضا

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

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

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

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

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

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

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

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

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

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

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

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