إضافة رائعة للمواقع لجلب وعرض المواضيع حسب التسميات

السلام عليكم ورحمة الله وبركاته أهلا بكم على مطورون طبعا لغة JSON قدمت الكثير للمبرمجين والمطورين وذلك عن طريق تحويلها للبيانات المعقدة إلى كائنات-object يستطيع الإنسان قراءتها ومعرفتها بسهولة ورغم أن بلوجر محدودة في لغات البرمجة التي تستخدمها ف JSON عوضت الكثير من هذا النقص واليوم أحضرت لكم إضافة رائعة للمواقع والمدونات تعمل على جلب المواضيع من موقعك أو أي موقع وعرضها في نفس الموقع حسب التسميات وذلك باستغال لغة JSON.

معاينة

■ صورة للإضافة :

■ مميزاتها :

 -- شكل جميل.

 -- متجاوبة مع كل الشاشات.

 -- القدرة على جلب المواضيع من أي موقع.

 -- الإعتماد على التسميات في عرض المواضيع,

■ طريقة الإضافة :

1- ابحث عن </body> وأضف فوقه الكود التالي :

<script type='text/javascript'>
var multiFeed = {
    feedsUri: [
        {
            name: &quot;تطوير&quot;,
            url: &quot;http://www.mtawroon.com&quot;,
            tag: &quot;تطوير&quot;
        },
        {
            name: &quot;قوالب&quot;,
            url: &quot;http://www.mtawroon.com&quot;,
            tag: &quot;قوالب&quot;
        },
        {
            name: &quot;سيو&quot;,
            url: &quot;http://www.mtawroon.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/u/280199022/feed.js' type='text/javascript'/>

مع تغيير:

 الأحمر = رابط مدونتك أو الموقع الذي تريد جلب المواضيع منه.

 البرتقالي = التسميات.

 الأزرق = العنوان.

2- ابحث عن */]]></b:skin> وأضف فوقه الكود التالي :

 .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;height:3.5em;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:#0099CC;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:#008CBE;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- ابحث عن <div class='outer-wrapper' وأضف أسفله الكود التالي واحفظ القالب :

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='feed-list-container'/>
</b:if>

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