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

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

كل ما عليك فعله أن تدخل الى تحرير قالبك ثم تضغط على توسيع عناصر الستايل بالضغط على السهم المخصص لذلك
ثم فوق الوسم ]]></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 زد الآخرين كذلك
ثانيا تنسيق السحابة
ونفس الطريقة ستضيف الكود التالي كما أضفت الأول او أضفه تحته إن كنت تريد استخدامهما مع بعض
هذا معاينة للنتيجة اولا

وهذا هو الكود
.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 هو درجة استدارة الزر
تنسيق موفق والى اللقاء في دروس اخرى
تحياتي
السلام عليكم ورحمة الله وبركاته
ردحذفشرح رائع واضافة مميزة جدا
وما أعجبني أكثر إمكانية التبديل بينهما
والتعديل على الألوان فعلااضافة احترافية ابداعية
من شخص محترف مبدع أشكرك جزيل الشكر أخي الغالي عمرو
جزاك الله خير الجزاء ووفقك لما يحب ويرضى
دمت في حمى الرحمن
وعليكم السلام ورحمة الله وبركاته
حذفرفع الله قدرك أخي الحبيب بدر
وشاكر لمرورك الرائع
تحياتي لك
جميل اخي عمرو تنسيقات غاية في الروعة و الجمال
ردحذفمرورك أجمل أخي الحبيب سعيد
حذفدمت بكل ود
مشكور أخي عمرو على الإضافات المميزة
ردحذفحياك الله يا طيب
حذفوشكراً لمرورك
رائع يا عمرو باشا .. ربنا يوفقك يا رب
ردحذفانا ملاحظ انك مقدم طلب لأدسنس
أعزك الله أخي الكريم
حذفونعم تمام انا مقدم طلب لادسنس وهذا إكمالا للخطة الأساسية للمدونة
وسعدت بمرورك العطر اخي العزيز
السلام عليكم ورحمة الله وبركاته
ردحذفحياك الله أخي الفاضل عمرو
بارك الله فيك وجزاك الله خيراً
وأسأله سبحانه أن يرزقك العلم النافع والعمل الطيب
سؤال اخي عمرو من فضلك؟ كيف اقوم بتقسيم التسميات الى عمودين
ادخل لمدونتي وشاهد بنفسك اخي عمرو
http://lbidaya.blogspot.com/
وعليكم السلام ورحمة الله وبركاته
حذفحياك الله اخي الحبيب
بالنسبة لتقسيم التسميات هي تنقسم تلقائيا لكن ما يجعلها لا تنقسم في مدونتك هو ان التمسات لديك كبيرة فلا يوجد مكان لقسمين بجانب بعضهما لكن يمكنك عمل التالي
ابحث عن هذا الكود في قالبك واحذفه
#Label1 ul li {
float: right;
width: 45%;
}
ثم قم بتصغير الخط في الكود الخاص بنا
وهو الرقم 12 بجوار font-size
ثم قم بتصغير كامل عن طريق تقليل الأرقام الزرقاء كما في الشرح حتى تضبط معك
أو يمكنك زيادة نفس الأرقام وجعلها دون تقسيم وتكون التسمية عريضة اختر ما يتناسب معك
وبالتوفيق
موضوع رائع شكرا جزيلا كن مدون
ردحذفادمن عرب سوفت وير ( فريد )
أهلاً ومرحبا أخي فريد
حذفسررت بمرورك أخي الكريم
السلام عليكم ورحمة الله وبركاته
ردحذفجزاك الله خير استاذي على الدرس
هل بالامكان مساعدتي بتنسيق السحابة والتسميات خصيصا لمدونتي
رابط المدونة
http://q8ok.blogspot.com/
وعليكم السلام ورحمة الله وبركاته
حذفوجزاك الله بالمثل أخي الكريم
أنا طرحت بالموضوع طريقة التنسيق لو اتبعتها جيدا سيتم التنسيق بشكل مضبوط
لكن ملحوظة مدونتك بالفعل يوجد بها تنسيق للتسميات يجب ان تزيله قبل فعل ذلك
وأعتذر أخي الفاضل على عدم القدرة على تخصيص المساعدة نظرا لأنها ستاخذ وقت
فهي تحتاج اطلاع على القالب والعمل عليه لحين الضبط وقد يطلب الأمر اكثر من شخص لذا لا أستطيع تنفيذه لاحد
حتى لا أضطر لتكراره مع آخرين فهذا منهجي في المدونة حرصا على استغلال الوقت في تقديم مواضيع
لان التعديلات تأخذ أوقات كبيرة ارجو تفهم الأمر
وتشرفت كثيراً بمرورك العطر
وتحياتي لك
السلام عليكم اخونا المحترم عمرو
ردحذفكنت ابحث عن تنسيق كهذا والحمدلله وجدتك تضح الشرح بارك الله فيك وفى جهدك المتميز
عند البحث عن
اشاهده هكذا ]]> يظهر لى فى سطر واحد
هل الصحيح اضافة الكود بعد السطر بالكامل
او اضافته ]]>هنا كما تفضلت فى شرحك ؟
اسأل لاننى صادفت نفس الشىء فى شرح ترقيم الصفحات ولكننى اضفته فوق كامل السطر ]]>
والاحظ ان الصفحة الرئيسية يظهر بها موضوع واحد رغم اختيارى لخمس مواضيع تظهر فى اعدادت رسائل المدونة
هل هناك خطأ ؟ ارجو توضيح الخطأ من الصح
عفوا لإزعاجك اخى
وعليكم السلام ورحمة الله وبركاته
حذفأضفه فوق السطر كله أخي محمود
بالنسبة لترقيم الصفحات ربما يكون السبب اضافة اقرأ المزيد استخدم اقرا المزيد المدمجة مع بلوجر
راجع هذا الموضوع لتوضيح أكثر من هنــا
ولا يوجد ازعاج ولا شئ
وشكرا لمرورك
تم التطبيق بنجاح
ردحذفhttp://mw-douaa.blogspot.com/
جزاك الله خيرا
لم تنجح معي ما هو الحل , www.cwinz.blogspot.com/
ردحذفالأمر يتعلق بالقالب وتوافقه اما ان به تعديلات أخرى تحجب هذه التعديلات او تصميمه به مشكلة في التوافق مع التعديلات الحل الوحيد هو التعديل على القالب او تغييره
حذفهل يمكنك ذالك أخي , سأكون جدا مسرور إن ثم ذالك
حذفللأسف اخي الكريم أنا لا اقدم خدمة الدعم الفني نظراً لما تستهلكه من وقت لكن يمكنك اللجوء الى منديات الدعم الفني كمعهد خبراء بلوجر
حذفأخي عمر لم تنجح معي لماذا
ردحذفأخي نزار هل ركبت الكود الأول ام الثاني؟ القائمة ام السحابة لأن الإضافة في مدونتك على وضع القائمة ولو ركبت السحابة لن يظهر شئ إلا بتغيير الإعدادات وايضا تأكد من نسخ الكود كاملا فلو تجاوزت عند النسخ النقطة التي في بداية الكود لن يظهر
حذفبارك الله فيكم أستاذنا االغالي
ردحذفوالله قمة وأنت روعة تستحق المتابعة
وأنت ذخر للمسلمين في العالم الإلكتروني
وفيك بارك الله أخي الحبيب وانا خادم للإسلام وأهله وكل شئ هو فضل رب العالمين
حذفسررت بمرورك
لو سمحت دلوقتي انا ظاهر عندي انها علي شكل مربعات
ردحذفزي الي فصورة التدوينة وانا عايزها بطول سايد بار مثلك
حاولت اضيف كود width وبرضو منجحتش اعمل اي ؟
الـ width مضاف فعياً
حذفعدله فقط
وذها مذكور في الشرح الرقم 108