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

إضافات برلوجر

السلام عليكم و رحمة الله تعلى و بركاته مرحبا بكم إخواني أخواتي متتبعي مدونة عالم الإحتراف.
في هذا الموضوع سأطرح عليكم إضافة ستجعل من شكل مدونتكم أفضل, و هي إضافة لعرض التدوينات حسب الموضوع أو المجال الذي تنتمي له و هذا المجال أنت من تحدد عن طريق التسميات. هذا الأمر سيسهل على الزائر معرفة أقسام مدونتك و الإطلاع على بضع مواضيع لكل قسم بدلا من أن يرى عدة مواضيع لقسم واحد.
المثال موجود في الصورة أعلاه.
لتركيب الإضافة:
 1- لوحة التحكم > قالب > تحرير HTML
 2- قم بإضافة الكود التالي فوق </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'/>
 3- قم بوضع الكود التالي فوق ]]></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;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%;}}
4- و لتفعيل الإضافة قم بوضع الكود التالي أسفل <div class='outer-wrapper' (هذا المكان إختياري فقط و يمكنك وضعه في المكان الذي تريد أن تظهر فيه الإضافة):
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='feed-list-container'/>

</b:if>
5- حفظ القالب و تهانينا الإضافة.
هذا ما كان لدي في هذا الدرس أمل أن يفيدكم.
في الأخير لاتنسو إبداء رأيكم في الموضوع عن طريق كتابة تعليق, و أيضا شاركو الموضوع مع أصدقائكم عبر مواقع التواصل الإجتماعي ليستفيدو منه.
و لاتنسو الإعجاب بصفحتنا الجديدة على الفيسبوك "عالم الإحتراف", و الإشتراك في قناتنا على يوتيوب "Ahmed Essoubai" لتتوصلو بأخر الدروس و الشروحات مرئية منها أم مكتوبة...وشكرا.
شارك عبر google plus

حول Ahmed Essoubai

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