Technique for inserting article frame code on the website
To insert code into a website, especially in WordPress, you need to have some existing code and then insert it into your website content. To insert into these frames, you can do the following.
Step 1: Log in to your website account. Account requirements must have the usual text editing function.
Step 2: Access to Posts > Write new articles > You write content as usual.
Step 3: Insert code to create a frame for the article.
You switch to text mode to insert the code content below that you like into the lower part of your text content.
After selecting copy and paste, you can switch back to the visual part to see the results.
Article frame code samples for beautiful websites
Sample 1: Code to insert article frame with background frame and green border:
This is the default green background frame with green text. You can also easily change the text color to work like Word Excel as in our image below. This frame code is intended to emphasize a certain content to make your content more prominent.
The code inserts a frame with a green background, style 2
<div style="background: #ebf6e0; border-radius: 5px; border: 1px solid #b3dc82; box-sizing: border-box; float: none; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline; color: #5f9025; font-family: arial, sans-serif; font-size: 15px;">Below is the code to insert the template in the border. You can edit this content yourself to best suit your content. We are a user guide dedicated to sharing knowledge, experience and cool stuff.</div>
Sample 2: Code to insert background frame and gold text:
This is the type of code that causes notifications to attract people's attention
Note:
The code to insert post frame type 3 notes
<div class="symple-box yellow center" style="background: #fffdf3; border-radius: 5px; border: 1px solid #f2dfa4; box-sizing: border-box; color: #c4690e; float: none; font-family: Arial, sans-serif; font-size: 15px; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline;"> <strong style="background: transparent; border: 0px; box-sizing: initial; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Note</strong>: <ul style="background: transparent; border: 0px; box-sizing: initial; margin: 0px 0px 20px 20px; outline: 0px; padding: 0px; vertical-align: baseline;"> <li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="https://how.congdongso.net/code-hien-thi-hotline-tren-website/" target="_blank" rel="noopener">Code to display hotline on website</a></li> <li><a href="https://how.congdongso.net/code-thu-gon-noi-dung/" target="_blank" rel="noopener">The code condenses product details and categories on Flatsome</a></li> <li><a href="https://how.congdongso.net/code-hien-thi-khuyen-mai-dep-cho-flatsome/" target="_blank" rel="noopener">The code shows nice promotions for flatsome like Cellphones</a></li> <li><a href="https://how.congdongso.net/code-tu-dong-luu-anh-vao-hot/" target="_blank" rel="noopener">Code to automatically save images to hot when copying images from other pages</a></li> </ul> </div>
Sample 3: Code to insert an article frame with black text on a white background and shadow
This is a sample code to insert a post or comment frame to load some pages that I see or if you like, you can also put it on your page depending on your preferences.
» Your email address will not be displayed.
» Items without an asterisk (*) are not required.
» Comment in accented Vietnamese to make your content as neat and clear as possible.
The code inserts a post frame with 4 comments
<div style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px; box-sizing: inherit; margin-bottom: 10px; padding: 15px; line-height: 1.6em; border-radius: 5px;"><span style="box-sizing: inherit; font-weight: bold; line-height: 2.0em;"><span style="color: black;"> Comment content</span></span> <span style="color: #222222;">» Your email address will not be displayed.</span> <span style="color: #222222;">» Items without an asterisk (*) are not required.</span> <span style="color: #222222;">» Comment in accented Vietnamese to make your content as neat and clear as possible.</span></div>
Sample 4: Code to insert gradient color frame for articles:
This is a content template that uses gradient background colors and borders that look extremely beautiful. We want to share with you.
Source: howto.edu.vn
The code inserts a 5-color gradient post frame
<div style="background: linear-gradient(40deg, rgba(76, 175, 80, 0.08), rgba(255, 235, 59, 0.09)); border-radius: 5px; border-width: 3px; border-style: solid; border-color: rgba(213, 213, 213, 0); border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; color: #333333; border-image-source: linear-gradient(to right, rgba(76, 175, 80, 0.5), rgba(156, 39, 176, 0.66), rgba(3, 169, 244, 0.65)); border-image-slice: 1; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 1em; vertical-align: baseline; text-align: left;">This is a content template that uses gradient background colors and borders that look extremely beautiful. We want to share with you. If you reshare, please cite the source. Source: <ahowto.edu.vn" target="_blank" rel="noopener">howto.edu.vn</a></div>
Sample 5: Demo code to insert comment post frame:
This is a snippet of citation annotation code to help your citation stand out more
Note: The Code Block has a 400 KB limit, which is around 300,000 characters.
The code inserts a 6-color gradient post frame
<blockquote style="-webkit-text-stroke-width: 0px; background: #e8f9f4; border: 1px solid #8ee3c8; box-sizing: border-box; clear: right; color: #181818; font-family: 'Gotham SSm A', 'Gotham SSm B', Gotham, sans-serif; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 300; letter-spacing: normal; line-height: 1.6em; margin: 1em 0px; orphans: 2; padding: 1em; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><strong style="box-sizing: border-box; font-weight: 500;">Note: </strong>The Code Block has a 400 KB limit, which is around 300,000 characters.</blockquote>
Sample 6: Code to insert featured content post frame:
This code makes your content stand out in your article. They will be as colorful as the one below.
The code inserts the post frame style 7 with featured content.
<div class="content-box-yellow" style="background-color: #fef5c4; border: 1px solid #fadf98; box-sizing: inherit; margin: 0px 0px 25px; overflow: hidden; padding: 20px;"><span style="color: #222222; font-family: sans-serif;">howto.edu.vn started from a personal blog with the purpose of sharing and providing graphic knowledge and utilities in life. After a period of operation, howto.edu.vn has developed strongly into a large community, a place to exchange knowledge, experience, and general documents in the field of graphics and information technology. information and office amenities.</span></div>
Sample 7: Code to insert google's note frame:
Code snippet for inserting article frame style 8 to insert Google's note frame:
<aside class="caution" style="background: rgb(255, 243, 224); box-sizing: inherit; color: #dd2c00; font-family: Roboto, sans-serif; font-size: 14px; margin: 16px 0px; padding: 12px 24px 12px 20px;"><strong style="box-sizing: inherit; margin-top: 0px;">Caution:</strong><span style="box-sizing: inherit; margin-bottom: 0px;"> This number only tracks requests that have been logged since DevTools was opened. If other requests occurred before DevTools was opened, those requests aren't counted.</span></aside>
Sample 8: Code to insert article frame with title background:
Create a form style frame separated by an underline in the image below
➦ Article title
➧ Content you are interested in
- Write the content you want to convey. Article frame code for website 1
- Article frame code for website 2
- Article frame code for website 3
Code to insert post frame style 1.
<div class="noidung_chu_y" style="background-color: #fff;"> <div class="chu_y" style="border: 2px solid #004695; border-radius: 5px;"> <div class="title_chuy" style="background-color: #2a79c8; color: #ffffff; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 10px 16px;"> <p style="margin-bottom: 0; margin-top: 0;"><span style="font-size: 140%;"><span style="color: #ed1c24;">➦ </span></span>Article title</p> </div> <div class="noidung_chu_y" style="background-color: #fff; padding: 1em;"> <span style="font-size: 16px; color: #0000ff;"><strong>➧ Content you are interested in</strong></span> <hr /> <ul> <li>Write the content you want to convey. Article frame code for website 1</li> <li>Article frame code for website 2</li> <li>Article frame code for website 3</li> </ul> </div> </div> </div>
Summarize
The insertion article frame code for website is extremely necessary. It helps your article stand out more. For the content that needs attention, you just need to insert this code content into the article and then change the content as you wish.
Good luck. If you have any samples or good ideas, you can leave us a comment and we will review and create appropriate code.
EN 
VI