Code làm đẹp blog viết content marketing

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 :
  1. Trang chủ
  2. Trang tĩnh
  3. Trang nhãn
  4. Trang bài viết
  5. ...
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 :

Code tạo MENU FLOAT RIGHT  :

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 đề.
Code làm đẹp tiêu đề Mẫu 1 :

<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:&quot;&quot;;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:&quot;&quot;;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:&#39;&#39;;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:&#39;&#39;;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:&quot;&quot;;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:&quot;&quot;;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.
Code chèn quảng cáo 2 bên :

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 :
  1. https://www.ivietpr.com/2019/03/code-blogger-lam-dep-giao-dien-trang-bai-viet.html [ Code làm đẹp trang bài viết nền tảng blogspot ]
  2. https://www.ivietpr.com/2019/02/nhung-meo-nho-khi-chinh-sua-giao-dien-template-blogger.html [ Mẹo vặt chỉnh sửa giao diện Blogspot ]
  3. https://www.windows2it.com/2015/09/tao-sitemap-so-do-cho-blogspot-theo-phong-cach-chuyen-nghiep.html [ Site map Blogspot ]
  4. http://codfe.com/cac-mau-tieu-de-dep-dung-cho-web [ Code tạo tiêu đề nổi bật ]
  5. http://www.vietbaiquangcaosanpham.com/thu-thuat-viet-quang-cao-online/tro-thu-dac-luc-cho-cong-viec-viet-quang-cao-va-seo-noi-dung [ Trợ thủ đắc lực viết quảng quảng cáo & làm content marketing ]
  6. https://webchuyennghiep247.com/mot-so-code-khung-vien-trang-tri-cho-wordpress [ Khung viền trang trí ]
  7. https://webchuyennghiep247.com/mot-so-code-khung-vien-trang-tri-cho-wordpress
  8. https://www.landgonow.com/2011/08/tong-hop-khung-chua-code-dep-cho.html
  9. https://hocban.vn/text-box-html-css-template-khung-mau-cho-bai-viet
  10. http://thietkeinan.truongthinh.info/thu-thuat-seo/huong-dan-viet-bai-dep-chuan-seo-theo-kich-ban-da-tao-truoc-/ [ http://thietkeinan.truongthinh.info/css/style.css ]

Công cụ kiểm tra - chuyển đổi code Web trực tuyến :

  1. https://jsbin.com [ Soạn thảo Html trực tuyến ]
  2. https://www.hacktrix.com/adsense-code-converter/index.php [ Chuyển đổi code Ads - blogger ]
  3. https://www.systutorials.com/tools/bbeditor/ : [ Chuyển đồi Code BB ]
  4. https://lelinhtinh.github.io/de4js/ : Giải mã Javascript
  5. https://javascriptobfuscator.com/Javascript-Obfuscator.aspx : Mã hóa code
  6. https://developers.facebook.com/docs/plugins/page-plugin : Công cụ chuyển đổi - tạo Plungin Facebook
  7. https://developers.facebook.com/ : Công cụ Facebook
  8. http://mamauhtml-css.vpssim.vn/ : Tra code mã màu online
Comments