2020-11-28

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


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


الخطوة الأولى:

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

الذهاب إلى مدونة بلوجر أفتح لوحة التحكم (المظهر)تعديل HTML تقوم بتحديد الكل وثم مسح أو delete 

أنسخ الكود التالي :

--------------------------

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<b:skin><![CDATA[/*

-----------------------------------------------

Name : CNMU Cleaning Templateا

Designer URL  : http://cnmu.blogspot.com

year          : 2015

----------------------------------------------- */

]]></b:skin>

</head>

<body>

<b:section class='main' id='main' showaddelement='yes'>

<b:widget id="Blog1" locked="true" type="Blog" />

</b:section>

</body>

</html>

--------------------------------------------------

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


الخطوة الثانية:

وضع اكواد الأساسية على القالب امسح ادواد التنظيف وأنسخ الكود التالي :

----------------

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<html dir='rtl' lang='ar' 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 http-equiv="X-UA-Compatible" content="IE=edge" />

    <b:include data='blog' name='all-head-content'/>

    <meta content='width=device-width, initial-scale=1' name='viewport'/>

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

<b:skin><![CDATA[



]]></b:skin>


</head>

<body>


<b:section id='widget-footer'/>

</body>

</html>


------------------

الان سنقوم باستدعاء مكتبة البوتستراب

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

من داخل المحرر تقوم بالضغط على الزرين Ctrl+F ستضهر لك خانة البحث في متصفحك

ابحث عن <b:skin> فوقه قم بلصق لاكواد 

------------------------------

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>


<link href='//cdn.rawgit.com/morteza/bootstrap-rtl/v3.3.4/dist/css/bootstrap-rtl.min.css' rel='stylesheet'/>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'/>


<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>


<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>


------------------------------

أضغط على حفظ ونكون قد وضعنا الاكواد الاساسية للقالب، ولان سوف ننتقل الى الخطوة الثالثة سنبدأ باضافة الاساسيات سنقوم بتقسيم القالب،  يمكنك تغير التقسيم على حسب حاجتك.


الخطوة الثالثة:

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

--------------------------

  <nav class='navbar navbar-default'>

  <div class='container'>

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class='navbar-header'>

      <button aria-expanded='false' class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' 


data-toggle='collapse' type='button'>

        <span class='sr-only'>Toggle navigation</span>

        <span class='icon-bar'/>

        <span class='icon-bar'/>

        <span class='icon-bar'/>

      </button>

      <a class='navbar-brand' href='#'><data:blog.title/></a>

    </div>

<!-- Collect the nav links, forms, and other content for toggling -->

    <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>

<b:section id='widget-nav'/>

</div>

<!-- /.navbar-collapse -->

  </div>

<!-- /.container-fluid -->

</nav>


--------------------------

ابحث عن الكود التالي <body> اسفله مباشرة اضف كود html الخطوة التالية سنضيف اكواد (css)أنسخ الكود التالي:

---------------------------

body {

    color: #20292f;

    font-family: 'Droid Arabic Kufi', Oswald;

    font-size: 16px;

    background: #f8f8f8;

}

.navbar-default {

    background-color: #fff;

    border-color: #e7e7e700;

    padding: 0px 0px 27px 0px;

    transition: all 0.5s;

    z-index: 997;

    background: #fff;

}

.navbar-default .navbar-collapse{

background: #fff;

border-color: #fff;

padding-top: 24px;

}

.top-nav-collapse{

position: fixed;

box-shadow: -21.213px 21.213px 30px 0px rgba(158, 158, 158, 0.3);

background: #fff;

transition: all 0.5s;

}

.navbar-toggle {

    float: right;

    margin-right: 15px;

    margin-left: auto;

}

.navbar-brand {

    float: left !important;

}

.navbar-header {

    padding-top: 24px;

}


.navbar-default .navbar-nav>.active>a{

 transition: all 0.5s;

    color: #5e5e5e;

    background-color: #ffffff;

}

.navbar-default .navbar-nav>.active>a:hover {

    color: #ffffff;

    background-color: #5e5e5e;

}

.navbar-default .navbar-nav>li {

    list-style: none;

}

.navbar-default .navbar-nav>li>a {

    color: #242429;

    font-weight: bold;

    font-size: 18px;

    text-transform: capitalize;

    outline: none;


}

.navbar-default .navbar-nav>li>a:hover {

color: #2196F3;

}

.navbar-default .navbar-brand {

    color: #2196F3;

    font-size: 24px;

    font-weight: bold;

}

.navbar-default .navbar-nav>li>span {

    padding-top: 15px;

    padding-bottom: 10px;

    line-height: 20px;

    display: block;

    color: #ddd;

    font-weight: bold;

    font-size: 14px;

}


---------------------------


أبحث على الكود  <b:skin><![CDATA[ والصقه أسفله


الخطوة الرابعة:

تقسيم منطقة المحتوى وتكويد وتنسيق منطقة المحتوى في الصفحة الرئيسيةوتقسيمها   الى قسمين؟

القسم الاول: منطقة عرض مواضيع الموقع.

القسم الثاني: منطقة عرض  الشريط الجانبي وأسمه السيدار.

أنسخ الكود التالي:

----------------------

<section class="main">

<div class="container">

<div class="col-md-8">

 <article>منطقة عرض المواضيع</article> </div>

<div class="col-md-4">

 <aside>منطقة السايدبار</aside> </div>

</div>

<!--end container-->

</section>

----------------------

ابحث عن الكود التالي </header>  اضف كود html اسفله مباشرة ولأن أنسخ كود الcss التالي:

----------------------

section.main {

    background: #ffffff;

    padding: 50px 0;

}

aside {

    background: #fafaff;

    border: 1px solid #eee;

    padding: 10px;

}

--------------------------

أبحث عن //<![CDATA[  والصق الكود فوقه مباشرة 


الخطوة الخامسة:


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








شارك الموضوع

0 تعليقات:

إرسال تعليق

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

Translate

لأكثر مشاهدة