تغيير شكل التسميات السحابية لشكل جذاب ومميز

لو دخلت لأي مدونة لابد أن تجد إضافة التسميات فهي إضافة ضرورية وهي التي تسهل على الزائر تصفح أقسام المدونة الرئيسية حسب القسم مثلا "قوالب بلوجر" و "إضافات بلوجر" يعني أن يتصفح حسب المجال الذي يريد خير له من ان يتصفح مواضيع المدونة كلها دفعة واحدة والآن ما سنفعله هو إعطاء شكل مميز لهذه الإضافة

تغيير شكل التسميات السحابية لشكل جذاب ومميز

كما ترون في الصورة الشكل مميز وجذاب ويتميز بـ :

  1. ألوان متعددة لكل قسم معين
  2. دمج عداد المواضيع في كل قسم بشكل مميز
  3. سهلة التركيب ولن تأخد منك أكثر من دقيقة

لتركيب الشكل كل ما عليك فعله هو تحرير القالب ثم البحث عن الوسم التالي :

]]></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-count {
 white-space: nowrap;
 padding-left: 3px;
 margin-right: -3px;
 background: #333;
 color: #fff ;
 }


وتكون قد إنتهيت من تركيب الشكل في مدونتك وإن أحتجتني في أي شيئ يمكنك وضع رد هنا وستتم مساعدتك بإذن الله ولا تنسوى مشاركة الموضوع وفقنا الله وإياكم لما يحب ويرضى
المقال السابق
المقال التالي
مقالات دات صلة

هناك تعليقان (2):

  1. شكرا لك اخي موضوع جميل و اكثر من رائع اتمنى زيارة مدونتي و ترك تعليقك و شكرا لك
    http://www.arabic-dev.com/

    ردحذف
  2. tank u my site
    http://chamil-wibe.blogspot.com/

    ردحذف