راسلنا من خلال النمودج التالي :

الاسم

بريد إلكتروني *

رسالة *

اخر الأخبار



كنت قد وضعت موضوع بالسابق بعنوان

اضافة تأثير متحرك فوق الفوتر لقوالب البلوجر 2020



اما في هذا الموضوع نفس الاضافة انما ثابتة لا تتحرك

شرح التركيب


يمكنكم متابعة الفيديو بالموضوع السابق لطريقة التركيب


اكواد الاضافة



نذهب الى المظهر و نبحث عن   ]]></b:skin>
و نلصق الكود التالي فوقه


/* Footer Gelombang */#fancy-shape{clear:both;max-width:100%;display:block;position:relative;margin:15% auto 0;justify-content:center;z-index:2;box-sizing:border-box}.footer-fancy-shape{clear:both;overflow:hidden;position:absolute;left:0;bottom:100%;width:100%;margin-bottom:-2px;direction:ltr}.footer-fancy-shape[data-negative=false].footer-fancy-shape-bottom,.footer-fancy-shape[data-negative=true].footer-fancy-shape-top{transform:rotate(180deg)}@media screen and (max-width:992px){.footer-fancy-shape-bottom svg{height:105px}}.footer-fancy-shape-bottom svg{width:calc(130% + 2.5px);height:125px}.footer-fancy-shape .footer-fancy-shape-fill{fill:#1a73e8;width:calc(100% + 2.5px);transform:rotateY(0deg);-webkit-transform-origin:center;transform-origin:center;transition:all .5s ease}.footer-fancy-shape svg{z-index:-1;display:block;position:relative;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%)}@media screen and (max-width: 992px){.footer-fancy-shape-bottom svg{height:105px}}@media screen and (max-width: 768px){.footer-fancy-shape-bottom svg{height:85px}}@media screen and (max-width: 480px){.footer-fancy-shape-bottom svg{height:55px}}#footer-navmenu{background:#1a73e8;padding:25px 0;font:$(navmenufooter.font);color:$(navmenufooter.color)}#footer-container{background:#1a73e8;padding:20px 5px;overflow:hidden;color:$(footer.color);font-size:12px;text-align:center;border-top:2px solid #1559b38f}


ثم نضع الكود التالي فوق الفوتر



<div id='fancy-shape'> <section class='footer-fancy-shape footer-fancy-shape-bottom' data-negative='false'> <svg preserveAspectRatio='none' viewBox='0 0 1000 100' xmlns='http://www.w3.org/2000/svg'> <path class='fancy-shape1 footer-fancy-shape-fill' d='M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z' opacity='0.33'/> <path class='fancy-shape2 footer-fancy-shape-fill' d='M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z' opacity='0.66'/> <path class='fancy-shape3 footer-fancy-shape-fill' d='M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z'/> </svg> </section> <div id='bf-fancy-icon'> <div class='footer-shape footer-fancy-logo' data-negative='false'> </div> </div> </div>



و نقوم بالحفظ



hala teck
الكاتب : MAHER

مدون عربي صاحب مدونة هلا تك يهتم بكل جديد بعالم التقنية و المعلومات

Post a Comment