السلام عليكم و رحمة الله تعلى و بركاته
معكم اخوكم ايوب في درس جديد الا وهو
كيفية تغيير التسميات الى شكل متحرك و مثير
-( هدا هو شكل التسميات بعد تطبيق الشرح انشاء الله)-
الشرح سهل فقط اتبع معي الخطوات
ادهب الى لوحة التحكم بلوجر
> تخطيط > تم حرر التسمية المراد تطبيق الشرح عليها تم قم بتحويلها الى سحابة
ملحوظة ادا كنت تملك أكتر من 25تسمية
يرجى اختيار عرض في معظم التسميات 25. الكثير من التسميات على الصفحة الرئيسية قد تبدو غريبة بعض الشيء. قم بعرض فئات الأفضل فقط.
بعد دالك احفظ و انتقل معي الى
لوحة التحكم
> قالب > تحرير HTML
( خد نسخة احتياطية )
وسع القالب تم ابخت عن الكوود التالي بالضغط على CTRL+F
وتم فوقها مباشرة تضع هدا الكود
اقتباس:
/*-----Custom Labels Cloud widget by www.Bloggerexp.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;
}
|
بعد دالك قم بحفض القالب و مبروك عليك
في حالة إذا كنت ترغب في أن تكون تسمية المربعات ذات أحجام عشوائية ماعليك الا حذف font-size:10px
؛ من الكود اعلاه.
كان معكطم ايوب من
