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

تصميم صفحات الهبوط (Landing Pages) قد يبدو خطوة معقدة في البداية، لكنه في الواقع نقطة الانطلاق المثالية لكل مبتدئ يرغب في فهم اساسيات تكويد قوالب بلوجر. الهدف من هذا الدليل التطبيقي هو اخذك في رحلة تعليمية مبسطة لتتعلم كيف تفكر كمطور ويب وكيف تقسم صفحتك بشكل منطقي ومنظم.

سنتعرف معا في هذا الشرح على كيفية تقسيم الصفحة الى قطاعات رئيسية (مثل شريط التصفح، قسم الخدمات، ونموذج الاتصال). ولتسهيل الامر عليك كمبتدئ، سنعتمد في هذا الدليل على اطار العمل الشهير Bootstrap، والذي سيوفر علينا كتابة الكثير من الاكواد ويضمن لنا توافق الصفحة مع جميع الشاشات (الهواتف والحواسيب) بكل سهولة.

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

تهيئة المدونة وتركيب اطار Bootstrap (القالب الخام)

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

1. انشاء مدونة جديدة

1. سجل الدخول الى حسابك في منصة Blogger.
2. في الشريط الجانبي الايمن، اضغط على رمز السهم المتجه للاسفل، ثم اختر مدونة جديدة.
3. ادخل اسما معبرا لصفحة الهبوط، ثم اضغط على التالي واختر عنوان URL مخصص لصفحتك، ثم اضغط حفظ.

2. تركيب قالب بلوجر الخام (Bootstrap)

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

1. من الشريط الجانبي في بلوجر، اذهب الى قسم المظهر.
2. بجوار زر "تخصيص"، اضغط على السهم المتجه للاسفل واختر تعديل HTML.
3. قم بتحديد جميع الاكواد الموجودة واحذفها بالكامل.
4. انسخ الكود التالي (والذي يتضمن استدعاء مكتبة بوتستراب وايقونات FontAwesome)، والصقه في المحرر، ثم اضغط على حفظ.

<?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>
   
    <b:section id='widget-footer'/>

    <!-- Bootstrap & jQuery JS -->
    <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'/>
  </body>
</html>

تصميم منطقة الهيدر وشريط التصفح (Navbar)

بعد ان قمنا بتجهيز القالب الخام، حان الوقت لنبدا في التكويد الفعلي. اول جزء يجب بناؤه في اي صفحة هبوط هو الواجهة العلوية التي تتضمن شريط التصفح (Navbar) ومنطقة الهيدر الترحيبية.

تابع الشرح المرئي في الفيديو التالي لتعرف اين نضع الاكواد تحديدا داخل القالب، وكيف نقوم باستخراجها من موقع بوتستراب الرسمي وتنسيقها.

تصميم قسم "معلومات عنا" (About Us)

بعد الانتهاء من الواجهة العلوية، ننتقل الى بناء القسم التعريفي. في اي صفحة هبوط احترافية، يجب ان تخبر الزائر بوضوح عن هويتك وماذا تقدم. في تصميمنا، هذا القسم عبارة عن بطاقة (Card) انيقة ذات خلفية بيضاء وظل خفيف يعطي احساسا بالعمق، وهي مقسمة بشكل متناسق الى جزاين: الاول يحتوي على صورة توضيحية، والثاني يضم نصوصا وقوائم تشرح فكرة الموقع.

في الفيديو التالي، ستتعلم كيفية استخدام نظام الشبكة (Grid System) الخاص باطار العمل Bootstrap لتقسيم هذا الجزء باحترافية، بحيث يظهر كعمودين متجاورين على شاشات الكمبيوتر، ويتحول تلقائيا الى عمود واحد مرتب على شاشات الهواتف الذكية لضمان تجربة مستخدم (UX) ممتازة.

تقسيم الصفحة واضافة قسم الخدمات (Services)

يعد قسم الخدمات القلب النابض لاي صفحة هبوط؛ فهو المكان الذي تعرض فيه لزوارك ما يمكنك تقديمه لهم بوضوح. في هذه الخطوة، سنتعلم مهارة برمجية في غاية الاهمية: نظام الشبكة (Grid System) الخاص باطار العمل Bootstrap.

بدلا من كتابة اكواد CSS معقدة لتقسيم الشاشة، سنستخدم فئات بوتستراب الجاهزة (مثل col-md-4) لتقسيم قسم الخدمات الى 3 اعمدة متساوية ومتجاوبة بالكامل. الاجمل من ذلك، اننا سنقوم بزرع وسوم بلوجر البرمجية (<b:section>) داخل هذا التقسيم، مما سيسمح لك مستقبلا بتعديل النصوص والخدمات بسهولة من خلال قسم "التنسيق" (Layout) في لوحة تحكم بلوجر، دون الحاجة للعودة الى محرر الاكواد (HTML) في كل مرة.

الشرح المرئي لتصميم قسم الخدمات

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

الاكواد المستخدمة في الشرح

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

1. كود الهيكل (HTML): يوضع داخل قسم <body> في المكان المخصص له لبناء هيكل الاعمدة واضافة اقسام بلوجر.

<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>

2. كود التنسيق (CSS): يوضع داخل منطقة <b:skin><![CDATA[ ... ]]></b:skin> لتنسيق الالوان، المسافات، وايقونات الخدمات.

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;
}

تصميم واضافة قسم "اتصل بنا" (Contact Us)

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

الشرح المرئي لتصميم نموذج الاتصال

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

الاكواد المستخدمة في الشرح

لاتمام هذه الخطوة بنجاح، اتبع المسار التالي: توجه الى لوحة تحكم Blogger، ثم الى علامة التبويب المظهر، واضغط على السهم المتجه للاسفل لاختيار تعديل HTML.

1. كود الهيكل (HTML): ابحث عن وسم الاغلاق </section> الخاص بقسم الخدمات الذي انشاناه في الدرس السابق، وقم بلصق هذا الكود اسفله مباشرة لانشاء الحاوية الخاصة بنموذج الاتصال.

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

2. كود التنسيق (CSS): انسخ الكود التالي والصقه داخل منطقة <b:skin><![CDATA[ ... ]]></b:skin>. هذا الكود سيعمل على اعادة تصميم حقول الادخال، تكبير مساحة الرسالة، وتحويل زر الارسال الافتراضي الى زر انيق بخلفية ملونة وحواف دائرية.

#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;
}

اضافة النافبار الذكي والفوتر

في هذه الخطوة الاخيرة، سنقوم بانهاء هيكل صفحة الهبوط. سنضيف شريط التنسيق العلوي (Navbar) الذي يختفي ويظهر عند التمرير، ونقوم بتصميم منطقة تذييل الصفحة (Footer) لحفظ الحقوق.

تطوير تقنية التمرير (Scrolling)

شاهد الفيديو التالي لتعلم كيفية ربط روابط القائمة باقسام الصفحة. ملاحظة تقنية: بدلا من استخدام مكتبة jQuery المعقدة التي تظهر في الفيديو، سنستخدم خاصية scroll-behavior في CSS، وهي اخف واسرع بكثير وتعمل natively في جميع المتصفحات الحديثة.

التعديلات البرمجية النهائية

قم بتنفيذ التعديلات التالية في محرر HTML الخاص بقالبك:

1. تفعيل التمرير السلس (بديل jQuery): اضف الكود التالي داخل وسوم <b:skin>:

html {
    scroll-behavior: smooth;
}

2. تعديل وسم body و Navbar: قم بتغيير وسم <body> ليصبح <body id='page-top'>، واضف كلاس fixed-top و id='mainNav' الى وسوم النافبار كما هو موضح في الفيديو.

3. كود تنسيق النافبار (CSS):

.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;
    transition: background .5s ease-in-out, padding .5s ease-in-out;
}

4. اضافة الفوتر (HTML): يوضع قبل وسم الاغلاق </body>:

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

5. كود تنسيق الفوتر (CSS):

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

لقد انتهينا! يمكنك الان تحميل نسخة القالب الجاهزة التي قمت بتجميعها خلال هذه الدورة عبر الرابط التالي: