مساحة إعلانية

السبت، 11 مايو، 2013

السبت، 11 مايو، 2013

طريقة تنسيق قائمة وسحابة التسميات

customize labels widget in blogger
من الإضافات الأساسية في مدونات بلوجر آداة التسميات هذه الآداة التي تعرض الأقسام الخاصة بالمدونات والتي تسهل عملية الوصول لكل قسم لكن الشكل الأساسي للآداة ليس جيدا وفي الغالب يكون شكله مشوه للقوالب نظرا لان القوالب كل يوم في تحسن والشكل الثابت لتلك الآداة لا يجاري هذا التحسن وبالتالي تكون الإضافة شكلها شاذ عن الشكل العام للقالب ولهذا في موضوعنا سنتعلم طريقة تنسيقها والآداة يتم عرضها بشكلين مختلفين الأول القائمة والثاني السحابة Cloud ولكل منهما تنسيق خاص لهذا سنشرح كل تنسيق بشكل منفرد لكن أولا هذه طريقة التبديل بين التنسيقين , قم بالدخول الى لوحة التخطيط في مدونتك ثم قم بعمل تحرير لآداة التسميات ثم اختر التنسيق الذي يعجبك كالتالي

Labels Edit

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

هذا هو الشكل بعد التنسيق

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

ثم فوق الوسم ]]></b:skin> أضف الكود التالي
#Label1 li {
float: right;
background:#fafafa url(https://lh4.googleusercontent.com/-Wia36bo2IjI/UOr3lcKA5mI/AAAAAAAAAAw/GudFMFe7xL8/s16/folder.png)no-repeat scroll 121px 9px;
padding: 5px 25px 7px 9px;
font-size: 12px;
margin: 0 4px 10px 0;
display: inline-block;
border: 1px solid #d7d7d7;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
color:#aeaeae;
width:108px;
}
#Label1 li a{color:#000;}
#Label1 li:hover { background:#ffffff url(https://lh4.googleusercontent.com/-Wia36bo2IjI/UOr3lcKA5mI/AAAAAAAAAAw/GudFMFe7xL8/s16/folder.png)no-repeat scroll 121px 9px;}

ولتنسيق الشكل غير التالي

هذا اللون هو لون الأزرار #fafafa
وهذا اللون هو لون الأزرار عند تمرير الماوس #ffffff
وهذا هو لون الإطار #d7d7d7
وهذا لون الخط  #aeaeae
 وهذا لون الخط عند تمرير الماوس #000
والرقم 5 هو درجة استدارة الزر قم بالزيادة أو الإنقاص حتى تصل للنتيجة التي ترضيك
الرابط المعلم بالأحمر هو رابط الأيقونة الصغيرة على الأزرار قم بتغيرها بأى رابط أيقونة أخرى تنسابك مع مراعاة أن يكون المقاس 16x16
في حالة أردت تعديل حجم الأزرار قم بزيادة الأرقام المعلمة بالأزرق بنفس النسبة ان زدت أحدها 10 زد الآخرين كذلك

ثانيا تنسيق السحابة 

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

Labels Cloud
 وهذا هو الكود
.label-size{
background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 );
margin:0 4px 7px 0;
padding: 2px 7px 2px 7px;
text-transform: uppercase;
border: solid 1px #777;
float:right;
text-decoration:none;
font-size:14px;
font-weight:bold;
box-shadow: 0 1px 2px #999;
border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;
text-align:center;
}
.label-size:hover {
background: #D1E0E5;
background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5);
background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);
}

طرقة تنسيق السحابة

هاذين اللونين هما الوان التدرج الخاص بأزرار التسميات #F0F0F0 , #DAD8D9
قم بتبديل كل لون بالمرات المتكرر بها
أما هاذين اللونين هما اوان التدرج عند مرور الماوس  #EEF3F6,#D1E0E5
 غيرها بنفس الطريقة
هذا اللون هو لون الإطار #777
والرقم 20 هو درجة استدارة الزر

تنسيق موفق والى اللقاء في دروس اخرى 
تحياتي

هناك 27 تعليقًا:

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

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      رفع الله قدرك أخي الحبيب بدر
      وشاكر لمرورك الرائع
      تحياتي لك

      حذف
  2. جميل اخي عمرو تنسيقات غاية في الروعة و الجمال

    ردحذف
    الردود
    1. مرورك أجمل أخي الحبيب سعيد
      دمت بكل ود

      حذف
  3. مشكور أخي عمرو على الإضافات المميزة

    ردحذف
    الردود
    1. حياك الله يا طيب
      وشكراً لمرورك

      حذف
  4. رائع يا عمرو باشا .. ربنا يوفقك يا رب
    انا ملاحظ انك مقدم طلب لأدسنس

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

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

    سؤال اخي عمرو من فضلك؟ كيف اقوم بتقسيم التسميات الى عمودين
    ادخل لمدونتي وشاهد بنفسك اخي عمرو

    http://lbidaya.blogspot.com/


    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حياك الله اخي الحبيب
      بالنسبة لتقسيم التسميات هي تنقسم تلقائيا لكن ما يجعلها لا تنقسم في مدونتك هو ان التمسات لديك كبيرة فلا يوجد مكان لقسمين بجانب بعضهما لكن يمكنك عمل التالي
      ابحث عن هذا الكود في قالبك واحذفه
      #Label1 ul li {
      float: right;
      width: 45%;
      }

      ثم قم بتصغير الخط في الكود الخاص بنا
      وهو الرقم 12 بجوار font-size
      ثم قم بتصغير كامل عن طريق تقليل الأرقام الزرقاء كما في الشرح حتى تضبط معك
      أو يمكنك زيادة نفس الأرقام وجعلها دون تقسيم وتكون التسمية عريضة اختر ما يتناسب معك
      وبالتوفيق

      حذف
  6. موضوع رائع شكرا جزيلا كن مدون
    ادمن عرب سوفت وير ( فريد )

    ردحذف
    الردود
    1. أهلاً ومرحبا أخي فريد
      سررت بمرورك أخي الكريم

      حذف
  7. السلام عليكم ورحمة الله وبركاته

    جزاك الله خير استاذي على الدرس

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

    رابط المدونة

    http://q8ok.blogspot.com/

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

      حذف
  8. السلام عليكم اخونا المحترم عمرو
    كنت ابحث عن تنسيق كهذا والحمدلله وجدتك تضح الشرح بارك الله فيك وفى جهدك المتميز
    عند البحث عن
    اشاهده هكذا ]]> يظهر لى فى سطر واحد
    هل الصحيح اضافة الكود بعد السطر بالكامل
    او اضافته ]]>هنا كما تفضلت فى شرحك ؟

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

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

      حذف
  9. تم التطبيق بنجاح
    http://mw-douaa.blogspot.com/
    جزاك الله خيرا

    ردحذف
  10. لم تنجح معي ما هو الحل , www.cwinz.blogspot.com/

    ردحذف
    الردود
    1. الأمر يتعلق بالقالب وتوافقه اما ان به تعديلات أخرى تحجب هذه التعديلات او تصميمه به مشكلة في التوافق مع التعديلات الحل الوحيد هو التعديل على القالب او تغييره

      حذف
    2. هل يمكنك ذالك أخي , سأكون جدا مسرور إن ثم ذالك

      حذف
    3. للأسف اخي الكريم أنا لا اقدم خدمة الدعم الفني نظراً لما تستهلكه من وقت لكن يمكنك اللجوء الى منديات الدعم الفني كمعهد خبراء بلوجر

      حذف
  11. أخي عمر لم تنجح معي لماذا

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

      حذف
  12. بارك الله فيكم أستاذنا االغالي
    والله قمة وأنت روعة تستحق المتابعة
    وأنت ذخر للمسلمين في العالم الإلكتروني

    ردحذف
    الردود
    1. وفيك بارك الله أخي الحبيب وانا خادم للإسلام وأهله وكل شئ هو فضل رب العالمين
      سررت بمرورك

      حذف
  13. لو سمحت دلوقتي انا ظاهر عندي انها علي شكل مربعات
    زي الي فصورة التدوينة وانا عايزها بطول سايد بار مثلك
    حاولت اضيف كود width وبرضو منجحتش اعمل اي ؟

    ردحذف
    الردود
    1. الـ width مضاف فعياً
      عدله فقط
      وذها مذكور في الشرح الرقم 108

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©