اضافة المشاركات الشائعة الملونة في بلوجر
في مدون محترف يوجد اكثر من إضافة للمشاركات الشائعة ولكن إضافة اليوم شكلها غريب قليلاً و مختلف عن الإضافات
الاخرى و تُعتبر هذه الإضافة من اهم إضافات بلوجر و التي سوف تجدها في كل مدونة فهي لا غنى عنها و تكون باشكال مختلفة
إما تكون عبارة عن عناوين فقط او على شكل شبكة او عبارة عن صورة بحجم كبير ولكن هذه مميزة بحيث تجمع بين الاناقة و
الجمال و الإختلاف في وقت واحد والجميع يعرف وظيفة الإضافة فهي تقوم بعرض المواضيع الاكثر مشاهدة من قِبل الزوار على
أساس الوقت و يمكن أن يكون كل أسبوع أو شهر أو كل الوقت يمكنك معاينتها عبر الزر التالي
ننصحك بقرائة: اضافة المشاركات الشائعة على شكل شبكة
و الإطلاع على: اضافة المشاركات الشائعة مع خيارات التنقل
شرح تركيب الإضافة
- اولا ادخل إلى لوحة تحكم بلوجر
- انقر على تبويب قالب
- ثم اضغط على تحرير HTML
ابحث عن الوسم ]]> و اضف الكود التالي فوقه
/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}
يمكنك حذف ما هو مُعلم باللون الاحمر إذا كنت تريد الإضافة من دون اي الوان
الان ابحث عن الوسم
