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

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

معاينة

يمكنك تركيب القائمة في آداة HTML/JavaScript

• تعديل


• 
  قائمة منسدلة
  
  
  
  • #/search/label/name">القسم
  
  
  • القسم
  
  
  • القسم
  
  
  • القسم
  
  
  • القسم
  
  
  
  


• تعديل


• تعديل


• 
  
  
  
  
  
  
  
   

التنسيق

هذا tahoma هو نوع الخط الإفتراضي للقائمة يمكنك تعديله
لتغير اللون الأزرق في القائمة ابحث عن اللون التالي #00a7fb وعدله بكود اللون الذي تريد ملاحظة ستجده متكرر عدة مرات
هذا #fff هو لون خلفية القائمة في حالة تعديله بلون غامق كالأسود مثلا ستعدل اللون التالي #2c2c2c وهو لون الروابط لكي تظهر
وهذا #e6e6e6 هو لون الإطار السفلي والرقم 1 هو حجمه
كما نرى القائمة ظاهر بالأعلى لو اردناها تظل ثابتة عند التمرير  نستبدل هذه الكلمة absolute  بهذه fixed
في حالة كانت القائمة تغطي جزء عام من المدونة في المنطقة العلوية يمكن تجنب هذا بإضافة الكود التالي فوق الوسم ]]>

body {margin-top: 50px !important;}

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

-bottom
position: absolute;
right: 0;
top: 0;

الإستخدام

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

قائمة منسدلة

• #/search/label/name">القسم


• القسم


• القسم


• القسم


• القسم

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

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

هذه اهم التنسيقات وأبسط شرح للإستخدام وبقليل من الخبرة يمكنك عمل الكثير من تلك القائمة

دمتم في امان الله

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

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

نبدأ بالنموذج الثابت

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

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

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

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

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

وبالتوفيق

 

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

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

الزر الأول

 

الكود

عدل cmudawin بإسم حسابك في المرتين المعلمتين بالاحمر

اما الرقم 200 هو عرض وارتفاع الزر هذا هو العرض المثالي لكن يمكنك تغييره مع تعديله في الاربع مرات

الزر الثاني

الكود

عدل cmudawin بإسم حسابك في المرتين المعلمتين بالاحمر

اما الرقم 236 هو عرض وارتفاع الزر هذا هو العرض المثالي لكن يمكنك تغييره مع تعديله في الاربع مرات
ولا تنسى ان تتابعنا على تويتر

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

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

معاينة تحميل

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

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

تقريبا كل شئ في هذا القالب يعمل بشكل تلقائي وسهل

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

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

لإضافة رابط اضف اسمه في مستطيل اسم الموقع الجديد

واضف رابطه تحته في مستطيل عنوان URL للموقع الجديد

ثم اضغط زر إضافة ارتباط

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

ثم الروابط التي تظهر في القائمة اجعل اسمها مسبوقاً بشرطه لأسفل كهذه _

يمكنك وضع الشرطة بالضغط على Shift + -

ثم تضع الرابط المنسدل تحت الرابط الأساسي للقائمة

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

ولتحريك الروابط استخدم الأسهم التي بجانب كل رابط ولحذف رابط اضغط كلمة Delete ولتحريره إضغط Edit

وهذا فديو توضيحي للامر

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

الازرار الإجتماعية : هي قائمة روابط قم بتحريرها واضف رابط صفحتك على الفيس او تويتر او جوجل بلس او يوتيوب

قائمة الإشتراك في البريد : قم بتحريرها ستجد مساحة لإضافة رابط اضف بها رابط فيد برنر وبه معرف حساب مدونتك عليه

مثال رابط فيد برنر مع معرف مدونتي المعرف المعلم بالازرق

http://feeds.feedburner.com/cnmu

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

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

كل ما عليك فعله تحرير آداة الأقسام الرئيسية

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

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

وستظهر تلقائياً

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

ولتعديله ادخل الى صفحة القالب في لوحة التحكم

ثم اختار تخصيص >> متقدم >> Main Color

واختار اللون الذي تريد

تم بحمد الله