How to Make a Text Quote Box in Blogger Posts

by Haris Viclates
0 comment

Catatancyber.com – On this occasion I will give a tutorial on How to Make a Text Quote Box in Blogger Posts. Surely for those of you who have a blog with a Niche quote or text, you really need the box.

Actually how to create a text box is not too difficult just by using CSS + HTML the caller you can make the box. But not many of us, including myself, learned the code. Well for those of you who want to learn more about the Islamic world, don’t forget to always visit Looking for Takbir.

How to Make a Text Quote Box in Blogger Posts

1. Please login to blogger.com using your Gmail account.
2. Enter the THEME menu> click Edit HTML
3. Please find the following code ]]> and paste the code below exactly ABOVE the code.

.boxcontainer {
  padding:20px 0px 0px 0px;
  border:2px solid #1588E3;
  vertical-align:middle;
  width:100%;
  position:relative;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  border-top-right-radius:15px;
  border-top-left-radius:15px;
  }
  
.boxcontainer .boxes {
  padding:0px;
  width:100%;
  background:#1589E3;
  position:absolute;
  top:-15px;
  left:0px;
  border-radius:15px;
  padding-top:2px;
  padding-bottom:2px;
  }
  
.boxcontainer .boxes .textboxes {
  background:transparent;
  padding:0px;
  color:#fff;
  text-align:center;
  font-weight:bold;
  }
  
.quotebox {
  background:#ddd;
  margin:10px auto;
  margin-left:15px;
  margin-right:15px;
  border-radius:7px;
  }
  
.quotebox p {
  padding:10px;
  color:#444;
  font-family:arial;
  }
  
.authores {
  background:#1589E3;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  padding-bottom:1px;
  padding-top:11px;
  }
  
.authores h2 {
  color:#fff;
  font-size: 14px;
  text-align:center;
  }

.textboxes p {
 margin:0;
 color:#fff; 
}

4. If you have clicked please SAVE and now we enter the Post menu.
5. Next, you copy the code below and paste it right in the HTML menu [not compose].

Tulis Textnya Disini.

Text Quote

– Umar bin Khattab –

Please change the red code with the text according to your wishes, and change the green code with the name as you wish.

6. If you have clicked please PUBLISH and done.

How easy is not for tutorial How to Make a Text Quote Box in Blogger Posts, well for those of you who have questions or problems about bloggers please comment in the comments column below this article.

Leave a Comment