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

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

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

■ مميزاتها :

-- شكل جميل.

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

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

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

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

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

<script type='text/javascript'>
var multiFeed = {
    feedsUri: [
        {
            name: &quot;جديد القوالب&quot;,
            url: &quot;http://mrt1mer.blogspot.com&quot;,
            tag: &quot;قوالب بلوجر&quot;
        },
        {
            name: &quot;جديد الحلقات&quot;,
            url: &quot;http://mrt1mer.blogspot.com/&quot;,
            tag: &quot;حلقات&quot;
        },
        {
            name: &quot;الحماية والاختراق&quot;,
            url: &quot;http://mrt1mer.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/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>

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

ليست هناك تعليقات:

إرسال تعليق

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي.

الثلاثاء، 15 مارس 2016