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

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

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

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

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

توجه الى لوحة التحكم في بلوجر واختر التعديل على HTML في القالب

قم بالبحث عن الوسم التالي :

]]></b:skin>

ثم أضف الكود التالي فوقه مباشرة :

#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;
}

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

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

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

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

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