إضافة أجمل تأثير على المشاركات الشائعة فى بلوجر

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

شرح التركيب

 اذهب للوحة تحكم مدونتك >> القالب >> تحرير HTML >> ابحث عن 

]]></b:skin>  
>> ثم ضع فوقه كود الاضافــــــــــــــــــتة التى تناسبك
ملحوظة هامة : يجب اضافة أداة المشاركات الشائعة أولاً 

الشكــــــــــــــــل الأول 

الكــــــــــــــــــــــود 

#PopularPosts1 ul li a:hover{color:#fff; text-decoration: none !important; margin-bottom:0 !important;}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block;font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin-right:35px; 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;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:2px;border:1px 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:0px 0px 0px 0px;border:1px solid #f7f7f7;-webkit-box-shadow:2px 2px 2px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;}
#PopularPosts1 img {
border-radius:0px;
max-width:60px;
max-height:60px;
margin-left:4px;
}

الشكــــــــــــل الثانى 

♦ معاينــــــــــــــــة ♦

الكــــــــــــــــود 

#PopularPosts1 ul li a:hover{color:#000; text-decoration: none !important; margin-bottom:0 !important;}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block;font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin-right:35px; 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;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 {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{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{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{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{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{width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li {
  background:#FFFFFF;
  border: 2px solid #777777;
  border-radius: 25px 0;
  margin: 6px 0;
  padding: 10px;
  position: relative;
}
#PopularPosts1 ul li:hover{background:#F1FBFE; border: 2px solid #06BBFD;}
#PopularPosts1 img {
border-radius:200px;
max-width:60px;
max-height:60px;
margin-left:4px;
}

راعى تغيير الألوان ودوران الأركان بالجزء الملون من الكود أعلاه 
أسأل اللـــــــه تعالى أن أكون قد وفيت الشرح

كلمة شكر من الأعضاء تجعلنى ازداد فى العطاء

إقرأ المزيد.. bloggeradsenseo

التعليقات بين ألفاظ غير لائقة و روابط دعائية !

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

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

شيء آخر يحزننى هو التعليق بصيغة مجهول ( غير معرف ) فلماذا تلجأ لذلك طالما أنك مسجل فى الجيميل وإذا كان ذلك لإخفاء هويتك فلماذا تلجأ لإخفاء هويتك داخل مدونتى ؟

الهدف من  التعليقات

الهدف من خدمة التعليقات هو تكوين نقاش ثري حول المحتوى المنشور، لذا 

« احرص على أن يكون تعليقك مرتبطاً بالمحتوى، ويبتعد عن ألفاظ غير لائقة »

رجـــــــــــــــاء 

عند كتابة تعليق راعى 

أن يكون التعليق يتعلق بالمحتوى المنشور قدر الامكان 

الاقلال من نشر روابط اعلانية فقط 

البعد عن الألفاظ الغير لائقة التى تعطينى طابع عن قبح سلوكك 

بتواصلكم نصل إلى عنان السماء فلا تبخلو بالتواصل الفعال الذى يفيدكم ويسعدنى 

إقرأ المزيد.. bloggeradsenseo