موضوع جديد اليوم وهو عن إضافة اخر المواضيع لمدونات بلوجر بتأثيرات احترافيه وهذه الإضافة تعرض لكم اخر المواضيع فى مدونتك وهو سهل جدا فى تركيبها وتعمل من التخطيط وهكذا سوف يكون على الجميع سهوله فى تركيبها ويمكنك معاينة الإضافة من الرابط الذى فى الأسفل والإضافه متجاوبه مع جميع الشاشات ، نمر الأن لشرح التركيب .
معاينة اللإضافة
شرح التركيب للإضافة
- قم بالبحث عن هذا الوسم الأول فى مدونتك]]>ثم قم بوضع الكود التالى فوقه .
.wdbloogcom{display:flex;margin:0 auto 20px auto;width:100%;overflow:hidden;max-width:970px}
.gravfeatureditem{background:rgba(0,0,0,0.02);display:block;position:relative;float:left;overflow:hidden;height:220px;width:25%}
.gravfeatureditem .gracontent{background:#3498db;display:block;position:absolute;z-index:6;bottom:0;left:0;right:0;transform:translate(0,60px);opacity:0;visibility:hidden;transition:all .3s}
.gravfeatureditem:hover .gracontent{opacity:1;visibility:visible;transform:translate(0,0)}
.gravfeatureditem .gracontent h3{font-size:14px;color:#fff;padding:15px;margin:0;text-align:center}
.gravfeatureditem .feat-img{width:100%;height:100%;background-size:cover;background-position:50%}
.gravfeatureditem a{display:block;color:rgba(255,255,255,1);position:relative;vertical-align:bottom;z-index:5;height:100%;transition:all .3s}
.gravfeatureditem a:before{content:'';background:#3498db;width:100%;height:100%;position:absolute;z-index:3;top:0;opacity:0.9;transition:background 0.3s linear,opacity 0.3s linear}
.gravfeatureditem.first a:before,.gravfeatureditem.first .gracontent{background:#56a8df}
.gravfeatureditem.second a:before,.gravfeatureditem.second .gracontent{background:#e49148}
.gravfeatureditem.third a:before,.gravfeatureditem.third .gracontent{background:#5bccb6}
.gravfeatureditem.fourth a:before,.gravfeatureditem.fourth .gracontent{background:#f5b44c}
.gravfeatureditem a:hover:before{opacity:0.1;}
.gravfeatureditem a:after{content:"\f123";position:absolute;z-index:3;font-size:30px;top:32%;left:0;right:0;bottom:0;color:#fff;text-align:center;transform:translate(0,0);animation:jellygrav .6s linear;opacity:1;visibility:visible;transition:all .3s;font-family: FontAwesome;}
.gravfeatureditem:hover a:after{opacity:0;visibility:hidden;transform:translate(0,-60px)}
@media screen and (max-width:826px){
.gravfeatureditem{width:50%}
.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}
@media screen and (max-width:641px){
.gravfeatureditem{width:100%}
.gravfeatureditem.second,.gravfeatureditem.third,.gravfeatureditem.fourth{display:none}}
- الأن قم بالبحث عن الكود التالى فى قالب مدونتك