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


سكربت عرض المواضيع حسب التسميات
السلام عليكم ورحمة الله وبركاته اهلا بكم في مدونة القيسي ويب ,طبعا لغة json  البرمجية قدمت الكثيرللمطورين والممبرمجين وذالك عن طريق تحولها للبيانات المعقدة الى كائنات -object يستطيع الانسان قرائتها وفهما بسهولة,رغم ان بلوجر محدوده في لغات البرمجة التي يستخدمها json احضرت لكم اضافة اكثر من رائعه لعرض المواضيع حسب التسمية في مدونتك لتسهيل لزائر في تصفح مدونتك او مدونة اخرى
والان ناتي الى المعاينة 
صورة للإضافةً



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

1 - ابحث في قالب مدونتك عن </body> وقم باضافة الكود التالي فوقه مباشرة
<script type='text/javascript'>
var multiFeed = {
    feedsUri: [
        {
            name: &quot;دروس وشروحات&quot;,
            url: &quot;http://qaisi1web.blogspot.com&quot;,
            tag: &quot;دروس وشروحات&quot;
        },
        {
            name: &quot;قوالب بلوجر&quot;,
            url: &quot;http://qaisi1web.blogspot.com&quot;,
            tag: &quot;قوالب بلوجر&quot;
        },
        {
            name: &quot;اضافات بلوجر&quot;,
            url: &quot;http://qaisi1web.blogspot.com&quot;,
            tag: &quot;اضافات بلوجر&quot;
        }
    ],
    numPost: 4,
    showThumbnail: true,
    showDate: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: &quot;auto&quot;,
    thumbSize: 72,
    containerId: &quot;feed-list-container&quot;,
    readMore: {
        text: &quot;مزيد من المواضيع&quot;,
        endParam: &quot;?max-results=20&quot;
    }
};
</script>
<script src='https://dl.dropboxusercontent.com/s/0uriwbaa7cp5y2v/qaisi1web-feed.js' type='text/javascript'/>
الان يجب عليك القيام بالتعديلات الصغيره على هذه الكود ,قم بتغير:
الاحمر: رابط مدونتك او موقع اخر تريد جلب المواضيع منه
الازرق : العنوان
البرتقالي : التسميات
2 - قم بالبحث عن]]></b:skin>
وأضف فوقه مباشره الكود التالي
/* CSS list-entries qaisi1web */
.post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
.list-entries{display:table;background:#fdfdfd;margin:1.5% 1%;width:31.3%;float:left;font-size:80%;}
.list-entries ul,.list-entries li{margin:0;list-style:none;padding: 0;}
#feed-list-container ul li{background:#fdfdfd;padding:15px;line-height:normal;border:1px solid #eee;border-top:0;transition:all .3s;text-align: right;}
#feed-list-container ul li:hover{background:#fff;}
#feed-list-container ul li:last-child{border-bottom:0;}
.list-entries .main-title{padding:0;overflow:hidden;}
.list-entries .main-title h4{position:relative;display:block;font:inherit;padding:1em 3.5em;background-color:#444;color:#fff;margin:0;line-height:normal;font-size:16px;margin-top:0!important}
.list-entries .main-title h4:after{display:inline-block;content:"\f016";font-family:fontAwesome;font-size:17.4px;font-style:normal;background-color:#333;color:#fff;top:0;right:0;padding:1.1em 1em;position:absolute;font-weight:400}
.list-entries .title a{font-size:14px;text-decoration:none;color:#333;transition:all .3s;}
.list-entries .title a:hover{color:#4f93c5}
.summary span {font-size: 11px;}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 0 0 1em;padding:0;float:right}
.list-entries .summary{overflow:hidden;color:#999}
.list-entries .more-link{border-bottom:none;}
.list-entries .more-link a{display:block;line-height:2em;overflow:hidden;text-decoration:none;background-color:#444;padding:0.8em 1.5em;position:relative;font-weight:400;color:#fff;transition:all .3s;font-size: 14px;}
.list-entries .more-link a:hover{background-color:#FF4D00;color:#fff;}
.list-entries .more-link a:after{display:inline-block;content:"\f053";font-family:fontAwesome;font-size:16.4px;font-style:normal;background-color:#333;color:#ccc;top:0;left:0;padding:0.8em 1.25em;position:absolute;font-weight:400;transition:all .3s;}
.list-entries .more-link a:hover:after{background-color:#FF4D00;color:#fff;}
.widget .post-body ul, .widget .post-body ol {position:relative;}
@media (max-width:640px){
.list-entries {width:100%;}
.list-entries{margin:2.5% 1%;}}
3- الكود التالي هو الخاص بتفعيل الاضافة 
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='feed-list-container'/>
</b:if>
يجب عليك وضعه في مكان مناسب في مدونتك حتى يظهر بشكل جميل واحترافي انا افضل ان يوضع اسفل هذه الكود
<div class='outer-wrapper'
اذا واجهت اي مشكله يمكنك وضعه في التعليقات .. بالتوفيق للجميع

السلام عليكم ورحمة الله وبركاته اهلا بكم في مدونة القيسي ويب ,طبعا لغة json  البرمجية قدمت...

روابط الموضوع للنسخ

رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
12 التعليقات
avatar

جميل للغاية أخي .. دائماً تتحفنا ! :D

avatar

شكرا لمرورك يا غالي

avatar
أزال أحد مشرفي المدونة هذا التعليق.
avatar

شكرا لك لكن تم حذف تعليقك اانه يحتوي على روابطاشهاريه .. اعتذر منك

avatar

اخي العزيز بعد التحية و السلام لديا مشكل في مدونتي وارجوا الرد عليها


عند الفتح ادوات - التخطيط - لا تفتح و تظهر هذه الرسالة
Déterminez si d'autres personnes rencontrent le même problème : recherchez le code d'erreur bX-7o92p6 dans le groupe d'aide de Blogger

في انتظار الاجابة تقبل مني فائق الشكر و الاحترام

avatar

وعليكم السلام اخي ... اولا نورت المدونة بزيارتك الكريمة ثانيا ياريت اخي اذا كان لديك سؤال خارج الموضوع ان تضعه في صفحة سجل الزوار وليس هنا
http://qaisi1web.blogspot.com/p/welcome.html
بالنسبة لسؤالك اخي الكريم ضع رابط مدونتك حتى ارى ما هي المشكلة

avatar

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

avatar

هل يمكنك ان تضع رابط للمعاينه حتى اخبرك اين تضعه في تحرير القالب

avatar

تفضل حبي http://sports12tv.blogspot.com/

avatar

اخي ان الاضافة موجودة بشكل صحيح في مدونتك لكن عليك فقط بتغير روابط
http://qaisi1web.blogspot.com
برابط مدونتك .. اتمنى ان تتابع الشرح الموجود في الاعلى وتفهمه جيدا ... بالتوفيق

avatar

شكرا لك اخي ولكن لم اجد الكود الاحمر الاخير هل توجد اكواد اخرى تعمل عمله ام ماذا وبارك الله فيك

avatar

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

كيف تعلق ؟

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *