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

السلام عليكم ورحمة الله وبركاته اهلا بكم في مدونة القيسي ويب ,طبعا لغة 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  البرمجية قدمت الكثيرللمطورين والممبرمجين وذالك عن طري...