تغيير شكل المشاركات الشائعة بشكل رائع مع ترقيمها

السلام عليكم ورحمة الله

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

1. لنمر الان الى شرح طريقة وضع الاضافة الرائعة :
   

• توجه الى لوحة التحكم في بلوجر واختر التعديل على HTML في القالب قم بالبحث عن الوسم التالي : ]]> ثم أضف الكود التالي فوقه مباشرة :
  

#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: #2a4057; display: block;font-size: 16px; 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 #2d4562;background:#0099ff;-webkit-box-shadow:0px 0px 5px #2d4562;-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:#f9f9f9;  border: 2px solid #0099ff;  border-radius: 25px 0;  margin: 6px 0;  padding: 10px;  position: relative;}#PopularPosts1 ul li:hover{background:#F1FBFE; border: 2px solid #2d4562;}#PopularPosts1 img {border-radius:15px;max-width:60px;max-height:60px;margin-left:4px;}

1. الان توجه الى التخطيط وضع اعدادت المشاركات كما في الصورة
   

1. تعديل الوان الكود
   

 الكودين اللذين بالأحمر هما لون خلفية المشاركات الشائعة ولون الإطار

الكودين المعلمان بالبرتقالي هما نفس الشئ ولكن عند مرور الماوس.

هذه الاضافة تتميز بكونها تعطي شكل رائع للمدونة فهي تجعل المشاركات الشائعة تظهر بشكل رائع كما تظهر المواضيع بترقيم..

هذه الأداة تمكن زوار مدونتك من الاطلاع على المواضيع الأكثر قراءة والتي تم التفاعل معها في مدونتك بشكل كبير.

• أتمنى أن تعجبكم الاضافة والى اللقاء في موضوع جديد.
  

المصدر انس للمعلوميات