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

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

شرح  طريقة التركيب

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}

لتظهر التسميات بالشكل 👌 المطلوب توجه إلى التخطيط وحرر أداة التسميات وإختر الآتي على حسب كل ستايل:

الستايل الأول و الثاني : عرض "سحابة"

الستايل الثالث : عرض "سحابة" وتفعيل "عرض عدد المشاركات لكل تصنيف"

الستايل الرابع : عرض "القائمة" وتفعيل "عرض عدد المشاركات لكل تصنيف"

By glok

Similiar tagsاضافات بلوجر