05‏/04‏/2015


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

  • معاينة


  • شرح طريقة التركيب 
    1 . توجه لقالب >> تحرير 
    2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
    3. ضع الكود فوقه
    #boxar1web{background:#fff;border: 1px solid #EAEAEA;;width:320px;height:260px;position:fixed;overflow:hidden;border-right: none;;left:-360px;z-index:9999;text-align:right!important;letter-spacing:0;}
    .boxar1web-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:droid arabic kufi;text-transform:capitalize;font-weight:bold;padding-left:25px}
    .boxar1web-title span a{float:left;height:35px;width:25px;}
    a#boxar1web-close, a#boxar1web-close {margin-left:15px;}
    .boxar1web-title > span > h2{font-size:20px!important;font-weight:normal!important;}
    .boxar1web-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
    .boxar1web-container{border:none;float:right;width:100%;height:auto;margin:3px}
    .boxar1web-container > div{border:none;height:40px;margin:3px;padding:10px;}
    .boxar1web-container > div > span {font-size:14px;}
    .boxar1web-container img{float:right;margin:3px 5px;width:25px;border:1px solid #ccc;}
    .show{bottom:80px;}
    .hide{bottom:-145px;}
    .related-ar1web {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}
    .related-ar1web h4 {font-size:150%;margin:0 0 .5em;}
    .related-ar1web-style-2 {border: 1px dashed #eee;;margin-top:-20px;padding-top:15px;list-style:none;font-family: cursive;background: #F9F9F9;}
    .related-ar1web-style-2 li {margin-right:-35px;style:none;}
    .related-ar1web-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}
    .related-ar1web-style-2 li:first-child {border-top:none}
    .related-ar1web-style-2 .related-ar1web-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:right;margin:2px 10px 0 0;border:1px solid #ccc;  margin-left: 13px;}
    .related-ar1web-style-2 .related-ar1web-item-title {font-weight:bold;font-size:113%;text-transform:capitalize;  font-family: droid arabic kufi;}
    a.related-ar1web-item-title {color :#333 !important;}
    a:hover.related-ar1web-item-title {color :#0491ea !important;text-decoration:none;}
    .related-ar1web-style-2 .related-ar1web-item-summary {display:block;overflow:hidden;}
    4 . ابحث عن </head>
    5  . ضع الكود التالي فوقه مباشرة

    <script type='text/javascript'>
    $(window).scroll(function(){
            if ($(this).scrollTop() &gt; 400) {
                $(&#39;#boxar1web&#39;).css({&#39;right&#39;:&#39;0px&#39;});
            } else {
                $(&#39;#boxar1web&#39;).css({&#39;right&#39;:&#39;-360px&#39;});
            }
        });
      
    $(document).ready(function(){
     var boxar1web      = $(&#39;#boxar1web&#39;);
        var closed      = $(&#39;#boxar1web-close&#39;);
        var minimize    = $(&#39;#boxar1web-minimize&#39;);
        var maximize    = $(&#39;#boxar1web-maximize&#39;);
      
        maximize.hide();
      
        closed.click(function(){
            boxar1web.css({&#39;right&#39;:&#39;-350px&#39;});
            boxar1web.fadeOut(&#39;slow&#39;);
        })
        minimize.click(function(){
            boxar1web.toggleClass(&#39;hide&#39;);
            $(this).hide();
            maximize.show();
        })
        maximize.click(function(){
            boxar1web.toggleClass(&#39;hide&#39;);
            $(this).hide();
            minimize.show();
        })
    });
    </script>
    .  ابحث عن <div class='post-footer'> وضع الكود التالي أدناه ستجد الكود متكرر الآخير هو المنشود

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='show' id='boxar1web'>
        <div class='boxar1web-title boxar1web-www'>
          <span style='float: right;margin:10px 40px 0 15px;'>أيضاً إقرأ هذا المقال</span>
            <span><a href='javascript:void(0);' id='boxar1web-close' title='close'><img alt='close button' class='a' src='https://ar1web-com.googlecode.com/svn/trunk/close.png' title='close'/></a></span>
            <span><a href='javascript:void(0);' id='boxar1web-minimize' title='minimize'><img alt='minimize button' src='https://ar1web-com.googlecode.com/svn/trunk/minimize.png' title='minimize'/></a></span>
            <span><a href='javascript:void(0);' id='boxar1web-maximize' title='maximize'><img alt='maximize button' src='https://ar1web-com.googlecode.com/svn/trunk/maximize.png' title='maximize'/></a></span>
        </div>
        <div class='boxar1web-container'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='related-ar1web' id='sliding-tab'/>
      <script type='text/javascript'>
      var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
              &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop></b:if>];
      var relatedPostConfig = {
          homePage: &quot;<data:blog.homepageUrl/>&quot;,
          widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,
          numPosts: 3,
          summaryLength: 35,
          titleLength: &quot;auto&quot;,
          thumbnailSize: 45,
          noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
          containerId: &quot;sliding-tab&quot;,
          newTabLink: false,
          moreText: &quot;&quot;,
          widgetStyle:2,
          callBack: function() {}
      };
      </script><script src='https://ar1web-com.googlecode.com/svn/trunk/rd-ar1web.js' type='text/javascript'/>
    </b:if>       
        </div>
    </div>
    </b:if>
    * غير أيضاً إقرأ هذا المقال بما يناسبك
    * المحدد بالأصفر numPosts هو عدد ظهور المواضيع غير 3 إلى الرقم المناسب لك

    تنويه: إذا غيرت عدد المواضيع التي ستظهر فينبغي التعديل على طول الصندوق ويوجد بالكود الأول محدد باللون الأصفر

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

  • معاينة


  • شرح طريقة التركيب 
    1 . توجه لقالب >> تحرير 
    2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
    3. ضع الكود فوقه
    #boxar1web{background:#fff;border: 1px solid #EAEAEA;;width:320px;height:260px;position:fixed;overflow:hidden;border-right: none;;left:-360px;z-index:9999;text-align:right!important;letter-spacing:0;}
    .boxar1web-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:droid arabic kufi;text-transform:capitalize;font-weight:bold;padding-left:25px}
    .boxar1web-title span a{float:left;height:35px;width:25px;}
    a#boxar1web-close, a#boxar1web-close {margin-left:15px;}
    .boxar1web-title > span > h2{font-size:20px!important;font-weight:normal!important;}
    .boxar1web-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
    .boxar1web-container{border:none;float:right;width:100%;height:auto;margin:3px}
    .boxar1web-container > div{border:none;height:40px;margin:3px;padding:10px;}
    .boxar1web-container > div > span {font-size:14px;}
    .boxar1web-container img{float:right;margin:3px 5px;width:25px;border:1px solid #ccc;}
    .show{bottom:80px;}
    .hide{bottom:-145px;}
    .related-ar1web {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}
    .related-ar1web h4 {font-size:150%;margin:0 0 .5em;}
    .related-ar1web-style-2 {border: 1px dashed #eee;;margin-top:-20px;padding-top:15px;list-style:none;font-family: cursive;background: #F9F9F9;}
    .related-ar1web-style-2 li {margin-right:-35px;style:none;}
    .related-ar1web-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}
    .related-ar1web-style-2 li:first-child {border-top:none}
    .related-ar1web-style-2 .related-ar1web-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:right;margin:2px 10px 0 0;border:1px solid #ccc;  margin-left: 13px;}
    .related-ar1web-style-2 .related-ar1web-item-title {font-weight:bold;font-size:113%;text-transform:capitalize;  font-family: droid arabic kufi;}
    a.related-ar1web-item-title {color :#333 !important;}
    a:hover.related-ar1web-item-title {color :#0491ea !important;text-decoration:none;}
    .related-ar1web-style-2 .related-ar1web-item-summary {display:block;overflow:hidden;}
    4 . ابحث عن </head>
    5  . ضع الكود التالي فوقه مباشرة

    <script type='text/javascript'>
    $(window).scroll(function(){
            if ($(this).scrollTop() &gt; 400) {
                $(&#39;#boxar1web&#39;).css({&#39;right&#39;:&#39;0px&#39;});
            } else {
                $(&#39;#boxar1web&#39;).css({&#39;right&#39;:&#39;-360px&#39;});
            }
        });
      
    $(document).ready(function(){
     var boxar1web      = $(&#39;#boxar1web&#39;);
        var closed      = $(&#39;#boxar1web-close&#39;);
        var minimize    = $(&#39;#boxar1web-minimize&#39;);
        var maximize    = $(&#39;#boxar1web-maximize&#39;);
      
        maximize.hide();
      
        closed.click(function(){
            boxar1web.css({&#39;right&#39;:&#39;-350px&#39;});
            boxar1web.fadeOut(&#39;slow&#39;);
        })
        minimize.click(function(){
            boxar1web.toggleClass(&#39;hide&#39;);
            $(this).hide();
            maximize.show();
        })
        maximize.click(function(){
            boxar1web.toggleClass(&#39;hide&#39;);
            $(this).hide();
            minimize.show();
        })
    });
    </script>
    .  ابحث عن <div class='post-footer'> وضع الكود التالي أدناه ستجد الكود متكرر الآخير هو المنشود

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='show' id='boxar1web'>
        <div class='boxar1web-title boxar1web-www'>
          <span style='float: right;margin:10px 40px 0 15px;'>أيضاً إقرأ هذا المقال</span>
            <span><a href='javascript:void(0);' id='boxar1web-close' title='close'><img alt='close button' class='a' src='https://ar1web-com.googlecode.com/svn/trunk/close.png' title='close'/></a></span>
            <span><a href='javascript:void(0);' id='boxar1web-minimize' title='minimize'><img alt='minimize button' src='https://ar1web-com.googlecode.com/svn/trunk/minimize.png' title='minimize'/></a></span>
            <span><a href='javascript:void(0);' id='boxar1web-maximize' title='maximize'><img alt='maximize button' src='https://ar1web-com.googlecode.com/svn/trunk/maximize.png' title='maximize'/></a></span>
        </div>
        <div class='boxar1web-container'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='related-ar1web' id='sliding-tab'/>
      <script type='text/javascript'>
      var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
              &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop></b:if>];
      var relatedPostConfig = {
          homePage: &quot;<data:blog.homepageUrl/>&quot;,
          widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,
          numPosts: 3,
          summaryLength: 35,
          titleLength: &quot;auto&quot;,
          thumbnailSize: 45,
          noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
          containerId: &quot;sliding-tab&quot;,
          newTabLink: false,
          moreText: &quot;&quot;,
          widgetStyle:2,
          callBack: function() {}
      };
      </script><script src='https://ar1web-com.googlecode.com/svn/trunk/rd-ar1web.js' type='text/javascript'/>
    </b:if>       
        </div>
    </div>
    </b:if>
    * غير أيضاً إقرأ هذا المقال بما يناسبك
    * المحدد بالأصفر numPosts هو عدد ظهور المواضيع غير 3 إلى الرقم المناسب لك

    تنويه: إذا غيرت عدد المواضيع التي ستظهر فينبغي التعديل على طول الصندوق ويوجد بالكود الأول محدد باللون الأصفر
    12 Blogger تعليقات
    Disqus
    12 التعليقات
    المشرف
    avatar
    Mr Mohamed 4/05/2015
    delete

    شكرا اخى حسام . هو حضرتك ممكن تدينى كود القاثمة الافقية الثابتة اللى فى مدونتك اللى فيها الفهرس واتفاقية الاستخدام ومعلش تقولى ازاى اركبها لانى لسه مبتدى وشكرا

    المشرف
    avatar
    Mr Mohamed 4/06/2015
    delete

    شكرا اخى حسام . هو حضرتك ممكن تدينى كود القائمة الافقية الثابتة اللى عندك فى المدونة اللى فيها الفهرس والاتفاقية وسجل الزوار ....
    ومعلش تقولى اركبها ازاى لانى لسه مبتدئ وشكرا

    المشرف
    avatar

    الإضافات الخاصة بالقالب لا يتم نشرها.

    المشرف
    avatar
    Mr Mohamed 4/06/2015
    delete

    شكرا انا اسف

    المشرف
    avatar
    Mahmoud Elgohary 4/07/2015
    delete

    اخى انا مش لاقى هذا الكود اذا له بديل ارجوك ارسله لى

    المشرف
    avatar

    إبحث عن جزء منه هكذا: post-footer حتى تجد نفس الكود إن لم تجده فأترك رابط مدونتك لتحقق

    المشرف
    avatar

    اخي حسام انا ايضاً عندي نفس المشكل
    رابط مدونتي: http://timeline-arab.blogspot.com/

    المشرف
    avatar

    إبحث عن : وضع الكود فوقه بسطر يعني فوق هذا الكود :

    المشرف
    avatar

    انت لي مش عاوز تعمل شرح او تدينا الكود بتاع شاهد ايضا الى عندك بصراحة جميل اتمني انك تعمل شرح او تديني الكود اي حاجة

    المشرف
    avatar
    Mahmoud Elgohary 4/08/2015
    delete

    شكرا

    المشرف
    avatar

    شكراً لك اخي حسام

    المشرف
    avatar
    abdou dz 4/17/2015
    delete

    اخي بارك الله فيك

    ممكن كيف عدل المشكلة للي في سلايدشو

    هنا : http://www.ibda3-tech.ga/

    يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
    1أن يكون التعليق خاص بمحتوى التدوينة
    2أن لا تضع أي روابط خارجية
    3لإضافة كود حوله أولاً بمحول الأكواد
    4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة