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

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

سأترككم مع الصورة لمعاينة هذه الاضافة 

لن اطيل في الكلام سنذهب للشرح

• انتقل إلى لوح تحكم مدونتك

• إختر "تصميم"

• ثم "تحريرhtml

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

</head>

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

<!--Animated Label Links For Blogger http://blogg-face.blogspot.com/--><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'> </script> <script type='text/javascript'> var dur = 450; $(document).ready(function() { $('a.linknudge, .Label ul li a').hover(function() { $(this).animate({ paddingLeft: '20px' }, dur); }, function() { $(this).animate({ paddingLeft: 0 }, dur); }); });</script><!--End Animated Label Links For Blogger http://blogg-face.blogspot.com/-->

ثم سانضيف الان اكواد css نبحث عن الكود التالي

  

]]></b:skin>

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

/*-----list-label css Blogger widget by blogg-face.blogspot.com/----*/ .list-label-widget-content li { display: inline-block; line-height: 28px; margin-right: 4px; padding: 0; white-space:nowrap; } .list-label-widget-content li a { -moz-border-radius: 8px; -moz-box-shadow: 0 0 3px 0 #E9E9E9; border: 1px solid #88BBC8; font-size: 10px; font-weight: bold; padding: 4px; text-transform: uppercase; } .list-label-widget-content li span{ display:none; }

اعمل حفظ ونكون قد انتهينا 

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

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