الأربعاء، 29 أغسطس 2012

CSS نمط العنوان للمدونه


يتم استخدام عنوان العلامة <H2> خاصة لأفضل الحيل محرك البحث الأمثل. هنا بعض التعليمات البرمجية CSS مما يجعل البند الخاص رهيبة وجميلة المظهر. كمثال يمكنك ان ترى أنا باستخدام CSS مخصص العلامة البند
العرف CSS نمط العنوان للمدون

  • Go To Blogger Dashboard


  • Click on Design Tab


  • Now click on Edit HTML


  • Find the following code


    • ]]></b:skin>
  • Now place the CSS code above the ]]></b:skin> as your choice


    • STYLE 1

    .post h2
    {

    ckground: #FBFBEF;
f
    b
aont-size: 20px;

    ;
color: #333;
tex
    padding: 4px 10p
xt-shadow: 1px 1px 1px #AAA;

    F01;
-webkit-border-radius: 0 0 6
    border-bottom: 4px solid #01
Dpx 6px;
-moz-border-radius: 0 0 6px 6px;

    adow: 1px 1px 2px #AAA;
-mo
    border-radius: 0 0 6px 6px;
-webkit-box-s
hz-box-shadow: 1px 1px 2px #AAA;
box-shadow: 1px 1px 2px #AAA;

    eight: 1;
}
    margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-

    h

    STYLE 2

    .post h2 {
    font-size: 24px;
    padding: 5px;

    ext-shadow: 
    color: #fff;

t1px 1px 1px #333;

    ;
border-left: 20px 
    background: #E3BC5
0solid #B9942D;

    adius: 6px;
-moz-border-rad
    -webkit-border-
rius: 6px;
border-radius: 6px;

     #333;
-moz-box-shadow: 1px 1px 2px #
    -webkit-box-shadow: 1px 1px 2p
x333;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;

     1;
} 
    text-transform: capitalize;
width: 94%;
line-height

    :

    STYLE 3

    .post h2 {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4mYRFgk1KCPS06Cf9jt3gcYFWf0v2BTRnejBQ05HflEt3whWRAzD1zm8ll9eHt7V-Pk-lbXkeoJEA3XL32PrTEdLb5FjJdfcMEczqiSYsya_CkZds5r_8poAuyFkkaw015LPQVo49xCQ/s1600/h3.png") no-repeat 4px center transparent;
    font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;

     #5bb5f0, 1px 1px 0 rgba(2
    text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3p
x55, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;

    ppercase;
line-height: 1.3;
}
    box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: 

    u

    STYLE 4

    .post h2 {
    color:#666;
    border-left:10px solid #666;
    border-right:10px solid #666;
    padding:3px 5px 3px  20px;

    rder-radius:15px;
b
    border-radius:15px;
-moz-b
oox-shadow:0px 0px 13px #666;

    x #666;
-moz-box-shadow:0px 0px 13px 
    -webkit-box-shadow:0px 0px 13
p#666;
}
.post h2:hover {
color:#FF133F;

    ght:10px solid #FF133F;
box-sha
    border-left:10px solid #FF133F;
border-r
idow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;

    -moz-box-shadow:0px 0px 13px #FF133F;

    }

    STYLE 5

    .post h2
    {

    rgin-top:10px;
 
    m

    a   max-width:840px;
    padding:6px 2px;

    adding-left:10p
    color: #000000;
    
px;
    margin-bottom:10px;

    -family:'georgia';

    font-size:20px;
    fon
t    background-color:#F8FAFD;

    order-left:10px solid #38
    text-decoration:none;
    
b73CC;
    box-shadow:1px 1px 2px gainsboro;

    tion: border-left .777s;
-moz-
    transition: border-left .777s;
-webkit-trans
itransition: border-left .777s;
-o-transition: border-left .777s;

    t:10px solid#FF0000;
}
    -ms-transition: border-left .777s;
}
.post h2:hover {
  border-le

    f
    Different CSS code has different style. Choose any of them as your choice
    مرسلة بواسطة في

    ليست هناك تعليقات:

    إرسال تعليق

    الاشتراك في: تعليقات الرسالة (Atom)