Blog viết content marketing được xem chiến lược content hàng đầu trong tiếp thị nội dung. Bao gồm code cục bộ sử dụng trên :
Tìm hiểu thêm về UI/UX Designer - thiết kế giao diện/trải nghiệm : Thiết kế ( UX - User Experience) - Trải nghiệm người dùng Thiết kế ( UI User Interface ) - giao diện người dùng và code toàn cục sử dụng trên toàn bộ trang Web. Trong phạm vi bài viết vietquangcao.xyz xin được chia sẽ các code dễ sử dụng dạng "Copy" + "Paste".
Sau đây là một số Code dành cho trang chủ { nền tảng Blog spot - wordpress - weebly,... } :
Code tạo menu.
Code tạo thanh menu ngang mẫu 1 :
Minh họa mẫu menu ngang số 1 :
Nội dung đang tiếp tục được cập nhật...
Chia sẻ code làm đẹp trang tĩnh { nền tảng Blog spot - wordpress - weebly,... } :
Nội dung đang được cập nhật...
Code tạo site map cho blogspot :
Mẫu sitemap Blogspot số 1 :
Mẫu chỉ phù hợp cho nền tảng Blogspot.
Nội dung đang tiếp tục được cập nhật...
Chia sẻ code làm đẹp trang nhãn { nền tảng Blog spot - wordpress - weebly,... } :
Nội dung đang được cập nhật...
Chia sẻ code làm đẹp cho trang bài viết { nền tảng Blog spot - wordpress - weebly,... } :
Nội dung đang được cập nhật...
Chia sẻ code - toàn trang :
Code làm đẹp tiêu đề.
<style> .codfe-tieude-blog-content-marketing{ text-align:center; } .codfe-line:after { content: ""; position: absolute; top: 10px; height: 1px; width: 69px; left: 50%; margin-left: 15px; z-index: 5; background: #F4DD67; } .codfe-line:before { content: ""; position: absolute; top: 10px; height: 1px; width: 69px; left: 50%; margin-left: -83px; z-index: 5; background: #F4DD67; } .codfe-line{ position: relative; height: 30px; display: block; background: url('https://1.bp.blogspot.com/-I5YkEKPyDQ4/X_6tXBeW6jI/AAAAAAAAAvQ/7MyFxXyOYlQVro0JFZP8pQgPS3h_a9wKgCLcBGAsYHQ/s1600/Xuongdongremcua.png') center bottom no-repeat; } .codfe-description{ padding-top:15px; } </style> <div class="codfe-tieude-blog-content-marketing"> <h3 class="codfe-title">Viết Blog Content Marketing <span class="line"> </span> </h3> <span class="codfe-line"></span> <p class="codfe-description" >Blog viết content marketing được xem chiến lược content hàng đầu trong tiếp thị nội dung</p> </div>
Minh họa mẫu tiêu đề số 1 :
Code làm đẹp tiêu đề Mẫu 2 : <style> .box-title-new {position:relative;margin:20px 0;text-align:center;} .box-title-new .box-title-name-new {font-size:18px;font-weight:900;text-transform:uppercase;color:#fff;background:#00AA46;display:inline-block;vertical-align:top;position:relative;z-index:1;padding:10px 20px;marrgin-bottom:20px;border-radius:15px;} .box-title-new .box-title-name-new:before {content:"";position:absolute;border-top:10px solid #00aa46;border-left:15px solid transparent;border-bottom:7px solid transparent;border-right:15px solid transparent;left:calc(50% - 40px);bottom:-25px;width:50px;} .box-title-new .box-title-name-new:after {content:"";position:absolute;z-index:2;bottom:-18px;height:9px;width:200px;left:calc(50% - 100px);border-top: 2px solid #00aa46;} </style> <div class="box-title-new"> <div class="box-title-name-new"><span class="null"> Hôm nay chúng ta sẽ cùng nhau khám phá thế giới rèm văn phòng theo phong cách mới lạ, đẹp và tiện dụng . </span> </div> </div>
Minh họa mẫu tiêu đề số 2 :
Code làm đẹp tiêu đề Mẫu 3 : <style type='text/css'> h4.tde span:before {content:'';background:url(http://web.ncnncn.com/wp-content/uploads/2017/06/bgh1l.png);width:80px;height:70px;z-index: -1;}/* ======================================= */ .title-comm {color:#fff;font-size:18px;position:relative;margin-top:30px;margin-bottom:30px;font-weight:700;background-color:#fff;text-align:center;} h4.title-comm:before {content:'';position:absolute;top:50%;left:0;right:0;margin-top:0;border-top:2px solid #d0d2d3;z-index:1;display:block;} .title-comm .title-holder {min-width:350px;height:45px;background-color:#56bbe7;height:auto;line-height:45px;padding:0px 20px;position:relative;z-index:2;text-align:center;display:inline-block;min-width:280px;} .title-holder:before {content:"";position:absolute;right:-15px;border-width:0px;bottom:0px;border-style:solid;border-color:#5c9efe transparent;display:block;width:0;height:0;border-top:23px solid transparent;border-bottom:22px solid transparent;border-left:15px solid #56bbe7;} .title-holder:after {content:"";position:absolute;left:-15px;border-width:0px;bottom:0px;border-style:solid;border-color:#5c9efe transparent;display:block;width:0;height:0;border-top:23px solid transparent;border-bottom:22px solid transparent;border-right: 15px solid #56bbe7;} </style> <h4 class="title-comm"><span class="title-holder">Đầu tiên xin giới thiệu anh bạn rèm cửa tổ ong</span></h4>
Minh họa mẫu tiêu đề số 2 :
Code làm đẹp hình ảnh :
Code chèn hình ảnh tự co dãn : Hình ảnh minh họa hình ảnh tự co dãn :
Code Link liên kết :
Dạng Link neo <a name> : <a name="ten">Viết quảng cáo</a> <a href="#ten">liên kết đi đến bài viết nội dung văn bản quảng cáo - vị trí có name = tên </a> <a href="LINK_bài_viết#Tên_gán_cho_vị_trí ">Nội_dung</a> <a name="Tên_gán_cho_vị_trí ">Nội_dung</a> Dạng Link neo <ID> : <p id="noi-dung"> </p> Trang Web tham khảo code :
Công cụ kiểm tra - chuyển đổi code Web trực tuyến :
|