سكربت عرض المواضيع حسب التسميات

سكربت عرض المواضيع حسب التسميات

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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

من أفضل وأحسن السكربتات المنظمة التي ستجدونها متوفرة منها سكربت عرض المواضيع حسب التسميات، حقا إضافة جد مفيدة لأصحاب كثرة الأقسام بموقعهم يتميز بعرض المواضيع على شكل شبكة (GRID) كما يحتوي على عنوان وأيضا يمكن تخصيص كل قسم على حسب عدد المواضيع التي تريد إظهارها به.
قد لا يناسب موقعك من حيث شكله لذا وجب اختيار له مكان مناسب وكذلك أن تكون على دراية بالتعديل على الأكواد الخاصة بالستايل، سأقدم شرح التركيب ومفهومه والبقية منوط بكم
شرح طريقة التركيب
1. ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
#tabber-wrapper {width: 96%;float: right;overflow: hidden;margin: 13px;border: 1px solid #EAEAEA;background: #fff;margin-right: 10px;}
.tabber .column_img:hover {margin-bottom: 12px;opacity: .9;}
ul.tab-view{float:right;list-style:none;height:25px;width:99%;margin:0;padding:5px 5px 6px;font-family: droid arabic kufi;font-size: 12px;background:#444444}
ul.tab-view li{float:right;height:26px;line-height:26px;overflow:hidden;position:relative;margin:0;padding:0; margin-left:9px;}
ul.tab-view li a{text-decoration:none;color:#fff;display:block;outline:none;font-weight:400;padding:0 15px;}
html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{color:#fff;background:#FC4F3F;border-radius:2px;text-shadow:none}
.tab-wrapper{overflow:hidden;clear:both;float:right;width:100%;margin-bottom:10px;}.tabber{padding:5px 0 0}
.tabber .column{  float: right;display: inline;width: auto;height: 150px;margin-right: 13px;padding: 2px 2px 5px;}
.tabber .column_img{background: #fff;padding: 0px;width: 200px;height: 150px;margin: 5px 0px 0px;border: 1px solid #DBDBDB;}
.tabber h2{line-height: 16px;text-align: center;background: #FC4F3F;padding: 10px 0 10px 21px;width: 179px;position: relative;bottom: 50px;opacity: .9;font-family: cursive;font-size: 12px;margin-left: 1px;}.tabber h2 a{color:#FFF;}.tabber h2 a:hover{color:#FFF;text-decoration:none;}
* المحدد بالأحمر هو عرض الصندوق 96%
2. إبحث عن </head> وضع الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://i.imgur.com/7WK8lcQ.png";
showRandomImg = true;
aBold = true;
summaryPost = 100;
summaryPost1 = 200;
numposts = 9;
numposts1 = 9;
numposts2 = 9;
numposts6 = 9;
Title1 = "عنوان 1";
Title2 = "عنوان 2";
Title3 = "عنوان 3";
Title4 = "عنوان 4";
Title5 = "عنوان 5";
Title6 = "عنوان 6";
    //]]></script> 
<script src='https://ar1web-com.googlecode.com/svn/trunk/flexcroll.js'/>
* المحدد بالأحمر ضع عناوين
* الأرقام المحددة بالبرتقالي هي عدد ظهور المواضيع في كل قسم يمكنك تغييرها حسب ما تريد
* إذا أردت إضافة قسم آخر فأضف هذا الكود تحت إخوته : Title7 = "عنوان 7";
3. الكود التالي ضعه بالمكان الذي تراه مناسب
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static&quot;'>
<div class='cf' id='tabber-wrapper'>
<ul class='tab-view'>
<li><a href='#tab1'><script>document.write(Title1);</script></a></li>
<li><a href='#tab2'><script>document.write(Title2);</script></a></li>
<li><a href='#tab3'><script>document.write(Title3);</script></a></li>
<li><a href='#tab4'><script>document.write(Title4);</script></a></li>
<li><a href='#tab5'><script>document.write(Title5);</script></a></li>
<li><a href='#tab6'><script>document.write(Title6);</script></a></li>
</ul><div class='clear'/>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/قسم 1?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/قسم 2?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/قسم 3?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/قسم 4?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/قسم 5?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab6'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/قسم 6?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='clear'/>
</div></div>
  </b:if> </b:if>
<script type='text/javascript'>
 //<![CDATA[
var _0x3c49=["\x68\x69\x64\x65","\x2E\x74\x61\x62\x62\x65\x72","\x73\x68\x6F\x77","\x61\x63\x74\x69\x76\x65","\x61\x64\x64\x43\x6C\x61\x73\x73","\x75\x6C\x2E\x74\x61\x62\x2D\x76\x69\x65\x77\x20\x6C\x69\x3A\x66\x69\x72\x73\x74","\x2E\x74\x61\x62\x62\x65\x72\x3A\x66\x69\x72\x73\x74","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x75\x6C\x2E\x74\x61\x62\x2D\x76\x69\x65\x77\x20\x6C\x69","\x68\x72\x65\x66","\x61\x74\x74\x72","\x61","\x66\x69\x6E\x64","\x66\x61\x64\x65\x49\x6E","\x63\x6C\x69\x63\x6B","\x72\x65\x61\x64\x79"];jQuery(document)[_0x3c49[15]](function (){$(_0x3c49[1])[_0x3c49[0]]();$(_0x3c49[5])[_0x3c49[4]](_0x3c49[3])[_0x3c49[2]]();$(_0x3c49[6])[_0x3c49[2]]();$(_0x3c49[8])[_0x3c49[14]](function (){$(_0x3c49[8])[_0x3c49[7]](_0x3c49[3]);$(this)[_0x3c49[4]](_0x3c49[3]);$(_0x3c49[1])[_0x3c49[0]]();var _0x88b3x1=$(this)[_0x3c49[12]](_0x3c49[11])[_0x3c49[10]](_0x3c49[9]);$(_0x88b3x1)[_0x3c49[13]]();return false;} );} );

 //]]>
</script>
* هذه العملية هي التممة إذا أردت إضافة قسم آخر فعليك إضافة العنوان والذي ذكرته سابقاً كما ترى المحدد باللون الأخضر يوجد بهم ستة أكواد أضف السابع تحت السادس هكذا يكون الكود :
<li><a href='#tab7'><script>document.write(Title7);</script></a></li>
وتبقى مرحلة آخيرة وهي تكرار الكود تحت أخيه المحدد باللون البرتقالي هكذا :
<div class='tabber' id='tab7'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/مجانيات?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
* لا تنسى تغيير التسميات : قسم 1, قسم 2, قسم 3, قسم 4,قسم 5,قسم 6
يمكنك حفظ القالب ومبروك عليك الإضافة، لأي استفسار خاص بالتدوينه فضعه بالتعليق.
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

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

  1. شكرا لك ولكن كنت اريد السكربت بتاع قالب عرب ويب السابق وشكرا لك على المجهود

    ردحذف
  2. مشكور اخي حسام
    بعد تغير صورتك نورت المدونة كثيرا
    لكن اخي لدي مدونة من انشر يضهر لي العنوان موجود والوصف قليل جدا
    والمشكلة الثانية عندما ادخل على التدوينه يضهر لي العنوان في المتصفح للاعلى يضهر رابط لم يضهر العنوان
    ارجو الرد :(

    ردحذف
    الردود
    1. إما يكون خطأ في التعريب أو كود خاص بالمظهر تم تغييره توجه للقالب الأصلي وانظر إذا به نفس المشكل إذا لم يكن فستجد كود بالسطور الأولى للقالب شبيه بهذا غيره بالكامل https://www.blogger.com/static/v1
      في المرة القادمة ضع تعليقك بالمكان المناسب :
      http://www.ar1web.com/2015/03/do-you-have-problem-in-blogger.html

      حذف
  3. هل القالب مجاني !!
    اقصد هذا القالب http://wejhat-v2.blogspot.com/
    اذا كان مجاني هل يمكنك ارساله الى بريدي الالكتروني mapali20000@gmail.com
    واذا كان مدفوع كم سعره - ارسل لي معلومات البيع عبر البريد وشكرا

    ردحذف
    الردود
    1. مجاني ستجده بقسم "قوالب بلوجر" أو إبحث عنه بمربع البحث "قالب وجهات"
      ستجد رابط التحميل بالقائمة الجانبية

      حذف
    2. الف شكرا لكم و لخدمتكم المميزة تحياتي الكم

      حذف
    3. العفو، تسعدنا خدمتك

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

    ردحذف
  5. غير معرف8/10/2015

    كفية وضعها اسفل المشاركات

    ردحذف
    الردود
    1. ضعها فوق <div id="footer-wrapper">

      حذف
  6. رائع كالعادة هل لي بطلب صغير
    اريد نسخة من التدوينات التي تستخدمها في عرض قوالب واجهات ولك جزيل الشكر

    ردحذف
    الردود
    1. ليست إضافة أخي، إن شاء الله قد يكون شرح لكن بشكل مختلف

      حذف
    2. اخي اقصد نسخة المشاركات اي ان تقوم بتصدير مدونة الكترونية من قالب واجهات بصيغة xml , وترسلها لي لا اقصد اي اضافة

      حذف
    3. للآسف ليست للمشاركة أخي

      حذف
  7. سؤال فني
    بالنسبة للكود التالي font-weight:500; طبعا القيمة 500 تتغير بحسب المزاج لدي ._. انا لا احد الخط السميك غالبا ما استخدمها حتى في العناوين الرئيسية h1 , h2 هل يؤثر ذالك على ارشفة المدونة وهل ااستخدام الكلمات المفتاحية للمواضيع مرهون بـfont weight; ام ليس لها علاقة
    وشكرا ^_^

    ردحذف
    الردود
    1. لا علاقة له بتاتا بالأرشفة أو غيرها هو لتوضيح العناوين فقط

      حذف
  8. رائع اخي
    اتمنى لو تقوم بعمل دورة تكويد قالب بلوجر
    اتوقع سوف يكون لها صدى واعجاب كبيير نظرا لاسلوبك في طرح الشروحات ♥

    ردحذف
    الردود
    1. ياريت اخى حسام تعمل دورة تكويد ممكن تشرحلى كيفية استخدام after,before فى css فى عمل border

      حذف
  9. لو سمحت اخي انا اصمم قالب ولكن واجهتني مشكلة اضيف هوفر ولا يظهر طبعاً اشاهد شرح ابو علي على اليوتيوب و عملت نفسه بالضبت ارجوا الحل بسرعه ...

    ردحذف
    الردود
    1. كيف تضيفه؟ ولأي شيء تستخدمه؟
      أترك مثال

      حذف
  10. أخي أورد تكبير العرض ليناسب شكل القالب

    ردحذف
    الردود
    1. ستجد في الشرح بأول الكود الرقم 96% غيره بالعرض المناسب لك

      حذف
  11. شكرا أخي أوريد أن تظهلر المواضيع في الوسط لتناسب إطلة العرض

    ردحذف
    الردود
    1. إبحث عن .tabber .column ستجد بالسطر margin-right: 13px غيره بهذا margin: 20px 16px

      حذف
  12. شكرا جزيلا لك
    أخي الكريم أوريد مساعدة منك لديك مشكلة في مدونتي

    ردحذف
  13. الاضافة مش شغلة اخي iHus sam

    ردحذف
  14. نرجو من سيادتم كتابة حل للمشكلة لان السكربت غير ظاهر مش شغال علي مدونتي

    ردحذف
    الردود
    1. ضع رابط للمعاينة تكون مدونة تجريبية فقط

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

    ردحذف
    الردود
    1. حاول تجرته بقالب آخر للتتأكد

      حذف
  16. أخي حسام احييك على ه\ه الأعمال الإحترافية الرائعة ..
    انا لدي في القالب نقس السكريبت واريد ازالته ما الحل ؟
    مشكور مسبقاً

    ردحذف
    الردود
    1. بما أنك تمتلك مثله ما عليك إلا البحث عن الكود الأول بقالبك ثم احذفهم كما هو في هذه التدوينة هل فهمت قصدي؟

      حذف
  17. شكرا على الشرح أخي حسام

    ردحذف
  18. شكرا على هذه الإضافة الرائعة اخي حسام

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

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

    ردحذف
    الردود
    1. عليكم السلام، كود السكربت لا يتوافق مع الإضافات الأخرى كأن هناك تطابق في الأكواد وليس هناك حل بهذا الخصوص... لكن سبق وركبتها على نفس القالب ونجحت صحيح؟ أم جربتها على قالب آخر؟

      حذف
  20. يمكنك تصفح المشاكل من هنا http://temsamanee.blogspot.com/

    ردحذف
  21. لا أخي ركبتها على قالب تواصل ولم اكن اعتقد انها هي التي تسببت فيها الا بعد تركيبها في الموقع الرسمي. على العموم شكرا لك على اهتمامك بارك الله فيك.

    ردحذف
    الردود
    1. العفو، لربما يلائمك قالب اخباري به بوستات كثيرة ستجده منشور بصفحتنا

      حذف
  22. اخى اين اضع الكود الاخير
    انا اتبعت جميع الخطوات لكن الكود الاخير لا اعرف اين اضعه

    ردحذف
    الردود
    1. ابحث عن كود ترقيم الصفحات وضعه أسفله

      حذف
  23. شكرااا على شروحاتك المتميز وننتضر المزيد

    ردحذف
  24. السلام عليكم أخي الكريم هذا السكريب أصبح لا يحمل فجأة وأصبح شكل مدونتي غير جيد هل من حل

    ردحذف
  25. تم تركيب السكريبت بنجاح شكرا جزيلا .. لكن المشكلة ظهور صور المواضيع بحجم كبير وتحت بعض غير مرتبين ايه المشكلة ؟

    ردحذف
  26. ركبت كل شيء وتابعت الخطوات لكن للاسف لم يظهر لي شيء ممكن تركوبه لي

    ردحذف

عن الكاتب :

إرشادات

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

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

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

    كلمة الختام

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