فِي هذَا المقَال على موقع المتميزون نُوفِّر لَكم أشكال تسميات رائعة وتأثيرات جميلة و جذابة, لِأنَّ التَّسْميات مُهمَّة جِدًّا فِي المدوَّنات وخاصَّة الَّتي تنْقسم إِلى عِدَّة أَقْسَامٍ مُخْتلِفة فهي تُساعد الزَّائر فِي التَّنَقُّل بيْن الأقْسام والْمقالات والْوصول إِلى مَا يُريد بِأسْرع وقْت مُمْكنٍ , لِذلك يجب أن يكون مظْهر الأقْسام جميل وملْفت لِلنَّضر وليْس أن يكون مخْبأ بيْن صفحات المدوَّنة.
أُشارك معكم فِي هذَا المقَال عِدَّة أَشْكَالٍ مُخْتلِفة يُمْكنك الاسْتفادة مِنْهَا وترْكيبهَا على قالب مُدوَّنة بلوجر الخاصَّة بِك بِكلِّ سُهولة وبدون أيِّ تَعْقِيدٍ , تابع لِشرْح لِتتمَكَّن مِن إِضافة أشكال تسميات رائعة وتأْثيرات جميلة وجذَّابة بِدون أيِّ مشاكل داخل مُدوَّنة بُلوجر.
ملاحظة:
قُم بِعمل نُسْخة اِحْتياطيَّة مِن القالب لِتتمَكَّن مِن إِسْتعدات المظْهر القدِيم فِي حال حُدوث أيِّ مُشْكلة , ويمْكِنك عمل النُّسْخة الاحْتياطيَّة عن طريق الدُّخول إِلى المظْهر ومن ثمَّ النَّقْر على السَّهْم الَّذي بِجانب كلمة تَخْصِيصِ والنَّقْر على الاحْتفاظ بِنسْخة اِحْتياطيَّة .
طريقة تركيب إضافة أشكال تسميات على قالب بلوجر
الآن سوْف ننْتقل إِلى الشَّرْح لِترْكِيب المظْهر الَّذي اِخْترْته مِن المظاهر الَّتي فِي الأسْفل في مقال أشكال تسميات وتصنيفات.
- قُم بِالدُّخول إِلى مِنصَّة بُلوجر ومن ثمَّ الذَّهَاب إِلى المظْهر وأحْتر تَعْدِيلِ html .
- سوْف تُظْهر لَك أَكْوَادُ قالب بُلوجر الَّذي تسْتخْدمه.
- قُم بِالْبَحْث عن الوسْم
]]></b:skin> - قُم بِلصْق كُود الشَّكْل الَّذي قُمْتُ بِاخْتياره فوْق الوسْم الَّذي بحثتْ عنْهَا وقم بِالنَّقْر على حِفْظ .
ولَّاكنَّ علي التَّنْويه لِأمْر مُهمٍّ جِدًّا , إِذَا كان قالبك يحْتوي على التَّسْميات فلَا داعي لِإضافة هذه الأكْواد داخل مُدوَّنَتك أمَّا إِذَا لَم يحْتوي عليْهَا فقم بِتطْبِيق الشَّرْح فِي الأعْلى ولَا تنْسى وضْع التَّسْميات فِي التَّنْسيق عن طريق إِضافة أداة جديدة.
4 أشكال تسميات رائعة
الشكل 1
.Label a{ background: rgb(0,100,180); background: -moz-linear-gradient(top, rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1))); background: -webkit-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: -o-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: -ms-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); background: linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 ); display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); } .Label a:hover{color:#000 !important; background:#123d60;}
الشكل 2
.Label a{float:left;padding:5px 8px;margin:2px 2px 0px 0;background-color:#1295C9;color:white;font-size:14px;text-decoration:none;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;} .Label a:hover{background-color:#303030;}
الشكل 3 للتسميات
/*--- MBL Custom Label Cloud With CSS3 --- */ .Label a{ padding-left:20px; background:#000; padding:0 20px; color:#fff!important; border-radius:100px; -moz-border-radius:100px; height:32px; line-height:32px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#ff0; }
الشكل رقم 4 الخاص في التصنيفات
/*-----Custom Labels Cloud widget by http://rydnet.blogspot.com/----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #6BB5FF; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }
فِي نِهاية مقال أشكال تسميات رائعة وتأثيرات جميلة و جذابة أو أشكال تصنيفات أودُّ أن أقوم بِدعْوَتك لِمشاهدة المزِيد مِن الإضافات الرَّائعة فِي قِسْم بُلوجر على موْقع المتميِّزون , أَتَمَنَّى أن يكون الشَّرْح قد نال على إِعْجابكم والسَّلام عليْكم ورحْمة اللَّه تَعَالَى وبركاته.
المصدر : مواقع إلكترونية
