كود عرض المواضيع حسب التسميات بشكل جديد واحترافي لمدونات بلوجر







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


طريقة التركيب :
ابحث في قالب مدونتك عن </ body > وقم باضافة الكود التالي فوقه مباشرة
رمز Code:
<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'/>
قم بالبحث عن]]></ b:skin >

رمز Code:
/* 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;pa dding: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%;}}
رمز Code:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='feed-list-container'/>
</b:if>
يجب عليك وضعه في مكان مناسب في مدونتك حتى يظهر بشكل جميل واحترافي انا افضل ان يوضع اسفل هذه الكود < div class = 'outer-wrapper'

https://www.traidnt.net/vb/traidnt2729153/