ابسط طريقة لتغيير شكل سحابة التسميات

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

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

* التصميم الاول :

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