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 đăng bài trang chủ số 1 : Minh họa mẫu code đăng bài trang chủ số 1 : Code tạo thanh menu ngang mẫu 1 :
Minh họa mẫu menu ngang số 1 :
Code tạo thanh menu ngang mẫu 2 : Minh họa mẫu menu ngang số 2 : Minh họa mẫu menu Float Right : Code tạo RESPONSIVE DROP MENU : Minh họa mẫu Responsive Drop Menu : Code tạo MENU RESPONSIVE CHUẨN HTML5 Minh họa mẫu Menu Responsive HTML5 : Code tạo MENU CỐ ĐỊNH KHI SROLL CHUỘT Minh họa mẫu Menu cố định khi Scroll chuột : Code cố định thanh menu (sticky menu) Minh họa mẫu Code cố định thanh menu (sticky menu) : 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,... } :
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,... } : Mẫu code Tùy chỉnh số bài viết hiển thị ở trang nhãn [Label] blogspot :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 cho trang bài viết { nền tảng Blog spot - wordpress - weebly,... } : Code Tạo mục lục giúp di chuyển nhanh đến nội dung trong bài viết blogspot - google site - wordpress - weebly : Minh họa mẫu tạo mục lục di chuyển nhanh đến nội dung bài viết : Code Tạo danh mục sản phẩm : Minh họa mẫu danh mục sản phẩm Nội dung đang tiếp tục đượ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>
Code chèn quảng cáo.
Hình ảnh minh họa banner quảng cáo 2 bên : Code chèn quảng cáo hiển thị góc trái hoặc góc phải màn hình : Hình ảnh minh họa quảng cáo góc trái : Code chèn quảng cáo dính cuối trang : Hình ảnh minh họa quảng cáo dính cuối trang : Text box HTML CSS template, khung mẫu cho bài viết, Code khung viền trang trí - khung chứa code - nổi bật dạng <pre> / <code>, <quote>, <blockquote> : Code Mẫu template số 1 - mẫu viết Bài trang trí thiết kế đẹp mắt theo kịch bản tạo sẵn : Hình ảnh minh họa quảng cáo dính cuối trang : Trang Web tham khảo code :
Công cụ kiểm tra - chuyển đổi code Web trực tuyến :
|