طريقة تغيير شكل سحابة التسميات لمدونات بلوجر

طريقة تغيير شكل سحابة التسميات لمدونات بلوجر

سحابة التسميات تختلف من قالب الى اخر وبعض القوالب لاتوجد في تصميمات لعرض سحابة التسميات حيث يتم وضعها في صورة عبارات عادية تؤدي الى را... 11:55 ص

سحابة التسميات تختلف من قالب الى اخر وبعض القوالب لاتوجد في تصميمات لعرض سحابة التسميات حيث يتم وضعها في صورة عبارات عادية تؤدي الى رابط معين لكن اليوم مدونة الحسام ويب تقدم لكم تصميمات واشكال متعددة لسحابة التسميات فقط اختار مايناسبك ...

شرح تغيير سحابة التسميات :

* نقوم بالتوجه الى لوحة التحكم > القالب > تحرير القالب ثن نضغط على ctrl+f ونبحث عن الوسم  ]]></b:skin> ونلصق فوقه احد الاكواد التالية بحسب اختيارك :

* الشكل الاول :

 .Label a{float:left;padding:5px 8px;margin:2px 2px 0px 0;background-color:#1295C9;color:white;font-size:14px;text-decoration:none;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;} .Label a:hover{background-color:#303030;}

* الشكل الثاني :

Custom Labels Cloud widget by http://al-7sam-web.blogspot.com/----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #6BB5FF; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }

* الشكل الثالث :

/*--- MBL Custom Label Cloud With CSS3 --- */ .Label a{ padding-left:20px; background:#000; padding:0 20px; color:#fff!important; border-radius:100px; -moz-border-radius:100px; height:32px; line-height:32px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#ff0; }

* ثم نقوم بحفظ القالب ومبرووووك عليك 

كلمة شكر تكفي لرد الجميل