الدرس الاول - قالب بلوجر خام | دورة تصميم قالب بلوجر

في هذه الدورة سوف نتعلم كيفية انشاء قالب بلوجر احترافي من الصفر، حيث تتضمن هذه الدورة دروس بالصوت والصورة مرفوقة بأكواد جاهزة، وقبل البدء يجب ان نشير الى اهداف الدورة:

انشاء قالب بلوجر يحتوي على خصائص القوالب الاحترافية

تعلم التعديل على قالب بلوجر من أجل تصميم قالب بلوجر متميز

تعلم تضمين مشاريع (html,css,javascript) الصغيرة، مثل معرض الصور، ساعة....

انشاء قالب متجاوب باستخدام اساسيات Bootstrap’s grid system

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

قالب تنظيف

يتسخدم قالب تنظيف بلوجر من اجل محو الانماط السابقة لقوالب بلوجر المستخدمة من قبل، فيما يلي قالب تنظيف بلوجر، نقوم بنسخه ولصقه في المظهر > تعديل html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' expr:lang='data:blog.localeUnderscoreDelimited' 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' name='viewport'/>
		<meta content='ie=edge' http-equiv='X-UA-Compatible'/>
		
      
      <!--title-->
    <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:include data='blog' name='all-head-content'/>
      
		<b:skin version='1.3.0'><![CDATA[

]]></b:skin>
  </head>
  <body>
    <b:section id='header' class='header'  showaddelement="yes">

</b:section>
    <div class="container">
      <div class="row">
        
      
    <main class='main col-7'>
    <b:section id='main' class='main'  showaddelement="yes">
<b:widget id="Blog1" type="Blog" title="Blog Post"></b:widget>
</b:section>
    </main>
    <aside class='sidebar col-3'>
    <b:section id='sidebar' class='sidebar'  showaddelement="yes">

</b:section>
    </aside>
    </div>
    </div>
    
    <b:section id='footer' class='footer'  showaddelement="yes">

</b:section>
    
    
  </body>
</html>

نقوم بنسخ هذا الكود ضمن <b:skin version='1.3.0'></b:skin> لتفعيل خاصية Bootstrap’s grid system

/*bootstrap css basic*/

  html{line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;scroll-behavior: smooth;} 
  *, ::after, ::before { box-sizing: border-box;font-family: sans-serif; }
  body{margin: 0; font-weight: 400;     font-size: 1.15rem;line-height: 1.7; color: #212529;word-break: break-word;background-color: white; color: #505050;}
div,li, a, p,span{text-transform: math-auto;}
 
   /*container*/
.container { width: 90%; padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; }
  @media (max-width: 768px){.col-2  {display:none} .container { width: 100%}}

  
/*container*/
  /*row*/
.row {  display: flex;  flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
/*row*/
  
/*col*/ 
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10{position: relative; width: 100%; padding-left: 10px; padding-right: 10px;}
@media (min-width: 768px) {.col-1 {  flex: 0 0 10%; max-width: 10%; }}
  @media (min-width: 768px) {.col-2 {  flex: 0 0 20%; max-width: 20%; }}
  @media (min-width: 768px) {.col-3 {  flex: 0 0 30%; max-width: 30%; }}
  @media (min-width: 768px) {.col-4 {  flex: 0 0 40%; max-width: 40%; }}
  @media (min-width: 768px) {.col-5 {  flex: 0 0 50%; max-width: 50%; }}
  @media (min-width: 768px) {.col-6 {  flex: 0 0 60%; max-width: 60%; }}
  @media (min-width: 768px) {.col-7 {  flex: 0 0 70%; max-width: 70%; }}
  @media (min-width: 768px) {.col-8 {  flex: 0 0 80%; max-width: 80%; }}
  @media (min-width: 768px) {.col-9 {  flex: 0 0 90%; max-width: 90%; }}
  @media (min-width: 768px) {.col-10 {  flex: 0 0 100%; max-width: 100%; }}
/*col*/
/*img*/
img, video { width: 100%; border-radius: 8px; margin: 0; box-shadow: 2px 5px 7px 0px black;transition: 2s; }

☷✎

الدرس الاول - قالب بلوجر خام | دورة تصميم قالب بلوجر

قالب تنظيف

تعليقات

إرسال تعليق

تطبيق حساب فاتورة الغاز والكهرباء. في الجزائر. أونلاين

فتح حساب gmail جديد ( مع شرح مفصل بالصور)

تصميم زر التحميل بلغة html-css

كيفية جلب البيانات من خلاصة Google Blogger باستخدام JavaScript