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

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
نريد الرقم او المعرف الأخير
تم بحمد الله

تفعيل واستخدام خاصية Colorbox في مدونات بلوجر

JQuery Colorbox
من الخصائص الممتعة في استخدامها والتي تعطي المواقع جاذبية هي خاصية colorbox هي خاصية تعمل على فتح الكثير من الاشياء في صندوق ضوئي Lightbox هذه الخاصية طبيعي مدمجة في بلوجر لعرض الصور لكنها ليست بقوة الإضافة الكاملة التي لا تعرض الصور فحسب بل فلاشات فديو مواقع والكثير وبالتالي الإضافة الكاملة متعددة الإستخدامات قد تكون حل وامر هام لكثير من المدونات لكن دائما ما يواجه البعض صعوبه في استخدام وتثبيت تلك الإضافة ولذلك سأحوال قدر الإمكان جعل الشرح سهل الإستيعاب وبدون الكثير من التفريعات يمكنك اولا معاينة بعض مما يمكن عمله بتلك الإضافة في الصفحة التالية
أولا تثبيت الإضافة عبر اضافة الكود التالي فوق الوسم
 


الكود الاحمر يمكنك ازالته ان كان لديك مكتبة جي كويري في القالب
لكن هناك خطوة في الإعدادات يجب عملها وهي اغلاق الخاصية المدمجة في بلوجر وذلك عبر كالتالي
  1. من الإعدادات
  2. نختار مشاركات وتعليقات
  3. ثم نحدد الخيار لا من جانب عرض الصور في العرض المبسط




 الآن ننتقل لمرحلة الإستخدام

تعتمد الإضافة على الروابط فكل ما تحتاج معرفته هو هاذين الكودين
"cnmu" href="#" title="XXXXX">Text
"cnmu" href="#" title="XXXXX">*" width="200" height="150"/>
السطر الأول هو لإضافة ما تريد في الخاصية داخل رابط كتابي
السطر الثاني هو ان اردت استخدام صورة وليس كتابة
شرح السطرين تقريبا متساوي مع اختلاف بسيط تابع معي
هذا "cnmu" سنسميه المعرف وسأريك طريقة تغيره بحسب الحالة التي تريدها سواء اردت فديو او صور او رابط
 هذا # ستستبدله بالرابط سواء كان فديو الخ
 اما هذا XXXXX ستستبدله بجمله توضيحة ستظهر في أسفل الصندوق
هذه Text الكلمة تستبدلها بما تريد وهي التي عند الضغط عليه سيفتح الصندوق الضوئي
توازيها * علامة في السطر الثاني وهي تستبدل برابط الصورة التي عند الضغط عليها يفتح الصندوق
اما الرقم 200 هو عرض الصور والرقم 150 هو ارتفاعها
الآن سننتقل للمعرف كل ما عليك استبدال المعرف بالمعرف الذي تريد استخدامه كما في الجدول التالي
الفعل او الناتجالمعرف
صور مترابطةrel="images"
سلايد شوrel="slideshow"
صور بمقاس ثابتrel="imagessamesize"
فديوclass="cbvideo"
آى فريم صغيرclass="cbiframe"
آى فريم كبيرclass="bcbiframe"
مثال ساطبقه لإضافة فديو يفتح بالخاصية شاهد التعديلات التي حدثت على الكود
class="cbvideo" href="http://www.youtube.com/embed/0ixZpsNiJl0" title="سورة التكوير بصوت الشيخ ماهر المعيقلي">اضغط هنا لرؤية الفديو


ملاحظة : بخصوص روابط الفديو يجب ان تراعي ان يكون الرابط هو رابط مباشر للمشغل أو ما يسمى embed
كل موقع سيكون في اسفل الفديو طريقة وضعه في مشغل كاليوتيوب مثلا في خانة المشاركة أو Share ستجد جزء خاص لوضع الفديو في موقعك نحتاج فط منه الرابط وحتى لا تدخل في كثير من الإشكاليات
هذه روابط لاهم مواقع الفديو يوتيوب ودايلي موشن وفيمو
http://www.youtube.com/embed/VID
http://www.dailymotion.com/embed/video/VID
http://player.vimeo.com/video/VID
كل ما عليك هو ان تستبدل VID برقم الفديو في الموقع كما فعلت أنا ووضعت هذا الرقم 0ixZpsNiJl0
وستجد الرقم عادة في عنوان المتصفح في صفحة الفديو
ملاحظة أخرى  : بالنسبة للصور العادية انت لا تحتاج اضافة اى معرفات او اى شئ هي ستعمل تلقائياً
اما بالنسبة للصورة التي في السلايد شو او بمقاس ثابت او مترابطة كل ما عليك ان تطبق عليها نفس المعرف
يعني مثلا لو ستصنع 20 صورة سلايد شو يجب ان يكون لديهم جميعا هذا المعرف rel="slideshow"
ان كانت واحده بدونه فلن يتم احتسابها ولعمل عشرين صورة هو ان تكرر عملية الرابط 20 مرة أو 10 او اى عدد تحب نفس الشئ مع باقي الأجزاء كلما اردت رابط اضافي كرر العملية
اتمنى ان يكون الشرح واضح واستخدام موفق تحياتي