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

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

الدرس هو عبارة عن وضع كود cssفي قالبك ليحول اداة سحابة التسميات في بلوجر من شكلها العادي الي شكل جميل للغاية 

قبل اي شئ يجب عليك ان تحول التسميات او الاقسام من الشكل العادي الي سحابة
                                    

اذا اعجبتك الاضافة تابع معي الشرح 
بالنسبة للواجهة الجديدة  :                                               -   بالنسبة للواجهة القديمة :

لاتنسى اخد نسخة احتياطية للقالب                                                        لاتنسى اخد نسخة احتياطية للقالب 

1.لوحة التحكم                                                                                     1 -.لوحة التحكم
2.القالب                                                                                            2  - .تخطيط أوتصميم  
3. ثم تحريرhtml;.                                                                             ثم 3 - تحريرhtml.    
 4.متابعة                                                                                          4-.توسيع القالب 
5 -.توسيع القالب

  ثم ابحث عن الكود التالي :بالضغط على     CTRL+F او F3


]]></b:skin>

وضع قبله او فوقه مباشرة الكود التالي

/*-----Custom Labels Cloud widget by blogg-face.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;
}

واضغط علي زر معاينة وعين ثم احفظ ومبروك عليك واي استفسار اترك تعليق وسوف ارد عليك ولاتنسني بتشجعيك

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