recent
أخبار ساخنة

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

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


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

شرح التركيب


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

<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>


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


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


لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق

google-playkhamsatmostaqltradent