EnglishFrenchGermanSpainItalianDutchRussianPortugueseArabic

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

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

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

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

  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 ;
 }


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

هناك 3 تعليقات:

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

    ردحذف
  2. واصل تميزك. رووووووعة. شكرا أخي الكريم على المواضيع المميزة. و على الموضوع الأكثر من رائع. بارك الله فيك. و لا تحرمنا من جديدك. مواضيعك جميله جدااااااااااا واكثر من رائعه. نتمنى ان تشرفنا هنا في هذا الركن الجديد لكل ملحقات التصميم http://arabinfoormatic.blogspot.com

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

    ردحذف

التالي السابق الرئيسية