اضافة قائمة منسدلة في النافبار dropdown

لاضافة قائمة منسدلة نتوجه الى لوحة تحكم بلوجر

علامة التبويب المظهر

في قسم مظهري نضغط على السهم المتجه للاسفل  ثم تعديل html 

في صفحة تحرير القالب داخل كود النافبار نبحث عن الكود التالي

</ul>

نضيف فوقه الكود الخاص بالقائمة النسدلة

القائمة المنسدلة

<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">قائمة <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li>

لتعديل الروابط داخل القائمة المنسدلة

غير كلمة Link باسم القسم

غير علامة # برابط القسم 

اقرا المزيد »

تصميم صفحة هبوط تصميم النافبار اضافة خاصية scrolling باستخدام jQuery

 

اضافة خاصية scrolling عمل ارتباط بين الروابط واقسام الصفحة

نتوجه الى نهاية القالب قبل اغلاق </body> نضيف اكواد الجيكوري المسؤلة عن خاصية scrolling وعمل الروابط 

الشرح بالفيديو

اكواد الجيكوري

jQuery

<script type='text/javascript'>//<![CDATA[ (function(factory){if(typeof define==="function"&&define.amd){define(["jquery"],function($){return factory($)})}else if(typeof module==="object"&&typeof module.exports==="object"){exports=factory(require("jquery"))}else{factory(jQuery)}})(function($){$.easing.jswing=$.easing.swing;var pow=Math.pow,sqrt=Math.sqrt,sin=Math.sin,cos=Math.cos,PI=Math.PI,c1=1.70158,c2=c1*1.525,c3=c1+1,c4=2*PI/3,c5=2*PI/4.5;function bounceOut(x){var n1=7.5625,d1=2.75;if(x<1/d1){return n1*x*x}else if(x<2/d1){return n1*(x-=1.5/d1)*x+.75}else if(x<2.5/d1){return n1*(x-=2.25/d1)*x+.9375}else{return n1*(x-=2.625/d1)*x+.984375}}$.extend($.easing,{def:"easeOutQuad",swing:function(x){return $.easing[$.easing.def](x)},easeInQuad:function(x){return x*x},easeOutQuad:function(x){return 1-(1-x)*(1-x)},easeInOutQuad:function(x){return x<.5?2*x*x:1-pow(-2*x+2,2)/2},easeInCubic:function(x){return x*x*x},easeOutCubic:function(x){return 1-pow(1-x,3)},easeInOutCubic:function(x){return x<.5?4*x*x*x:1-pow(-2*x+2,3)/2},easeInQuart:function(x){return x*x*x*x},easeOutQuart:function(x){return 1-pow(1-x,4)},easeInOutQuart:function(x){return x<.5?8*x*x*x*x:1-pow(-2*x+2,4)/2},easeInQuint:function(x){return x*x*x*x*x},easeOutQuint:function(x){return 1-pow(1-x,5)},easeInOutQuint:function(x){return x<.5?16*x*x*x*x*x:1-pow(-2*x+2,5)/2},easeInSine:function(x){return 1-cos(x*PI/2)},easeOutSine:function(x){return sin(x*PI/2)},easeInOutSine:function(x){return-(cos(PI*x)-1)/2},easeInExpo:function(x){return x===0?0:pow(2,10*x-10)},easeOutExpo:function(x){return x===1?1:1-pow(2,-10*x)},easeInOutExpo:function(x){return x===0?0:x===1?1:x<.5?pow(2,20*x-10)/2:(2-pow(2,-20*x+10))/2},easeInCirc:function(x){return 1-sqrt(1-pow(x,2))},easeOutCirc:function(x){return sqrt(1-pow(x-1,2))},easeInOutCirc:function(x){return x<.5?(1-sqrt(1-pow(2*x,2)))/2:(sqrt(1-pow(-2*x+2,2))+1)/2},easeInElastic:function(x){return x===0?0:x===1?1:-pow(2,10*x-10)*sin((x*10-10.75)*c4)},easeOutElastic:function(x){return x===0?0:x===1?1:pow(2,-10*x)*sin((x*10-.75)*c4)+1},easeInOutElastic:function(x){return x===0?0:x===1?1:x<.5?-(pow(2,20*x-10)*sin((20*x-11.125)*c5))/2:pow(2,-20*x+10)*sin((20*x-11.125)*c5)/2+1},easeInBack:function(x){return c3*x*x*x-c1*x*x},easeOutBack:function(x){return 1+c3*pow(x-1,3)+c1*pow(x-1,2)},easeInOutBack:function(x){return x<.5?pow(2*x,2)*((c2+1)*2*x-c2)/2:(pow(2*x-2,2)*((c2+1)*(x*2-2)+c2)+2)/2},easeInBounce:function(x){return 1-bounceOut(1-x)},easeOutBounce:bounceOut,easeInOutBounce:function(x){return x<.5?(1-bounceOut(1-2*x))/2:(1+bounceOut(2*x-1))/2}})}); //]]></script> <script type='text/javascript'>//<![CDATA[ (function($) { "use strict"; // Start of use strict // Smooth scrolling using jQuery easing $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: (target.offset().top - 56) }, 1000, "easeInOutExpo"); return false; } } }); // Closes responsive menu when a scroll trigger link is clicked $('.js-scroll-trigger').click(function() { $('.navbar-collapse').collapse('hide'); }); // Activate scrollspy to add active class to navbar items on scroll $('body').scrollspy({ target: '#mainNav', offset: 56 }); })(jQuery); // End of use strict $(window).scroll(function() { if ($(".navbar").offset().top > 50) { $(".fixed-top").addClass("top-nav-collapse"); } else { $(".fixed-top").removeClass("top-nav-collapse"); } }); //]]></script>

سنقوم بالتعديل على بعض اكواد html داخل القالب

تعديل على body

نبحث عن كود <body> نستبدله بالكود التالي <body id='page-top'>

تعديل navbar

نبحث عن كود <nav class='navbar navbar-expand-lg navbar-light bg-light'> نستبدله بالكود التالي <nav class='navbar navbar-expand-lg navbar-light bg-light fixed-top' id='mainNav'>

تعديل الروابط

اضافة كلاس js-scroll-trigger  للروابط داخل النافبار

اضافة id كل قسم داخل link

اضافة خصائص css

css nav

.top-nav-collapse { padding: 0; background: #202020 !important; } .top-nav-collapse .nav-link:hover { color: #ffffff !important; } .navbar-light .navbar-nav .nav-link.active { color: #fff; background-color: #fc6661; border-radius: 50px; } .navbar { padding: 20px 0; -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; transition: background .5s ease-in-out,padding .5s ease-in-out; }

اضافة الفوتر

html footer

<!-- Footer --> <footer> <div class='container'> <div class='m-0 text-center text-white'> جميع الحقوق محفوظة © <a expr:href='data:blog.homepageUrl'> <strong> <data:blog.title/> </strong> </a> <script type='text/javascript'>document.write(new Date().getFullYear());</script> </div> </div> <!-- /.container --> </footer>

css footer

footer { background: #202020; padding: 50px 0; } footer a { color: #fc6661; }

تحميل قالب بلوجر صفحة هبوط مجاني من الرابط التالي

                                                               اضغط هنا للتنزيل

اقرا المزيد »

تصميم صفحة هبوط على بلوجر اضافة قسم اتصل بنا

 

طريقة تصميم صفحة هبوط بلوجر اضافة قسم اتصل بنا

بعد اضافة قسم الخدمات في الدرس السابق سنقوم الان باضافة كود html & css حتى نستطيع اضافة اداة اتصل بنا من خلال ادوات بلوجر من قسم التخطيط

• توجه الى لوحة تحكم بلوجر Blogger.
• علامة التبويب المظهر
• من قسم "مظهري" اضغط على السهم المتجه للاسفل ثم تعديل html
• بعد اغلاق قسم <section id='service'> المسؤول عن قسم الخدمات سنقوم باضافة قسم اتصل بنا

كود html لاضافة اداة اتصل بنا

html contact

<section id='contact'> <div class='container'> <div class='row'> <div class='contact'> <b:section id='widget-contact'/> </div> </div> </div> </section>

كود css لتنسيق قسم واداة اتصل بنا

html contact

#contact {padding: 150px 0;background: #fff;} #ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:auto;margin:5px auto 15px;padding:10px;background:#ffffff;border:1px solid #bbb;color:#777;border-radius:3px;} #ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0} #ContactForm1_contact-form-email-message{width:80%;height:170px;margin:5px auto;padding:10px;background:#ffffff;border:1px solid #bbb;color:#777;border-radius:3px;} #ContactForm1_contact-form-submit{display:block;height:35px;float:right;color:#FFF;padding:0 40px;margin:10px 0 5px;cursor:pointer;background-color:#fc6661;border:none!important;border-radius:50px;text-shadow:0 1px 0 #de5135} #ContactForm1_contact-form-submit:hover{opacity:.9} #ContactForm1_contact-form-submit:active{position:relative;top:2px;} #ContactForm1_contact-form-submit:focus{outline:0} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}

اقرا المزيد »

تصميم صفحة هبوط تقسيم الصفحة وكيفية اضافة قسم الخدمات

تصميم صفحة هبوط على منصة بلوجر طريقة تقسيم الصفحة

شرح تصميم صفحة هبوط على بلوجر تصميم صفحة متجاوبة تعمل على كافة انواع الاجهزة باستخدام احدث اصدار من اطار العمل بوتستراب

يتضمن الفيديو:

• شرح تقسيم الصفحة واضافة قسم الخدمات باستخدام html5
• تنسيق قسم خدماتنا باستخدام css3
• اضافة الادوات من قسم التخطيط والتعديل عليها

الاكواد المستخدمة بالفيديو

service html

<section id='service'> <div class='container'> <div class='row'> <div class='col-md-12 title'> <b:section id='widget-service-title'/> </div> <div class='col-md-4 sevice'> <b:section id='widget-service-r'/> </div> <div class='col-md-4 sevice'> <b:section id='widget-service-c'/> </div> <div class='col-md-4 sevice'> <b:section id='widget-service-l'/> </div> </div> </div> </section>

service css

section#service { padding: 150px 0; background: #f6f6f6; } #service i.fab.fa-blogger, i.fas.fa-laptop-code, i.fas.fa-code { color: #fc6762; font-size: 80px; margin-bottom: 35px; } .col-md-4.sevice { text-align: center; } #service h2 { margin-bottom: 20px; font-size: 27px; font-weight: bold; color: #000; } #service p { font-size: 18px; line-height: 33px; font-weight: 600; } .title h2 { text-align: center; margin-bottom: 30px; } .col-md-12.title { margin-bottom: 55px; } .col-md-12.title p{ text-align: center; }

اقرا المزيد »

انشاء قالب بلوجر صفحة هبوط تصميم قالب بلوجر صفحة هبوط

 

طريقة تصميم صفحة هبوط احترافية على بلوجر landing page blogger

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

خطوات إنشاء صفحة هبوط على بلوجر:

يمكنك إنشاء صفحة هبوط وإدارتها باستخدام Blogger.

إنشاء صفحة هبوط

1. سجّل الدخول إلى Blogger 🔗.
2. في الشريط الجانبي، اضغط على رمز السهم المتجّه للأسفل.
3. اضغط على مدونة جديدة.
4. أدخل اسما لصفحة الهبوط.
5. اضغط على التالي.
6. اختَر عنوانًا لصفحة الهبوط (عنوان URL).
7. اضغط على حفظ.

بعد الانتهاء من الخطوات السابقة سنقوم الان بتصميم القالب

تصميم صفحة هبوط على بلوجر

من الشريط الجانبي اضغط على علامة التبويب "المظهر"

من قسم "مظهري" اضغط على رمز السهم المتجّه للأسفل ثم تعديل HTML

من لوحة المفاتيح الكيبورد اضغط على متاح  Ctrl+A

سيتم تحديد كل الاكواد الموجودة داخل محرر HTML قم بحذفها من خلال الضغط على مفتاح Delete في لوحة المفاتيح الكيبورد سنقوم لان يتركيب قالب قالب بلوجر يتضمن اطار العمل بوتستراب

لماذا اخترنا بلوجر لعمل صفحة هبوط عليها؟

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

بعض المميزات لمنصة بلوجر:

1. أهم ما يميز منصة بلوجر إنها تابعة لشركة Google العملاقة "جوجل".
2. تُعَد منصة بلوجر الأسهل في التعامل فهي بسيطة للغاية.
3. بما إن بلوجر تابع لجوجل فالأرشفة سرعتها عالية مقارنة بغيرها.
4. إمكانية التعديل على مدونتك بسهولة.
5. الموقع محمي من الاختراقات بالطبع فأنت مع جوجل في أمانٍ تام.
6. لا تقلق من ناحية مساحة التخزين فهي غير محدودة.
7. توفر لك بلوجر احصائيات دقيقة عن زوار مدونتك.
8. يتيح بلوجر خاصية إدراج صور وفيديوهات للمحتوى.

بعض مميزات مكتبة Bootstrap بوتستراب:

1 - سهولة الاستخدام : حيث يمكن لأي شخص لديه معرفة بأساسيات HTML و CSS استخدامها.

2 - تصميم موقع متجاوب (Responsive) بشكل تلقائي :

بمعنى انه يمكن الموقع من العمل في مختلف مقاسات الشاشات ومختلف الأجهزة من الكمبيوتر الى الهاتف بشكل متناسق وجميل.

3 - التوافق مع جميع متصفحات الويب الحديثة.

4 - السرعة العالية : من مميزات مكتبة Bootstrap الهامة انها ذات اداء عالى وسرعة فائقة.

قم بنسخ الكود التالي ثم لصقه داخل محرر html ثم من الاعلى اضغط حفظ 

قالب بلوجر

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' expr:dir='data:blog.languageDirection' 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> <!-- Required meta tags --> <meta charset='utf-8'/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <title> <b:if cond='data:blog.pageType == "index"'> <data:blog.pageTitle/> <b:else/> <b:if cond='data:blog.pageType != "error_page"'> <data:blog.pageName/> | <data:blog.title/> <b:else/> Page Not Found | <data:blog.title/> </b:if> </b:if> </title> <!-- Bootstrap CSS --> <link href='https://cdn.rtlcss.com/bootstrap/v4.5.3/css/bootstrap.min.css' rel='stylesheet'/> <!-- fontawesome --> <link href='https://use.fontawesome.com/releases/v5.15.1/css/all.css' rel='stylesheet'/> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <script src='https://code.jquery.com/jquery-3.5.1.min.js'/> <script src='https://cdn.rtlcss.com/bootstrap/v4.5.3/js/bootstrap.bundle.min.js'/> <script src='https://cdn.rtlcss.com/bootstrap/v4.5.3/js/bootstrap.min.js'/> <b:section id='widget-footer'/> </body> </html>

بعد الانتهاء من هذه الخطوة نكون حصلنا على قالب بلوجر فارغ سنقوم الان بتصميم صفحة الهبوط وتقسيم القالب على الشكل التالي رابط معاينة صفحة هبوط اضغط هنا

تابع شرح انشاء صفحة هبوط بالفيديو

اشترك بالقائمة البريدة حتى يصلك كل جديد 

اقرا المزيد »