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 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 đề.
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>

Trang Web tham khảo code :
  1. https://www.windows2it.com/2015/09/tao-sitemap-so-do-cho-blogspot-theo-phong-cach-chuyen-nghiep.html [ Site map Blogspot ]
  2. http://codfe.com/cac-mau-tieu-de-dep-dung-cho-web [ Code tạo tiêu đề nổi bật ]

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