تغيير شكل المشاركات الشائعة لشكل جديد واحترافى

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

معاينة الإضافة

معاينة 

شرح التركيب

1. التركيب سهل جدا لأنك سوف تضع فقط كود css فى قالب مدونتك
2. ولكنك لن تضعه فوق وسم]]></b:skin>فى مدونتك
3. بل سوف تضع فوق وسم</head>فى مدونتك
4. حتى لا يتعاض أستايل الإضافة القديم مع الذى سوف تضع الجديد

<style>
#PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 35px 15px 10px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img{height:auto;padding:0;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail{margin:0;width:100%;height:180px;overflow:hidden;display:block}
#PopularPosts1 ul li:first-child .item-title{position:absolute;right:0;left:0;bottom:0;top:0;text-align:right;padding:15px 45px 15px 20px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;right:0;left:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:&#39;&#39;;text-align:left;position:absolute;bottom:0;left:0;width:70%;height:1.2em;background:linear-gradient(to left,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;right:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}
</style>

1. وبعد ذلك تقوم بحفظ القالب ومبروك عليك
2. كان هذا فقط موضوع اليوم :)

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله

المصدر عالم المدون