Tôi Viết Code

Welcome to ToiVietCode

Chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé! hihi...
Tôi Viết Code

[Tri ân] Chia sẻ theme ToiVietCode version 6.3.0

Chào mừng các bạn đến với Tôi Viết Code!
Câu chào quen thuộc quá rồi nhỉ =)) ! Do sắp thay áo mới cho blog nên mình sẽ share lại theme hiện tại mình đang xài, đây là phiên bản ToiVietCode 6.3.0. Phía dưới là một số thông tin về theme này:

Ưu điểm giao diện

  • Chuẩn reponsive, phù hợp với các loại màn hình hiện nay)

  • Seo (tạm được) :D

  • Tốc độ khá nhanh

  • Giao diện tạp chí thích hợp cho công việc hay chủ đề của các bạn.

  • Để trải nghiệm tốt hơn mời bạn cmt gmail bên dưới để mình share template cho nhé !

  • Làm thế nào để nhận được nó:

    Để nhận template này thì bạn làm các yêu cầu sau:
    1. Chia sẻ bài viết này lên facebook
    2. Comment xuống bên dưới với nội dung:
    - Link chia sẻ: ...
    - Địa chỉ Email: ...
    * Mình sẽ tổng hợp lại và gửi template này đến các bạn nhanh nhất có thể
    Cấm chia sẻ lại hoặc dùng với mục đích thương mại. Tôn trọng người khác, người sẽ tôn trọng lại bạn!
    [Tri ân] Chia sẻ theme ToiVietCode version 6.3.0
    N
    Tôi Viết Code

    Thuộc tính border là gì, cách sử dụng ra sao?

    Chào các bạn, đã lâu rồi mình không ra bài rồi nhỉ, công một số lý do về công việc thôi, mong các bạn thông cảm.
    Ở bài viết hôm nay mình sẽ giới thiệu cho các bạn newbie về thuộc tính border và cách sử dụng của nó, các bạn nhớ ủng hộ nhé!

    Border là gì?

    Border hiểu đơn giản là một thuộc tính cơ bản trong CSS được sử dụng để tạo viền cho phần tử được chọn.

    Border sử dụng như thế nào?

    Để thêm đường viền cho phần tử, bạn cần chỉ ra các tham số: size độ rộng đường viền, style kiểu đường viền (nét liền, đứt, chấm ...) và color màu đường.

    Thuộc tính border

    Sử dụng 3 tham số size, style, color trên có thể được viết trên một dòng CSS với thuộc tính border
    Ví dụ:
    <style>
    .vidu1{padding:15px;border:2px solid #069999}
    </style>
    <p class="vidu1">Ví dụ về đường viền</p>
    Kết quả:

    Ví dụ về đường viền

    Ở ví dụ đoạn CSS border:2px solid #069999 đã hiện ra đường viềnn có độ rộng 5px, kiểu đường liền, với mã màu là #069999.

    Thuộc tính border-width, border-color, border-style

    Ngoài cách viết đường viền theo thuộc tính border như trên, còn có thể sử dụng ba thuộc tính border-width, border-style, border-color để chỉ ra độ rộng, kiểu đường và màu sắc.

    Độ rộng đường là giá trị theo đơn vị px, em...

    Màu sắc là các màu theo quy tắc CSS như màu theo tên, màu hash, màu RGB, rgba

    Kiểu đường nhận các giá trị: none, dotted, dashed, double, groove, ridge, inset, outset, hidden
    Ví dụ:
    <style>
    p.none {border-style: none;}
    p.dotted {border-style: dotted;border-color: orangered;}
    p.dashed {border-width: 5px;border-color: green;border-style: dashed;}
    p.double {border-style: double;border-color: red;}
    p.groove {border-style: groove;}
    p.ridge {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset {border-style: outset;}
    p.hidden {border-style: hidden;}
    </style>
    <p class="none">Không kẻ khung.</p>
    <p class="dotted">Kiểu dotted.</p>
    <p class="dashed">Kiểu dashed.</p>
    <p class="double">Kiểu double.</p>
    <p class="groove">Kiểu grooved.</p>
    <p class="ridge">Kiểu ridged.</p>
    <p class="inset">Kiểu inset.</p>
    <p class="outset">Kiểu outset.</p>
    <p class="hidden">Ẩn kẻ khung (khung không kẻ nhưng độ rộng phần tử vẫn có khung).</p>
    Kết quả:

    Không kẻ khung.

    Kiểu dotted.

    Kiểu dashed.

    Kiểu double.

    Kiểu grooved.

    Kiểu ridged.

    Kiểu inset.

    Kiểu outset.

    Đường viền theo từng cạnh

    Cách viết ở phần trên tác động nên cả bốn cảnh của box, nếu muốn thiết lập cho từng cạnh của box bạn có thể sử dụng thêm thuộc tính.
    Thiết lập độ rộng, kiểu đường, màu sắc cho các thuộc tính: border-top, border-right, border-bottom, border-left.
    Ví dụ:
    <style>
    .vidu2 {border-top: 1px solid green;border-bottom: 2px dotted red;}
    </style>
    <p class="vidu2">Ví dụ kể viền trên dưới</p>

    Ví dụ kể viền trên dưới

    Tương tự như border-color, border-width, boder-style bạn cũng định nghĩa từng tham số màu, độ rộng, kiểu đường một cách riêng biệt cho từng cạnh với, với các thuộc tính:
  • border-left-width





  • border-left-style





  • border-left-color





  • border-top-width





  • border-top-style





  • border-top-color





  • border-right-width





  • border-right-style





  • border-right-color





  • border-bottom-width





  • border-bottom-style





  • border-bottom-color





  • Tổng kết

    Vậy là mình đã chỉ ra những thông tin về border và cách sử dụng của nó rồi. Chúc các bạn có một ngày vui vẻ, thanks for watching!
    Code được tham khảo từ một số nguồn khác nhau
    css
    N
    Tôi Viết Code

    [Tri ân] Chia sẻ theme Tôi Viết Code phiên bản TopThuThuat

    Chào các bạn, đã lâu lắm rồi mình không ra bài nhỉ, và hôm nay để tri ân các độc giả thường xuyên ghé thăm blog của mình thì mình xin tặng cho các bạn Theme Tôi Viết Code phiên bản TopThuThuat!

    Về ý tưởng

    Theme này mình đã edit lại từ phiên bản Tôi Viết Code gốc và lấy ý tưởng từ trang wordpress TopThuThuat để tùy biến nó.

    Thông tin giao diện

    • Chuẩn reponsive, phù hợp với các loại màn hình hiện nay)
    • Seo (tạm được) :D
    • Tốc độ khá nhanh
    • Giao diện tạp chí thích hợp cho công việc hay chủ đề của các bạn.
    • Để trải nghiệm tốt hơn mời bạn cmt gmail bên dưới để mình share template cho nhé!

    Làm thế nào để nhận được chúng?

    Để nhận template này thì bạn làm các yêu cầu sau:
    1. Chia sẻ bài viết này lên facebook
    2. Comment xuống bên dưới với nội dung:
    - Link chia sẻ: ...
    - Địa chỉ Email: ...
    * Mình sẽ tổng hợp lại và gửi template này đến các bạn nhanh nhất có thể.
    tri ân
    N
    Tôi Viết Code

    Tạo popup thông báo khi vào trang

    Chào mừng các bạn đến với Tôi Viết Code!
    Cũng đã lâu rồi mình chưa viết bài, cũng tại không có ý tưởng nào hay ho cả, cũng tại mình chưa có ý tưởng viết. Hôm nay mình sẽ chia sẻ đến cho các bạn cách Tạo popup thông báo khi vào trang cho các bạn nhé. Bắt đầu nào!

    Bước 1:

    Thêm code bên dưới vào trong thẻ body
    <div id='popup'>
    <div class='popup'>
    Chào mừng các bạn đến với <b>Tôi Viết Code</b>.
    <span class='close' onclick='checkPopup()'>x</span>
    </div>
    </div>

    Bước 2:

    Thêm CSS vào thẻ style
    #popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(0,0,0,.7);
    }
    #popup.active {display: none}
    #popup .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
    width: 300px;
    padding: 30px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,.2);
    color: #333;
    font-size: 16px;
    line-height: 1.7;
    }
    .popup a {
    position: relative;
    padding-bottom: 1px;
    display: inline-block;
    }
    .popup a::after {content: ""; background: #337ab7; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0}
    .popup .close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    background: #000;
    border-radius: 100px;
    padding: 10px;
    cursor: pointer;
    text-decoration: none;
    }

    Bước 3:

    Thêm Javascript vào trong thẻ head
    <script tyle='text/javascript'>
    //<![CDATA[
    var _0x9b3b = ["statusPopup", "getItem", "active", "toggleClass", "#popup", "click", ".close", "ready", "setItem", "removeItem"];
    $(document)[_0x9b3b[7]](function () {
        var _0x9523x1 = sessionStorage[_0x9b3b[1]](_0x9b3b[0]);
        if (_0x9523x1 == 1) {
            $(_0x9b3b[4])[_0x9b3b[3]](_0x9b3b[2])
        };
        if (_0x9523x1 != 1) {
            $(_0x9b3b[6])[_0x9b3b[5]](function () {
                $(_0x9b3b[4])[_0x9b3b[3]](_0x9b3b[2])
            })
        }
    });
    
    function checkPopup() {
        var _0x9523x1 = sessionStorage[_0x9b3b[1]](_0x9b3b[0]);
        if (_0x9523x1 == undefined) {
            sessionStorage[_0x9b3b[8]](_0x9b3b[0], 1)
        };
        if (_0x9523x1 == 1) {
            sessionStorage[_0x9b3b[9]](_0x9b3b[0]);
            $(_0x9b3b[4])[_0x9b3b[3]](_0x9b3b[2])
        }
    }
    //]]></script>

    Lời kết

    Các bạn có thể sử dụng thủ thuật trên để tạo thông báo mới cho member khi vào trang.
    Chúc các bạn thành công!
    tutorial
    N
    Tôi Viết Code

    Một button trị giá 300 triệu đô - Cái nhìn khác về giao diện và chức năng

    Đây là một câu chuyện nho nhỏ, về một button nho nhỏ và một số tiền... không nhỏ chút nào. Mình đọc được chuyện này trong cuốn Don't make me think - một cuốn sách khá hay về UI/UX.

    Ngày xửa ngày xưa, có một trang web bán hàng...

    Ngày xửa ngày xưa, ở một đất nước nọ, có một trăng web bán hàng... Chức năng cơ bản của một trang web bán hàng thì ai cũng biết: hiển thị hàng, cho vào giỏ và thanh toán. Câu chuyện của chúng ta bắt đầu ở chức nang "Thanh toán", khi người dùng đã cho hết hàng vào giỏ, một form nho nhỏ xinh xinh sẽ hiện ra với hai trường Tên Đăng Nhập và Mật Khẩu, hai button Đăng Nhập và Đăng Ký. Thế nhưng chính cái forrm be bé xinh xinh này đã gây thiệt hại đến 300.000.000$/năm cho trang web bán hàng.
    Vấn đề ở chỗ, người dùng phải đăng nhập hoặc đăng ký trước khi muốn thanh toán. Đội ngũ lập trình nghĩ rằng "Chỉ cần đăng ký tài khoản lần đầu, thông tin người dùng có thể được lưu lại, ở những lần sau họ không cần nhập địa chỉ và thông tin thanh toán nữa. Người dùng tiết kiệm được thời gian, cũng khuyến khích được người dùng quay lại mua hàng, hai bên cùng có lợi còn gì?".

    Lập trình viên đôi khi nghĩ rằng mình hiểu người dùng

    Đội ngũ designer đã làm một cuộc thử nghiệm, đưa tiền cho người dùng để họ thực hiện quá trình mua hàng và thanh toán. Đối với những khách hàng mới của trang web, họ phát hiện ra một điều: người dùng rất ghét việc đăng ký, với suy nghĩ "Mình muốn mua hàng, chứ không phải muốn đăng ký đăng kiếc gì cả". Chưa kể, người dùng còn sợ bị mất thông tin cá nhân hoặc bị gửi mail spam vào hộp thư.
    Với những người dùng quay lại lần thứ hai, thứ ba - đối tượng mà các developer nhắm tới, tình cảnh cũng chẳng khá khẩm hơn. Họ không nhớ được mật khâu của mình. Mặc dù chức năng "quên mật khẩu" vẫn hoạt động, đến 160.000 người dùng chức năng này mỗi ngày, 75% trong số đó không tiếp tục quá trình thành toán sau khi đã yêu cầu khẩu.
    Chiếc form nho nhỏ xinh xinh kia, hóa ra lại là thứ ngăn cản người dùng mua hàng, rất nhiều người dùng. Thế mới biết, developer nhiều khi nghĩ mình hiểu được người dùng, nhưng thật ra không phải như vậy.

    Button trị giá 300 triệu đô la

    Đội ngũ designer đã giải quyết vấn đề này bằng một cách vô cùng đơn giản. Họ bỏ nút đăng Ký, thay vào đó bằng nút Tiếp Tục và dòng chữ "Bạn không cần Đăng Ký, hãy bấm Tiếp Tục để thanh toán. Để thnah toán nhanh hơn ở những lần sau, bạn có thể đăng ký một tài khoản vào lúc thanh toán."
    Kết quả: Lượng thanh toán của khách hàng tăng lên đến 45%. Sau tháng đâu tiên, doanh số tăng 15.000.000$. Sau năm đầu tiên, thu nhập của web tăng đến tận 300 triệu đô la. Tất cả những việc mà họ đã làm là gì? Chỉ là thêm một button mà thôi.
    Code dạo ký sự/Phạm Huy Hoàng
    tản mạn
    N
    Tôi Viết Code

    Lời chúc và tri ân đầu năm 2019

    Xin chào mọi người, chào mừng mọi người đến với blog Tôi Viết Code.
    Mình là Sơn đây, chúc mọi người có một năm mới vui vẻ và hạnh phúc nhé! Nhân đây mình cũng có một món quà nho nhỏ để tri ân cho các bạn dịp năm mới. Món quà này tuy không lớn nhưng mình đã rất tâm huyết vào nó, hi vọng các bạn sẽ ủng hộ nhiệt tình nhé. Mình xin tri ân cho các bạn Template Tôi Viết Code Version 3.0

    Một số thông tin về giao diện

    • Chuẩn reponsive, phù hợp với các loại màn hình hiện nay)
    • Seo (tạm được) :D
    • Tốc độ khá nhanh
    • Giao diện tạp chí thích hợp cho công việc hay chủ đề của các bạn.
    • Để trải nghiệm tốt hơn mời bạn cmt gmail bên dưới để mình share template cho nhé!
    Check Responsive (Responsive được hiểu là hiển thị tốt trên mọi thiết bị).

    Về phiên bản này

    Phiên bản 1.0: Chỉnh sửa giao diện từ ToiCode và đưa vào sử dụng.
    Phiên bản 2.0: Sửa một số lỗi nhỏ và fix lỗi view ảo, thêm lazy load.
    Phiên bản 3.0: Cập nhật giao diện tết và chia sẻ.

    Làm thế nào để nhận được chúng?

    Để nhận template này thì bạn làm các yêu cầu sau:

    1. Chia sẻ bài viết này lên facebook
    2. Comment xuống bên dưới với nội dung:

    - Link chia sẻ: ...
    - Địa chỉ Email: ...

    * Mình sẽ tổng hợp lại và gửi template này đến các bạn nhanh nhất có thể.
    tri ân
    N
    Tôi Viết Code

    Blogger và cuộc sống quanh tôi

    Xin chào tất cả các bạn, chào mừng trở lại với Tôi Viết Code.
    Có thể các bạn đã từng thắc mắc với chính bản thân mình, rằng:"Tại sao mình lại viết blog nhỉ?" hay "Tại sao mình lại đam mê nó đến như vậy?" phải không? Chính mình cũng đã từng như vậy, và mình cũng muốn tâm sự về việc viết blog trong cuộc sống của mình hiện tại, và tiện đây mình cũng giới thiệu luôn:
    Mình tên Trịnh Công Sơn, có ước mơ làm dev, thích lập trình và xàm, là chủ của blog Tôi Viết Code. Tiếp tục phần dưới nhé!
    Và dưới đây chính là cuộc hành trình suốt những năm tháng trên chặng đường blogger (văn chương lai láng quá xá).

    Khởi đầu chặng đường - sự hình thành đầu tiên

    Mình còn nhớ hồi đầu tiên mình làm web, hình như vào khoảng cuối năm 2016 thì phải. Lúc đó, mình cùng với đứa bạn cùng lớp làm web trên nền tảng hostinger, ban đầu mình định làm ba cái web hack like vớ vẩn á mấy bạn trẻ.

    Lúc trước lý do mình muốn làm web thực ra chỉ để "đú" với bạn bè. Khi mình sử dụng host thì mình thấy nó luôn bắt phí và chuyển hết nền tảng hosting này đến web hosting khác, và cuối cùng mình thấy nó chẳng có ích lợi gì.
    Mình quyết định tìm một kiểu web khác, khi đang vọc google thì mình bỗng lướt qua trang Star Tuấn IT (startuanit.net) và mình thấy nó rất hay, có cả phần bài viết nữa, mình quyết định tìm hiểu và được biết đó là nền tảng blogger của google.
    Sau khi sử dụng được vài ngày thì mình thấy nó êm ru, vừa miễn phí thêm phần nhẹ lại còn sử dụng được cùng với tài khoản google, thật tiện lợi hết sức. Và mình đã quyết định "định cư" tại đó luôn :)) Sau vài ngày vọc blogger, mình thấy có rất nhiều giao diện đẹp, hồi đó mình hay xài mấy template mà nó có intro rồi nhiều cái hay hay ấy và mình vẫn tiếp tục phát triển cái blog đó với cái tên Star Sơn IT và với url starsonblogs.blogspot.com. Trong suốt chặng đường ban đầu, mình gặp rất nhiều sự hợp tác tốt nhờ liên kết, bên cạnh đó cũng có rất nhiều ý kiến trái chiều, do lúc đó mình chẳng khác gì thằng trẻ con chỉ biết bắt trước vậy, cứ copy và copy. Nhưng mình vẫn nhận được rất nhiều sự ủng hộ của độc giả, và mình luôn cố gắng tự tay tìm hiểu và viết bài hơn.
    Càng về sau, mình càng có đam mê hơn với blogger, nó như gắn chặt và bấu lấy quần mình vậy (haha) dứt không ra và dằng nó cũng không ra. Để phục vụ nhu cầu học hỏi thì mình bắt đầu tìm hiểu về HTML, CSS và một số phần ngoài lề, tìm hiểu các bài viết của các blog nổi tiếng và cũng có chút kiến thức hình thành trong đầu. Tiếp theo đó, mình đã quen được một số blogger trong group Phú Cường Blogger (hay còn gọi là BFG ngày nay) và được họ chỉ dạy rất nhiều trong lĩnh vực này.

    Mình tiếp tục phát triển blog cho đến khi mình tự mod được 1 giao diện cho riêng mình (gọi là mod vì chỉ redesigned bằng template có bố cục sẵn, trò của con nít ấy mà haha).

    Những khó khăn gặp phải

    Rồi đến một ngày gió cuốn mây bay, vì một số lý do (mình xin giấu kín) mà mình đã phải bỏ đứa con tinh thần và tâm huyết nhất của mình đi để thành lập một blog mới mang tên Tôi Việt Code (lúc đó nghĩ mãi không ra cái tên nào, tự nhiên lại chém được, thấy nó cũng hay hay) cùng với tên miền mới toivietcodeblog.tk và bước lại từ những bước đầu tiên (đắng lòng vc).
    Dù khá là buồn đó mấy man, nhưng mình vẫn cố gắng xây dựng lại blog :((. Và lần này lượt ủng hộ từ độc giả còn khủng khiếp hơn trước. Chỉ sau vỏn vẹn gần 50 bài viết mà blog mình đã leo được 600.000 view và hơn 1000 nhận xét trên trang (khiếp thật) :)) Mình đã tiếp tục xây dựng template và lần này thì đã tự thiết kế được một giao diện đúng nghĩa, và mình đã thiết kế theo lối đơn giản hóa, bên cạnh đó mình còn thêm dịch vụ mod giao diện giống các trang nền tảng khác và được rất nhiều bạn ủng hộ.
    Nhưng một số lý do khác nên mình đã xóa blog này và thành lập blog hiện tại mang tên Tôi Viết Code và đầu tư cho nó một em domain .com cho thêm chuyên nghiệp và phát triển blog này mới hy vọng nó sẽ là tiền đề tốt hơn phát triển về sau này.

    Sự nỗ lực không ngừng

    Ngay sau đó thì mình tiếp tục cói gắng để xây dựng lên blog thật sự hữu íchchất lượng để chia sẻ và lưu trữ nhưng kiến thức cho các bạn.
    Mỗi lần bật máy tính lên, công việc đầu tiên mà mình làm chính là truy cập blogger.com, chỉ với 2 lý do duy nhất - viết bài, edit template. Blogger hay blogspot, đã đưa mình tới một thế giới mà mình chưa từng có, nó như một cái duyên vậy.
    Ôi trời, cứ tưởng tượng mà không có nó vài ngày là mình như "khó ở" vậy. Mỗi khi ngắm nhìn blog của mình, mình lại cảm thấy tự hào về "đứa con tinh thần" này hơn.

    Những thành công đạt được trên suốt chặng đường

    Sau vài năm học hỏi cho đến bây giờ, mình đã tích lũy được một vốn kiến thức rất lớn về lập trình cơ bản. Hơn thế nữa, kỹ năng giao tiếp và viết văn của mình rất tốt (vì khi phát triển blog cần viết bài nhiều mà). Bên cạnh đó, mình cũng rất tiến bộ về Tiếng Anh thông qua những khi viết CSS.
    Nó cũng đã giúp cho mình lưu lại những kỷ niệm quý báu về những năm tháng cố gắng tìm tòi học hỏi - những ngày đầu chập chững bước chân vào thế giới lập trình web.

    Lời kết

    Ở trên là toàn bộ quá trình suốt những năm tháng cùng với blogger, nó như gắn liền với cuộc sống, với mình và không thể bỏ đi được. Có lẽ dừng ở đây nhỉ, chúc các bạn có một ngày vui vẻ và đừng quên ủng hộ cho Blogger - Tôi Viết Code nhé!
    tản mạn
    N

    Nội quy chung Tôi Viết Code

    1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
    2. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

    Đang cập nhật thêm nội quy...

    - Blog: Tôi Viết Code - Life Is Share
    - Thành lập: 22/09/2017
    - Nội dung: Blog chủ yếu viết về những tâm tư, tình cảm và những điều xung quanh cuộc sống của tác giả. Ngoài ra, blog thi thoảng còn chia sẻ một vài thủ thuật về Blogspot, share ảnh đẹp, tin tức về Công nghệ...
    - Tác giả blog: Trịnh Công Sơn hiện đang là một học sinh trung học.

    Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!