KellyConnect is Hiring Work from Home Now in the US! Join Now!
banner

10 Page Break Designs For Blogger Blog Post

Riken Maharjan
Page Break Breaking or hard page break breaking is at the code inserted by at he software program system (e.g., word processor) that tells the printer machine where to end finish the current new page and begin the next. After inserting the Page Break Breaking into the document writing, at the symbol sign indicating the page break or `` Page Break Gap'' is shown presented, and the cursor pointer is placed put on the next following page.Every Blogger need to make there blogger post simple and attractive.


Page Break
Page Break


If you like this page break to add on your blogger blog or website. I will provide you css code for each page break. Which one do you like to include in your website post please let me know. Lets began : -

15 Page Break Designs 

   

# Style 1

# Style 2

# Style 3

# Style 4

# Style 5

# Style 6

# Style 7

# Style 8

# Style 9

# Style 10

# Style 11

# Style 12

# Style 13

# Style 14



Free Backlinks For Blogger

Example.com - Your ACME Website Winner

Html Code
<hr class="style1" /> 

Css Code
body{
  background-color: #f0f0f0;
  width: 700px;
  float: center;
}

hr.style1{
              border-top: 1px solid #8c8b8b;
}


hr.style2 {
              border-top: 3px double #8c8b8b;
}

hr.style3 {
              border-top: 1px dashed #8c8b8b;
}

hr.style4 {
              border-top: 1px dotted #8c8b8b;
}

hr.style5 {
              background-color: #fff;
              border-top: 2px dashed #8c8b8b;
}


hr.style6 {
              background-color: #fff;
              border-top: 2px dotted #8c8b8b;
}

hr.style7 {
              border-top: 1px solid #8c8b8b;
              border-bottom: 1px solid #fff;
}


hr.style8 {
              border-top: 1px solid #8c8b8b;
              border-bottom: 1px solid #fff;
}
hr.style8:after {
              content: '';
              display: block;
              margin-top: 2px;
              border-top: 1px solid #8c8b8b;
              border-bottom: 1px solid #fff;
}

hr.style9 {
              border-top: 1px dashed #8c8b8b;
              border-bottom: 1px dashed #fff;
}

hr.style10 {
              border-top: 1px dotted #8c8b8b;
              border-bottom: 1px dotted #fff;
}


hr.style11 {
              height: 6px;
              background: url(http://ibrahimjabbari.com/images/hr-11.png) repeat-x 0 0;
    border: 0;
}


hr.style12 {
              height: 6px;
              background: url(http://ibrahimjabbari.com/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

hr.style13 {
              height: 10px;
              border: 0;
              box-shadow: 0 10px 10px -10px #8c8b8b inset;
}


hr.style14 {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}


hr.style15 {
              border-top: 4px double #8c8b8b;
              text-align: center;
}
hr.style15:after {
              content: '\002665';
              display: inline-block;
              position: relative;
              top: -15px;
              padding: 0 10px;
              background: #f0f0f0;
              color: #8c8b8b;
              font-size: 18px;
}

hr.style16 {
  border-top: 1px dashed #8c8b8b;
}
hr.style16:after {
  content: '\002702';
  display: inline-block;
  position: relative;
  top: -12px;
  left: 40px;
  padding: 0 3px;
  background: #f0f0f0;
  color: #8c8b8b;
  font-size: 18px;
}


hr.style17 {
              border-top: 1px solid #8c8b8b;
              text-align: center;
}
hr.style17:after {
              content: '§';
              display: inline-block;
              position: relative;
              top: -14px;
              padding: 0 10px;
              background: #f0f0f0;
              color: #8c8b8b;
              font-size: 18px;
              -webkit-transform: rotate(60deg);
              -moz-transform: rotate(60deg);
              transform: rotate(60deg);
}


hr.style18 {
  height: 30px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 1px 0 0 0;
  border-radius: 20px;
}
hr.style18:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: #8c8b8b;
  border-width: 0 0 1px 0;
  border-radius: 20px;

}

How To Add your Favorite Page Break Design In blogger post. For example : I love # Style 5 for my post.



  • Create Your Post. Inside post where you want add page break add this 


Html Code
<hr class="style5" /> 


Image Demo


  • Save Your Post. Go to Theme > Click on Cutomize > Advanced > Add Css Code There


Css Code
body{
  background-color: #f0f0f0;
  width: 700px;
  float: center;
}
hr.style5 {
              background-color: #fff;
              border-top: 2px dashed #8c8b8b;

}

Image Demo


Note: For  example i have choose style 5 so i have add style 5 html on post and css code. You have to change which style do you like most.





1 comment

  1. good knowledge Etalkss
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.