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

اهلاً بكم زوار ومتابعي المدونة الكرام

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

معاينة :

طريقة تركيب الاضافة
1 - ابحث في قالب مدونتك عن </body> وقم باضافة الكود التالي فوقه مباشرة

<script type='text/javascript'>
var multiFeed = {
feedsUri: [
{
name: "دروس وشروحات",
url: "http://qaisi1web.blogspot.com",
tag: "دروس وشروحات"
},
{
name: "قوالب بلوجر",
url: "http://qaisi1web.blogspot.com",
tag: "قوالب بلوجر"
},
{
name: "اضافات بلوجر",
url: "http://qaisi1web.blogspot.com",
tag: "اضافات بلوجر"
}
],
numPost: 4,
showThumbnail: true,
showDate: true,
showSummary: true,
summaryLength: 80,
titleLength: "auto",
thumbSize: 72,
containerId: "feed-list-container",
readMore: {
text: "مزيد من المواضيع",
endParam: "?max-results=20"
}
};
</script>
<script src='https://dl.dropboxusercontent.com/s/0uriwbaa7cp5y2v/qaisi1web-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;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%;}}

3- قم بوضع الكود التالي لتفعيل الاضافة يمكنك وضعها اينما تشاء .

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

يجب عليك وضعه في مكان مناسب في مدونتك حتى يظهر بشكل جميل واحترافي انا افضل ان يوضع اسفل هذه الكود
<div class='outer-wrapper'
اتمنى التوفيق للجميع

الموضوع من قسم:

اضافات بلوجر

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

عن الموقع

العباقرة العرب

مدونه مختصه بكل ما هو جديد
في عالم التكنولوجيا والاجهزة النقالة