رسالة منبثقة بتقنية Lightbox مع الاعدادات

Lightbox Popup
طبعا اول شئ لاحظته مع دخولك الموضوع هو ظهور رسالة منبثقه وهذه هي المعاينة الخاصة بموضوعنا هذه الرسالة يمكنك تخصيصها بأى شئ لعرضه ادوات صور كلمات كل ما تريد يمكنك ان تضيفه في الآداة وصندوق المتابعة ما هو الا مثال واحد مما يمكن عمله بتلك الإضافة لكن يجب ان اعرفك بالإضافة وتقنيتها هي إضافة تعمل بتقينة JQuery Lightbox والتي سبق أن شرحناها في هذا الموضوع وهذا هو تطبيق اضافي على الخاصية التي تتعدد مزاياها واستخداماتها انا لن اطيل عليكم وسانقلكم مباشرة للجانب العملي
فقط اضف الكود التالي داخل آداة HTML/JavaScript








هنا أكتب  ما  تشاء

اعدادات أولية

في حالة كان لديك مكتبة جي كويري احذف الكود الاحمر
في حالة لديك خاصية Lightbox احذف الكود الأخضر والاكواد السابقه له كلها
الإضافة معدة لتظهر للزائر مرة واحده فقط حتى لا تكون مزعجة لكن ان اردتها تظهر له في كل زيارة احذف الأكواد الزهرية
الرقم 500 هو العرض الاساسي للرسالة
الرقم 400 هو الإرتفاع الأساسي للرسالة
الرقم 450 هو العرض الخاص بمحتوى الرسالة
الرقم 350 هو الإرتفاع الخاص بمحتوى الرسالة
يمكن ان تجعل الارقام متشابهه لكن انا معدلهم لانه ان كنت تستخدم المظهر الأصلي للإضافة Lightbox قد تحتاج ان يكون هناك اختلاف بين حجم الصندوق وحجم المحتوى الأمر يعود الك في ضبط المحتوى
يمكنك استبدال هنا أكتب  ما  تشاء بأى شئ تريد كود اضافة صورة كتابة طبعا يعود الأمر لك في تنسيقها بحسب ذوقك
كا ترى في المعاينة انا اضفت كود متابعة الفيس بوك كنوع من التوضيح

 تنسيقات

هذا #bbb هو لون الخلفية الذي يغطي على مظهر المدونة
وهذا #fff لون خلفية الرسالة نفسها
وهذا #000 لون الإطار
واترك لك الإبداع في تخصيص رسالتك تحياتي

كارت ادوات المتابعة الاجتماعية

Social Card Blogger widget
أقدم لكم إضافة جديدة وحصرية من تصميمي لأزرار وادوات المتابعة الإجتماعية احببت أن جمل أدوات المتابعة في إضافة خفيفة وبسيطة وفي نفس الوقت تجمل غالبية المواقع الإجتماعية المعتمد عليها من قبل المدونين في بلوجر تم استخدام ادوات رسمية لموقعي جوجل بلس Google Plus وفيس بوك Facebook كونهم ازرار خفيفة وسريعة التحميل لتويتر Twitter ويوتيوب Youtube وبلوجر Blogger فضلت ان استخدم ازرار روابط فهي كافية وأخف من الأدوات الاصلية وفي نفس الوقت تؤدي نفس المهمة تماما لان اضافات الإشتراك الخاصة بتلك المواقع تحيل للموقع لتشترك به فالازرار العادية كافية وطبعا تم دمج نموذج اشتراك بالبريد لتكتمل الآداة 
وهذه معاينة حية للإضافة نرجوا لمن لم يتابعنا أن يسجل متابعته لنا عبرها


وهذا هو الكود أضفه في آداة HTML/JavaScript






GPID" data-rel="publisher">









FeedId', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">


FeedId"/>



الإعدادات

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


استبدل PageID بإسم رابط صفحتك على فيس بوك
استبدل TwID بإسم حسابك في تويتر
استبدل YTID بإسم رابط قناتك على اليوتيوب
استبدل xxxxxxxxxx بمعرف مدونتك
وللحصول عليه ادخل الى لوحة تحكم المدونة ثم إنسخه من شريط عنوان المتصفح

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

قالب Porto معرب ومطور

Porto Blogger Template
قالب خفيف واحترافي يصلح للمجلات والمواقع التقنية القالب بسيط ويسهل تخصيص الوانه متجاوب ومتوافق مع المتصفحات والأجهزة الحديثة أكثر ما يميزه هو خفته وسرعته في التصفح القالب يعمل بمظهر الـ Grid أو العرض الشبكي للمواضيع يحتوي على تنسيقات للإضافات الاساسية كمحرك البحث وازرار متابعة خفيفة وإضافة الإشتراك في المواقع الإجتماعية
يمكنك معاينة وتحميل القالب عبر الازرار التالية
يمكنك تحرير القالب بالدخول لصفحة القالب ثم تختار تخصيص ثم متقدم 
وعدل الألوان كيفما شئت

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

          
  • الرئيسية

  •          
  • تعديل

  •          
  • قائمة
               

                   
    • فرعي

    •              
    • فرعي

    •              
    • فرعي

    •            

             

  •          
  • تعديل

  •          
  • تعديل

  •          
  • تعديل
  • رمز # في كل سطر تستبدله بالرابط المناسب
    لإضافة رابط جديد كرر الكود الاخضر
     لإضافة قائمة جديدة كرر الكود الأحمر
    الكود الازرق داخل كود القائمة تكراره يعطيك رابط فرعي جديد

    لتخصيص ازرار المتابعة إبحث عن الكود التالي

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

    الجدولة وطريقة عمل موضوع مثبت

    Sticky Post in Blogger
    بعض خواص بلوجر تعتبر مهملة من بعض المدونين منها خاصية الجدولة تلك الخاصة تتيح لك ان تصنع مواضيع وتعد تاريخ لنشرها فتنشر تلقائياً في الوقت المحدد وهو ما يساعد كثيراً ان كنت ممن يكتبون العديد من المواضيع فيمكنك ترتيبها زمنياً للنشر تلقائياً وكشرح مبسط أولا للجدولة وانت تكتب الموضوع ستجد على اليسار في الإعدادات خانة جدول زمني ان ضغط على تلك الخانة واظهرت محتواها ستجده كالتالي



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



    التنسيق

    الرابط الأزرق هو الصورة المستخدمه يمكنك استبدالها بصورة أخرى
    الرقم 100 هو ارتفاع الصورة
    الرقم 90 هو عرض الصورة
    الرقم 12 هو بعد الصورة من جهة اليسار ويمكنك جعله بالسالب ليرتفع أكثر -12
    الرقم 11 هو بعد الصورة من الاعلى ويمكنك جعله بالسالب ليبتعد أكثر -11
    لمن يجيدون التعامل مع الستايل يمكنك استخدام كلاس post.first لتعديل مظهر التدوينة الأولى كاملا
    الكود يتطلب وجود مكتبة جي كويري ان لم تكن لديك أضف كودها التالي فوق كود الإضافة


    شرح أهم الإعدادات

    احذف الكود البني ان كانت لديك مكتبة جي كويري
    الكلمات العربية يمكنك تعديلها بما تراه مناسباً
    كلمة false إستبدلها بكلمة true ان اردت ان يظهر زر اغلاق للزائر بحيث لا يكون مجبر على الضغط على الأزرار
    الرقم 0 عدله برقم آخر وهو عدد الثواني التي تريد ان يظهر المحتوى بعد مرورها دون الضغط على الأزرار او اتركه كما هو ان لم تريد توقيت
    هناك ثلاث روابط معلمة بالاحمر
    الاول هو رابط صفحة الفيس بوك الخاصة بك
    والثاني هو رابط موقعك او صفحة معينة ليتم تغريدها
    والثالث نفس الشئ لكن خاص بجوجل بلس
    في حالة أردت ان يتم الإعجاب بالصفحة او الموضوع نفسه وليس صفحات مخصصة فقط احذف سطور الروابط بأكملها بما فيها url
    إلا في تويتر تحذف معه السطر الذي يسبقه المعلم بالأخضر
    وطبعا هذا أفضل من صفحات مخصصه حتى لا يتعطل السكريت لمن سجل الإعجابات بالصفحات الاساسية سابقاً

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

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






    قائمة منسدلة احترافية بتقنية Ajax

    Ajax Menu
    قائمة احترافية تعمل بتقنية Ajax يمكنك من خلالها جلب آخر المواضيع من الروابط المضافة للأقسام اضافة على احتوائها على محرك بحث يعمل بنفس التقنية فيمكنك البحث مباشرة دون الإنتقال لصفحات اخرى القائمة بتطويرات حصرية لكن مدون وسيتم شرح تنسيق القائمة وتعديل الوانها لتتناسب مع الوان قالبك ويمكنك معاينة القائمة من الرابط التالي
    يمكنك تركيب القائمة في آداة HTML/JavaScript








    التنسيق

    هذا tahoma هو نوع الخط الإفتراضي للقائمة يمكنك تعديله
    لتغير اللون الأزرق في القائمة ابحث عن اللون التالي #00a7fb وعدله بكود اللون الذي تريد ملاحظة ستجده متكرر عدة مرات
    هذا #fff هو لون خلفية القائمة في حالة تعديله بلون غامق كالأسود مثلا ستعدل اللون التالي #2c2c2c وهو لون الروابط لكي تظهر
    وهذا #e6e6e6 هو لون الإطار السفلي والرقم 1 هو حجمه
    كما نرى القائمة ظاهر بالأعلى لو اردناها تظل ثابتة عند التمرير  نستبدل هذه الكلمة absolute  بهذه fixed
    في حالة كانت القائمة تغطي جزء عام من المدونة في المنطقة العلوية يمكن تجنب هذا بإضافة الكود التالي فوق الوسم ]]>
    body {margin-top: 50px !important;}
    الرقم 50 هو درجة البعد من الاعلى يمكنك زيادته او انقاصة حتى يضبط معك المظهر
    في حالة اردنا ان تكون القائمة تظهر في مكان الآداة يعني لو كانت الآداة التي أضفنا بها القائمة في مكان مناسب أسفل الهيدر مثلا ونريدها في هذا المكان دون ان تظهر بالأعلى فقط ازل الأكواد التالية من بداية كود الآداة
    -bottom
    position: absolute;
    right: 0;
    top: 0;

    الإستخدام

    الرقم 3 الموجود في نهاية الكود هو عدد المواضيع التي تظهر في الأقسام
    بتكرار الكود الاخضر داخل الآداة تحصل على قائمة منسدلة جديد
    قائمة منسدلة

    الأكواد الداخلية والتي علمت أحدها باللون البني كل سطر يساوي قسم جديد اما ان تزيد بتكراره او تقلل بحذف احدهم
    رمز # هو رابط مدونتك أما كلمة name هي اسم القسم كما هو موجود في مدونتك اما كلمة  القسم هي الكلمة التي سيظهر بها في القائمة مثال لو لديك قسم بإسم Design ستضيفه بدل كلمة name لكن مثلا ان كنت تريد ان يظهر في القائمة بإسم عربي تصميم فتضيف كلمة تصميم بدلا من كلمة القسم
    هذه اهم التنسيقات وأبسط شرح للإستخدام وبقليل من الخبرة يمكنك عمل الكثير من تلك القائمة
    دمتم في امان الله




    انشاء الملاحظات الثابتة والمتحركة وتنسيقها

    Alert Message HTML CSS Blogger
    من منا لم يحتاج يوماً لعمل رسالة تنبيه في مدونته او ملاحظة ليخبر زواره بامر معين  هنا ياتي دور هذه الإضافة وهي عبارة عن عمل صندوق مميز لرساله تنبيهية او ملاحظة وتنسيقها بالشكل الذي تريد لتتوافق مع الوان ونظام قالبك كل ما عليك هو قراءة الموضوع بشكل جيد وستحصل على النتيجة التي تريد بإذن الله اولاً لنرى نموذج لتلك الرسائل
    نبدأ بالنموذج الثابت

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

    ثانياً النموذج المتحرك

    من أخلاق نبينا صلى الله عليه وسلم عن عبد الله بن ابي أوفى رضى الله عنه قال ( كان يُكثِرُ الذِّكرَ ، و يُقِلُّ اللغوَ ، و يطيلُ الصلاةَ ، و يُقصِرُ الخطبةَ ، وكان لا يأنَفُ و لا يستكبرُ أن يمشيَ مع الأرملةِ والمسكينِ و العبدِ ، حتى يَقضيَ له حاجتَه ) --- {وَمَا أَرْسَلْنَاكَ إِلَّا رَحْمَةً لِّلْعَالَمِينَ }الأنبياء107

    كود الرسالة




    90" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);">

    كن مدون كل ما يحتاجه المدونون


    أهم التنسيقات

    هذا #d0fdbc هو لون الخلفية
    هذا #6abf45 هو لون الإطار
    الرقم 17 هو حجم الخط
    هذا 36 هو بعد الخط من الأعلى
    هذا tahoma هو نوع الخط
    هذا 400 هو عرض الشريط
    الرابط المعلم باللون الزهري هو الأيقونة يمكنك استبدالها بايقونة اخرى المقاس المناسب هو 24x24
    الرقم 14 هو بعد الأيقونة من جهة اليسار
    الرقم 8 هو بعد الايقونة من الأعلى
    الكود معد على النموذج المتحرك لإيقاف الحركة احذف الكودين المعلمان بالبرتقالي
    الرقم 90 داخلهما هو سرعة الحركة كلما زاد اصبح أبطأ
    وطبعا استبدل جملة كن مدون كل ما يحتاجه المدونون بما تريد
    التركيب والتعامل
    يمكنك ان تضيف الكود باكلمه داخل آداة HTML/JavaScript
    أو يمكنك ان تيف الجزء الموجود بين الكودين
    داخل القالب فوق الوسم ]]>
    والجزء الباقي من الكود تستخدمه داخل موضوع
    في حالة أردت أكثر من تنسيق للرسائل يعني مثلا تريد رسالة بلون ورسالة بلون آخر
    فقط كرر الكود التالي مع تعديله في كل مرة بالشكل والايقونة المناسبه وتغيير الرقم 1 برقم آخر كلما كررته عليك تغيير الرقم
    #cnmumes1 {
      background-color: #d0fdbc;
      background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxe5ho8q98VtD2A_H779oncEfkQkg67bAiyfzJJbZAgcSLrcg9uWEP2gXoSQTIiKzoM96m96zUxULFMWkYwN7MT9KT8OKfnWWDOqO1xk_dC3WINfgirfK4w7dOOdEx7jgOwozPWvCYmQ5X/s24/Accept.png");
      background-position: 14px 8px;
      background-repeat: no-repeat;
      border: 1px solid #6abf45;
      border-radius: 4px;
      font: 17px/36px tahoma;
      height: 40px;
      overflow: hidden;
      padding: 0 25px 0 42px;
      width: 400px;
    }
    أيضاً عليك تغيير الرقم 1 في الكود الذي ستضيفه كرساله بنفس ارقم الذي وضعته في التكرار
    توضيح كالتالي
    1">

    90" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);">

    كن مدون كل ما يحتاجه المدونون


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

    شرح تركيب فلاش متابعة تويتر

    Twitter Flash Button
    موقع تويتر من أهم المواقع الإجتماعية على الإطلاق خصوصا لمتابعين المواقع الإخبارية والتقنية التي تعتمد على الاخبار اليومية وطبعا الإهتمام بأدوات المتابعة الخاصة به شئ جيد للفت الأنظار وكسب المتابعين ومن أهم أدوات المتابعة التي تلفت الأنظار لحساب تويتر هو الزر الفلاشي الخاص به والحقيقة هناك عدة ازرار فلاشية للمتابعة على تويتر انتقيت لكم اهم اثنين والمميز بهما هو امكانية عرض اسم الحساب في الأزرار مما يكسبه خصوصية في الموقع المضاف به الزر يمكنك اضافته في آداة HTML/JavaScript

    الزر الأول

    الكود
    200" height="200">cmudawin">كل ما يحتاجه المدونون200" height="200" menu="false" wmode="transparent" flashvars="username=cmudawin">
    عدل cmudawin بإسم حسابك في المرتين المعلمتين بالاحمر
    اما الرقم 200 هو عرض وارتفاع الزر هذا هو العرض المثالي لكن يمكنك تغييره مع تعديله في الاربع مرات

    الزر الثاني

    الكود
    236" height="236">cmudawin">كل ما يحتاجه المدونون236" height="236" menu="false" wmode="transparent" flashvars="username=cmudawin">
    عدل cmudawin بإسم حسابك في المرتين المعلمتين بالاحمر
    اما الرقم 236 هو عرض وارتفاع الزر هذا هو العرض المثالي لكن يمكنك تغييره مع تعديله في الاربع مرات
    ولا تنسى ان تتابعنا على تويتر

    القالب الاخباري Easy News

    Easy News Blogger Template
    قالب مميز جداً يتماشى مع المدونات الإخباري او المدونات ذات المواضيع المتجدده فالقالب يعتمد تقنية الصفحة الواحده اى انه لا يعرض المواضيع ولكن هو يعتمد على عرض الأقسام تعرض المواضيع من اقسام معينه وآخر المواضيع تعرض في اضافات اما ان تضيفها او تعتمد على السلايدر الذي خصصته للأمر القالب سريع ومتجاوب ويمكنك معاينته من الرابط التالي

    مميزات القالب

    1. القالب متعدد الألوان
    2. يحتوي على سلايدرات لأقسام متعددة
    3.  يحتوي على قائمة منسدله سهلة الإستخدام
    4. يحتوي على هيدر مزدوج عنوان ومساحة اعلانية
    5.  القالب متجاوب وداعم للأجهزة والمتصفحات الحديثه
    6. يحتوي قائمة متابعة للمواقع الإجتماعية والإشتراك في البريد
    7. تم اضافة اكواد الميتا تاج يمكنك تعديلها في بداية القالب شرح التعديل
    تقريبا كل شئ في هذا القالب يعمل بشكل تلقائي وسهل

    نبدأ أولا بتنسيق القائمة المنسدلة

    قم بتحرير آداة قائمة الروابط من صفحة التخطيط


    لإضافة رابط اضف اسمه في مستطيل اسم الموقع الجديد
    واضف رابطه تحته في مستطيل عنوان URL للموقع الجديد
    ثم اضغط زر إضافة ارتباط
    في حالة اردت ان تضيف قائمة منسدلة أضف رابط اساسي لها بشكل عادي
    ثم الروابط التي تظهر في القائمة اجعل اسمها مسبوقاً بشرطه لأسفل كهذه _
    يمكنك وضع الشرطة بالضغط على Shift + -
    ثم تضع الرابط المنسدل تحت الرابط الأساسي للقائمة
    ولعمل قائمة فرعية من القائمة المنسدلة كرر نفس الأمر لكن مع وضع شرطتين قبل اسم الرابط
    ولتحريك الروابط استخدم الأسهم التي بجانب كل رابط ولحذف رابط اضغط كلمة Delete ولتحريره إضغط Edit
    وهذا فديو توضيحي للامر

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

    الازرار الإجتماعية : هي قائمة روابط قم بتحريرها واضف رابط صفحتك على الفيس او تويتر او جوجل بلس او يوتيوب
    قائمة الإشتراك في البريد : قم بتحريرها ستجد مساحة لإضافة رابط اضف بها رابط فيد برنر وبه معرف حساب مدونتك عليه
    مثال رابط فيد برنر مع معرف مدونتي المعرف المعلم بالازرق
    http://feeds.feedburner.com/cnmu
    اما لو لم يكن لديك حساب او لا تعرف كيف تحصل على المعرف فراجع هذا الموضوع

    اضافة الأقسام

    كل ما عليك فعله تحرير آداة الأقسام الرئيسية
    واختيار الأقسام التي تريدها ان تعرض ويمكنك تحديد اى عدد تريد


    هناك قسم واحد فقط وهو القسم الاول يضاف بطريقة مختلفه فقط اضف أى 6 مواضيع تريد الى قسم قم بتسميته Hot
    وستظهر تلقائياً

    آخر أمر من امور الضبط وهو لون القالب

    ولتعديله ادخل الى صفحة القالب في لوحة التحكم
    ثم اختار تخصيص >> متقدم >> Main Color


    واختار اللون الذي تريد
    تم بحمد الله

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

    Slideshow
    التنسيق التقني من اكثر التنسيقات المطلوبة والمستخدمه في المدونات ودائما ما يطلبها المدونين ويسعون لتركيبها وهناك العديد من النسخ من هذا السلايدر لكن احببت ان اضيف نسخ ثابته لا تتوقف ولا تثقل المدونة لهذا قمت بجعل التنسيق على بنية اثنين من السلايدرات الممتازة والمجربة لضمان جودة وفعالية التنسيق عليها وتم جعل السلايدر متاح بنسختين
    الفرق بين النسختين
    الاولى العادية : وهي التي يمكنك اختيار الصور والروابط فيها بشكل يدوي
    وهذا يجعلك تتحكم بخصائصها بشكل أكبر
    الثانية تلقائية : تأتي بالمواضيع تلقائياً من المدونة من القسم الذي تريده
    لكن هذه تحتاج ان تكون مواضيع مدونتك الصور بها بحجم كبير وواضحه حتى تظهر بشكل جيد ولا تبدو مشوهه

    سنبدأ أولا مع النسخة العادية وهي مشتقة من هذا السلايدر


    تركيبها سهل أضف الكود التالي في آداة HTML/JavaScript



    التنسيق

    الرقم  620 هو عرض السلايدر عدله في المرتين
    الرقم 350 هو الإرتفاع عدله أيضاً في المرتين
    هذا #1980E6 هو لون السلايدر النشط

    الإستخدام

    استبدل i# برابط الصورة بالمقاس المناسب الذي اخترته لعرض وارتفاع السلايدر
    استبدل رمز # بالرابط الذي تريده ان يظهر عند الضغط على الصورة
    اما كلمة عنوان الموضوع استبدلها بعنوان مناسب
    انت لديك 7 سطور كل سطر يساوي صورة في السلايدر , يمكنك الحذف او يمكنك تكرار الكود البني لتحصل على صور جديدة
    في حالة الزيادة او النقصان شريط التنقل السفلي لن يكون مظهره مضبوط لذلك عدل الرقم 87
    ان زدت الصور قم بتقليل الرقم حتى تصغر مساحة ازرار التنقل وتستوعب الصور الجديدة دون تشوه
    اما ان قللت عدد الصور زد الرقم حتى تتسع الازرار وتكون بمظهر مناسب

    ثانياً النسخة التلقائية وهي مشتقة من هذا السلايدر

    لتركيبه نفذ نفس خطواط التركيب الموجوده في الموضوع الأصلي ما عدا الخطوة الأخيرة وهي كود التنسيق الذي يضاف فوق الوسم ]]>
    استبدله بالكود التالي
    body#layout #featured {display: none;}
    #featured {
      background:#222;
      height: 350px;
      padding: 20px 20px 28px;
      width: 620px;
    }
    .sliderwrapper .contentdiv{position: absolute;visibility: hidden;}
    .sliderPostPhoto img {
      float: right;
      height: 350px;
      margin: 0;
      width: 620px;
    }
    .featuredPost {
      background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFCZBm_To2lV0pC2MjpFMrZ3Me-z7wfjqeGEUqLqZ_VyyyUBfL3aZCaYHLB99Z_fv-dTcTk-4D_JnGJkI6NSnyL2xqtJvFu23HnSfEikd8J_yj24kokyJ88yp0g6qmS04_to9_1973KnQ/s28/backslide.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
      color: #e2e2e2;
      float: right;
      height: 130px;
      margin-top: 219px;
      overflow: hidden;
      padding: 0 10px;
      position: absolute;
      width: 600px;
    }
    .featuredPost h2 { margin: 0 0 5px;  padding: 0;}
    .featuredPost a {
      color: #fff;
      font: bold 18px tahoma;
      text-decoration: none;
    }
    .featuredPost a:hover {color:#bbb;}
    .featuredPost span { font: 15px serif;}
    .prev, .next {display: none;}
    .featuredPost p {
      font: 15px/1.4em tahoma;
      margin: 5px 0 0;
    }
    .pagination {
      margin-top: 350px;
      position: absolute;
      z-index: 99;
    }
    .pagination .toc {
      background:#ccc;
      display: block;
      float: right;
      font-size: 0;
      height: 9px;
      margin-left: 1px;
      width: 87px;
    }
    .pagination .toc.selected { background:#1980e6;}

    التنسيق

    هناك ثلاث أرقام باللون الأحمر هي عرض السلايدر يجب ان تزيدهم بنفس القدر ان غيرت العرض يعني ان زدت واحد 10 تزيد البقية مثله
    هناك أربع أرقام باللون الازرق هي ارتفاع السلايدر ايضاً تزيدها بنفس القدر
    الرقم 87 عندما تركب المراحل في الموضوع الاصلي ستجعل عدد المواضيع 7 لكي يكون السلايدر مضبوط لكن لو اردت الزيادة
    قم بتقليل الرقم 87 بحيث تظهر ازرار التنقل بشكل مناسب وتستوعب مكان المواضيع الزائدة دون تشوه
    اما لو اردت مواضيع أقل من 7 فزد الرقم 87 بحيث تتسع المساحة الخاصة بالأزرار ولا يوجد فراغ
    وهذا #1980e6 هو لون السلايد النشط
    واى سؤال او استفسار حول السلايدر أضفه في تعليق
    تحياتي

    المعلومات الأساسية للتدوينات اضافتها والتحكم بها

    Blogger-Post-Information
    لكل تدوينه معلومات أساسية مثل معلومات الكاتب وتاريخ النشر والتعليقات والأقسام أو التسميات لكن بعض القوالب لا تكون تلك المعلومات مضافة بها او تكون ناقصة او تحتاج تنسيق , وفي هذا الموضوع سنشرح اضافة تلك المعلومات وتنسيقها فتابع لنهاية الموضوع 

    أولا الأكواد

    اسم الكاتب












    تاريخ النشر









    الأقسام أو التسميات





    ,


    التعليقات









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

    التنسيق

    طبعا يمكن عمل كثير من التنسيقات لتلك الأكواد لكننا سنشرح اشهر تنسيق وهو اضافة ايقونة صغيرة بجانب اى من تلك الاجزاء
    كل ما عليك هو ان تضيف الكود التالي فوق الوسم ]]>
    .class {
      background-image: url("#");
      background-position: right 1px;
      background-repeat: no-repeat;
      padding-right: 20px;
      float:right;
    }
    استبدل المعرف class بمعرف الجزء الذي تريد تنسيق يمكنك تكرار الأمر ان كنت تريد وضع اكثر من كود
    رمز # استبدله برابط أيقونة ويمكنك ان تجد أيقونات كثيرة بالبحث في جوجل
    الكلمة right معناها ان تلك الأيقونة ستكون ناحية اليمين اما الرقم 1 ستكون الأيقونة مبتعده بنسبة 1 بيكسل من الأعلى يمكنك زيادته او حتى جعلها بالسالب -1  بحسب الأيقونة لديك وكيف سيكون مظهرها بجانب الكود
    الرقم 20 هو مدى بعد الكود من الأيقونة توضيح لو ستستخدم ايقونة بمقاس 16x16 معناه ان عرض تلك الأيقونة 16 بيكسل هنا لو لم نضع مسافة فراغ ستكون الكلمة مثلا لو اسم الكاتب سيكون ظاهر فوق الأيقونة وليس جانبها نحتاج لعمل فراغ حتى يكون بجانبها والرقم 20 هو هذا الفراغ يمكنك زيادته او انقاصه بحسب حجم الايقونة لاتي ستستخدمها
    الكلمة right تحدد اتجاه الاكواد مثلا لو نريد اضافة الأقسام واسم الكاتب ناحية اليمين سنستخدمها كما هي
    ومثلا لو اردنا التعليقات ناحية اليسار سنستخدم مع معرف التعليقات بدلا منها كلمة left
    وهذا مثال ناتج من تطبيق الدرس والتنسيق

    Author Label Comments

    وبالتوفيق

    شريط آخر الأخبار المتحرك مع الإعداد والتنسيق

    News Bar Blogger Widget
    طبعا لا تستغني المواقع الإخبارية او المواقع ذات النشر المكثف عن مثل هذا الشريط , الشريط يقوم بعرض عناوين آخر المواضيع بشكل متحرك ولافت للانظار مما يجعل الزائر يقبل على الضغط وزيارة الموضوع قبل ان ندخل في طرق التركيب والتنسيق يمكنك القاء نظرة على الشريط وتجربته من المعاينة التالية
    طريقة التركيب أضف الكود التالي داخل آداة HTML/JavaScript



    آخر الأخبار



    أهم الإعدادات

    استبدل http://cnmu.blogspot.com برابط مدونتك
    الرقم 80 هو سرعة الشريط كلما قل كلما كان اسرع كلما زاد اصبح بطئ
    ان اردت فتح الروابط في نفس الصفحة استبدل هذه الكلمة yes بهذه no
    هذا 10 هو عدد الموضوعات

    أهم التنسيقات

    هذا #fff لون خلفية الشريط البيضاء
    هذا #008EFA لون خلفية كلمة آخر الأخبار والتي يمكنك تغييرها هي الأخرى
    وهذا #fff هو لون خط كلمة آخر الأخبار
    الرابط الزهري هو صورة جديد يمكنك استبداله برابط صورة أخرى
    هذا 008EFA هو لون الروابط ملحوظة لا نضيف للون هنا رمز #
    هذا CD0317 هو لون الروابط عند تمرير الماوس وايضاً لا نضيف له الرمز #
    هذا tahoma هو نوع الخط يمكنك استبداله بخط آخر مخصص
    الرقم 14 هو حجم الخط الاول خاص بكلمة آخر الأخبار والثاني خاص بالروابط
    هذا 30 هو بعد الخط من الاعلى للكملة وهذا 28 للروابط

    هام : في حالة اردت عرض الأخبار من قسم معين

    استبدل كلمة default بهذه الكلمة default/-/# مع تعديل رمز الـ # بإسم القسم الذي تريد
    هذه هي اهم الإعدادات والتنسيقات وتجربه موفقة بإذن الله

    آداة مواضيع مقترحة مع أزرار المتابعة

    recommended post blogger widget
    حصرياً آداة مواضيع مقترحة مع ازرار المتابعة الإجتماعية تعتبر هذه الآداة هي الإصدار الثاني من آداة رسالة تنبيهية للإشتراك في المواقع الإجتماعية الآداة هي من اعدادى الخاص وتتميز بانها تجمع اكثر من آداة في آداة واحده فهي تجمع أدوات المتابعة في ابسط صورها واخفها Facebook Twitter Google Plus وايضاً تجمع آداة مواضيع مقترحة عشوائية تعرض على الزائر مع طبعا خاصية الإنزلاق وتم دمج زر الصعود لأعلى بالإضافة وذلك حتى لا يتعارض ان تم استخدام كل منها بمفرده ولهذا هي تعتبر خفيفة مقارنة بما تقدمه لكن طبعا الإصدار القديم أخف لكن هذا أقوى وأشمل يمكنك الإطلاع على الآداة بالتمرير للأسفل 
    تركيب الآداة أضف الكود التالي في آداة HTML/JavaScript




    التنسيق

    لجعل الآداة على اليسار استبدل right: 2px; بـ left: 2px;
    لتغيير لون خلفية الآداة استبدل هذا اللون #fff باللون الذي تريد
    الرقم 1 هو حجم لاإطار الخارجي للآداة 
    واللون #bbb هو لون الإطار
    وطبعا يمكنك تعديل العبارة نوصي بقراءة الموضوع التالي , ومتابعتنا

    ضبط ادوات المتابعة

    فيس بوك

    استبدل pagename بإسم رابط صفحتك على الفيس بوك
    مثال هذا رابط صفحة كن مدون
    https://www.facebook.com/cnmu.blogspot
    نأخذ فقط الجزء الاخير

    تويتر

    استبدل TUser باسم حسابك في تويتر

    جوجل بلس

    استبدل GPID برابط صفحتك على جوجل بلس
    مثال هذا رابط صفحة كن مدون
    https://plus.google.com/103493424512122750358
    نريد الرقم او المعرف الأخير
    تم بحمد الله