🎓 كورس تصميم قالب بلوجر 2026 | الدرس الأول | تصميم القائمة العلوية (Navbar)

تُعد القائمة العلوية (Navbar) من أهم عناصر أي قالب بلوجر، لأنها المسؤولة عن:

تنظيم الصفحات والأقسام
تسهيل التنقل داخل الموقع
تحسين تجربة المستخدم
رفع ثقة الزائر بالموقع

في هذا الدرس سنشرح فكرة تصميم القائمة العلوية المستخدمة في القالب، بينما تم شرح الأكواد بالكامل داخل الفيديو خطوة بخطوة.

🔹 ما هي وظيفة الـ Navbar في قالب بلوجر؟

القائمة العلوية تساعد الزائر على:

الوصول السريع للأقسام المهمة
التنقل بين الصفحات بسهولة
فهم هيكل الموقع من أول زيارة

كما أنها عنصر مهم في:

تحسين SEO
تقليل معدل الارتداد
زيادة مدة بقاء الزائر

🔧 طريقة إنشاء القائمة العلوية في بلوجر

في هذا الدرس تم الاعتماد على:

أداة الروابط (Links) من صفحة التنسيق (Layout) داخل بلوجر
بدون إضافات خارجية
بدون تعقيد

حيث يتم:

إضافة روابط الأقسام
ترتيبها داخل القائمة
التحكم في شكل عرضها من خلال القالب

📌 ملاحظة:
جميع الأكواد المستخدمة في تصميم القائمة العلوية تم شرحها بالتفصيل داخل الفيديو المرفق مع هذا الدرس.

🎨 مميزات القائمة العلوية في هذا القالب

القائمة العلوية التي تم تصميمها في الكورس تتميز بـ:

تصميم عصري وبسيط
متجاوبة مع جميع الشاشات
حركات انتقال ناعمة
سهولة التعديل من لوحة بلوجر
متوافقة مع جوجل أدسنس

📱 قائمة متجاوبة مع جميع الأجهزة

تم تصميم الـ Navbar بحيث:

تعمل بكفاءة على الموبايل
تظهر بشكل منظم على التابلت
تكون واضحة وسهلة الاستخدام على أجهزة الكمبيوتر

وذلك لضمان أفضل تجربة مستخدم ممكنة.

✅ توافق كامل مع جوجل أدسنس

تم مراعاة:

عدم إزعاج المستخدم
عدم وضع الإعلانات داخل القائمة
الالتزام بسياسات Google AdSense

مما يجعل القالب آمن للاستخدام الربحي بدون مشاكل مستقبلية.

🎥 شاهد الشرح الكامل بالفيديو

للحصول على الشرح العملي:

كيفية إضافة الروابط
كيفية التحكم في القوائم
طريقة ربط التصميم بالبلوجر

📺 تابع فيديو الدرس الأول من الكورس حيث ستجد كل التفاصيل والأكواد.

الاكواد المستخدمة:

1- كود تنظيف القالب قبل بدا تنفيذ او كتابة اي اكواد
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section id='main'/> </body> </html>

2- قالب خام لكتابة الاكواد بداخله
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:layoutsVersion='3' lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta charset='UTF-8'/> <meta content='width=device-width, initial-scale=1.0' name='viewport'/> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>  <title><b:if cond='data:view.isHomepage'><data:blog.title/><b:elseif cond='data:blog.pageType == "error_page"'/>خطأ 404 | <data:blog.title/><b:elseif cond='data:view.isSingleItem'/><data:blog.pageName/><b:elseif cond='data:blog.pageName == ""'/><data:blog.title/><b:else/><data:blog.pageName/> | <data:blog.title/></b:if></title> <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/> <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>  <meta content='IE=edge' http-equiv='X-UA-Compatible'/> <meta content='blogger' name='generator'/> <meta content='width=device-width, initial-scale=1.0' name='viewport'/> <meta content='IE=edge' http-equiv='X-UA-Compatible'/> <meta expr:content='data:blog.locale' http-equiv='content-language'/> <link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.canonicalUrl' itemprop='url' rel='canonical'/> <meta expr:content='data:view.description.escaped' name='description'/> <link expr:href='data:blog.postImageUrl' rel='image_src'/> <b:eval expr='data:blog.openIdOpTag'/> <b:if cond='data:blog.adultContent'><meta content='adult' name='rating'/></b:if> <meta expr:content='data:skin.vars.keycolor' name='theme-color'/> <meta expr:content='data:skin.vars.keycolor' name='msapplication-navbutton-color'/> <b:eval expr='data:blog.feedLinks'/>  <b:switch var='data:blog.locale'><b:case value='en-GB'/><meta content='en_GB' property='og:locale'/><b:case value='da'/><meta content='da_DK' property='og:locale'/><b:case value='pt-PT'/><meta content='pt_PT' property='og:locale'/><b:case value='he'/><meta content='he_IL' property='og:locale'/><b:default/><meta expr:content='data:blog.locale + "_" + data:blog.locale' property='og:locale'/></b:switch> <meta expr:content='data:blog.title' property='og:site_name'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <b:if cond='data:view.isMultipleItems'> <b:if cond='data:view.isHomepage'><meta expr:content='data:blog.title' property='og:title'/> <b:else/><meta expr:content='data:blog.pageName + " | " + data:blog.title' property='og:title'/></b:if> <b:else/><meta expr:content='data:blog.pageName' property='og:title'/> </b:if> <meta expr:content='data:view.description.escaped' property='og:description'/> <b:if cond='data:view.isMultipleItems'> <meta content='website' property='og:type'/> <meta content='' property='og:image'/> <b:else/> <meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/> <meta content='article' property='og:type'/> <meta content='' property='article:publisher'/> <meta content='' property='article:author'/> </b:if> <meta content='' property='fb:app_id'/> <meta content='' property='fb:admins'/>  <b:if cond='data:view.isMultipleItems'> <b:if cond='data:view.isHomepage'><meta expr:content='data:blog.title' name='twitter:title'/> <b:else/><meta expr:content='data:blog.pageName + " | " + data:blog.title' name='twitter:title'/></b:if> <b:else/><meta expr:content='data:blog.pageName' name='twitter:title'/> </b:if> <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/> <meta content='summary_large_image' name='twitter:card'/> <meta expr:content='data:view.description.escaped' name='twitter:description'/> <b:if cond='data:view.isMultipleItems'> <meta content=''/> <b:else/> <meta expr:content='data:blog.postImageUrl' name='twitter:image'/> </b:if> <meta content='' name='twitter:site'/> <meta content='' name='twitter:creator'/>  <link href='//www.blogger.com' rel='dns-prefetch'/><link href='//1.bp.blogspot.com' rel='dns-prefetch'/><link href='//2.bp.blogspot.com' rel='dns-prefetch'/><link href='//3.bp.blogspot.com' rel='dns-prefetch'/><link href='//4.bp.blogspot.com' rel='dns-prefetch'/><link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/><link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/> <b:skin><![CDATA[ /* =========================================================== # Template : Allito App # Version : 3.5 # Updated : 1 March 2026 # Developer : Alaa Makkawi # URL : https://allitoappmarket.blogspot.com/ * ============================================================ / / ==================== * CSS RESET * ==================== / {margin:0;padding:0;box-sizing:border-box;} body{font-family:system-ui;} html{overflow-x:hidden;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} img{max-width:100%;} a{color:inherit;text-decoration:none;} .section{margin:0;padding:0;} .widget{margin:0;padding:0;line-height:unset;} .widget li, li{margin:0;padding:0;text-indent:0;} ]]></b:skin> <b:template-skin> <![CDATA[  <footer> <b:section class='footer' id='footer' showaddelement='yes'/> </footer> </body> </html>

3- سكربت البحث والقائمة العلوية
اولا: قبل وسم </head> نضع الكود هذا
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
ثانيا: نضع هذا الكود اخر اكواد الـ HTML
<form action='/search' id='search-box' target='_top'> <input name='q' placeholder='Search.....' type='search'/> <span class='close-btn' onclick='searchoff()'>×</span> </form>

ثالثا: سكربت البحث يضع هذا الكود في نهاية الاكواد قبل وسم </body>
<script> function menuon(){ document.getElementById("LinkList1").style.left = '0'; } function menuoff(){ document.getElementById("LinkList1").style.left = '-100%'; } function searchon(){ document.getElementById("search-box").style.right = '5px'; } function searchoff(){ document.getElementById("search-box").style.right = '-100%'; } </script> <script type='text/javascript'> //<![CDATA[ $("#dropmenu").each(function(){var e="<ul id='menu1'><li><ul id='sub-menu'>";$("#dropmenu li").each(function(){var t=$(this).text(),n=t.substr(0,1),r=t.substr(1);"_"==n?(n=$(this).find("a").attr("href"),e+='<li><a href="'+n+'">'+r+"</a></li>"):(n=$(this).find("a").attr("href"),e+='</ul></li><li><a href="'+n+'">'+t+"</a><ul id='sub-menu'>")});e+="</ul></li></ul>";$(this).html(e);$("#dropmenu ul").each(function(){var e=$(this);if(e.html().replace(/\s| /g,"").length==0)e.remove()});$("#dropmenu li").each(function(){var e=$(this);if(e.html().replace(/\s| /g,"").length==0)e.remove()})}); //]]> </script>

4- لون الخلفية الثابتة

:root { --bg:linear-gradient(45deg, hsl(352.1, 95.7%, 45.1%) 0%, hsla(352, 96%, 45%, 0) 70%), linear-gradient(135deg, hsl(252.9, 95.3%, 42%) 10%, hsla(253, 95%, 42%, 0) 80%), linear-gradient(225deg, hsl(179.1, 91.3%, 44.9%) 10%, hsla(179, 91%, 45%, 0) 80%), linear-gradient(315deg, hsl(119, 96%, 49%) 100%, hsla(119, 96%, 49%, 0) 70%); }

5- اكواد الـ CSS لتنسيق القائمة علي شاشة الموبايل

@media only screen and (max-width:600px){ #header .menu-icon{display:block;padding-left: 25px;color:#fff;} #header-section{display:block;} #header ul{display:block;padding:0;} #header h1{margin:0;} #LinkList1{width:70%;position:fixed;top:0;padding:1em;background: linear-gradient(45deg, hsl(352.1, 95.7%, 45.1%) 0%, hsla(352, 96%, 45%, 0) 70%), linear-gradient(135deg, hsl(252.9, 95.3%, 42%) 10%, hsla(253, 95%, 42%, 0) 80%), linear-gradient(225deg, hsl(179.1, 91.3%, 44.9%) 10%, hsla(179, 91%, 45%, 0) 80%), linear-gradient(315deg, hsl(119, 96%, 49%) 100%, hsla(119, 96%, 49%, 0) 70%);height:100%;transition: 0.5s;z-index:99;left:-100%;} .nav-head{display:block;padding:1em;} .nav-head .menu-close{font-size:50px;position:absolute;top:0;right:0;text-align:center;width:50px;color:#fff;} .nav-head h1{text-align:center;color:#fff;}} @media only screen and (max-width:750px){ #header .menu-icon{display:block;padding-left: 25px;color:#fff;} #header-section{display:block;} #header ul{display:block;padding:0;} #header h1{margin:0;} #LinkList1{width:70%;position:fixed;top:0;padding:1em;background: linear-gradient(45deg, hsl(352.1, 95.7%, 45.1%) 0%, hsla(352, 96%, 45%, 0) 70%), linear-gradient(135deg, hsl(252.9, 95.3%, 42%) 10%, hsla(253, 95%, 42%, 0) 80%), linear-gradient(225deg, hsl(179.1, 91.3%, 44.9%) 10%, hsla(179, 91%, 45%, 0) 80%), linear-gradient(315deg, hsl(119, 96%, 49%) 100%, hsla(119, 96%, 49%, 0) 70%);height:100%;transition: 0.8s;z-index:99;left:-100%;} .nav-head{display:block;padding:1em;} .nav-head .menu-close{font-size:50px;position:absolute;top:0;right:0;text-align:center;width:50px;color:#fff;} .nav-head h1{text-align:center;color:#fff;} #header .fa-search{margin:0;cursor:pointer;margin-left:25px;}} @media screen and (max-width: 880px){ #header .menu-icon{display:block;padding-left: 25px;color:#fff;} #header-section{display:block;} #header ul{display:block;padding:0;} #header h1{margin:0;} #LinkList1{width:70%;position:fixed;top:0;padding:1em;background: linear-gradient(45deg, hsl(352.1, 95.7%, 45.1%) 0%, hsla(352, 96%, 45%, 0) 70%), linear-gradient(135deg, hsl(252.9, 95.3%, 42%) 10%, hsla(253, 95%, 42%, 0) 80%), linear-gradient(225deg, hsl(179.1, 91.3%, 44.9%) 10%, hsla(179, 91%, 45%, 0) 80%), linear-gradient(315deg, hsl(119, 96%, 49%) 100%, hsla(119, 96%, 49%, 0) 70%);height:100%;transition: 0.8s;z-index:99;left:-100%;} .nav-head{display:block;padding:1em;} .nav-head .menu-close{font-size:50px;position:absolute;top:0;right:0;text-align:center;width:50px;color:#fff;} .nav-head h1{text-align:center;color:#fff;}} #LinkList1 h2{display:none;}

🔑 الخلاصة

القائمة العلوية عنصر أساسي في أي قالب احترافي،
ومن خلال هذا الدرس ستتعلم:

الفكرة العامة للتصميم
طريقة التحكم فيها من بلوجر
تجهيزها لتكون متوافقة مع أدسنس

أما التطبيق العملي والأكواد، فهي مشروحة بالكامل داخل الفيديو.

نتمى ان يكون الدرس نال اعجابكم لي اي استفسار اكتب تعليق عن سؤالك.

Menu

Allito

الربح من الانترنت

تصميمات