السبت، 15 فبراير 2014

تنسيق شكل سحابة التسميات فى مدونتك

اليوم وفى موضوع جديد من مدونة ابداعاتى أقدم لكم شرع تنسيق شكل التسميات فى مدونات بلوجر بشكل احترافى للغاية ، لأن أداة التسميات فى بلوجر ومعظم القوالب تكون تقليدية بعض الشيء فلذلك قررت عرض هذا الموضوع لمتتبعى مدونة ابداعاتى الكرام ولكى لا أطيل عليكم هيا بنا للمعاينة وشرح تنسيق التسميات 

شرح تنسيق شكل سحابة التسميات
اذهب للوحة التحكم >> القالب >> تحرير HTML
ملحوظة
لابد أن تكون أداة التسميات مضافة بالفعل ومضبوطة بهذا الشكل

ابحث عن ]]></b:skin>

ضع قبله مباشرة كود الـ CSS التالى 
.label-size{ 
margin:0; 
padding:0; 
position:relative; 
.label-size a{ 
float:right
height:24px; 
line-height:24px; 
position:relative; 
font-size:12px
margin-bottom: 9px; 
margin-left:20px; 
padding:0 10px 0 12px; 
background:#0089e0; 
color:#fff; 
text-decoration:none; 
-moz-border-radius-bottomright:4px; 
-webkit-border-bottom-right-radius:4px; 
border-bottom-right-radius:4px; 
-moz-border-radius-topright:4px; 
-webkit-border-top-right-radius:4px; 
border-top-right-radius:4px; 
.label-size a:before{ 
content:""; 
float:right
position:absolute; 
top:0; 
left:-12px; 
width:0; 
height:0; 
border-color:transparent #0089e0 transparent transparent; 
border-style:solid; 
border-width:12px 12px 12px 0;  
.label-size a:after{ 
content:""; 
position:absolute; 
top:10px; 
left:0; 
float:left; 
width:4px; 
height:4px; 
-moz-border-radius:2px; 
-webkit-border-radius:2px; 
border-radius:2px; 
background:#fff; 
-moz-box-shadow:-1px -1px 2px #004977; 
-webkit-box-shadow:-1px -1px 2px #004977; 
box-shadow:-1px -1px 2px #004977; 
}  
.label-size a:hover{background:#555;} 
.label-size a:hover:before{border-color:transparent #555 
transparent transparent;}
√ غير الأجزاء المحدده فى الكود السابق بما يناسب زوقك     
√ أتمنى كلمة شكر على المجهود المبذول فلا تكن أبخل الناس بها
من فضلك اضغظ لايك لمشاهدة لينك التحميل

11 التعليقات:

  1. مشكور اخي محمود على مجهودك (o)

    ردحذف
  2. شكرااا اخي على اداة الرائعة
    لكن لدي سؤال كيف اغير شكل الاسهم من الايمن الى الايسر اعني عكس
    لان قالب مدونتي ليس معرب ووضع الاداة هكدا يخلق نوع من عدم التناسق
    في انتظار ردك اخي

    ردحذف
    الردود
    1. ستجد فى الكود السابق فى الموضوع float:right;
      استبدل right بـــ left
      لاحظ أن هذا الكود مكرر مرتين float:right;

      حذف
    2. استبدلت الكود لكن لم يتغير شىء :-?

      حذف
    3. لتحمل الكود من هنا >>
      صديق المدونة
      http://www.gulfup.com/?dbHNny

      حذف
  3. شكراا على مجهودك معي اخي (h)
    لكن وضعت الكود الدي اعطيتني ايه ولم يتغير شيء [-(
    التغيرات التي فيه هي نفس التغيرات التي اخبرتني ان اغيريها في ردك الاول

    ردحذف
    الردود
    1. ركب الكود الموجود فى الموضوع
      واترك رابط مدونتك فى تعليق

      حذف
  4. شكرا لك تم التركيب بنجاح في مدونتي

    مطبخ جميلة

    ردحذف

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار