Info Post
بسم الله الرحمن الرحيم
و الصلاة و السلام على أشرف المرسلين


المشاركات الشائعة


الكثير يريد الإحتفاظ بالزوار الذي يتوافدون على مدونته, و تزيين مدونته لكي تتميز و تترقى.

الموضوع سيكون حول : كيفية إضافة المشاركات الشائعة ثم كيفية تغيير شكلها..

أولا : كيفية إضافة المشاركات الشائعة إلى المدونة.
تابع الشرح :

أولا ادخل على مدونتك, ثم اذهب إلى تخطيط.
التخطيط

ثم اظغط على إضافة أداة :
تغيير شكل المشاركات الشائعة
ثم إختر المشاركات الشائعة :
تغيير شكل المشاركات الشائعة

ثم حفظ.
تغيير شكل المشاركات الشائعة

ثانيا : تغيير شكل المشاركات الشائعة :

هذا هو شكل المشاركات الشائعة بعد التغيير :
تغيير شكل المشاركات الشائعة

نتجه من مدونتنا إلى قالب : 
تغيير شكل المشاركات الشائعة
ثم تحرير html
تغيير شكل المشاركات الشائعة
ثم إضغط على ctrl + f و ابحث عن :

 ]]></b:skin>

ثم قبل الكود السابق أضف الكود التالي :

 #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

ثم قم بحقظ النموذج :
تغيير شكل المشاركات الشائعة
ثم انظر لمدونتك و استمتع بالشكل الجديد و الجذاب لمدونتك . 
إلى اللقاء في الحلقة المقبلة في درس جديد.
دمتم بود.

شجعنا بلايك أو بمشاركة على المواقع الإجتماعية

كاتب التدوينة

ساعدنا في نشر الموضوع

روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode

تعليقك يهمنا و يشجعنا