-->
الرئيسية إضافات بلوجر جافا سكريبت قوائم إضافة اخر المواضيع لمدونات بلوجر بتأثيرات احترافيه

إضافة اخر المواضيع لمدونات بلوجر بتأثيرات احترافيه



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


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

معاينة

شرح التركيب للإضافة


  • قم بالبحث عن هذا الوسم الأول فى مدونتك]]>ثم قم بوضع الكود التالى فوقه .


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


  • الأن قم بالبحث عن الكود التالى فى قالب مدونتكثم ضع فوقع الكود التالى.




  • كود اخر معدل ولكنه نفس الكود مع تعديل بسيط





الأن مع أخر كود وهو الخاص بإظهار الإضافة فى مدونتك
يمكنك وضعه فى أى مكان فى قالب مدونتك كما تريد أنت

    • الأن قم بحفظ القالب وتوجه الأن الىى التخطيط
    • سوف تجد أداة جديده فى التخطيط بأسم wdbloogcom
    • سوف تضع بها [recent] ثم قم بخفظها ومبروك عليك .


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


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


    الموضوع التالى الموضوع التالى
    الموضوع السابق الموضوع السابق

    اضغط هنا للتعليق
    الاشتراك في: تعليقات الرسالة (Atom)
     
    ]