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

الأحد، 28 مايو، 2017

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

المشاركات الشائعة من بلوجر التى تستخدمها الكثير منا فى السيدبار فى مدونته أى أى مكان قد يراه مناسب لها لذلك اليوم أقوم لكم موضوع عن المشاركات الشائعة وفى هذا الموضوع كود أستايل بسيط 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>


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


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


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


شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

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

في الحقيقة اضافة رائعة مشكور اخي الكريم على المجهود
تم التركيب على موقع بيبون تك

بالتوفيق انشاء الله

بالتوفيق لك أيضا أخى الفاضل

اخى هناك مشكله بالصورة لاتظهر بشكل جيد

أرجو منك وضع رابط معاينة

تفضل اخى رابط المعاينه وشكرااا لك على الرد
https://thepronew2017.blogspot.com.eg
(h)
:)

أبحث عن هذا الكود item-thumbnail فى القالب فى أكواد html
وأبحث أن أسفل هذا الكود
عن رقم 72 وغيره الى 720

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر