<div class="post-content"> <h2 class="entry-title">Một số code khung viền trang trí cho WordPress</h2> <span class="vcard" style="display: none;"><span class="fn"><a href="https://webchuyennghiep247.com/author/vietnc" rel="author" title="Đăng bởi vietnc">vietnc</a></span></span><span class="updated" style="display: none;">2019-10-20T17:04:25+07:00</span> <div class="post-meta"> <span class="meta-author"><i class="far fa-user"></i> By <a href="https://webchuyennghiep247.com/author/vietnc" rel="author" title="Đăng bởi vietnc">vietnc</a></span> <span class="meta-cats"><i class="far fa-folder"></i> <a href="https://webchuyennghiep247.com/website" rel="category tag">Website</a></span> <span class="meta-tags"><i class="far fa-envelope"></i> <a href="https://webchuyennghiep247.com/wordpress-la-gi" rel="tag">Wordpress là gì</a></span> <span class="meta-comments"><i class="far fa-comments"></i> <a class="hash-scroll" href="https://webchuyennghiep247.com/mot-so-code-khung-vien-trang-tri-cho-wordpress#respond">0 Comments</a></span> <div class="post-views post-2012 entry-meta"><span class="post-views-count">2,722</span></div> </div> <div class="entry-content"> <span face="arial, helvetica, sans-serif" style="font-size: 16px;">Cho các bạn muốn “mỳ ăn liền” trang trí cho website của mình, code dạng HTML chỉ việc coppy và paste nên có thể dùng cho blogger, wordpress nên các bạn không phải lo về vấn đề hiển thị hay tương thích nhé. Chúng ta cùng bắt đầu tạo khung viền trong wordpress nào !</span> <h2><span face="arial, helvetica, sans-serif" style="color: black; font-size: 24px;"><strong>Một số code khung viền trang trí cho <a href="https://webchuyennghiep247.com/wordpress-la-gi-tai-sao-nen-dung-wordpress-de-lam-website" style="color: black;">WordPress</a></strong></span></h2> <span face="arial, helvetica, sans-serif" style="font-size: 16px;"><span style="text-decoration: underline;"><span style="color: red; text-decoration: underline;"><strong>Chú ý 1:</strong></span></span> Các bạn là <strong>phải</strong> dán code vào chế độ <strong>Văn bản</strong> (hay có mấy tên khác là chế độ <strong>Text </strong>hoặc chế độ <strong>HTML</strong>) của khung soạn thảo nhé. Cho những bạn chưa biết thì nếu các bạn muốn dán code vào thanh bên thì widget cần sử dụng ở đây là <strong>widget Văn bản</strong> nhé !</span> <span face="arial, helvetica, sans-serif" style="font-size: 16px;"><span style="text-decoration: underline;"><span style="color: red; text-decoration: underline;"><strong>Chú ý 2:</strong></span></span><span style="color: black;"> Coppy qua notepad Thay dấu <strong>”</strong> bằng dấu<span face="arial, helvetica, sans-serif"><strong> “</strong> (dấu nháy kép thẳng đứng)</span></span></span> <h3><span face="arial, helvetica, sans-serif" style="font-size: 20px;"><strong>Các code đường viền cơ bản</strong></span></h3> <h4><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><strong>Dạng nét liền (solid)</strong></span></h4> <p style="border: 2px solid rgb(255, 20, 147); overflow-wrap: break-word; padding: 8px; word-wrap: break-word;"><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><div style=”padding: 8px; border: <strong><span style="color: red;">2px</span></strong> <span style="color: green;"><strong>solid</strong> </span><strong><span style="color: magenta;">#FF1493</span></strong>; word-wrap: break-word;”><strong>CHÈN NỘI DUNG VÀO ĐÂY</strong></div></span></p> <h4><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><strong>Dạng dấu chấm (dotted)</strong></span></h4> <div style="border: 2px dotted rgb(255, 105, 180); overflow-wrap: break-word; padding: 8px; word-wrap: break-word;"><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><div style=”padding: 8px; border: <strong><span style="color: red;">2px</span> <span style="color: green;">dotted </span><span style="color: magenta;">#FF69B4</span></strong>; word-wrap: break-word;”><strong>CHÈN NỘI DUNG VÀO ĐÂY</strong></div></span></div> <h4><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><strong>Dạng nét đứt (dashed)</strong></span></h4> <div style="border: 2px dashed rgb(255, 69, 0); overflow-wrap: break-word; padding: 8px; word-wrap: break-word;"><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><div style=”padding: 8px; border: <strong><span style="color: red;">2px </span><span style="color: green;">dashed </span><span style="color: magenta;">#FF4500</span></strong>; word-wrap: break-word;”><strong>CHÈN NỘI DUNG VÀO ĐÂY</strong></div></span></div> <h4><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><strong>Dạng nét đôi (double)</strong></span></h4> <div style="border: 6px double rgb(138, 43, 226); overflow-wrap: break-word; padding: 8px; word-wrap: break-word;"><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><div style=”padding: 8px; border: <strong><span style="color: red;">6px </span><span style="color: green;">double </span><span style="color: magenta;">#8A2BE2</span></strong>; word-wrap: break-word;”><strong>CHÈN NỘI DUNG VÀO ĐÂY</strong></div></span></div> <h4><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><strong>Dạng đường rãnh (groove)</strong></span></h4> <div style="border: 10px groove salmon; overflow-wrap: break-word; padding: 8px; word-wrap: break-word;"><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><div style=”padding: 8px; border: <strong><span style="color: red;">10px </span><span style="color: green;">groove </span><span style="color: magenta;">salmon</span></strong>; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div></span></div> <span face="arial, helvetica, sans-serif" style="font-size: 16px;"><strong>Dạng chóp (ridge)</strong></span> <div style="border: 10px ridge salmon; overflow-wrap: break-word; padding: 8px; word-wrap: break-word;"><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><div style=”padding: 8px; border: <strong><span style="color: red;">10px </span><span style="color: green;">ridge </span><span style="color: magenta;">salmon</span></strong>; word-wrap: break-word;”><strong>CHÈN NỘI DUNG VÀO ĐÂY</strong></div></span></div> <span face="arial, helvetica, sans-serif" style="font-size: 16px;"><strong>Dạng đổ bóng bên trong (inset)</strong></span> <div style="border: 10px inset rgb(143, 188, 143); overflow-wrap: break-word; padding: 8px; word-wrap: break-word;"><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><div style=”padding: 8px; border: <strong><span style="color: red;">10px </span><span style="color: green;">inset </span><span style="color: magenta;">#8FBC8F</span></strong>; word-wrap: break-word;”><strong>CHÈN NỘI DUNG VÀO ĐÂY</strong></div></span></div> <span face="arial, helvetica, sans-serif" style="font-size: 16px;"><strong>Dạng đổ bóng bên ngoài (outset)</strong></span> <div style="border: 10px outset rgb(143, 188, 143); overflow-wrap: break-word; padding: 8px; word-wrap: break-word;"><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><div style=”padding: 8px; border: <strong><span style="color: red;">10px </span><span style="color: green;">outset </span><span style="color: magenta;">#8FBC8F</span></strong>; word-wrap: break-word;”><strong>CHÈN NỘI DUNG VÀO ĐÂY</strong></div></span></div> <span face="arial, helvetica, sans-serif" style="font-size: 16px;"><em>Ngoài ra các bạn có thể thêm thuộc tính <strong>border-radius</strong> để bo tròn 4 góc, ví dụ như thế này:</em></span> <div style="border-radius: 25px; border: 2px solid rgb(255, 20, 147); overflow-wrap: break-word; padding: 8px; word-wrap: break-word;"><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><div style=”<span style="color: blue;"><strong><em>border-radius: 25px</em></strong></span>; padding: 8px; border: <strong><span style="color: red;">2px</span> <span style="color: green;">solid</span> <span style="color: magenta;">#FF1493</span></strong>; word-wrap: break-word;”><strong>CHÈN NỘI DUNG VÀO ĐÂY</strong></div></span></div> <span face="arial, helvetica, sans-serif" style="font-size: 16px;"><em>Nếu nội dung trong khung quá dài, các bạn có thể dùng thuộc tính <strong>overflow</strong> kết hợp với <strong>max-height</strong> (hoặc height) để thu gọn lại (và sẽ xuất hiện thanh cuộn), ví dụ:</em></span> <span face="arial, helvetica, sans-serif" style="color: red; font-size: 16px;"><strong>Code:</strong></span> <div style="border: 2px solid rgb(255, 20, 147); overflow-wrap: break-word; padding: 8px; word-wrap: break-word;"><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><div style=”<span style="color: #ff6600;"><strong>max-height: 150px</strong></span>; <span style="color: blue;"><strong>overflow: auto</strong></span>; padding: 8px; border: <strong><span style="color: red;">2px</span> <span style="color: green;">solid </span><span style="color: magenta;">#00FF00</span></strong>; word-wrap: break-word;”><span style="color: black;"><a href="https://webchuyennghiep247.com/wordpress-la-gi" style="color: black;"><strong>WordPress</strong></a></span> là một phần mềm nguồn mở (<em>Open Source Software </em>) được viết bằng ngôn ngữ lập trình website PHP và sử dụng hệ quản trị cơ sở dữ liệu MySQL; cũng là bộ đôi ngôn ngữ lập trình website thông dụng nhất hiện tại. WordPress được ra mắt lần đầu tiên vào ngày <strong>27/5/2003</strong> bởi tác giả Matt Mullenweg và Mike Little. Hiện nay WordPress được sở hữu và phát triển bởi công ty Automattic có trụ sở tại San Francisco, California thuộc hợp chủng quốc Hoa Kỳ.</div></span></div> <span face="arial, helvetica, sans-serif" style="color: red; font-size: 16px;"><strong>Kết quả:</strong></span> <div style="border: 2px solid rgb(255, 20, 147); max-height: 100px; overflow-wrap: break-word; overflow: auto; padding: 8px; word-wrap: break-word;"><span face="arial, helvetica, sans-serif" style="font-size: 16px;"><span style="color: black;"><a href="https://webchuyennghiep247.com/wordpress-la-gi" style="color: black;"><strong>WordPress</strong></a></span> là một phần mềm nguồn mở (<em>Open Source Software </em>) được viết bằng ngôn ngữ lập trình website PHP và sử dụng hệ quản trị cơ sở dữ liệu MySQL; cũng là bộ đôi ngôn ngữ lập trình website thông dụng nhất hiện tại. WordPress được ra mắt lần đầu tiên vào ngày <strong>27/5/2003</strong> bởi tác giả Matt Mullenweg và Mike Little. Hiện nay WordPress được sở hữu và phát triển bởi công ty Automattic có trụ sở tại San Francisco, California thuộc hợp chủng quốc Hoa Kỳ.</span></div> <span face="arial, helvetica, sans-serif" style="color: purple; font-size: 16px; text-decoration: underline;"><strong>Chú ý chung:</strong></span> <span face="arial, helvetica, sans-serif" style="font-size: 16px;"><span style="color: red;"><strong>Phần chữ màu đỏ</strong></span> là độ dày của đường viền</span> <span face="arial, helvetica, sans-serif" style="font-size: 16px;"><span style="color: green;"><strong>Phần chữ màu xanh lá cây</strong></span> là loại đường viền (solid, dotted, dashed,…)</span> <span face="arial, helvetica, sans-serif" style="font-size: 16px;"><span style="color: magenta;"><strong>Phần chữ màu hồng</strong></span> là màu đường viền, có thể sử dụng tên gọi của màu (red, black,…), mã màu hex (#ffffff, #ff0000,…) hoặc các loại mã màu khác để thay màu cho đường viền.</span> <em><span face="arial, helvetica, sans-serif" style="font-size: 16px;">Nguồn: https://wptutbyserahwang.wordpress.com</span></em> <div class="kk-star-ratings kksr-valign-bottom kksr-align-right" data-id="2012" data-slug="" style="display: none;"> <div class="kksr-stars"> <div class="kksr-stars-inactive"> <div class="kksr-star" data-star="1"> <div class="kksr-icon" style="height: 24px; width: 24px;"></div> </div> <div class="kksr-star" data-star="2"> <div class="kksr-icon" style="height: 24px; width: 24px;"></div> </div> <div class="kksr-star" data-star="3"> <div class="kksr-icon" style="height: 24px; width: 24px;"></div> </div> <div class="kksr-star" data-star="4"> <div class="kksr-icon" style="height: 24px; width: 24px;"></div> </div> <div class="kksr-star" data-star="5"> <div class="kksr-icon" style="height: 24px; width: 24px;"></div> </div> </div> <div class="kksr-stars-active" style="width: 140px;"> <div class="kksr-star"> <div class="kksr-icon" style="height: 24px; width: 24px;"></div> </div> <div class="kksr-star"> <div class="kksr-icon" style="height: 24px; width: 24px;"></div> </div> <div class="kksr-star"> <div class="kksr-icon" style="height: 24px; width: 24px;"></div> </div> <div class="kksr-star"> <div class="kksr-icon" style="height: 24px; width: 24px;"></div> </div> <div class="kksr-star"> <div class="kksr-icon" style="height: 24px; width: 24px;"></div> </div> </div> </div> <div class="kksr-legend"><strong class="kksr-score">5</strong> <span class="kksr-muted">/</span> <strong>5</strong> <span class="kksr-muted">(</span> <strong class="kksr-count">5</strong> <span class="kksr-muted"> bình chọn </span> <span class="kksr-muted">)</span></div> </div> </div> </div>
