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

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

يوجد الآن مشاهدة التعليقات : 12

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات


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

  • معاينة


  • شرح طريقة التركيب 
    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أن لا تضع أي روابط خارجية
    3لإضافة كود حوله أولاً بمحول الأكواد
    4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
    5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

    هناك 12 تعليقًا:

    1. Mr Mohamed4/05/2015

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

      ردحذف
    2. Mr Mohamed4/06/2015

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

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

      ردحذف
    4. Mr Mohamed4/06/2015

      شكرا انا اسف

      ردحذف
    5. Mahmoud Elgohary4/07/2015

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

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

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

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

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

      ردحذف
    10. Mahmoud Elgohary4/08/2015

      شكرا

      ردحذف
    11. شكراً لك اخي حسام

      ردحذف
    12. abdou dz4/17/2015

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

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

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

      ردحذف

    عن الكاتب :

    إرشادات

      تحميل الملفات

      نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
    • موقع : Mediafire
    • موقع :file-upload
    • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
    • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
    • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
    • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
    • أين تجدنا؟

      بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

      كلمة الختام

      في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
    أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم