إنشاء مدونة بلوجر - تصميم قالب بلوجر خطوة بخطوة

شرح كامل بالفيديو يوضح كيفية إنشاء مدونة بلوجر خطوة بخطوة وتصميم قالب متجاوب - تحويل قالب html الى قالب xml blogger

خطوات انشاء مدونة بلوجر

إنشاء مدونة

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

خطوات تصميم قالب متجاوب خطوة بخطوة

1- تركيب قالب التنظيف ( لتحميل قالب التنظيف من هنا )

2- تركيب قالب html

3- تحويل قالب html الى قالب xml blogger

4- استدعاء ملفات css & JavaScript & jquery & font-awesome

5- تركيب الخط بالمدونة وتنسيق خصائص body css 

6- تقسيم القالب

- تكويد قائمة علوية نافبار لعرض الصفحات الرئيسية 

- إضافة اهم الصفحات ( سياسة الخصوصية, شروط الاستخدام, اتصل بنا, من نحن)

- تكويد الهيدر

- تقسيم الهيدر 

- قسم عرض اسم ووصف المدونة

- قسم لعرض إعلانات او صورة او فيديو 

- تكويد قائمة نافبار لعرض اقسام المدونة

- إضافة اقسام

- تكويد منطقة عرض المشاركات

- إضافة مشاركة جديدة

- تركيب اهم الإضافات

- تكويد السايدبار

- إضافة أدوات في السايدبار

- تكويد الفوتر

7 - ارشفة المدونة و تهيئتها لمحركات البحث

8 - التقديم لجوجل ادسنس

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

font-awesome

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

كود الخط وخصائص body css

خصائص body css

@font-face { font-family: 'Droid Arabic Kufi'; font-style: normal; font-weight: 400; src: local('Droid Arabic Kufi'), local('DroidArabicKufi'), url(http://themes.googleusercontent.com/static/fonts/droidarabickufi/v3/8W45GN15zj1qR-20QwKIxqPi4JPRJMb6v4DHFDoSX-k.ttf) format('truetype'); } body { color: #20292f; font-family: 'Droid Arabic Kufi', Oswald; font-size: 16px; background: #f8f8f8; }

خصائص navbar css

css navbar

nav.navbar.navbar-default.navbar-top { background: #0c0b39; position: relative; line-height: 41px; margin-bottom: 0; margin-top: 0; padding: 0; border: 0; } .navbar-default.navbar-top .navbar-collapse { padding-top: 0; } nav.navbar.navbar-default.navbar-top ul{ margin-bottom: 0; } nav.navbar.navbar-default.navbar-top ul li { display: inline-block; padding: 5px; } .navbar-top li.selected { background: #ff8000; } nav.navbar.navbar-default.navbar-top ul li a { display: block; padding: 0 10px; font-size: 13px; color: #ddd; } .navbar-default { border-color: #e7e7e700; padding: 10px 0; transition: all 0.5s; z-index: 997; background: #0c0b39; border-radius: 0; } .navbar-default .navbar-collapse{ border-color: #fff; padding-top:0; } .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: #ddd; font-weight: bold; font-size: 14px; text-transform: capitalize; outline: none; } .navbar-default .navbar-nav>li>a:hover { color: #ff8000; } .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; }

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

Blogger

https://www.blogger.com/

Bootstrap

https://getbootstrap.com/docs/3.3/

  Bootstrap rtl 

https://rtlcss.com/cdn/css-frameworks/bootstrap/index.html