كوداتي - CodatyDev: templates-design

‏إظهار الرسائل ذات التسميات templates-design. إظهار كافة الرسائل

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

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

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

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

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

</ul>

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

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

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

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

اقرا المزيد »

تفعيل وصف البحث لمدونة بلوجر | اضافة اكواد ميتا تاج | تفعيل العلامات الوصفية

تهيئة مدونة بلوجر لمحركات البحث واضافة اكواد ميتا تاج لتحسين السيو SEO

1- اضافة مدونة بلوجر لمحركات البحث

يمكنك تسهيل عثور الأشخاص على مدونتك على محركات البحث مثل Google وBing عن طريق:

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

كيف يعثر الأشخاص على مدونتك على محركات البحث

لتمكين محركات البحث من العثور على مدونتك، يُرجى اتباع الخطوات التالية:

سجّل الدخول إلى Blogger.
في الجزء العلوي الأيمن، اختَر مدونة تريد إدراجها.
من القائمة على اليمين، انقر على الإعدادات.
ضِمن "الخصوصية"، فعِّل مرئية لمحركات البحث.

2- كيفية جعل الصور تظهر بنتائج البحث،

لجعل الصور تظهر بنتائج البحث والوصول إليها، يمكننا إضافة وصف قصير أو نص بديل أو عنوان

يُرجى اتباع الخطوات التالية:

سجّل الدخول إلى Blogger.
اختَر مدوّنة في أعلى اليمين.
أضِف صورة إلى مشاركتك واضغط عليها.
اضغط على رمز التعديل.
في مربع النص:

💿 في قسم "النص البديل": أضِف وصفًا طويلاً.
💿 في قسم "العنوان": أضِف وصفًا موجزًا.

اضغط على تعديل.

3- لتحسين وتقوية سيو مدونة بلوجر

لظهور الصورة ووصف البحث بشكل منسق سنقوم بتنفيذ الخطوات التالية الشرح بالفيديو:

على جوجل من خلال تفعيل وصف البحث لتحسين ظهور المدونة بنتائج البحث

على موقع تويتر باستخدام كود تويتر كارد twitter card

على موقع الفيسبوك باستخدام كود اوبن كراف open graph

اضافة اكواد الميتا تاج

💿 اضافة كود open graph for facebook لنشر المشاركة على الفيسبوك
💿 اضافة كود twitter card لنشر المشركة على تويتر

اضافة وصف بحث للمدونة ولكل موضوع

💿 تفعيل العلامات الوصفية
💿 تفعيل وصف البحث

تفعيل علامات رؤوس مخصصة لبرامج الروبوت

💿 علامات الصفحة الرئيسية
💿 علامات صفحات الأرشيف والبحث
💿 علامات المشاركات والصفحات

تفعيل مربع وصف البحث لمدونة بلوجر

اكواد ميتا تاج meta tags

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

اكواد الميتا

<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>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>

<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>

<meta content='رابط الشعار' property='og:image'/>


<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
</b:if>
</b:if>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>

اقرا المزيد »

تحسين محركات البحث لمدونتك بالطريقة الصحيحة

ظهور المدونة بنتائج البحث

لتحسين ظهور المدونة بنتائج البحث، يمكنك إضافة علامة مثل H1 وH2 وH3 والمزيد من الاعدادات المهمة في الفيديو التالي:

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

سيو الهيدر

نبحث عن الكود التالي

id='header-inner'

نستبدله بالكود التالي

سيو المواضيع

نبحث عن الكود التالي

سنجده مكرر مرتين المطلوب الكود الثاني

نستبدله بالكود التالي

seo article

اقرا المزيد »

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

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

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

إنشاء مدونة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- إضافة اقسام

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

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

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

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

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

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

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

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

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

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

خصائص 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

اقرا المزيد »

تحميل قالب بلوجر مجانا

تحميل قالب التنظيف | افضل قالب تنظيف قوالب بلوجر

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

لاخذ نسخة احتياطية لقالب بلوجر:

توجه الى لوحة تحكم بلوجر

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

بعد فتح الصفحة في قسم مظهري من القائمة المنسدلة اضغط على "الاحتفاظ بنسخة احتياطية"

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

توجه الى لوحة تحكم بلوجر

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

بعد فتح الصفحة في قسم مظهري من القائمة المنسدلة اضغط على "تعديل html"

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

ثم كليك يمين ثم خيار حذف قم بحذف ما بداخل المحرر

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

كود html

لان يمكنك تركيب القالب الجديد دون وجود اى مشاكل من القالب السابق

تنزيل قالب بلوجر مجانا

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

بعد تنزيل القالب

توجه الى لوحة تحكم بلوجر

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

بعد فتح الصفحة في قسم مظهري من القائمة المنسدلة اضغط على "استعادة"

قم بتحميل الملف من جهازك

اقرا المزيد »

الانتهاء من تصميم قالب بلوجر واجراء تحسينات لمظهر القالب

محتوايات المقال:

1- تعديل قسم راس الصفحة النافبار والهيدر

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

3- تعديل منطقة السايدبار والفوتر

4- تحميل القالب الذي تم تصميمه خلال هذه الدورة

تعديل النافبار والهيدر

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

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

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

تحميل القالب الذي تم تصميمه خلال هذه الدورة

اقرا المزيد »

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

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

وغيرها من المعلومات حسب ما تراه مناسب لما يقدمه موقعك من خدمات سنقوم بتقسيم الفوتر الى قسمين:
1- قسم العلوي
2- القسم الاسفل

1. سنقوم بتقطيع القسم العلوي الى ثلاث اعمدة ونضيف داخل كل عامود اداة كي تمكنا من اضافة ادوات من لوحة التحكم (التخطيط)

مثل اداة HTML/JavaScript او اداة قائمة الروابط او اداة المتابعة بالبريد الإلكتروني وغيرها من الادوات المتاحة في لوحة التحكم

2. القسم الاسفل عادة ما يحتوي على اسم الموقع وحقوق الملكية

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

لان نتوجه الى لوحة التحكم ثم علامة التبويب المظهر ثم تعديل html في نهاية القالب بعد وسم اغلاق </section> الرئيسي سنقوم باضافة كود الفوتر كما هو موضح بالصورة التالية

كود html تصميم منطقة الفوتر

ان لم تكن من متابعي هذه الشروحات لقد تم شرح اكواد html وما يحتوي كل كلاس يمكنك الاطلاع عليها لتتعرف ما هي وظيفتها من خلال رابط الدرس التالي:

⇦تكويد قالب بلوجرتصميم الهيدرتصميم متوافق مع الجوال

بعد اضافة الكود اضغط على حفظ المظهر ثم توجه الى القائمة الجانبية علامة التبويب التخطيط قم بتحديث الصفحة
ستلاحظ ظهور ادوات جديدة باسم (widget-footer-right) و (widget-footer-middle) و (widget-footer-left)
يمكنك من خلالها اضافة الادوات التي تلبي حاجتك كما في الصورة التالية

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

كود css

footer {
    background: #111111;
    padding: 20px 0 0;
    color: #555555;
}
footer .widget h2 {
    position: relative;
    margin-bottom: 37px;
    font-size:16px;
    color: #555555;
    font-weight: bold;
}
footer .widget h2:before {
    background: #555555;
    content: "";
    height: 3px;
    left: auto;
    position: absolute;
    width: 75%;
    top: 33px;
    right: 0;
    float: none;
    margin: auto;
}
footer li {
    list-style: none;
    padding: 6px 0;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-address {
    padding: 1px 6px;
    border: 1px solid #ffffff;
    width: 98% !important;
    height: 35px !important;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
    width: 60px;
    margin: 0;
    margin-right: 8px;
    margin-left: 0;
    border: 0;
    border-radius: 2px;
    -moz-border-radius: 2px;
    background: #2196F3;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    height: 35px;
    z-index: 0;
}
.footer-bottom {
    background: #000000;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    color: #555555;
    font-weight: bold;
}

اقرا المزيد »

تصميم قالب بلوجر تصميم منطقة السايدبار

سنتابع في هذا الشرح تصميم منطقة السايدبار قمنا في شرح سابق بعمل تقسيم منطقة المحتوى
وقمنا بتقسيم منطقة المحتوى الى قسمين:
القسم الاول: منطقة عرض مواضيع الموقع.
القسم الثاني: منطقة عرض السايدبار الشريط الجانبي

وقد قمنا باضافة كود html المسؤل عن منطقة السايدبار

<div class="col-md-4"> منطقة السايدبار </div>

لان كل ما علينا فعله هو الذهاب الى لوحة التحكم ثم علامة التبويب المظهر ثم تعديل html
قم بحذف الجملة التي وضعنها بشكل مؤقت وهي (منطقة السايدبار) الموضحة في الكود اعلاه
وضع مكانها الكود التالي الذي من خلاله يمكننا اضافة ادوات في منطقة السايدبار

بعد اضافة الكود أضغط على حفظ المظهر بعد التاكد من الحفظ انتقل الى القائمة الجانبية
واضغط على علامة التبويب (التخطيط) بعد فتح الصفحة قم بتحديث الصفحة من خلال المتصفح
ستلاحظ انه تم اضافة اداة جديدة هي widget-sidebare يمكنك لان اضافة ادوات في السايدبار
مثل اداة المشاركات الشائعة وغيرها من الادوات

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

اقرا المزيد »

كيفية تصميم قالب بلوجر اضافة اقراء المزيد

انشاء قالب بلوجر اضافة اقراء المزيد

في الدرس السابق قمنا بإضافة أداة رسائل المدونة الإلكترونية
سنقوم الان باضافة زر اقراء المزيد, تنسيق المشاركة في الصفحة الرئيسية

سنتوجه الان الى علامة التبويب (المشاركات) ونقوم باضافة مشاركة جديدة تجريبية

انسخ النص التالي لانشاء مشاركة تجريبية

انسخ النص التالي

بعد الانتهاء من انشاء المشاركة التجريبية اضغط على زر نشر

من القائمة الجانبية توجه الى علامة التبويب المظهر ثم اضغط على تعديل html

بعد فتح محرر html سنفوم باضافة كود جافاسكريبت الخاص باضافة اقراء المزيد

من خلال اداة البحث داخل محرر html ابحث عن هذا الوسم </head> واضف فوقه الكود التالي

كود جافا سكريبت

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {    
        imgtag = '<div class="col-md-6 main-img" style="float:right;">
<img src="'+img[0].src+'" width="'+img_thumb_width+'%" height="'+img_thumb_height+'px"/></div>
';
        summ = summary_img;
    }

var summary = imgtag + '<div class="col-md-6">
<p class="main-art">
' + removeHtmlTag(div.innerHTML,summ) + '</p>
</div>
';
    div.innerHTML = summary;
}
//]]>
</script>

يمكنك التعديل على الكود من خلال الخصائص التالية

summary_noimg = 250; عدد الحروف بدون صورة

summary_img = 200; عدد الحروف مع صورة

img_thumb_height = 188; ارتفاع الصورة px

img_thumb_width = 100; عرض الصورة بالنسبة المئوية %

يمكن تعديل كود html المضمن داخل كود جافا سكريبت اعلاه الخاص بعرض الصورة والنص في الرئيسية
الكود المخصص للنص والصورة داخل كلاس <div class="col-md-6">
لتغير حجم الصورة قم بالتعديل اجعل كود الصورة <div class="col-md-4">
والنص <div class="col-md-8"> قم بالتعديل حتى تحصل على الحجم المناسب
على ان يكون مجموع الكلاسين 12 يعني كلاس الصورة 4 والنص 8 المجموع 12 ستكون النتيجة عرض الصورة width: 33.33333333%; من اجمالي المساحة والنص width: 66.66666667%;

لان سنقوم باضافة زر اقراء المزيد

نبحث هذا الكود <data:post.body/> ستجده مكرر مرتين المطلوب هو الكود الثاني قم باستبدله بالتالي

بعد الانتهاء اضغط على حفظ وقم بعرض المدونة

لان سنقوم باضافة كود css لتنسيق المشاركة وزر اقراء المزيد

اضافة اقراء المزيد, تنسيق المشاركة في الصفحة الرئيسية, تصميم قالب بلوجر.

كود css

.post-outer {
    width: 100%;
    margin: 0 auto 40px auto;
    transition: 0.3s;
    display: inline-block;
    height: auto;
    background-color: #ffffff;
    line-height: 2;
    border-radius: 1px;
    z-index: 1;
    box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15);
}
.post-outer:hover {
    box-shadow: 0px 12px 19px -7px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
}
h3.post-title.entry-title {
    display: block;
    font-size: 26px;
    text-align: right;
    text-decoration: none;
    margin: 20px 0 20px;
    padding: 0 10px;
    min-height: auto;
    max-height: none;
    font-weight: 700;
    line-height: 1.2;
    color: #111315;
    font-family: 'Droid Arabic Kufi', Oswald;
}
h3.post-title.entry-title a {
    display: block;
    font-size: 26px;
    text-align: right;
    text-decoration: none;
    margin: 20px 0 20px;
    padding: 0 10px;
    min-height: auto;
    max-height: none;
    font-weight: 700;
    line-height: 1.2;
    color: #111315;
    font-family: 'Droid Arabic Kufi', Oswald;
    text-decoration: none;
}
h3.post-title.entry-title a:hover {
    color: #2196F3;
}
p.main-art {
    padding: 0;
    line-height: 32px;
    text-align: right;
    float: right;
    overflow: hidden;
    font-family: 'Droid Arabic Kufi', Oswald;
}
.text-center.more {
    text-align: center;
    float: left;
    margin-bottom: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}
a.des-more {
    outline: none;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    line-height: 50px;
    color: #2196F3;
    border: 1px solid #2196F3;
    background: #fff;
    float: none;
    margin: 0 auto 15px;
    overflow: hidden;
    max-width: 170px;
    padding: 5px 17px;
}
.des-more:hover {
    color: #fff;
    background: #2196F3;
    border: 1px solid transparent;
}

اضغط على حفظ وقم بعرض المدونة للمعاينة اضغط هنا

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

لان سنقوم باضافة كود css لتنسيق صفحة عرض المقال
ابحث عن </b:skin> اضف اسفله مباشرة الكود التالي

اقرا المزيد »

تصميم قالب بلوجر إضافة أداة المشاركات رسائل المدونة الإلكترونية

تصميم قالب بلوجر إضافة أداة المشاركات في مدونة بلوجر

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

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

من القائمة الجانبية اضغط على علامة التبويب "المظهر"
ثم اضغط على "تعديل html"
ابحث عن الكود التالي <article> اسفله مباشرة قمنا بوضع الجملة التالية بشكل مؤقت (منطقة عرض المواضيع)
قم بحذفها واضف الكود التالي:

بعد اضافة الكود أضغط على حفظ المظهر بعد التاكد من الحفظ انتقل الى القائمة الجانبية واضغط على
علامة التبويب (التخطيط) بعد فتح الصفحة قم بتحديث الصفحة من خلال المتصفح ستلاحظ انه تم اضافة اداة جديدة
هي أداة رسائل المدونة الإلكترونية

سنتوجه الان الى علامة التبويب (المشاركات) ونقوم باضافة مشاركة جديدة تجريبية
لكي نقوم بتنسيق منطقة عرض المقال واضافة اقراء المزيد

اقرا المزيد »

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

تكويد قالب بلوجر تقسيم منطقة المحتوى

الدرس السابق من تكويد قالب بلوجر قمنا بتصميم وتكويد الهيدر

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

كما تحدثنا في الدرس السابق سنقوم باستخدام Bootstrap نظام الشبكة Grid system
الذي يضم 12 من الصفوف ( class ). الدرس السابق ⏪ تصميم الهيدر
سنقوم باستخدام الكلاسات التالية:

<div class="col-md-8"> منطقة عرض المواضيع </div>

<div class="col-md-4"> منطقة السايدبار </div>

لكي يكون التصميم متجاوب ويعمل على كل مقاسات واحجام الشاشات وفرت مكتبة البوتستراب كلاس ( class ) يدعى"container" يجب وضع الصفوف داخل هذا الكلاس.

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

يظهر الكلاس بالشكل التالي:

حتى نستطيع تميز وتنسيق منطقة المحتوى من خلال css سنقوم بتضمين الاكواد السابقة داخل section

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

من القائمة الجانبية اضغط على علامة التبويب "المظهر"
ثم اضغط على "تعديل html"
ابحث عن الكود التالي </header> اسفله مباشرة اضف كود html التالي :

اضافة كود التنسيق css:

اضغط هنا لمعاينة المظهر

اضغط هنا لمتابعة درس عرض المواضيع في الصفحة الرئيسية واضافة اقراء المزيد

عرض الودجت في السايدبار

اقرا المزيد »

تكويد قالب بلوجرتصميم الهيدرتصميم متوافق مع الجوال

تكويد قالب بلوجر تصميم الهيدر

الدرس السابق من تكويد قالب بلوجر قمنا بإضافة النافبار إلى القالب

الدرس السابق ⏪ اضافة قائمة علوية

سنعمل لان على تكويد وتنسيق الهيدر لاظهار عنوان ووصف الموقع
ستقوم باضافة كود html5, css3 نستطيع من خلاله اضافة اداة في قسم الهيدر من القالب
قسم الهيدر او كما يسمى راس الصفحة يحتوي على عدة وسوم الوسم الرئيسي

يتم تنسيق الهيدر حسب رغبتك وحاجتك يمكن تقسيم الهيدر الى قسمين:
القسم الاول: سنضيف بداخله اداة رأس الصفحة لعرض عنوان الموقع الإلكتروني ووصفه.
القسم الثاني: سنضيف اداة AdSense لعرض إعلانات على الموقع.

كي يكون التصميم متجاوب ويعمل على كل مقاسات واحجام الشاشات والاجهزة الكمبيوتر والابتوب واجهزة المحمول
سنقوم باستخدام Grid system، يتضمن Bootstrap نظام الشبكة Grid system
الذي يضم 12 من الصفوف ( class ) منسقة بشكل مناسب لتتناسب مع زيادة حجم الجهاز أو منفذ العرض.
تظهر الصفوف بالشكل التالي:

يشمل نظام الشبكة وسوم html محددة مسبقا ومنسقة باستخدام css مما يجعل خيارات التخطيط سهلة للغاية
يجب وضع الصفوف داخل class. يكون مساحة عرضه ثابتة هذا الكلاس يظهر بالشكل التالي

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

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

تكويد الهيدر لعرض عنوان الموقع وعرض اعلانات ادسنس

توجه الى لوحة تحكم بلوجر

من القائمة الجانبية اضغط على علامة التبويب "المظهر"
ثم اضغط على "تعديل html"

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

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

ستلاحظ ظهور ادوات جديدة باسم (widget-header) و (widget-adsense) كما في الصورة التالية

من خلال الكود <b:section id='widget-header'/> نستطيع اضافة اداة راس الصفحة في تخطيط القالب

من خلال الكود <b:section id='widget-adsense'/> نستطيع اضافة اداة اعلانات ادسنس في تخطيط القالب

توجه الى widget-header اضغط على إضافة أداة ستفتح نافذة جديدة قم بالبحث عن أداة رأس الصفحة كما في المثال التالي

اضغط هنا لمعاينة المظهر

اذا واجهتك اي مشكلة اولديك اي استفسار لا تتردد بالتواصل معنا لحل مشكلتك اترك تعليقك وسيتم الرد باسرع وقت ممكن

شاهد فيديو
تتمة النافبار وتكويد الهيدر تصميم متجاوب مع الجوال ومناسب لعرض اعلانات ادسنس

اقرا المزيد »

تكويد قالب بلوجر باستخدام بوتستراب

مقدمة تكويد قالب بلوجر باستخدام بوتستراب

سيتم ارفاق جميع الاكواد المستخدمة

دورة تكويد قالب بلوجر احترافي تصميم وتكويد قالب بلوجر لعرض الصور والقصص يكون متوافق مع السيو يكون متوافق مع الجوالات وجميع الاجهزة ريسبونسيف

اقرا المزيد »

تصميم قالب بلوجراضافة قائمة علوية نافبار بشكل احترافي

تصميم قالب بلوجراضافة قائمة علوية نافبار

الدرس السابق قمنا بإضافة صفحة HTML الأساسية إلى القالب

الدرس السابق ⏪ تصميم قالب بلوجر Blogger من البداية تخطيط قالب بلوجر

سنعمل لان على تكويد قائمة علوية النافبار لاظهار اقسام المدونة
ستقوم باضافة كود html,css نستطيع من خلاله اضافة اداة في قسم القائمة العلوية من القالب

توجه الى لوحة تحكم بلوجر
من القائمة الجانبية اضغط على علامة التبويب "المظهر"
ابحث عن الكود التالي <body> اسفله مباشرة اضف كود html التالي :

كود html النافبار

ابحث عن الكود التالي <b:skin><![CDATA[

اسفله مباشرة اضف كود css التالي :

كود 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;
}

اضغط هنا لمعاينة المظهر

الان اضغط على حفظ المظهر من الاعلى ثم من القائمة الجانبية اضغط على علامة التبويب "التخطيط"
قم بتحديث الصفحة اعادة تحميل سيظهر في التخطيط اداة جديدة باسم (widget-nav) كما في الصورة التالة

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

<ul>

قم باستبداله بالكود التالي

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

اقرا المزيد »

تصميم قالب بلوجر Blogger من البداية تخطيط قالب بلوجر

سنقوم اليوم بتكويد وتخطيط قالب بلوجر باستخدام Html5 , Css3 , JQuery , javascript , Bootstrap .

بعد ما قمنا بتحديد اسم المدونة + عنوان (دومين) URL قي الدرس السابق ⏪ تصميم قالب بلوجر

سيتم شرح كل خطوة مع ادراج صورة وارفاق الاكواد المستخدمة

⁖ نتوجه الى لوحة تحكم بلوجر

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

⁖ بعد فتح الصفحة اضغط على زر "تعديل html"

⁖ بعد فتح محرر html اضغط داخل المحرر كليك يمين ثم خيار تحديد الكل

ثم كليك يمين ثم خيار حذف قم بحذف ما بداخل المحرر

⁖ سنقوم الآن بإضافة صفحة HTML الأساسية إلى القالب:

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

كود html

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

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

مميزات مكتبة Bootstrap :
1 - سهولة الاستخدام : حيث يمكن لأي شخص لديه معرفة بأساسيات HTML و CSS استخدامها.
2 - تصميم موقع متجاوب (Responsive) بشكل تلقائي :
بمعنى انه يمكن الموقع من العمل في مختلف مقاسات الشاشات ومختلف الأجهزة من الكمبيوتر الى الهاتف بشكل متناسق وجميل.
3 - التوافق مع جميع متصفحات الويب الحديثة.
4 - السرعة العالية : من مميزات مكتبة Bootstrap الهامة انها ذات اداء عالى وسرعة فائقة.

من داخل المحرر تقوم بالضغط على الزرين Ctrl+F ستضهر لك خانة البحث في متصفحك
ابحث عن <b:skin> فوقه مباشرة قم بلصق اكواد الستايل والخطوط (Bootstrap)

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

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

اشترك معنا فى القائمة البريدية الخاصة بالمدونة ليصلك كل جديد

صندوق الاشتراك في نهاية هذه الصفحة

اقرا المزيد »