الحصول على شكل جميل واحترافي للمواضيع الأكثر زيارة أو
المشاركات الشائعة لن أطيل عليكم
يمكنك عرض هذه الإضافة
على 4 طرق:
عرض عنوان الموضوع مع اقتباس للموضوع
عرض عنوان الموضوع مع صورة مصغرة له
عرض عنوان الموضوع واقتباس منه مع صورة مصغرة له
==> بمعنى
أن الإضافة تدعم كل أنواع العرض التي تتم اضافتها من التخطيط
المرحلة 1 : اضافة أدات المشاركات الشائعة
تخطيط
اضافة أدات
اختر المشاركات الشائعة
احفض الإضافة
اذهب إلى بلوجر
القالب
تحرير html
ابحث عن ]]></b:skin>
قم بلصق الكوت الأتي أسفل ]]></b:skin>
/*--------------- Popular Posts ---------------*/
.PopularPosts .widget-content ul li .item-thumbnail img{
padding: 5px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
width: 100px;
height: 100px;
z-index: 99;
position:relative;
background:#fff;
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
box-shadow: 0;
}
.PopularPosts .widget-content ul li:hover img {
background:#00aa9f;
-moz-box-shadow: 5px 0 3px #007d75;
-webkit-box-shadow: 5px 0 3px #007d75;
box-shadow: 5px 0 3px #007d75;
border: 1px solid #007d75;
}
.PopularPosts .widget-content {
background:#fff;
padding: 0 10px;
}
.PopularPosts .widget-content ul li {
position:relative;
}
.PopularPosts .widget-content ul li .item-title {
position:relative;
left: 5px;
top: 20px;
z-index: 1;
}
.PopularPosts .widget-content ul li .item-title a{
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
text-decoration: none;
color:#00aa9f;
text-shadow:1px 1px 1px #fff;
}
.PopularPosts .widget-content ul li:hover .item-title a{
color:#fff;
text-shadow:1px 1px 1px #00544f;
}
.PopularPosts .widget-content ul li .item-title:before {
left: 30px;
display: inline-block;
position: absolute;
content: "";
width: 0px;
height: 100%;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
position:absolute;
-webkit-transition: all 0.5s;
transition: all 0.5s;
z-index: -1;
background:#00aa9f;
}
.PopularPosts .widget-content ul li:hover .item-title:before{
width: 90%;
}
المرحلة 4 : الإنتهاء
احفض التغيرات في القالب
التخصيص
قم بتغير لو الإطار #007d75 حسب الألوان المستخدمة في مدونتك حتى يكون هناك تناسق
قم بغير #00aa9f لون الخلفية
يا أخي الكريم صلح الخطأ فالكود يأ تي أعلى وليس أسفل]]>.... وشكرا على الإضافة الجميلة مزيد من التألق والنجاح واصل بالمناسبة مدونتك جميلة ومتناسقة ومتماشية مع العصر
ردحذف