اضافة اعمدة تعرض مواضيع كل قسم بلوجر

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

اضافات بلوجر

المصدر

معاينة الاضافة

كيفية الاضافة

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>

ارجو ان يكون الدرس قد اعجبكم تابعونا باستمرار للمزيد من الاضافات الرائعة