10/08/2017

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





طريقة التركيب

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


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

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

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



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

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

  • ستجد كود أداة (المشاركات الشائعة) PopularPosts كاملا بهذا الشكل

  • 
                  <b:widget id='PopularPosts1' locked='false' title='المشاركات الشائعة' type='PopularPosts'>
                    <b:widget-settings>
                      <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
                      <b:widget-setting name='showThumbnails'>true</b:widget-setting>
                      <b:widget-setting name='showSnippets'>true</b:widget-setting>
                      <b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
                    </b:widget-settings>
                    <b:includable id='main'>
      <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='!data:showThumbnails'>
              <b:if cond='!data:showSnippets'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
             <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
                <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                  <div class='item-thumbnail'>
                    <a expr:href='data:post.href' target='_blank'>
                      <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                        <img alt='' border='0' expr:src='data:image'/>
                      </b:with>
                    </a>
                  </div>
                </b:if>
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <b:if cond='data:showSnippets'>
                  <div class='item-snippet'><data:post.snippet/></div>
                </b:if>
           </div>
         <div style='clear: both;'/>
            </b:if>
          </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
                  </b:widget>
    

    شرح كود أداة (المشاركات الشائعة)
    الكود المحدد بهذا اللون هو المسؤول عن عرض شريحة الصور المصغرة ..الرقم 72 يرمز إلى حجم مقياس الصورة
    الكود المحدد بهذا اللون هو المسؤول عن عرض عنوان التدوينة
    الكود المحدد بهذا اللون هو المسؤول عن عرض وصف أو إقتباس التدوينة
  • الأن سنقوم بإضافة الرمز المسؤول عن إظهار التأثير Aware Hover داخل الأداةPopularPosts

  • 
    <b:widget id='PopularPosts1' locked='false' title='المشاركات الشائعة' type='PopularPosts'>
                    <b:widget-settings>
                      <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
                      <b:widget-setting name='showThumbnails'>true</b:widget-setting>
                      <b:widget-setting name='showSnippets'>true</b:widget-setting>
                      <b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
                    </b:widget-settings>
                    <b:includable id='main'>
      <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='!data:showThumbnails'>
              <b:if cond='!data:showSnippets'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
             <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
              <div id='da-thumbs'>
                <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                  <div class='item-thumbnail'>
                    <a expr:href='data:post.href' target='_blank'>
                      <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 200, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                        <img alt='' border='0' expr:src='data:image'/>
                      </b:with>
                    </a>
                  </div>
                </b:if>
              <div id="Aware-Hover">
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <b:if cond='data:showSnippets'>
                  <div class='item-snippet'><data:post.snippet/></div>
                </b:if>
              </div>
            </div>
           </div>
         <div style='clear: both;'/>
            </b:if>
          </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
                  </b:widget>
    

    شرح الكود المضاف
    الكود المحدد بهذا اللون هو كود العنصر Aware Hover الذي يتحرك مع الماوس
    الكود المحدد بهذا اللون هو عنصر مسؤول عن إحتواء الجميع حتى لايخرج المحتوى عن إطار الصورة
    ملاحظة مهمة
    1- لاحظ أننا قمنا بإدخال كل من الصورة والعنوان والوصف داخل العلامة<div id="da-thumbs">ثم قمنا بإدخال العنوان والوصف داخل العلامة <div id="Aware-Hover"> وهي العلامة المسؤولة عن تأثير Aware Hover أي عند تمرير الماوس فوق الصورة سيظهر لك العنوان والإقتباس
    2- الملاحظة الثانية هي أننا قمنا بتغيير قياس الصورة من 72 إلى 200 وذلك حتى نحصل على صورة مناسبة للإطار العام وفي نفس الوقت نحصل على درجة وضوح ممتازة
  • الأن سنقوم بإضافة ستايل Css الخاص بنا سنقوم بالبحث عن ]]></b:skin> وفوقه أي قبله نضيف النمط التالي

  • 
    #da-thumbs {
        width: 200px;
        height: auto;
        overflow: hidden;
        position: relative;
        margin: 10px auto;
        padding: 0;
    }
    
    #da-thumbs #Aware-Hover {
        position: absolute;
        background: #c9511d;
        width: 100%;
        height: 100%;
    }
    /*----PopularPosts------*/
    .PopularPosts .item-thumbnail {
        float: right;
        margin: 0;
        padding: 0;
    }
    #PopularPosts1 img {
        float: right;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    #PopularPosts1 .item-title a {
        font-size: 10px;
        font-family: inherit;
        padding: 5px;
        text-align: right;
        display: block;
        color: #232323;
        font-weight: 700;
    }
    #PopularPosts1 .item-snippet {
        font-size: 11px;
        font-family: inherit;
        padding: 5px;
        text-align: right;
    } 
    

    شرح كود Css
    الكود المحدد بهذا اللون هو كود حساس جدا يشمل العنصر المسؤول عن الإحتواء و أسفله ستايل العنصر Aware Hover
    الكود المحدد بهذا اللون خاص بأداة المشاركات الشائعة تستطيع التعديل عليه كما تريد
    ملاحظة مهمة
    1- لاحظ أننا أعطينا للعلامة #da-thumbs المسؤولة عن إحتواء (الصورة والعنوان والوصف) نفس القيمة 200 التى وضعناها لشريحة الصور لذلك إذا أردت الزيادة أو النقصان لابد ان تعدل على الإثنتين.
    2- الملاحظة الثانية هي إحتمال أن تتعارض الأكواد القديمة لأداة (المشاركات الشائعة) مع الأكواد الجديدة لذلك عليك تنسيقها وترتيبها بالشكل الذي يتناسب مع مدونتك .
  • الخطوة الأخير سنقوم فيها بإضافة السكريبت js سنقوم بالبحث عن </body> وفوقه أي قبله نضيف الكود التالي

  • 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
        <script type='text/javascript'>
           /*<![CDATA[*/
    !function(r,e,t){"use strict";r.HoverDir=function(t,e){this.$el=r(e),this._init(t)},r.HoverDir.defaults={speed:300,easing:"ease",hoverDelay:0,inverse:!1},r.HoverDir.prototype={_init:function(t){this.options=r.extend(!0,{},r.HoverDir.defaults,t),this.transitionProp="all "+this.options.speed+"ms "+this.options.easing,this.support=Modernizr.csstransitions,this._loadEvents()},_loadEvents:function(){var s=this;this.$el.on("mouseenter.hoverdir, mouseleave.hoverdir",function(t){var e=r(this),o=e.find("#Aware-Hover"),i=s._getDir(e,{x:t.pageX,y:t.pageY}),n=s._getStyle(i);"mouseenter"===t.type?(o.hide().css(n.from),clearTimeout(s.tmhover),s.tmhover=setTimeout(function(){o.show(0,function(){var t=r(this);s.support&&t.css("transition",s.transitionProp),s._applyAnimation(t,n.to,s.options.speed)})},s.options.hoverDelay)):(s.support&&o.css("transition",s.transitionProp),clearTimeout(s.tmhover),s._applyAnimation(o,n.from,s.options.speed))})},_getDir:function(t,e){var o=t.width(),i=t.height(),n=(e.x-t.offset().left-o/2)*(i<o?i/o:1),s=(e.y-t.offset().top-i/2)*(o<i?o/i:1);return Math.round((Math.atan2(s,n)*(180/Math.PI)+180)/90+3)%4},_getStyle:function(t){var e,o,i={left:"0px",top:"-100%"},n={left:"0px",top:"100%"},s={left:"-100%",top:"0px"},r={left:"100%",top:"0px"},a={top:"0px"},p={left:"0px"};switch(t){case 0:e=this.options.inverse?n:i,o=a;break;case 1:e=this.options.inverse?s:r,o=p;break;case 2:e=this.options.inverse?i:n,o=a;break;case 3:e=this.options.inverse?r:s,o=p}return{from:e,to:o}},_applyAnimation:function(t,e,o){r.fn.applyStyle=this.support?r.fn.css:r.fn.animate,t.stop().applyStyle(e,r.extend(!0,[],{duration:o+"ms"}))}};var i=function(t){e.console&&e.console.error(t)};r.fn.hoverdir=function(t){var e=r.data(this,"hoverdir");if("string"==typeof t){var o=Array.prototype.slice.call(arguments,1);this.each(function(){e?r.isFunction(e[t])&&"_"!==t.charAt(0)?e[t].apply(e,o):i("no such method '"+t+"' for hoverdir instance"):i("cannot call methods on hoverdir prior to initialization; attempted to call method '"+t+"'")})}else this.each(function(){e?e._init():e=r.data(this,"hoverdir",new r.HoverDir(t,this))});return e}}(jQuery,window);
          /*]]>*/
        </script>
    <script type='text/javascript'>
    //<![CDATA[ 
       $(function() {
        $(' #da-thumbs ').each( function() { $(this).hoverdir({
         hoverDelay : 75,
         inverse : false
        }); } );
       });
    //]]>
    </script> 
    


شرح كود Css
الرابط المحدد بهذا اللون هو خاص بمكتبة جيكويري لا تقم بحذفه حتى لو كان موجود في قالب مدونتك وإلا لن يعمل الكود
الرابط المحدد بهذا اللون خاصة بمكتبة modernizr v2.6.2 ضروري لتشغيل هذه الميزة - تستطيع مراجعة جميع إصدارات المكتبة من هنا.
السكربت المحدد بهذا اللون خاصة بميزة Aware Hover.
الإسم#da-thumbsالمحدد بهذا اللون هو معرف الآي دي للعنصر المسؤول عن إحتواء العناصر لابد أن يكون بنفس الإسم
الكود hoverDelay : 75,المحدد بهذا اللون هو ألية عمل مختلفة تجعل النافذة وكأنها تزحف..لتعطيل الخاصية غير الرقم 72 إلى 0 .
الكود inverse : falseالمحدد بهذا اللون هو كذلك ألية عمل مختلفة تجعل النافذة عكس إتجاه الماوس..لتفعيل الخاصية غير القيمة من false إلى true .