السلام عليكم ورحمة الله وبركاته
مرحبا بكم زوار ومتابعين مدونة محترفي الإعلاميات
طبعا كما كل مرة نأتي لكم بالاشياء الحصرية و نسعى لكي
نرتقي بالويب العربي
اليوم اقدم لكم شرح بسيط ورائع لتغيير شكل سحابة التسميات لمدونات بلوجر الى الى شكل رائع بألوان رائعة لكل قسم لون بتقنية css3 وتضيف لمسة من الجمال والرونق لمدونتك
نمر الآن إلى طريقة التركيب :
- من لوحة التحكم >> قالب >> تحرير HTML
- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
- قم بالبحث عن الكود ]]></b:skin>
واضف فوقه مباشرة الكود التالي
.cloud-label-widget-content {
text-align: right;
}
.label-size {
background: #5498C9;
display: block;
float: right;
margin:0 0 3px 3px;
color: #fff;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) {
background: #F53477;
}
.label-size:nth-child(2) {
background: #89C237;
}
.label-size:nth-child(3) {
background: #44CCF2;
}
.label-size:nth-child(4) {
background: #01ACE2;
}
.label-size:nth-child(5) {
background: #94368E;
}
.label-size:nth-child(6) {
background: #A51A5D;
}
.label-size:nth-child(7) {
background: #555;
}
.label-size:nth-child(8) {
background: #f2a261;
}
.label-size:nth-child(9) {
background: #00ff80;
}
.label-size:nth-child(10) {
background: #b8870b;
}
.label-size:nth-child(11) {
background: #99cc33;
}
.label-size:nth-child(12) {
background: #ffff00;
}
.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-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-left: 3px;
margin-right: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}
ثم سوف تجد أن شكل التسميات قد تغير
إلى هنا نكون قد وصلنا إلى ختام درسنا اليوم
دمتم في أمان الله
ليست هناك تعليقات: