10 Beautiful Style "Read More" Jump Break Link in Blogger

The "Read More" Blogger is a bit of a practice that can help condense their messages from a web page and increase click-through. a lot of bloggers use this feature, but sometimes the default text Blogger can mix a little too much with your message. It is important to make the link stand visitors know what you are supposed to click to continue reading the rest of this entry.

Step-1:  Add Insert jump break to your Post.

Step-2:   Go to Template > Customize

Step-3: Click > Advanced  > Click Add CSS: Now Copy and Paste following (any one ‍Style) CSS Code to > Add custom CSS Box

Step-4:  Click Apply to Blog and Click View Blog

Style: 1

Read More Style-1

Hover:

Hover Style

CSS Code:
.jump-link

{margin:1% 1%;}

.jump-link a

{text-align:center;

display:inline-block;

color:rgb(255, 0, 0);

font-weight:bold;

margin:4px 5px 5px 4px;

padding:10px 10px 10px 10px;

border: 8px inset rgb(0, 150, 0);

text-transform:UPPERcase;}

.jump-link a:hover

{border:10px double #008000;

color: : #FF0000;}

Style: 2

Read More Style-2

Hover:

Hover Style

CSS Code:
.jump-link

{margin:2% 2%;}

.jump-link

{text-align:left;}

.jump-link a

{background: #FF0000;

color: #FFFFFF;

margin:4px 5px 5px 4px;

padding:10px 10px 10px 10px;

border-radius: 6px;

text-transform:UPPERCase;

font-weight:bold;}

.jump-link a:hover

{background: #008000;

color: #FF0000;}

Style: 3

Read More Style-3

Hover: 

Hover Style

CSS Code:
.jump-link

{margin:1% 1%;}

.jump-link a

{text-align:center;

display:inline-block;

color: #0000FF;

font-weight:bold;

margin:5px 4px 5px 5px;

padding:10px 10px 10px 10px;

border:4px dotted rgb(255, 10, 50);

border-bottom-left-radius: 35px;

border-top-right-radius: 35px;

border-bottom-color: #008000;

 border-bottom-width: 6px;

text-transform:UPPERcase;}

.jump-link a:hover

{border:10px double #008000;

color: #FF0000;}

Style: 4

Read More Style-4

Hover:

Hover Style

CSS Code:
.jump-link

{margin-top:10px;}

.jump-link a

{background:#00FF00;

color:#FF0000;

padding: 5px;

border-radius:20px;

font-weight:bold;

text-transform:UPPERcase;}

.jump-link a:hover

{border:2px double #008000;

background:#FF0000;

color:#0000FF;}

Style: 5

Read More Style-5

Hover:

Hover Style

CSS Code:

.jump-link

 {margin: 10px 5px; }

.jump-link a

{background-color:#0000FF;

color:#FF1493;

padding:10px;

font-weight:bold;

text-transform:UPPERcase;}

.jump-link a:hover

{background-color:#8B0000;

color:#228B22;}

Style: 6

Read More Style-6

 

Hover:

Hover Style

CSS Code:
.jump-link

 {margin: 10px 5px;}

.jump-link a

 {font-size: 20px;

padding: 6px;

border: 4px solid #800000;

background:#00FF00;

border-radius:7px;

box-shadow: 0 2px 4px #800000;

color:#FF0000;

font-weight:bold;

text-transform:UPPERcase;}

.jump-link a:hover

{border:5px solid #FF4500;

color:#0000FF;}

Style: 7

Read More Style-7

Hover:

Hover Style

CSS Code:
.jump-link

{background: linear-gradient(to bottom, #00FFFF 30%, #8E8E8E 100%) repeat scroll 0 rgba(0, 0, 0, 0);

border: 2px solid #565555;

border-radius: 6px;

box-shadow: 0 1px 10px red;

float: 0;

text-align:center;

font-size: 20px;

color: #FF0000;

padding: 4px 4px;

position: relative;

text-transform:UPPERcase;}

.jump-link a:hover

{border:5px double  #FF0000;

color: #0000FF;}

Style: 8

Read More Style-8

Hover:

Hover Style

CSS Code:
.jump-link

{margin: 0 auto;

font-size: 20px;

text-transform: UPPERcase;

font-weight:bold;

color: #0000FF;

letter-spacing: 2px;

text-align: center;

padding-top: 8px;

border-bottom-color: #008000;}

.jump-link a

 {border:6px double #008000;

color: #FF0000;

padding: 5px;}

.jump-link a:hover

{background-color:#8B0000;

color:#228B22;}

Style: 9

Read More Style-9

Hover:

Hover Style

CSS Code:
.jump-link

{margin:1% 2%;}

.jump-link a

{text-align:center;

display:inline-block;

padding:8px 8px 8px;

color:   #0000FF;

margin:10px 10px 10px;

background-color: #FFA500;

font-size: 20px;

font-weight:bold;

text-transform: UPPERcase;border:3px dashed #228B22;

border-bottom:7px double #FF0000;

box-shadow:2px 5px 6px #0000FF;}

.jump-link a:hover

{border:5px dashed #FF0000;

background-color:#0000FF;

color:#00BFFF;}

Style: 10

Read More Style-10

 Hover:

Hover Style

CSS Code:
.jump-link

{margin:1% 1%;}

.jump-link a

{text-align:center;

display:inline-block;

padding:7px 8px 9px;

color:red;

margin:10px 5px 5px;

background-color:#00BFFF;

font-size: 20px;

font-weight:bold;

text-transform: UPPERcase;

border: 1px solid #cccccc;

border-bottom: 4px solid #0000FF;

box-shadow:1px 3px 6px;}

.jump-link a:hover

{border-bottom: 4px solid #003F80;

background-color: #FFA500;

color:   #0000FF;}