هذا القالب حصري بمدونة اوما ثك - Aoma Tech تنزيل القالب
الصفحة الرئيسية
المشاركات

كيفية إضافة تذييل مخصص في واجهة المستخدم الوسيطة

    لا يحتوي Median UI على قسم تذييل إذا كنت ترغب في جعله أنيقًا ، فيمكنك إضافة تذييل مخصص في هذا القالب ، فهو متاح في العديد من الإصدارات. إذا كنت ترغب في إضافة تذييل مخصص في Median UI ، فما عليك سوى الاستمرار في قراءة المقالة بعناية للحصول على تجربة أفضل.

ما هو Median UI؟

واجهة المستخدم الوسيطة تخطو في قالب Blogger الحديث. يحتوي على ثلاثة أعمدة تتميز بالعمود الأول الذي يحتوي على شريط التنقل والثاني مخصص لقسم المنشور والأخير مخصص للتسميات والملف الشخصي. الموفر الأصلي لهذا النموذج هو theme.jagodesain.com.

ميزات واجهة المستخدم الوسيطة

خاصية التحميل السريع

يتمتع هذا القالب بسرعة أفضل من قوالب المدونات الأخرى. السرعة في وضع الهاتف المحمول ، ما بين 80 إلى 90 سرعة تحميل في رؤى سرعة Google وأكثر من 95 في وضع سطح المكتب. إذا كنت تريد التحقق من السرعة ، فيمكنك التحقق من Google Speed ​​Insights أو GTmetris واحدة من هذه التي يمكنك استخدامها لاختبار السرعة.

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

العلامات الوصفية لـ SEO المثبتة مسبقًا والتي تساعد في إظهار محتوى سهل الاستخدام على موقعك. يتم تثبيت جميع المحتويات الوصفية الأخرى لترميز المخطط مثل المميز والعنوان وما إلى ذلك.

قائمة المحتويات

تم تثبيت جدول المحتويات مسبقًا في هذا النموذج ولا داعي لتثبيت البرنامج النصي لجدول المحتويات (TOC) في هذا القالب. إذا كنت تريد استخدام جدول المحتويات في هذا القالب ، فما عليك سوى استخدام عنوان القياس والعنوان والعناوين الفرعية.

ميزة الوضع الداكن

يحتوي على ميزة الوضع المظلم عند النقر فوق رمز القمر ثم يتغير إلى واجهة مستخدم متوسطة ذات مظهر داكن ويتم تخصيص جميع النصوص والصور وكل شيء تلقائيًا في السمة الداكنة.

أنظر أيضا :

شريط التنقل الجانبي الأنيق

تتوفر هذه الميزة بشكل أساسي في سمات أخرى ولكنها عبارة عن شريط Navbar أنيق ولصق وتجعل القالب أكثر جمالًا. يكون مفتوحًا دائمًا في وضع سطح المكتب ويحتوي على رمز في الزاوية اليسرى العليا لإغلاق وفتح شريط التنقل هذا. إذا كنت ترغب في تخصيص هذا الشريط ، فمن السهل جدًا عليك إنشاء صفحاتك الخاصة والقائمة المنسدلة. يمكنك أيضًا تغيير الرموز وفقًا لاحتياجاتك. 

أداة شريط التمرير الوسيط لواجهة المستخدم

هذه الميزة غير متوفرة في القوالب الأخرى ، هذه ميزة مخصصة في واجهة المستخدم المتوسطة. تحتوي هذه الميزة على المنشورات المتعلقة بالمقال على موقعك. إذا لم يظهر على موقعك ، فانتقل إلى قسم التخطيط وقم بتخصيصه. 

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

محمل محتوى Ajax

بشكل عام ، لا تتوفر هذه الميزة في قوالب المدونات الأخرى حيث يتم إعادة تحميل منشور المدونة عند النقر فوق الصفحة التالية. ولكن في نموذج Median UI ، يتم تحميل الصفحات تلقائيًا لأن هذا القالب يحتوي على برنامج نصي محمل محتوى Ajax مثبت مسبقًا.

هذا يعني أن صفحة الويب الخاصة بك لا يتم تحميلها ولكن المحتوى يظهر تلقائيًا على موقعك. نص Ajax يطلب إلى الخادم دون تحميل أي صفحات ويب سيظهر المحتوى تلقائيًا.

هذه ميزة فريدة لكن المواقع الأخرى لا تظهر مربع مشاركة الوسائط الاجتماعية PopUp. ينشئ المدونون الآخرون مربع مشاركة الوسائط الاجتماعية PopUp باستخدام مواقع ويب أخرى تابعة لجهات خارجية. في قالب واجهة مستخدم الوسائط ، تحصل على مربع زر مشاركة منبثق حديث مثبت مسبقًا به (Pinterest و Instagram و Facebook وما إلى ذلك). من السهل مشاركتها مع أصدقائك على منصات التواصل الاجتماعي.

صديق AdSense

هذا القالب هو نموذج مدون صديق Adsence. يحتوي هذا النموذج على أقسام Adsense مثل الإضافة السفلية والإضافة العلوية وأقسام الإضافة الأخرى. 

الخطوة 1: انتقل إلى تسجيل الدخول إلى blogger باستخدام حسابك

الخطوة 2: ثم انتقل إلى قسم السمة وانقر على تحرير HTML

الخطوة 3 : البحث عن Css المعطى بشكل عام هذا الرمز متاح في السطر رقم 834 أو 835


        
المغلق

        

            
        

     
/* Footer */
footer{margin-left:var(--nav-width); padding:0 25px; transition:var(--transition-1); font-size:90%} footer .creditInner{display:flex;align-items:baseline;justify-content:space-between; padding:20px 0} footer .creditInner p{margin:0;padding-right:20px;overflow:hidden;white-space:nowrap} footer .creditInner .creator{opacity:0} footer .toTop{display:flex;align-items:center; white-space:nowrap} footer .toTop:before{content:'To top'; opacity:.7} footer .toTop svg{width:20px;height:20px;margin-left:5px}
Step4: استبدل بـ CSS الجديد المحدد

        
المغلق

        

            
        

     
/* Footer */
footer{margin-left:var(--nav-width); padding:0 25px; transition:var(--transition-1); font-size:90%} footer .creditInner{display:flex;align-items:baseline;justify-content:space-between; padding:20px 0} footer .creditInner p{margin:0;padding-right:20px;overflow:hidden;white-space:nowrap} footer .creditInner .creator{opacity:0} footer .toTop{display:flex;align-items:center; white-space:nowrap} footer .toTop:before{content:'To top'; opacity:.7} footer .toTop svg{width:20px;height:20px;margin-left:5px}
footer .widget ul{list-style:none;margin:0;padding:0}
footer .LinkList h3{font-size:16px}
footer a{
    text-decoration: none;
}
footer{background-color:transparent;padding-top:2rem}
footer .toTop-Wrap{border-bottom:1px solid rgba(0,0,0,.1)}
footer .toTop{display:flex;align-items:center;opacity:.6;padding:20px 0;width:120px}
footer .footerContent{display:flex;flex-wrap:wrap;padding:30px 0 20px}
footer .footerContent > *:first-child{width:40%;margin-right:auto}
footer .footerContent > *{width:15%}
footer .footerContent .title{color:inherit;margin-bottom:12px}
footer .footerContent .widget:not(:last-child){margin-bottom:25px}
footer .LinkList a{display:inline-flex;align-items:center;color:inherit;line-height:26px}
footer .made{padding-right:40px;padding-top:10px}
footer .madeLogo div{font-size:1.5rem;font-weight:700;font-family:Noto Sans;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer .madeLogo div span{font-size:11px;font-weight:400;font-family:Noto Sans;opacity:.6}
footer .widget ul{list-style:none;margin:0;padding:0}
@media screen and (max-width:600px){
footer{font-size:12px}
footer .footerContent .title{font-size:13px}
footer .footerContent > *{width:33.333%}
footer .footerContent > *:first-child{display:none}
}
الخطوة 5: ابحث عن كود HTML المعطى

        
لغة البرمجة

        

            
        

     
<!--[ Footer section ]-->
        <footer class='sectionInner'>            
          <!--[ Credit ]-->
          <div class='creditInner'>
            <p>&#169; <span id='getYear'><script>/*<![CDATA[*/ var d = new Date(); var n = d.getFullYear(); document.getElementById('getYear').innerHTML = n; /*]]>*/</script></span> &#8231; <a expr:href='data:blog.homepageUrl.canonical'><data:blog.title/></a>. All rights reserved. <span class='creator'>Redesigned by <a href='https://astechworlds.xyz'>ASTechworld</a></span></p>
              
            <!--[ Back top button ]-->
            <div class='toTop' onclick='window.scrollTo({top: 0});'><b:include name='arow-up-icon'/></div>
          </div>
        </footer>
Step6: واستبداله بكود HTML المحدد

        
لغة البرمجة

        

            
        

     
<!--[ Footer section ]-->
        <footer class='mainSection footbar'>
<!--[ Back top button ]-->
<div class='toTop-Wrap'>
<div class='toTop' onclick='window.scrollTo({top: 0});'>
<svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><polyline points='18 15 12 9 6 15'/></svg>
</div></div>
<!--[ Footer content ]-->
<div class='footerContent'>
<div class='section'>
<div class='widget'>
<div class='made'>
<div class='madeTitle'>Created by</div>
<div class='madeLogo'>
<div>ASTechWorld <span>Blog</span></div>
</div>
</div>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Product</h3>
<ul>
<li>
<a href='https://www.astechworlds.xyz/'>
<span>Website</span>
</a>
</li>
<li>
<a href='https://www.astechworlds.xyz/'>
<span>Services</span>
</a>
</li>
</ul>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Support</h3>
<ul>
<li>
<a href='/p/sitemap.html'>
<span>Sitemap</span>
</a>
</li>
<li>
<a href='/p/contact-us.html'>
<span>Contact Us</span>
</a>
</li>
</ul>
</div>
</div>
<div class='section'>
<div class='widget LinkList'>
<h3 class='title'>Usage</h3>
<ul>
<li>
<a href='/p/privacy.html'>
<span>Privacy Policy</span>
</a>
</li>
<li>
<a href='/p/disclaimer.html'>
<span>Disclaimer</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--[ Credit ]-->
<div class='credit'>
<p>Copyright @ 2021 ASTechWorld. All rights reserved</p>
</div>
</footer>

إذا كنت تريد تذييلًا أنيقًا ، فاستبدله بالرموز المحددة. لكنه ينطبق فقط على Lightmode.

Step7: استبدل CSS بـ CSS المعطى للنمط


        
المغلق

        

            
        

     
/* Footer */
footer{margin-left:var(--nav-width); padding:0 25px; transition:var(--transition-1); font-size:90%;
grid-template-columns: auto;} 
footer .creditInner{display:flex;align-items:baseline;justify-content:space-between; padding:20px 0} 
footer .creditInner p{margin:0;padding-right:20px;overflow:hidden;white-space:nowrap} 
footer .creditInner .creator{opacity:0} 
footer .toTop{display:flex;align-items:center; white-space:nowrap}
footer .toTop:before{content:'To top'; opacity:.7} 
footer .toTop svg
{
    width:20px;
    height:20px;
    margin-left:5px;
}
footer a{
    text-decoration: none;

}
footer div{
    border-radius: 10px;

box-shadow:  20px 20px 60px #d5d5d5,
             -20px -20px 60px #ffffff;
}

footer .widget ul{list-style:none;margin:0;padding:0}
footer .LinkList h3{font-size:16px}
footer{background-color:transparent;padding-top:2rem}
footer .toTop-Wrap{border-bottom:1px solid rgba(0,0,0,.3)}
footer .toTop{display:flex;align-items:center;opacity:.6;padding:20px 0;width:120px}
footer .footerContent{display:flex;flex-wrap:wrap;padding:30px 0 20px}
footer .footerContent > *:first-child{width:40%;margin-right:auto}
footer .footerContent > *{width:15%}
footer .footerContent .title{color:inherit;margin-bottom:12px}
footer .footerContent .widget:not(:last-child){margin-bottom:25px}
footer .LinkList a{display:inline-flex;align-items:center;color:inherit;line-height:26px}
footer .made{padding-right:40px;padding-top:10px}
footer .madeLogo div{font-size:1.1rem;font-weight:700;font-family:Noto Sans;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer .madeLogo div span{font-size:11px;font-weight:400;font-family:Noto Sans;opacity:.6}
footer .widget ul{list-style:none;margin:0;padding:0}
@media screen and (max-width:600px){
footer{font-size:12px}
footer .footerContent .title{font-size:13px}
footer .footerContent > *{width:33.333%}
footer .footerContent > *:first-child{display:none}
}
المرجعي:

إرسال تعليق

جميع الحقوق محفوظة © 2022