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

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

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

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

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

</ul>

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

القائمة المنسدلة

<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">قائمة <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li>

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

غير كلمة 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'/> <!-- OpenGraph description --> <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> <!-- Begin Open Graph for facebook --> <meta content='رابط الشعار' property='og:image'/> <!-- Begin Open Graph for facebook --> <!--TWITTER CARD CODE --> <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> <!--TWITTER CARD CODE -->

اقرا المزيد »

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

 

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

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

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

سيو الهيدر

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

id='header-inner'

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

seo header 1

<b:if cond='data:blog.pageType != "index"'> <b:if cond='data:blog.pageType == "archive"'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:else/> <h2 class='title' style='background: transparent; border-width: 0px'> </b:if> <b:else/> <h1 class='title' style='background: transparent; border-width: 0px'> </b:if> <b:if cond='data:blog.pageType != "index"'> <b:if cond='data:blog.pageType == "archive"'> </h1> <b:else/> </h2> </b:if> <b:else/> </h1> </b:if>

seo header 2

<div class='titlewrapper'> <b:if cond='data:blog.pageType == "index"'> <h1 class='title'> <b:include name='title'/> </h1> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <h1 class='title'> <b:include name='title'/> </h1> <b:else/> <b:if cond='data:blog.pageType == "item"'> <h3 class='title'> <b:include name='title'/> </h3> <b:else/> </b:if> </b:if> </b:if> </div>

سيو المواضيع

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

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

<h3 class='post-title entry-title' itemprop='name'>

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

seo article

<b:if cond='data:blog.pageType != "index"'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h1 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h1> </b:if> <b:else/> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h2 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h2> </b:if> </b:if>

اقرا المزيد »

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

شرح كامل بالفيديو يوضح كيفية إنشاء مدونة بلوجر خطوة بخطوة وتصميم قالب متجاوب - تحويل قالب 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

اقرا المزيد »

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

اقرا المزيد »

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

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

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

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

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

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

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

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

كود html

<nav class='navbar navbar-default navbar-top' role='navigation'> <div class='container'> <div class='navbar-header page-scroll'> <div class='pull-right'> <button class='navbar-toggle' data-target='.navbar-ex1-collapse' 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> </div> </div> <div class='collapse navbar-collapse navbar-ex1-collapse'> <b:section id='widget-nav-top'/> </div> </div> </nav>

كود css

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

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

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

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

اقرا المزيد »

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

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

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

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

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

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

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

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

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

كود html

<footer> <div class="container"> <div class="col-md-4"> <div class="footer-right"> <b:section id='widget-footer-right'/> </div> </div> <div class="col-md-4"> <div class="footer-middle"> <b:section id='widget-footer-middle'/> </div> </div> <div class="col-md-4"> <div class="footer-left"> <b:section id='widget-footer-left'/> </div> </div> </div> <div class="footer-bottom"> جميع الحقوق محفوظة © <a expr:href='data:blog.homepageUrl'> <strong> <data:blog.title/> </strong> </a> <script type='text/javascript'>document.write(new Date().getFullYear());</script> </div> </footer>

ان لم تكن من متابعي هذه الشروحات لقد تم شرح اكواد 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
قم بحذف الجملة التي وضعنها بشكل مؤقت وهي (منطقة السايدبار) الموضحة في الكود اعلاه
وضع مكانها الكود التالي الذي من خلاله يمكننا اضافة ادوات في منطقة السايدبار

كود html

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

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


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

كود css

aside .widget h2 { font-size: 16px; background: #2196F3; color: #fff; text-align: center; padding: 20px 0px; }

اقرا المزيد »

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

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

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

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

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

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

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

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

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

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

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

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

<script type='text/javascript'> summary_noimg = 250; summary_img = 200; img_thumb_height = 188; img_thumb_width = 100; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } 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/> ستجده مكرر مرتين المطلوب هو الكود الثاني قم باستبدله بالتالي

كود html

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div class='text-center more'> <a class='des-more' expr:href='data:post.url'>إقرأ المزيد</a> </div> </b:if> </b:if>

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

لان سنقوم باضافة كود 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> اضف اسفله مباشرة الكود التالي

كود css

<!-- صفحة المواضيع --> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .post-outer { padding: 0 20px; } .post-outer:hover { transform: none; } .post-outer img { max-width: 100%; width: 100%; max-height: 600px; height: 100%; margin-left: auto !important; margin-right: auto !important; display: block; } </style> </b:if> </b:if>

اقرا المزيد »

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

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

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

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

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

كود

<b:section class='main' id='main' preferred='yes' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> </b:widget> </b:section>

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

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

اقرا المزيد »

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

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

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

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


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

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

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

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

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

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

<div class="container"></div>

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

<section class="main"></section>

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

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

كود html

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

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

كود css

section.main { background: #ffffff; padding: 50px 0; } aside { background: #fafaff; border: 1px solid #eee; padding: 10px; }

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

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

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

اقرا المزيد »

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

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

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

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

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

<header>   <!-- رأس الصفحة -->  </header>

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

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

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

<div class="container"></div>

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

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

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

<div class="col-md-12"> col-md-12 </div>

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

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

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

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

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

كود html الهيدر

<!-- رأس الصفحة --> <header> <div class="container"> <div class="col-md-12"> <div class="col-md-4"> <b:section id='widget-header'/> </div> <div class="col-md-8"> <b:section id='widget-adsense'/> </div> </div> </div> </header>

كود css

header { width: 100%; padding:50px 0; background: #f8f8f8; }

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

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

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

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

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

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

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

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

اقرا المزيد »

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

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

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

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

اقرا المزيد »

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

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

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

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

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

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

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

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

ابحث عن الكود التالي <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>

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

<ul class='nav navbar-nav'>

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

اقرا المزيد »

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

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

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

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

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

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

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

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

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

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

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

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

كود 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 كي يقوم المطورون باستعمالها.

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

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

كود Bootstrap

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

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

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

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

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

اقرا المزيد »