مرحبا بكم، لقد عدنا إليكم بعد غياب طويل ولاكن للأسف غيابنا سيستمر مرة اخرى لعدم توفر الوقت والإمكانيات، ولاكن اليوم قدمنا لكم موضوعا جديدا سنتطرق فيه على طريقة إضافة قائمة سفلية لمدونة blogger .
اعتمدنا في تصميم هذه الأداة على لغات البرمجة HTML و CSS و JS لجعلها متناسقة ومتجاوبة، لقد قمت سابقا بتصميم قائمة سفلية بسيطة يمكنك الإطلاع عليها من هنا .
والإختلاف الموجود بين هذه القائمة والسابقة هو التحريك والألوان، فهذه القائمة تتميز بشكلها الأنيق وتأثير الضغط والألوان المتغيرة بالتأكيد سثثير اهتمامك.
طريقة إضافة قائمة سفلية متحركة:
تتيح القائمة للزائرين البحث عن المحتوى الدقيق الذي يبحثون عنه من خلال الانتقال إلى فئات وأدوات محددة في موقعك. ومع ذلك ، فقد تغيرت قوائم اليوم إلى قائمة سريعة الاستجابة توفر مرونة لمستخدمي الأجهزة المحمولة للتنقل بسهولة. إذا كنت تتطلع إلى إضافة قائمة سريعة الاستجابة إلى مدونة بلوجر الخاصة بك ، فأنت محظوظ لأنك في المكان الصحيح فقط تابع الشرح لتستطيع إضافتها بدون أي مشاكل.
اولا : توجه لبلوجر بعدها انتقل للمظهر وقم بتحرير html لقالبك.
ثانيا : ابحث عن الوسم </b:skin> وضع كود CSS التالي فوقه مباشرة :
html {box-sizing: border-box;
--bgColorMenu : #1d1d27;
--duration: .7s;}
.menu{margin: 0;display: flex;width: 100%;font-size: 1.5em;padding: 0 2.85em;position: fixed;align-items: center;justify-content: center;background-color: var(--bgColorMenu); }
.menu__item{all: unset;flex-grow: 1;z-index: 100;display: flex;cursor: pointer;position: relative;border-radius: 50%;align-items: center;will-change: transform;justify-content: center;padding: 0.55em 0 0.85em;transition: transform var(--timeOut , var(--duration));}
.menu__item::before{content: "";z-index: -1;width: 4.2em;height: 4.2em;border-radius: 50%;position: absolute;transform: scale(0);transition: background-color var(--duration), transform var(--duration);}
.menu__item.active {transform: translate3d(0, -.8em , 0);}
.menu__item.active::before{transform: scale(1);background-color: var(--bgColorItem);}
.icon{width: 2.6em;height: 2.6em;stroke: white;fill: transparent;stroke-width: 1pt;stroke-miterlimit: 10;stroke-linecap: round;stroke-linejoin: round;stroke-dasharray: 400;}
.menu__item.active .icon {animation: strok 1.5s reverse;}
@keyframes strok {100% {stroke-dashoffset: 400;}}
.menu__border{left: 0;bottom: 100%;width: 10.9em;height: 2.4em;position: absolute;clip-path: url(#menu);will-change: transform;background-color: var(--bgColorMenu);transition: transform var(--timeOut , var(--duration));}
.svg-container {width: 0;height: 0;}
@media screen and (max-width: 500em) {
.menu{font-size: .8em; }}
.menu{display:flex;bottom:0}
ثالتا : ابحث عن الوسم </body> وضع كود JS التالي فوقه :
<script>
/*<![CDATA[*/
// Designed by: TI9NIYA ARABIC https://www.tikniya.xyz
"use strict";
const body = document.body;
const bgColorsBody = [""];
const menu = body.querySelector(".menu");
const menuItems = menu.querySelectorAll(".menu__item");
const menuBorder = menu.querySelector(".menu__border");
let activeItem = menu.querySelector(".active");
function clickItem(item, index) {
menu.style.removeProperty("--timeOut");
if (activeItem == item) return;
if (activeItem) {
activeItem.classList.remove("active");}
item.classList.add("active");
body.style.backgroundColor = bgColorsBody[index];
activeItem = item;
offsetMenuBorder(activeItem, menuBorder);}
function offsetMenuBorder(element, menuBorder) {
const offsetActiveItem = element.getBoundingClientRect();
const left = Math.floor(offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth - offsetActiveItem.width) / 2) + "px";
menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;}
offsetMenuBorder(activeItem, menuBorder);
menuItems.forEach((item, index) => {
item.addEventListener("click", () => clickItem(item, index));})
window.addEventListener("resize", () => {
offsetMenuBorder(activeItem, menuBorder);
menu.style.setProperty("--timeOut", "none");
});
/*]]>*/
</script>رابعا : والآن الخطوة الأخيرة قم بوضع كود القائمة السفلية فوق </body> مع تعديل الروابط حسب القالب الذي تستعمله.
<!--[ Stats ]-->
<menu class="menu">
<!--[ menu button ]-->
<button class="menu__item active" style="--bgColorItem: #ff8c00;" >
<label class='link' for='#'>
<svg class="icon" viewBox="0 0 24 24">
<path d="M3.8,6.6h16.4"/><path d="M20.2,12.1H3.8"/><path d="M3.8,17.5h16.4"/></svg>
</label></button>
<!--[ search button ]-->
<button class="menu__item" style="--bgColorItem: #f54888;">
<a class='link' href='#' itemprop='url' >
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</a></button>
<!--[ home button ]-->
<button class="menu__item" style="--bgColorItem: #ff0000;" >
<a aria-label='Home' class='link' expr:href='data:blog.homepageUrl.canonical' expr:title='data:messages.home' role='button'>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</a> </button>
<!--[ dark button ]-->
<button class="menu__item" style="--bgColorItem: #e0b115;" >
<a class='link' href='#' itemprop='url' >
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg> </a>
</button>
<!--[ to top button ]-->
<button class="menu__item" style="--bgColorItem:#65ddb7;">
<div onclick='window.scrollTo({top: 0});'>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
</div></button>
<div class="menu__border"></div>
<!--[end button ]-->
</menu>
<div class="svg-container">
<svg viewBox="0 0 202.9 45.5" ><clipPath id="menu" clipPathUnits="objectBoundingBox" transform="scale(0.0049285362247413 0.021978021978022)"><path d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7
c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5
c9.2,3.6,17.6,4.2,23.3,4H6.7z"/></clipPath></svg>
</div>قمت بوضع سكربت تلقائي على زر الصعود للأعلى لكي يعمل وأيضا زر الصفحة الرئيسية لذلك لا داعي لتعديلها.
كل ماعليك تعديله هو زر القائمة الجانبية والوضع المظلم وزر البحث يمكنك تعديلها او حذفها او تغييرها القرار يعود لك.
ان كنت تريد تغيير الأيقونات فأنصحك بالتوجه لموقع أيوقونات svg من هنا
ان كنت تريد تعديل الألوان انتقل لصفحة اكواد الألوان.
في حالة استعمالك إحدى قوالب 1.4 median ui أو median ui star و medain ui pro يمكنك استعمال هذا الكود الأخير لأني قمت بتخصيصه حسب القالب:
<!--[ Stats ]-->
<menu class="menu">
<!--[ menu button ]-->
<button class="menu__item active" style="--bgColorItem: #ff8c00;" >
<label class='link' for='offnav-menu'>
<svg class="icon" viewBox="0 0 24 24">
<path d="M3.8,6.6h16.4"/>
<path d="M20.2,12.1H3.8"/>
<path d="M3.8,17.5h16.4"/>
</svg></label>
</button>
<!--[ search button ]-->
<button class="menu__item" style="--bgColorItem: #f54888;">
<label class='link' for='search-input'>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
</label>
</button>
<!--[ home button ]-->
<button class="menu__item" style="--bgColorItem: #ff0000;" >
<a aria-label='Home' class='link' expr:href='data:blog.homepageUrl.canonical' expr:title='data:messages.home' role='button'>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</a>
</button>
<!--[ dark button ]-->
<button class="menu__item" style="--bgColorItem: #e0b115;" >
<div class='link' onclick='darkMode()'>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</div>
</button>
<!--[ to top button ]-->
<button class="menu__item" style="--bgColorItem:#65ddb7;">
<div onclick='window.scrollTo({top: 0});'>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
</div>
</button>
<div class="menu__border"></div>
</menu>
<!--[end button ]-->
<div class="svg-container">
<svg viewBox="0 0 202.9 45.5" >
<clipPath id="menu" clipPathUnits="objectBoundingBox" transform="scale(0.0049285362247413 0.021978021978022)">
<path d="M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7
c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5
c9.2,3.6,17.6,4.2,23.3,4H6.7z"/>
</clipPath>
</svg>
</div>
لا داعي لتعديل الروابط في هذا الكود لأنه مخصص مسبقا شرط أن يكون قالب موقعك هو احدى القوالب المذكورة أعلاه
حسنا يبدو أننا وصلنا لنهاية الشرح اتمنى ان يكون شرحي واضحا، وفي حالة واجهتك أي صعوبة في تطبيق الخطوات أو تعديل الأكواد يمكنك طرح مشكلتك في التعليقات او ارسالها عبر نموذج الإتصال، وشكرا لكم على دعمكم المستمر.
