Destino Solutions

+91 9747866100

Customize Blogger Read More Button

March 3rd, 2014

Blogger Default Read More (Jump Break) Button customize with pure CSS,  Just add a CSS Script It your Blog ‘Read More’ button more attractive.It’s not supported ‘Auto Jump Break’, I’m not recommend ‘Auto Jump Break’, Many reason for choosing Default blogger Jumb Break but ‘Auto Jump Break’ make your Blogger Blog home page loading slow and Image thumbnail only Get wrong size.

Backup Template, Do after customization.

Follow the Steps

1.Go to Blogger > Template > Edit HTML

2.Find ]]></b:skin> (Ctrl + F ).

3.Just above add ‘Jump link’ customization CSS.

.jump-link {
font-size: 14px;
float: Right;
padding: 2px 2px 2px 2px;
border: 2px solid #87a7b9;
background: #eee7d6;
width: autopx;
position: relative;
border-radius: 5px;
}

.jump-link {
font-size: 14px;
float: Right;
padding: 2px 4px 2px 4px;
border: 2px solid #4896be;
background: #78c6ef;
width: autopx;
position: relative;
border-radius: 2px;
box-shadow: 0 1px 2px #CCCCCC;
font-color: !important #fffff;

.jump-link {

background: linear-gradient(to bottom, #959595 0%, #0D0D0D 46%, #010101 50%, #0A0A0A 53%, #4E4E4E 76%, #383838 87%, #1B1B1B 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #820202;
border-radius: 4px;
box-shadow: 0 1px 3px #3B0202;
float: right;
font-size: 14px;
padding: 2px 4px;
position: relative;
}

.jump-link {

background: linear-gradient(to bottom, #D5D5D5 16%, #8E8E8E 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #565555;
border-radius: 4px;
box-shadow: 0 1px 3px #3B0202;
float: right;
font-family: Optima,Segoe,"Segoe UI",Candara,Calibri,Arial,sans-serif;
font-size: 14px;
padding: 2px 4px;
position: relative;
}

.jump-link {
background: linear-gradient(to bottom, #FFE4CC 0%, #FFFFFF 26%, #FFFFFF 78%, #FFE4CC 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #565555;
border-radius: 2px;
box-shadow: 1px 1px 1px #000000;
float: right;
font-family: Optima,Segoe,"Segoe UI",Candara,Calibri,Arial,sans-serif;
font-size: 14px;
padding: 2px 4px;position: relative;
}

.jump-link {

background-image: url("http://1.bp.blogspot.com/-Dk-QkBdg72Y/UxSloDumk-I/AAAAAAAABZM/iWOOJdCDTYI/s1600/p5.png");
border: 1px solid #565555;
border-radius: 1px;
float: right;
font-family: Optima,Segoe,"Segoe UI",Candara,Calibri,Arial,sans-serif;
font-size: 14px;
padding: 2px 4px;
position: relative;
}

4.Save Template.

You’ have Any problem? please mentioned it below comment section.

Categories: BloggerBlogger Widget