تغيير شكل سحابة التسميات الى عدة أشكال رائعة وتأثيرات جميلة و جذابة -4

قمت بتقديم 3 دروس حول تغيير شكل سحابة التسميات الى أشكال مختلفة .كل درس فيه أشكال جميلة وتأثيرات جذابة لسحابة التسميات في بلوجر.اليوم درس جديد يصب في نفس الموضوع وهو تغيير شكل سحابة التسميات .سوف أقدم فيه المزيد من الاشكال الأنيقة و التأثيرات الرائعة.

                       تركيب الاضافة                     

1- من لوحة التسجيل   >>>   قالب    >>>  تحرير HTML (احفظ نسخة من القالب)
2- ابحث بواسطة   CTRL+F  على الوسم :  ]]></b:skin>
3- انسخ كود الشكل الذي تريده وضعه قبل الوسم مباشرة.
4- احفظ القالب .
تنبيه : لا تنس اضافة أداة التسميات من خلال  تخطيط   >>>  اضافة أداة    >>>   التسميات (ان لم تكن أضفتها من قبل أما ان كانت لديك فلا داعي لاضافتها من جديد)

          الشكل 1          

كود الاضافة

/*-----Custom Labels widget by http://rydnet.blogspot.com/----*/ #Label1 a{float:left; height:18px; line-height:18px; position:relative; font-size:12px; margin-bottom: 9px; margin-left:10px; padding:5px; background: rgb(69,72,77); /* Old browsers */ background: -moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ color:#fff; text-decoration:none; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;} #Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */ background: -moz-linear-gradient(top, rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */} .label-size{line-height:1.5;align:left;} .h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;} #Label1{width:320px;;border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #D8D8D8;}

          الشكل 2          

كود الاضافة

#Label1 a{ position:relative !important; margin:4px; padding:3px; float:left; white-space:nowrap; background:#E0DDDD; color:#454242; border:1px solid #454242; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; font-family: "Arial","Helvetica",sans-serif; font-size:12px; text-decoration:none; text-transform:capitalize; -moz-transition:all .6s linear ; -webkit-transition:all .6s linear ; -o-transition:all .6s linear ; transition:all .6s linear ; } #Label1 a:hover { background:#6992E9; color:#F3F4F8; -moz-transition:all .3s ease ; -webkit-transition:all .3s ease ; -o-transition:all .3s ease ; transition:all .3s ease ; }

          الشكل 3          

كود الاضافة

/* http://rydnet.blogspot.com/ BY LABEL Custom Cloud--------------------------------------------- */ .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; 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:10px; margin-bottom:5px;} .Label a:hover{ color:#fff !important; background:#e25f07 }

          الشكل 4          

كود الاضافة

 .label-size a { display: inline-block; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); padding: 4px 7px; font-family: 'Helvetica Neue', helvetica, sans-serif; font-size: 15px; line-height: 14px; height: 14px; vertical-align: middle; margin-bottom: 6px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); } .label-size a { color: #000000; border: 1px dotted #FFFFFF; background: rgb(238,177,75); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1))); background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF3333', endColorstr='#330000',GradientType=0 ); } .label-size a:before { content: '\2022'; color: #FFFFFF; margin-right: 4px; font-size: 15px; line-height: 13px; height: 13px; vertical-align: text-top; text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); } .label-size a:hover { text-decoration: none; background: rgb(240,183,86); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1))); background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCCCCC', endColorstr='#990000',GradientType=0 ); } 

          الشكل5          

كود الاضافة

    .label-size a { display: inline-block; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); padding: 4px 7px; font-family: 'Helvetica Neue', helvetica, sans-serif; font-size: 15px; line-height: 14px; height: 14px; vertical-align: middle; margin-bottom: 6px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); } .label-size a { color: #000000; border: 3px solid #FFFFFF; background: rgb(238,177,75); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1))); background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF3333', endColorstr='#330000',GradientType=0 ); } .label-size a:before { content: '\2022'; color: #FFFFFF; margin-right: 4px; font-size: 15px; line-height: 13px; height: 13px; vertical-align: text-top; text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); } .label-size a:hover { text-decoration: none; background: rgb(240,183,86); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1))); background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCCCCC', endColorstr='#990000',GradientType=0 ); } 

انتهينا من الاضافة........

مع تحيات حمزة رمزي.........

أشكال أخرى لسحابة التسميات وتأثيرات رائعة جدا

تغيير شكل سحابة التسميات-1   - جديد !

تغيير شكل سحابة التسميات-2   - جديد !

تغيير شكل سحابة التسميات-3   - جديد !

تغيير شكل سحابة التسميات-5   - جديد !

منشورة في: اضافات بلوجر, سحابة التسميات