الاثنين، 20 يوليو 2015
الرئيسية
إضافات بلوجر
دروس
Blogger Widget
كيفية إنشاء التسميات و عرضها بتنسيقي السحابة و القائمة
0
التعليقات
الكثير من المدونات تحتاج إلى
إنشاء أقسام لإدراج الموضوعات المختلفة تحتها حتى يسهل على الزائر الكريم الوصول
إلى ما يبحث عنه و خصوصاً في المدونات ذات المواضيع الكثيرة متشعبة التصنيف. و
للقيام بهذه المهمة على أتم وجه أضافت بلوجر إضافة " التسميات "
أو " Labels
" لإدراج موضوعات مدونتك تحت أقسام أو تسميات عدة تقوم أنت باختيار عناوينها
حسبما يروق لك.
كنا قد تحدثنا في وقت سابق عن
كيفية إنشاء تسمية جديدة أو اختيار تسمية تم إنشاؤها في وقت سابق لإدراج موضوع
معين تحتها٬ ستجد هذا الموضوع مذكوراً باختصار في تدوينة سابقة بعنوان " داخل صندوق كتابة الرسائل في بلوجر " يمكنك الاطلاع عليها.
بالنسبة للتسميات يتم عرضها
في بلوجر بطريقتين : السحابة و القائمة و لكن قد لا تعجبك الإضافة
الأساسية لبلوجر٬ لذلك سنعرض بإذن الله في تدوينتنا اليوم تنسيقين لطريقتي العرض
اللتين ذكرناهما اختر منهما ما تحب و ما يناسب مدونتك.
هيا بنا إلى الجانب العملي :
نستعين بالله أولاً قبل كل
شئ.
1-
أولاً لابد و أن تكون موضوعات
مدونتك مدرجة فعلياً تحت تسميات. إن لم يكن٬ قم بتسمية أقسام مدونتك و أدرج
موضوعاتك تحتها كما ذكرنا بالأعلى و ذلك بالاستعانة بالله أولاً ثم بالتدوينة
بعنوان : داخل صندوق كتابة الرسائل في بلوجر.
2-
بعد ذلك قم باختيار طريقة عرض
التسميات إما القائمة و إما السحابة كما ذكرنا و ذلك بإضافة أداة " التسميات
" من داخل " التخطيط " من داخل لوحة تحكم بلوجر الخاصة
بمدونتك - كما بالصورة رقم " 1 ".
 |
| صورة رقم " 1 " |
3-
قم بالدخول إلى لوحة تحكم
بلوجر الخاصة بمدونتك.
4-
قم بالبحث عن الوسم التالي :
]]></b:skin>
5-
قم بإضافة أحد
الكودين التاليين فوق الوسم السابق حيث أن الكود الأول يخص عرض " السحابة " و الثاني
يخص عرض " القائمة ".
أولاً : كود العرض بطريقة " السحابة " :
.label-size a{
background: #F3F7FF;
margin: 0 4px 7px 0;
padding: 4px 7px 4px 7px;
text-transform: Capitalize;
border: solid 1px #5A7997;
float:right;
text-decoration:none;
font-size:13px;
font-weight:normal;
border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
text-align:center;
color: #000;
}
.label-size a:hover {
color: #FFF;
background: #000;
}
مع مراعاة الآتي :
- " #F3F7FF " : عبارة عن كود لون خلفية أزرار التسميات. قم بتغييره
بما يناسبك.
- " #5A7997 " : عبارة عن كود لون إطار أزرار التسميات . قم بتغييره
بما يناسبك.
- " 13px "
: عبارة عن حجم خط التسميات. قم بتغييره بما يناسبك.
- " 20px "
: عبارة عن درجة استدارة زر التسميات وستجده مكرراً ثلاث مرات. قم بتغييره
بما يناسبك.
- " center " : تعني أن
الكتابة في مركز الزر. قم باستبداله بـ " right "
أو " left " إذا أردت الكتابة على اليمين أو اليسار على الترتيب.
- " color: #000 " : عبارة عن
كود لون خط التسميات. قم بتغييره بما يناسبك.
- " color: #fff " : عبارة عن
كود لون خط التسميات عند المرور على الزر بالماوس. قم بتغييره بما يناسبك.
- " background: #000 " : عبارة عن
كود لون خلفية الزر عند المرور عليه بالماوس. قم بتغييره بما يناسبك.
و يكون شكل التسميات كما بالصورة :
ثانياً : كود العرض بطريقة " القائمة " :
#Label1 li {
background: #F3F7FF;
padding: 8px 3px;
margin: 0 4px 8px 0;
font-size: 13px;
text-align: center;
display: inline-block;
float: center;
width: 132px;
border: 1px solid #5A7997;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#Label1 li a{
color: #000;
}
#Label1 li:hover {
background: #fff;
}
#Label1 li a:hover {
color: #1455c0;
}
مع
مراعاة الآتي :
- " #F3F7FF " : عبارة عن كود لون خلفية أزرار التسميات. قم بتغييره
بما يناسبك.
- " 13px "
: عبارة عن حجم خط التسميات. قم بتغييره بما يناسبك.
- " center " : تعني أن
الكتابة في مركز الزر. قم باستبداله بـ " right "
أو " left " إذا أردت الكتابة على اليمين أو اليسار على الترتيب.
- " 132px "
: عبارة عن عرض زر التسميات. قم بتغييره بما يناسبك.
- " #5A7997 " : عبارة عن كود لون إطار أزرار التسميات . قم بتغييره
بما يناسبك.
- " 5px "
: عبارة عن درجة استدارة زر التسميات وستجده مكرراً ثلاث مرات. قم بتغييره
بما يناسبك.
- " color: #000 " : عبارة عن
كود لون خط التسميات. قم بتغييره بما يناسبك.
- " background: #fff " : عبارة عن
كود لون خلفية الزر عند المرور عليه بالماوس. قم بتغييره بما يناسبك.
- " color: #1455c0 " : عبارة عن
كود لون خط التسميات عند المرور على الزر بالماوس. قم بتغييره بما يناسبك.
و يكون شكل التسميات كما بالصورة :
و إذا أشكل عليك شئ فلا تتردد في السؤال عبر
التعليقات الهادفة.
و انتظرونا في
التدوينة القادمة بإذن الله تعالى
الاشتراك في:
تعليقات الرسالة (Atom)
اشترك في خدمة البريد ليصلك جديدنا
إرسال تعليق
كم يسعدنا تفاعلكم معنا بتعليقاتكم الهادفة٬ فهي تساعد على إثراء الحوار بالمزيد من الإفادة للجميع و أنا أولكم. لكن يرجى من الجميع مراعاة الآداب العامة و القيم الإسلامية و عدم نشر روابط للإشهار حتى يتم نشر التعليق. كما يمكنكم استخدام ركن الاستفسارات للسؤال عن شئ خارج الموضوع كما يمكنك إضافة كود داخل التعليق بعد تحويله بـمحول الأكواد .