Beauty

Zmień wygląd poziomych linii - separatorów <hr> na blogu!

Z tego poradnika dowiesz się, jak w prosty sposób zmienić styl prostej linii separatora na bardziej fantazyjny.

Wstawianie stylu linii

Wejdź w menu Szablon => Dostosuj.

Następnie Zaawansowane => Dodaj arkusz CSS.

W okienko wklej kod CSS jednego, wybranego stylu linii i Zastosuj do bloga.

Style linii

Styl #1

hr {
    height: 5px;
    border: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#383838), to(#f15e5e), color-stop(50%, #383838), color-stop(50%, #f15e5e));
    background-image: -webkit-linear-gradient(left, #383838, #383838 50%, #f15e5e 50%, #f15e5e);
    background-image: -moz-linear-gradient(left, #383838, #383838 50%, #f15e5e 50%, #f15e5e);
    background-image: -ms-linear-gradient(left, #383838, #383838 50%, #f15e5e 50%, #f15e5e);
    background-image: -o-linear-gradient(left, #383838, #383838 50%, #f15e5e 50%, #f15e5e);    
    -webkit-background-size: 24px 100%;
    -moz-background-size: 24px 100%;
    background-size: 24px 100%;
}

Styl #2

hr {
    height: 5px;
    border: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#383838), to(#EAC85D), color-stop(50%, #383838), color-stop(50%, #EAC85D));
    background-image: -webkit-linear-gradient(left, #383838, #383838 50%, #EAC85D 50%, #EAC85D);
    background-image: -moz-linear-gradient(left, #383838, #383838 50%, #EAC85D 50%, #EAC85D);
    background-image: -ms-linear-gradient(left, #383838, #383838 50%, #EAC85D 50%, #EAC85D);
    background-image: -o-linear-gradient(left, #383838, #383838 50%, #EAC85D 50%, #EAC85D);    
    -webkit-background-size: 24px 100%;
    -moz-background-size: 24px 100%;
    background-size: 24px 100%;
}

Styl #3

hr {
    height: 5px;
    border: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#383838), to(#2ABB9B), color-stop(50%, #383838), color-stop(50%, #2ABB9B));
    background-image: -webkit-linear-gradient(left, #383838, #383838 50%, #2ABB9B 50%, #2ABB9B);
    background-image: -moz-linear-gradient(left, #383838, #383838 50%, #2ABB9B 50%, #2ABB9B);
    background-image: -ms-linear-gradient(left, #383838, #383838 50%, #2ABB9B 50%, #2ABB9B);
    background-image: -o-linear-gradient(left, #383838, #383838 50%, #2ABB9B 50%, #2ABB9B);    
    -webkit-background-size: 24px 100%;
    -moz-background-size: 24px 100%;
    background-size: 24px 100%;
}

Styl #4

hr {
    height: 5px;
    border: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#383838), to(#59ABE3), color-stop(50%, #383838), color-stop(50%, #59ABE3));
    background-image: -webkit-linear-gradient(left, #383838, #383838 50%, #59ABE3 50%, #59ABE3);
    background-image: -moz-linear-gradient(left, #383838, #383838 50%, #59ABE3 50%, #59ABE3);
    background-image: -ms-linear-gradient(left, #383838, #383838 50%, #59ABE3 50%, #59ABE3);
    background-image: -o-linear-gradient(left, #383838, #383838 50%, #59ABE3 50%, #59ABE3);    
    -webkit-background-size: 24px 100%;
    -moz-background-size: 24px 100%;
    background-size: 24px 100%;
}

Styl #5

hr {
    height: 5px;
    border: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#383838), to(#A87CA0), color-stop(50%, #383838), color-stop(50%, #A87CA0));
    background-image: -webkit-linear-gradient(left, #383838, #383838 50%, #A87CA0 50%, #A87CA0);
    background-image: -moz-linear-gradient(left, #383838, #383838 50%, #A87CA0 50%, #A87CA0);
    background-image: -ms-linear-gradient(left, #383838, #383838 50%, #A87CA0 50%, #A87CA0);
    background-image: -o-linear-gradient(left, #383838, #383838 50%, #A87CA0 50%, #A87CA0);    
    -webkit-background-size: 24px 100%;
    -moz-background-size: 24px 100%;
    background-size: 24px 100%;
}

Styl #6

hr {
    height: 5px;
    border: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#383838), to(#F47983), color-stop(50%, #383838), color-stop(50%, #F47983));
    background-image: -webkit-linear-gradient(left, #383838, #383838 50%, #F47983 50%, #F47983);
    background-image: -moz-linear-gradient(left, #383838, #383838 50%, #F47983 50%, #F47983);
    background-image: -ms-linear-gradient(left, #383838, #383838 50%, #F47983 50%, #F47983);
    background-image: -o-linear-gradient(left, #383838, #383838 50%, #F47983 50%, #F47983);    
    -webkit-background-size: 24px 100%;
    -moz-background-size: 24px 100%;
    background-size: 24px 100%;
}

Styl #7

hr {
    height: 5px;
    border: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#383838), to(#FFA400), color-stop(50%, #383838), color-stop(50%, #FFA400));
    background-image: -webkit-linear-gradient(left, #383838, #383838 50%, #FFA400 50%, #FFA400);
    background-image: -moz-linear-gradient(left, #383838, #383838 50%, #FFA400 50%, #FFA400);
    background-image: -ms-linear-gradient(left, #383838, #383838 50%, #FFA400 50%, #FFA400);
    background-image: -o-linear-gradient(left, #383838, #383838 50%, #FFA400 50%, #FFA400);    
    -webkit-background-size: 24px 100%;
    -moz-background-size: 24px 100%;
    background-size: 24px 100%;
}


Wstawianie linii do posta

Przejdź do edytora posta, przełącz go do trybu HTML i zawsze, kiedy będziesz chciał wstawić poziomą linię, wpisz kod:
<hr/>

Instagram