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

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

شرح تنسيق سحابة التسميات

 نقوم بالبحث عن الوسم ]]></b:skin> وذلك بالضغط على CTRL + F 

 ونلصق فوقه احد الاكواد التالية بحسب التصميم المراد

 التصميم الاول

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

التصميم الثاني 

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

التصميم الثالث 

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

المصدر >> رياض بلوجر

♦ مع تحيات / حسام احمد ♦

مجرد كلمة شكر تكفى على المجهود المبذول 

من فضلك اضغظ لايك لمشاهدة لينك التحميل