27‏/07‏/2015

إضافة التسميات من أهم أساسيات بلوجر لكونها تحدد نوع التدوينة وفي أي تصنيف يتجه محتوى التدوينة 📌 طبعا فهي متوفرة بالتخطيط بقسم الأدوات ولا يكون لها شكل جميل 🎃 إلا بإضافته للقالب ثمة العديد منها وسأتطرق لأربعة أشكال منها في هذه التدوينة، بسيطة، ذات ألوان متعددة، ذات ترقيم، وتناسب كافة القوالب فلنتابع طريقة تركيبها ويبقى لكم الإختيار في الشكل 🎨

شرح  طريقة التركيب
1 . توجه لقالب >> تحرير 
2.  ابحث عن ]]></b:skin> ضع الستايل فوقه أو ضعه بين <style>   </style> فوق </head>


/* CSS label S1 Ar1web.com */
.label-size {display: inline-block;}
.label-size a {color: #FFF;}
.label-count {color: #E4E4E4;}
.label-size {position:relative;text-transform:none;text-decoration:none;font-size:13px;font-family:Electrolize,ge_ss_threeregular;color:#fff!important;}
.label-size a {color:#fff!important;font-weight:400;padding: 3px 5px;font-family: cursive;
margin:0 0 1px 1px;float:right;display:block;transition: all 0.4s ease-in-out;}.label-size-1 a {background:#1abc9c;}.label-size-1 a:hover {background:#16a085;}.label-size-2 a {background:#3498db;}.label-size-2 a:hover {background:#2980b9;}.label-size-3 a {background:#FF8032;}.label-size-3 a:hover {background:#E87026}.label-size-4 a {background:#9b59b6;}.label-size-4 a:hover {background:#8e44ad}.label-size-5 a {background:#e74c3c;}.label-size-5 a:hover {background:#c0392b}.label-size-6 a {background:#E24FB3;}.label-size-6 a:hover {background:#CE3D9F}.label-size:hover{background:none;}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5,.label-size-6{font-size:100%;}

/* CSS label S2 Ar1web.com */
.sidebar .label-size {position :relative;text-transform:none;text-decoration:none;font-size:12px;}.sidebar .label-size a {color:#525f6a;font-weight:400;padding:10px 12px; margin:0 0 2px 2px;float :right;display :block;border:3px solid #F9F9F9;transition: all 0.4s ease-in-out;font-family: cursive;}.sidebar .label-size-1 a {box-shadow:inset 2px 0 0 0 #1abc9c;opacity:0.8;}.sidebar .label-size-1 a:hover {box-shadow:inset 100px 0 0 0 #1abc9c;color:#fff!important;opacity:1;}.sidebar .label-size-2 a {box-shadow:inset 2px 0 0 0 #3498db;opacity:0.8;}.sidebar .label-size-2 a:hover {box-shadow:inset 100px 0 0 0 #2980b9;color:#fff!important;opacity:1;}.sidebar .label-size-3 a {box-shadow:inset 2px 0 0 0 #2ecc71;opacity:0.8;}.sidebar .label-size-3 a:hover {box-shadow:inset 100px 0 0 0 #27ae60;color:#fff!important;opacity:1;}.sidebar .label-size-4 a {box-shadow:inset 2px 0 0 0 #9b59b6;opacity:0.8;}.sidebar .label-size-4 a:hover {box-shadow:inset 100px 0 0 0 #8e44ad;color:#fff!important;opacity:1;}    .sidebar .label-size-5 a {box-shadow:inset 2px 0 0 0 #e74c3c;opacity:0.8;}.sidebar .label-size-5 a:hover {box-shadow:inset 100px 0 0 0 #c0392b;color:#fff!important;opacity:1;}.sidebar .label-size:hover{background:none;}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;}.cloud-label-widget-content{text-align:right}.label-size{display :block;float :right;margin:0 0 2px 2px;color:#fff;transition:all 0.4s ease-in-out;}


/* CSS label S3 Ar1web.com */
.cloud-label-widget-content{text-align:right}
.label-size{display:block;float:right;margin:0 5px 2px 2px;color:#fff;transition:all 0.4s ease-in-out;}
.cloud-label-widget-content {text-align: right;}
.label-size {display: block;float: right;margin:1px 5px 5px 4px;color: #fff;font-size: 11px;text-transform: uppercase;font-family:Electrolize,ge_ss_threeregular;}
.label-size:nth-child(1):hover,.label-size:nth-child(2):hover,.label-size:nth-child(3):hover,.label-size:nth-child(4):hover,.label-size:nth-child(5):hover,.label-size:nth-child(6):hover,.label-size:nth-child(7):hover,.label-size:nth-child(8):hover,.label-size:nth-child(9):hover,.label-size:nth-child(10):hover,.label-size:nth-child(11):hover,.label-size:nth-child(12):hover,.label-size:nth-child(13):hover,.label-size:nth-child(14):hover,.label-size:nth-child(15):hover,.label-size:nth-child(16):hover,.label-size:nth-child(17):hover,.label-size:nth-child(18):hover,.label-size:nth-child(19):hover,.label-size:nth-child(20):hover{background:#444}
.label-size:nth-child(1) {background: #FF4444;}.label-size:nth-child(2) { background: #33B5E5; }.label-size:nth-child(3) { background: #99CC00; }.label-size:nth-child(4) { background: #FF8800; }.label-size:nth-child(5) { background: #AAAAAA; }.label-size:nth-child(6) { background: #AC6AF4; }.label-size:nth-child(7) { background: #555; }.label-size:nth-child(8) { background: #f2a261; }.label-size:nth-child(9) { background: #F4BB55; }.label-size:nth-child(10) { background: #4571C0; }.label-size:nth-child(11) { background: #99cc33; }.label-size:nth-child(12) { background: #EC69DB; }.label-size:nth-child(13) { background: #40dece; }.label-size:nth-child(14) { background: #ff6347; }.label-size:nth-child(15) { background: #f0e68d; }.label-size:nth-child(16) { background: #7fffd2; }.label-size:nth-child(17) { background: #7a68ed; }.label-size:nth-child(18) { background: #ff1491; }.label-size:nth-child(19) { background: #698c23; }.label-size:nth-child(20) { background: #00ff00; }.label-size a, .label-size span { display: inline-block; color: #fff !important; padding: 4px 10px; font-weight: bold; }.label-count { white-space: nowrap; padding-left: 3px; margin-right: -3px; background: #444; color: #fff;}

/* CSS label S4 Ar1web.com */
.list-label-widget-content ul li {list-style:none;padding:0;overflow: hidden;position: relative;}.list-label-widget-content ul {padding:0}.list-label-widget-content ul li a {display: block;padding: 7px 5px;color: #777;border-bottom: 1px dashed #EFEBEB;font-size: 13px;font-family:cursive;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;}.list-label-widget-content ul li a:hover {background-color:#ea3452;color:#FFF!important;text-decoration:none;padding-right:15px}.list-label-widget-content ul li a:before {content:"\f07c";display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.list-label-widget-content ul li span {font-weight: 400;position: absolute;top: 6px;left: 6px;}.list-label-widget-content ul li:hover span {color: #FFF;}.cloud-label-widget-content {margin-top:20px}.cloud-label-widget-content span {display:inline-block;font-size:100%!important;min-height:30px;line-height:2em;margin-bottom:5px}.cloud-label-widget-content span a {background-color:#f0f0f0;color:#111;padding:5px 15px}.cloud-label-widget-content span a:hover {background-color:#777777;color:#fff;text-decoration:none}.list-label-widget-content ul li a:before {margin-left:10px}.cloud-label-widget-content span {float:right;margin:0 0 8px 3px}

لتظهر التسميات بالشكل 👌 المطلوب توجه إلى التخطيط وحرر أداة التسميات وإختر الآتي على حسب كل ستايل:
الستايل الأول و الثاني : عرض "سحابة"
الستايل الثالث : عرض "سحابة" وتفعيل "عرض عدد المشاركات لكل تصنيف"
الستايل الرابع : عرض "القائمة" وتفعيل "عرض عدد المشاركات لكل تصنيف"
إضافة التسميات من أهم أساسيات بلوجر لكونها تحدد نوع التدوينة وفي أي تصنيف يتجه محتوى التدوينة 📌 طبعا فهي متوفرة بالتخطيط بقسم الأدوات ولا يكون لها شكل جميل 🎃 إلا بإضافته للقالب ثمة العديد منها وسأتطرق لأربعة أشكال منها في هذه التدوينة، بسيطة، ذات ألوان متعددة، ذات ترقيم، وتناسب كافة القوالب فلنتابع طريقة تركيبها ويبقى لكم الإختيار في الشكل 🎨

شرح  طريقة التركيب
1 . توجه لقالب >> تحرير 
2.  ابحث عن ]]></b:skin> ضع الستايل فوقه أو ضعه بين <style>   </style> فوق </head>


/* CSS label S1 Ar1web.com */
.label-size {display: inline-block;}
.label-size a {color: #FFF;}
.label-count {color: #E4E4E4;}
.label-size {position:relative;text-transform:none;text-decoration:none;font-size:13px;font-family:Electrolize,ge_ss_threeregular;color:#fff!important;}
.label-size a {color:#fff!important;font-weight:400;padding: 3px 5px;font-family: cursive;
margin:0 0 1px 1px;float:right;display:block;transition: all 0.4s ease-in-out;}.label-size-1 a {background:#1abc9c;}.label-size-1 a:hover {background:#16a085;}.label-size-2 a {background:#3498db;}.label-size-2 a:hover {background:#2980b9;}.label-size-3 a {background:#FF8032;}.label-size-3 a:hover {background:#E87026}.label-size-4 a {background:#9b59b6;}.label-size-4 a:hover {background:#8e44ad}.label-size-5 a {background:#e74c3c;}.label-size-5 a:hover {background:#c0392b}.label-size-6 a {background:#E24FB3;}.label-size-6 a:hover {background:#CE3D9F}.label-size:hover{background:none;}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5,.label-size-6{font-size:100%;}

/* CSS label S2 Ar1web.com */
.sidebar .label-size {position :relative;text-transform:none;text-decoration:none;font-size:12px;}.sidebar .label-size a {color:#525f6a;font-weight:400;padding:10px 12px; margin:0 0 2px 2px;float :right;display :block;border:3px solid #F9F9F9;transition: all 0.4s ease-in-out;font-family: cursive;}.sidebar .label-size-1 a {box-shadow:inset 2px 0 0 0 #1abc9c;opacity:0.8;}.sidebar .label-size-1 a:hover {box-shadow:inset 100px 0 0 0 #1abc9c;color:#fff!important;opacity:1;}.sidebar .label-size-2 a {box-shadow:inset 2px 0 0 0 #3498db;opacity:0.8;}.sidebar .label-size-2 a:hover {box-shadow:inset 100px 0 0 0 #2980b9;color:#fff!important;opacity:1;}.sidebar .label-size-3 a {box-shadow:inset 2px 0 0 0 #2ecc71;opacity:0.8;}.sidebar .label-size-3 a:hover {box-shadow:inset 100px 0 0 0 #27ae60;color:#fff!important;opacity:1;}.sidebar .label-size-4 a {box-shadow:inset 2px 0 0 0 #9b59b6;opacity:0.8;}.sidebar .label-size-4 a:hover {box-shadow:inset 100px 0 0 0 #8e44ad;color:#fff!important;opacity:1;}    .sidebar .label-size-5 a {box-shadow:inset 2px 0 0 0 #e74c3c;opacity:0.8;}.sidebar .label-size-5 a:hover {box-shadow:inset 100px 0 0 0 #c0392b;color:#fff!important;opacity:1;}.sidebar .label-size:hover{background:none;}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;}.cloud-label-widget-content{text-align:right}.label-size{display :block;float :right;margin:0 0 2px 2px;color:#fff;transition:all 0.4s ease-in-out;}


/* CSS label S3 Ar1web.com */
.cloud-label-widget-content{text-align:right}
.label-size{display:block;float:right;margin:0 5px 2px 2px;color:#fff;transition:all 0.4s ease-in-out;}
.cloud-label-widget-content {text-align: right;}
.label-size {display: block;float: right;margin:1px 5px 5px 4px;color: #fff;font-size: 11px;text-transform: uppercase;font-family:Electrolize,ge_ss_threeregular;}
.label-size:nth-child(1):hover,.label-size:nth-child(2):hover,.label-size:nth-child(3):hover,.label-size:nth-child(4):hover,.label-size:nth-child(5):hover,.label-size:nth-child(6):hover,.label-size:nth-child(7):hover,.label-size:nth-child(8):hover,.label-size:nth-child(9):hover,.label-size:nth-child(10):hover,.label-size:nth-child(11):hover,.label-size:nth-child(12):hover,.label-size:nth-child(13):hover,.label-size:nth-child(14):hover,.label-size:nth-child(15):hover,.label-size:nth-child(16):hover,.label-size:nth-child(17):hover,.label-size:nth-child(18):hover,.label-size:nth-child(19):hover,.label-size:nth-child(20):hover{background:#444}
.label-size:nth-child(1) {background: #FF4444;}.label-size:nth-child(2) { background: #33B5E5; }.label-size:nth-child(3) { background: #99CC00; }.label-size:nth-child(4) { background: #FF8800; }.label-size:nth-child(5) { background: #AAAAAA; }.label-size:nth-child(6) { background: #AC6AF4; }.label-size:nth-child(7) { background: #555; }.label-size:nth-child(8) { background: #f2a261; }.label-size:nth-child(9) { background: #F4BB55; }.label-size:nth-child(10) { background: #4571C0; }.label-size:nth-child(11) { background: #99cc33; }.label-size:nth-child(12) { background: #EC69DB; }.label-size:nth-child(13) { background: #40dece; }.label-size:nth-child(14) { background: #ff6347; }.label-size:nth-child(15) { background: #f0e68d; }.label-size:nth-child(16) { background: #7fffd2; }.label-size:nth-child(17) { background: #7a68ed; }.label-size:nth-child(18) { background: #ff1491; }.label-size:nth-child(19) { background: #698c23; }.label-size:nth-child(20) { background: #00ff00; }.label-size a, .label-size span { display: inline-block; color: #fff !important; padding: 4px 10px; font-weight: bold; }.label-count { white-space: nowrap; padding-left: 3px; margin-right: -3px; background: #444; color: #fff;}

/* CSS label S4 Ar1web.com */
.list-label-widget-content ul li {list-style:none;padding:0;overflow: hidden;position: relative;}.list-label-widget-content ul {padding:0}.list-label-widget-content ul li a {display: block;padding: 7px 5px;color: #777;border-bottom: 1px dashed #EFEBEB;font-size: 13px;font-family:cursive;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;}.list-label-widget-content ul li a:hover {background-color:#ea3452;color:#FFF!important;text-decoration:none;padding-right:15px}.list-label-widget-content ul li a:before {content:"\f07c";display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.list-label-widget-content ul li span {font-weight: 400;position: absolute;top: 6px;left: 6px;}.list-label-widget-content ul li:hover span {color: #FFF;}.cloud-label-widget-content {margin-top:20px}.cloud-label-widget-content span {display:inline-block;font-size:100%!important;min-height:30px;line-height:2em;margin-bottom:5px}.cloud-label-widget-content span a {background-color:#f0f0f0;color:#111;padding:5px 15px}.cloud-label-widget-content span a:hover {background-color:#777777;color:#fff;text-decoration:none}.list-label-widget-content ul li a:before {margin-left:10px}.cloud-label-widget-content span {float:right;margin:0 0 8px 3px}

لتظهر التسميات بالشكل 👌 المطلوب توجه إلى التخطيط وحرر أداة التسميات وإختر الآتي على حسب كل ستايل:
الستايل الأول و الثاني : عرض "سحابة"
الستايل الثالث : عرض "سحابة" وتفعيل "عرض عدد المشاركات لكل تصنيف"
الستايل الرابع : عرض "القائمة" وتفعيل "عرض عدد المشاركات لكل تصنيف"
9 Blogger تعليقات
Disqus
9 التعليقات
المشرف
avatar
المشرف
avatar

اخي لم ينجح معي
فعلت كل ما قلته انت تماما هل هنالك حل ؟؟

المشرف
avatar

ألم يظهر أم ماذا؟

المشرف
avatar

ششكرااا اخي احسن مدونة

المشرف
avatar
المشرف
avatar

ألف شكر .... بالتوفيق

المشرف
avatar

اخى اريد ازالة كود التسميات القديم اولا انا استخدم قالب حسام

المشرف
avatar

لم يغير شكل التسميات

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