تصميم قوالب : قالب ازرق جذاب وانسيابي ( blue tech )

في اطار تصميم قوالب بلوجر blogger template، وبعد نجاح القوالب السابقة في الاستحواذ على اعجاب عدد كبير من المدونين ، اقدم لكم اليوم قالب اكثر جمالا واحترافية وايضا اكثر نضارة وحيوية من القوالب السابقة ، واعتقد بأن هذا القالب مناسب جدا للمدونات التقنية والعصرية " اقتبست بعض الافكار من مدونة عالم التقنية ومدونات تقنية اخرى في تصميم هذا القالب "  .
 
مميزات القالب :
- عمودين ، العمود الجانبي على اليسار
- خفيف وسريع في العرض
- عرض 1020
- بانر ارتفاع 125
- يدعم اعلانات ادسنس
- يدعم كافة الاضافات
- صديق لمحركات البحث
- متوافق مع كافة التصفحات 
- يمكن التعديل عليه
- اضافة مواضيع ذات صلة
- اضافة تحديد التعليقات
- اضافة ايقونات المشاركة الاجتماعية 
- اضافة ارقام الصفحات بشكل جذاب بعدد 5 تدوينات في صفحة العرض " احرص على ان تكون اعدادات التنسيق في مدونتك 5 تدوينات في الصفحة الرئيسية حتى لا يتعارض مع كود ارقام الصفحات .
_________________________________________________________________________



     للمشاهدة


للتحميل



ملاحظة : الخطوط في الهيدر لا تظهر فقط  قم بأخذ البانر واكتب به ما شئت على برنامج فوتوشوب او اي برنامج تصميم اخر ، ومن ثم اضفه الى قالب المدونة
ابحث عن هذا الرابط في القالب وغيره برابط الهيدر الخاص بك على ان يكون بنفس الحجم width: 996px;  height: 125px;

رابط الهيدر 
http://lh5.ggpht.com/_0JSsw4H6sns/TABAtU9LEBI/AAAAAAAAC8o/ceMR6fqFMvo/Header.jpg



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

اكمل القراءة...

ادراج استطلاع داخل المواضيع في المدونة بأستخدام Google Docs

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

نسجل الدخول الي http://docs.google.com 

ان كانت اللغة المضبوطة علي اللغة الانجليزية يمكنك تعديلها من خلال الذهاب الي  Settings  وبعدها اختيار Documents settings وبعدها الذهاب الي Language واختيار Arabic كذلك انصح بضبط الوقت حسب توقيت بلدك .

بعدها نذهب الي انشاء جديد ونختار  نموذج (شاهد الصورة) بعدها نقوم بكتابة عنوان للاستطلاع ونبذه عنه

image

بعدها من الخيار Question Type نقوم باختيار Multiple choice 

image

وندخل اجابات التصويت التي نريدها

image

وبالنهاية نضغط Done ونذهب الي القائمة الزرقاء العلوية ونضغط علي More actions ونختار Embed

image

نقوم بنسخ الرابط  ونضعه في الموضوع ,,,,,

لمستخدمي برنامج التدوين من سطح المكتب Windows Live Writer للمزيد حول البرنامج من هنا 

بعد ننتهي من اعداد الموضوع نذهب  المصدر ونضع الرابط في

س

ولمستخدمي محرر بلوجر نضع الرابط في تحرير HTML

image

ولمعرفة النتائج كل ماعليك هو تسجيل الدخول  لـ Google Docs  ومشاهدة نتائج الاستطلاع (شاهد مثال)

s


اكمل القراءة...

حصريا - طريقة تخصيص صندوق التعليق في مدونات بلوجر blogger



سنتعلم في هذا الدرس كيف نضيف كود تخصيص صندوق التعليقات واظهاره بشكل اجمل واكثر اناقة من الشكل المعتاد والمعروف في مدونات بلوجر (blogspot) ، هذه الاضافة ستجعل زوار مدونتك اكثر شهية لاضافة التعليقات ، طبعا لا يخفى على احد بأن صندوق التعليقات في  منصة (wordpress) يتفوق على نظيره في بلوجر ، ولكن هذه الاضافة ستجعل مدونات بلوجر اكثر احترافية واناقة ، شاهد بعض الصور لنماذج من صندوق التعليقات المخصص :


http://lh5.ggpht.com/_0JSsw4H6sns/TAAH7TSzeqI/AAAAAAAAC8E/oeqFla829wc/*1F3._thumb%5B34%5D.jpg?imgmax=800







ت1

ت2


ت3



ت4



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

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

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

  1. من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم ..
  2. ثم ابحث عن :
<div class='comment-form'>
      : واستبدلها بـ 
 <div id='mbt-form'> 
   3.  ابحث عن :
]]></b:skin>

واضف قبلها(فوقها) مباشرة هذا الكود :


#mbt-form iframe{
background:#ffffff url(http://farm5.static.flickr.com/4020/4647821870_28f1634a7d_t.jpg) no-repeat bottom right;
border:7px solid #ABABAB;
padding:5px;
font:normal 13pt "tahoma;
color:#ABABAB;
width:450px;
}
#mbt-form iframe:hover{
background:#ffffff url(http://farm4.static.flickr.com/3340/4647190659_cd0b1c00f2_t.jpg) no-repeat bottom right;
border:7px solid #3b5897;
}
#mbt-form a{
color:#3b5897;


احفظ القالب ومبروك عليك الاضافة
___________________________________________________________________

- تخصيص الاضافة -

الان سنتطرق الى طريقة تخصيص هذا الكود ليتناسب مع الوان مدونتك وشكلها نتوكل على الله ونبدأ :
هذه الاجزاء التي يتكون منها الكود 


#mbt-form iframe
#mbt-form iframe:hover
#mbt-form a

1. شكل صندوق التعليق في الوضع العادي .

#mbt-form iframe
هذا الجزء من الكود يحدد طريقة ظهور صندوق التعليق في الوضع العادي او قبل مرور الفارة عليه :

background : لتغيير لون الخلفية باضافة كود للون المراد  او اضافة رابط صورة ليظهر في الخلفية .
                ملاحظة : اذا اردت استخدام لون في الخلفية فقط ، احذف هذا من الكود url(http://farm5.static.flickr.com/4020/4647821870_28f1634a7d_t.jpg) no-repeat bottom right;

border: لتحديد حجم الاطار الخارجي ولونه في صندوق التعليق بتغيير القيمة 7 وتغير كود اللون #ABABAB بكود اللون الذي تريده

padding : لتحديد بعد الحدود عن نموذج المشاركة (يرجى عدم تغييرها)

font : حجم خط كلمة " التعليق باسم" ونوعه في نموذج المشاركة ، تستطيع تغيير القيمة 13 لتكبير او تصغير الخط ، وتغيير كلمة tahoma بخط اخر تريده .

color : لون خط كلمة " التعليق باسم" في نموذج المشاركة
width : عرض الصندوق ، تستطيع تغير العرض ليتناسب مع مدونتك .


2.  تخصيص الصندوق عند مرور الفارة عليه :

 #mbt-form iframe:hover


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


3.  لون الروابط في صندوق التعليقات .

#mbt-form a


تحديد لون الروابط " تسجيل خروج" و " الاشتراك عن طريق البريد الالكتروني "



4.  تذكر انت غير مقيد بشكل الكود  .

تستطيع ان تخصص هذا الكود وتصمم الصور التي تريد ان تعرض ، فقط قم بتغيير الروابط داخل الكود الاول بروابط الصور الخاصة بك .

لأي استفسار اترك تعليق


الشكر كل الشكر الى الصديق ahmadzai

اكمل القراءة...

قالب بلوجر ازرق Blue Simplicity blogger

12
  • مميزات :  متناسق + مساحة كبيرة للكتابة
  • توافقية القالب : متوافق معا اغلب المتصفحات
  • تحميل القالب : Box | 4sherad | الكود جاهز
  • شاهد القالب Demo


    • اكمل القراءة...

      تصميم قوالب : قالب ابيض مع ازرق بسيط

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

      مميزات القالب :
      - عمودين ، العمود الجانبي على اليسار
      - خفيف وسريع في العرض
      - عرض 930
      - بانر ارتفاع 125
      - يدعم اعلانات ادسنس
      - يدعم كافة الاضافات
      - صديق لمحركات البحث
      - متوافق مع كافة التصفحات 
      - يمكن التعديل عليه
      - مضاف اليه خط هاكون بيروت للعنوان
      - اضافة للتعليقات
      _________________________________________________________________________



            للمشاهدة


      للتحميل


      واشكركم للمحافظة على حقوق التصميم .
      تحياتي لكم عدي عرار - سما بلوجر 

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

              ul.art-menu
              {
                  float:left;

      وقم بتغيير left الى right 







      اكمل القراءة...

      قالب Vio باللون البنفسجي

      ddddds
    • مميزات :  شكل جميل+ ازرار مشاركة والكثير
    • توافقية القالب : متوافق معا اغلب المتصفحات
    • تحميل القالب : Box | 4sherad | الكود جاهز
    •  شاهد القالب Demo

    • اكمل القراءة...

      قالب ابيض بسيط

      sss
    • مميزات : اكمل القراءة + مساحة اعلانية كبري
    • توافقية القالب : متوافق معا اغلب المتصفحات
    • تحميل القالب : Box | 4sherad | الكود جاهز
    • شاهد القالب Demo


      • اكمل القراءة...