اضافة التسميات بخاصية Css3
الزيارات:
الزيارات:
السلام عليكم و رحمة الله و بركاته اليوم مع درس جديد و اضافة جديده هى طريقة عمل الأقسام بخاصية Css3 سنطبق هذه الأضافة باستخدام css3 حقيقى اضافة جميله و جذابه و دعونا نرى كيفية تطبيق هذه الأضافة
كيفية تخصيص اقسام المدونة مع CSS3؟
علينا أولا تحرير بعض إعدادات التسمية لدينا مثل الصورة التاليه.
الآن انتقل إلى لوحة تحكم المدون ثم القالب
تذكير :- لا تنسى ان تأخذ نسخه من القالب
انقر على تحرير HTML
تذكير :- لا تنسى ان تأخذ نسخه من القالب
انقر على تحرير HTML
ثم توسيع القالب
ابحث عن الكود التالى
ابحث عن الكود التالى
]]></
b:skin
>
ثم اضف الكود التالى قبله مباشرة
/*CSS3 Bricks Style Labels By http://start4cash.blogspot.com/ */
#textwidget {
color
:
#666
;
font-size
:
0.925em
;
font-style
:
italic
;
line-height
:
1.6em
}
a.tag {
color
:
#777
;
font
:
9px
verdana
;
text-transform
:
uppercase
;
transition: border-color .
218
s;
background
:
#f4f4f4
;
background
: -webkit-gradient(linear,
0%
40%
,
0%
70%
, from(
#F5F5F5
), to(
#F1F1F1
));
display
: inline-
block
;
text-shadow
:
0
1px
0
#fff
;
-webkit-transition: border-color .
218
s;
-moz-transition: border .
218
s;
-o-transition: border-color .
218
s;
transition: border-color .
218
s;
background
:
#f3f3f3
;
background
: -webkit-gradient(linear,
0%
40%
,
0%
70%
, from(
#F5F5F5
), to(
#F1F1F1
));
background
: -moz-linear-gradient(linear,
0%
40%
,
0%
70%
, from(
#F5F5F5
), to(
#F1F1F1
));
border
:
solid
1px
#ccc
;
border-radius:
2px
;
-webkit-border-radius:
2px
;
-moz-border-radius:
2px
;
margin
:
0
4px
4px
0
;
padding
:
3px
5px
;
text-decoration
:
none
}
a.tag:hover {
color
:
#333
;
border-color
:
#999
;
-moz-box-shadow:
0
2px
0
rgba(
0
,
0
,
0
,
0.2
) -webkit-box-shadow:
0
2px
5px
rgba(
0
,
0
,
0
,
0.2
);
box-shadow:
0
1px
2px
rgba(
0
,
0
,
0
,
0.15
)
}
a.tag:active {
color
:
#000
;
border-color
:
#444
}
.slides {
font-size
:
85%
;
line-height
:
130%
;
overflow
:
hidden
;
padding
:
0
;
margin
:
30px
0
10px
;
border-bottom
:
1px
solid
#000
}
/*CSS3 Bricks Style Labels By http://start4cash.blogspot.com/ */
ثم ابحث عن الكود التالى
<b:widget id='Label1' locked='false'
حدده حتى تجد
</b:widget>
استبدل الكود من
<b:widget id='Label1' locked='false'
الى
</b:widget>
بالكود التالى
<
b:widget
id
=
'Label1'
locked
=
'false'
title
=
'Labels Cloud'
type
=
'Label'
>
<
b:includable
id
=
'main'
>
<
b:if
cond
=
'data:title'
>
<
h2
>
<
data:title
/>
</
h2
>
</
b:if
>
<
div
class
=
'textwidget'
>
<
div
expr:class
=
'"widget-content " + data:display + "-label-widget-content"'
>
<
b:if
cond
=
'data:display == "list"'
>
<
ul
>
<
b:loop
values
=
'data:labels'
var
=
'label'
>
<
li
>
<
b:if
cond
=
'data:blog.url == data:label.url'
>
<
span
expr:dir
=
'data:blog.languageDirection'
>
<
data:label.name
/>
</
span
>
<
b:else
/>
<
a
class
=
'tag'
expr:dir
=
'data:blog.languageDirection'
expr:href
=
'data:label.url'
><
data:label.name
/></
a
>
</
b:if
>
<
b:if
cond
=
'data:showFreqNumbers'
>
<
span
dir
=
'ltr'
>(
<
data:label.count
/>)</
span
>
</
b:if
>
</
li
>
</
b:loop
>
</
ul
>
<
b:else
/>
<
b:loop
values
=
'data:labels'
var
=
'label'
>
<
span
expr:class
=
'"label-size label-size-" + data:label.cssSize'
>
<
b:if
cond
=
'data:blog.url == data:label.url'
>
<
span
expr:dir
=
'data:blog.languageDirection'
>
<
data:label.name
/>
</
span
>
<
b:else
/>
<
a
class
=
'tag'
expr:dir
=
'data:blog.languageDirection'
expr:href
=
'data:label.url'
><
data:label.name
/></
a
>
</
b:if
>
<
b:if
cond
=
'data:showFreqNumbers'
>
<
span
class
=
'label-count'
dir
=
'ltr'
>(
<
data:label.count
/>)</
span
>
</
b:if
>
</
span
>
</
b:loop
>
</
b:if
>
<
b:include
name
=
'quickedit'
/>
</
div
>
</
div
>
</
b:includable
>
</
b:widget
>
و اخيرا اضغط حفظ القالب
الأقسام :-
اضافات بلوجر
,
دروس بلوجر
بقلم :- مصطفى
مصطفى صاحب موقع ستارت كاش من مصر، أكتب عادة حول طرق تحسين مدونات بلوجر و طرق الربح من الأنترنت. يمكن متابعتي على تويتر Twitter أو عبر خلاصات موقعى هذه.شارك أصدقاءك
روابط هذه التدوينة قابلة للنسخ واللصق | |
URL | |
HTML | |
BBCode |
0 تعليقات :- :
إرسال تعليق