gtag('config', 'AW-11258748845');
Hiển thị các bài đăng có nhãn Web-Blog. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Web-Blog. Hiển thị tất cả bài đăng

Thứ Tư, 31 tháng 5, 2023

Sắp xếp bố cục trong blogspot và thêm tiện ích

 Sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout

   Tự làm Blogspot - Chào các bạn, chúng ta tiếp tục đến phần tiếp theo trong seri các bài viết hướng dẫn tự thiết kế Blogspot nhé. Hôm nay chúng ta sẽ đi vào phần sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout.


Thêm tiện ích cho các layout (thẻ div)

   Nếu các bạn đã vọc vạch một chút về blogspot thì khi vào phần Bố cục các bạn sẽ thấy có khối giao diện và có phần Thêm tiện ích ở trên các khối đó. Khi click vào Thêm tiện ích các bạn sẽ thêm được một số phần mà Blogspot cung cấp sẵn. Nhưng đối với code mà chúng ta tự làm ban đầu sẽ không có phần Thêm tiện ích này. Để thêm được tiện ích vào các layout (thẻ div) rất đơn giản thôi.


   Đầu tiên các bạn vào Chỉnh sửa HTML, sau đó tìm các đoạn thẻ <div>   </div>. Chèn code sau vào giữa hai thẻ div đó là xong:

<b:section class='chan-trang' id='chan-trang' showaddelement='yes'/>


 Trong đó

Class='chan-trang' - đoạn div đó sẽ có lớp CSS là chan-trang

id='chan-trang' - tên của khối giao diện sẽ hiển thị trong phần Bố cục


 Ví dụ:

<div class='chan-trang'>

<b:section class='chan-trang' id='chan-trang' showaddelement='yes'/>

</div> 


Giờ vào bố cục và kiểm tra thử nhé.


   Phần đầu trang, logo, đầu trang phải, thân web, thân web trái, thân web phải và chân trang các bạn hãy thêm vào hết để sau này có thể Thêm tiện ích vào được nhé. Chú ý các bạn có thể để id tùy thích nhưng Class thì các bạn nên để sao cho có liên quan và dễ nhớ để sau này còn viết CSS cho nó nữa nhé.

Sắp xếp bố cục trong Blogspot

   Phần Bố cục là phần rất trực quan để các bạn có thể thêm thành phần mới vào web mà không cần phải động tới code nhiều. Thế nhưng đôi khi phần Bố cục này nhìn rất rối mắt thậm chí bạn còn không biết phần nào với phần nào, vì thế bạn nên sắp xếp Bố cục cho giống với giao diện web để dễ nhìn, dễ nhớ, dễ chỉnh sửa. Để chỉnh Bố cục cho giống giao diện web trước hết chúng ta xem lại giao diện web mà ta định làm nhé.


Rồi, giờ ta sẽ chỉnh sửa Bố cục như sau:

Vào Chỉnh sửa HTML, tìm đến thẻ <html> Thêm đoạn code sau vào trước <html>


b:version='2' class='v2'


Nó sẽ thành như sau:

<html b:version='2' class='v2' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>


Một số bạn nếu không làm mà chỉ xem sẽ thắc mắc tại sao lúc ban đầu mình gửi code chỉ là thẻ <html> mà giờ nó lại có một đoạn dài đằng sau như thế kia thì giải thích luôn đó là do blogspot tự sinh ra nhé. Bật mí với các bạn là Blogspot tự sinh ra nhiều thứ lắm.

Mục đích việc thêm b:version='2' class='v2' là để chuyển sang version 2 của blogspot (blogspot có 2 version nhé, version 1 không dùng được cách này)

Tìm đến đoạn ]]></b:skin> Thêm code sau vào dưới ]]></b:skin>


<b:template-skin><![CDATA[

]]></b:template-skin>


Ở giữa đoạn <![CDATA[]]> sẽ là code CSS của layout nhé

Code css của layout có cấu trúc như sau:


#layout .ID-class-div {

width: 30%;

float: right;

}


Ví dụ mình để code như thế này:


#layout .dau-trang {

width: 100%;

}

#layout .logo {

width: 300px;

float: left;

}

#layout .dau-trang-phai {

width: 400px;

float: right;

}

#layout .menu {

width: 97%;

padding-top: 150px;

}

#layout .than-web {

width:100%;

}

#layout .than-web-trai {

width: 400px;

float: left;

}

#layout .than-web-phai {

width: 300px;

float:right;

}

#layout .chan-trang {

width: 97%;

}


Khi vào Bố cục nó sẽ hiển thị như sau:


   Các bạn chú ý là khi chỉnh sửa CSS phần Bố cục này sẽ không ảnh hưởng đến giao diện trên web nhé. Nó chỉ ảnh hưởng đến giao diện trong phần Bố cục thôi. 

   Mọi người tùy chỉnh sắp xếp layout theo ý thích nhé, không nhất thiết phải làm như mình đâu. Vậy là xong phần sắp xếp bố cục trong blogspot và thêm tiện ích cho các layout.

   Chúc các bạn thành công!

Thứ Bảy, 20 tháng 5, 2023

Bộ nút liên hệ + mạng xã hội + shop cố định + nút đẹp

 Chia sẻ bộ nút liên hệ mạng xã hội cố định, fixed social network của Facebook, zalo, instagram, messenger, tiktok, tiki, shopee, youtube... bạn có thể thêm sửa dễ dàng. Phù hợp với các blogspot hoặc blogger bán hàng, tư vấn dịch vụ rất cần thiết.


Các bước cài đặt rất đơn giản, bạn chỉ cần copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.

<style>

  /*<![CDATA[*/

#fixed-social-network{position:fixed;top:25%;right:-100px;z-index:9}#fixed-social-network > a{display:flex;align-items:center;border-radius:4px;height:40px;padding:5px;width:140px;transform:translateX(0px);background:#fff;color:#222;border:1px solid #e1e1e1;margin-bottom:7px;transition:all 0.4s ease-in-out}#fixed-social-network > a:hover{transform:translateX(-100px)}#fixed-social-network > a span{display:block;width:30px;height:30px;margin-right:10px}#fixed-social-network > a.zalo-icon span{background-position:-80px -43px;background-size:500%}#fixed-social-network > a.messenger-icon span{background-position:-39px 3px;background-size:500%}#fixed-social-network > a.youtube-icon span{background-position:-80px 4px;background-size:500%}#fixed-social-network > a.instagram-icon span{background-position:3px 3px;background-size:500%}#fixed-social-network > a.tiktok-icon span{background-position:-38px -43px;background-size:500%}#fixed-social-network > a.tiki-icon span{background-position:-123px -43px;background-size:500%}#fixed-social-network > a.shopee-icon span{background-position:2px -47px;background-size:540%}#fixed-social-network > a#back-to-top{background:#144d84;color:#fff}#fixed-social-network > a img{max-height:100%;margin-right:15px}.img-fluid{max-width:100%;height:auto}

  /*]]>*/

</style>

<div id="fixed-social-network" class="d-none d-sm-block">

  <a href="https://zalo.me/" class="zalo-icon" target="_blank">

    <img class="img-fluid" alt="Icon-Zalo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjana7N3ZyYi38wm_oqJcustsbJXj72EtD9YecZi3gH-w5f5rIM1sf4Bp5ZeQbu3kFkODMVEP_vlBMUWBGaMe3vYs7cTjuVpPjAilGwGzfzzXgRjpT0E10xzQGTxbLygT107RgxsQGr472P/h120/zalo.png" /> Zalo

  </a>

  <a href="https://www.facebook.com/" class="messenger-icon" target="_blank">

    <img class="img-fluid" alt="Icon-Messager" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qVOLufW2Wmd8Lx_KrvAVuIkwjws1h-cjTnRT6WLgyn9DsarImWe9SKmkm9uglBC_BT_lfAEOFXB507q3WMJ1l1xjWjRWmwGNgxh5Vz5SVVUl9HDv-QMp7hToZ_OBaQKY-ySBfhqTNIZe/h120/Messager.png" /> Messenger

  </a>

  <a href="https://www.youtube.com/" target="_blank">

    <img class="img-fluid" alt="Icon-Youtube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFz2WVzu_Lh19fqndzkVlgKnbXSLjmM__ceNp25xzTAvcG4HjdlviAOG19nVQAPttq5wSAeWWpeHF7y2-GNzKAsybrYYGseV084kqdaOQIYyKiwVAFWYE6WNPyQNjo_ghnKi6lw_i4ZSpx/h120/youtube.png" /> Youtube

  </a>

  <a href="https://www.instagram.com/" target="_blank">

    <img class="img-fluid" alt="Icon-Instagram" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWVnA8N42JQOg4MD8zpdTVYNlBrgCUW9aZBKOtBfdHyFGhrUlvQqX37J5uBz6ffhUrMhhivj9gDSf8tPnFX9fjtpDdCUKZvfLnvjaDvhGv6f3bbR8eXJrK7EcUCdapuZKskglKfJ7g1XT3/h120/Instagram.png" /> Instagram

  </a>

  <a href="https://tiki.vn/" target="_blank">

    <img class="img-fluid" alt="Icon-Tiki" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqOkjCapq4AOiWa0Yu6ZYX7KIHff3Rt4_18oHk_tqlu7dyL32AI-pI0re6Bh4Z4-1NlNl9vA3cOk8ckH_b69uiYpMzXw-jXF_MgtxtJ0G1Qy8tbhzct8QxYl8fdpahCRrn1gL_9oGsb3bO/h120/tiki.webp" /> Tiki

  </a>

  <a href="https://www.tiktok.com/vi-VN" target="_blank">

    <img class="img-fluid" alt="Icon-Tiktok" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnN7XgKRliyFa1de59-r630FCXsA3PkxnR_fxMIgdg_04n_1kFlGoxZSfSJjBvE5UbIk0rs7oOg5BnMAShq9IJeZWejHRy1LDVdO0LVxP3J1fGR1-4uyBbcvYtP7FGgISi4UmxB06rditm/h120/tiktok.png" /> Tiktok

  </a>

  <a href="https://shopee.vn/" target="_blank">

    <img class="img-fluid" alt="Icon-Shopee" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJI8NRyRaU0OUFtf6bMcCaWNNt8c9Qlq6rhpLfLgxdQx7qgiMiPfKQW0im98Q9pEi8aYqby_kvaH3yxP92mjn8GXn8uHOJYiam6F1xWA4sYDssW22MBrA8I6lz9NIwIvcEpwAsEhIFd7aS/h120/Shopee.png" /> Shopee

  </a>

</div>

Chúc bạn thành công.

Xem thêm:

* Nút liên hệ cố định đẹp.

Bài viết về website - Blog



Thứ Sáu, 12 tháng 11, 2021

Cài eSignerChrome TCT trên GoogleChrome

 

Trước khi thực hiện Kê khai thuế và nộp thuế trên trang web của Tổng Cục Thuế thì trình duyệt phải được cài đặt các tiện ích hỗ trợ thì mới vào được trang làm việc. Sau đây mình hướng dẫn các bạn (NNT) các bước thực hiện cài đặt eSigner và eSignerChrome TCT trên trình duyệt GoogleChrome.

HƯỚNG DẪN NNT CÀI ĐẶT ESIGNER 1.0.8

Bước 1: Tải bộ cài eSigner 1.0.8_setup.exe và hướng dẫn cài đặt tại trang https://thuedientu.gdt.gov.vn.



Cài đặt eSigner 1.0.8

Download từ Google Drive hoặc từ link của Tổng Cục Thuế

-       Kích đúp vào bộ cài eSigner 1.0.8_setup.exe đã tải về tại bước 1.



-       Chọn nút “Run”.


-       Chọn “Install” để bắt đầu cài đặt eSigner



-       Chọn “Finish” để hoàn thành cài đặt



Bước 2: Sau khi cài đặt thành công eSigner 1.0.8 tại bước 1. NNT trở lại màn hình hướng dẫn cài đặt các công cụ để sử dụng dịch vụ Thuế điện tử trên trình duyệt Google Chrome và thực hiện tài đặt Google Chrome theo tài liệu hướng dẫn tại Bước 2:




HƯỚNG DẪN NNT CÀI ĐẶT EXTENSION CHO TRÌNH DUYỆT CHROME

 

Sau khi tải và cài đặt bộ cài eSigner 1.0.8_setup.exe thành công tại bước 1 của tài liệu “TL huongdanNNTcaidat_eSigner.docx”. NNT thực hiện tiếp bước 2 cài đặt Google Chrome Extension offline như sau.

Bước 2: Tải file eSignerChrome TCT (nếu file trên thuế bị lỗi bạn hãy thử tải file mình đang dùng từ Google Drive (Download)

-       NNT click chuột phải vào file mới tải về chọn Extract File và chọn thư mục trên máy để lưu lại: (hoặc chọn Extract Here để lưu tại chỗ đó)



-       Mở trình duyệt Google Chrome sau đó chọn vào “Tiện tích mở rộng” theo hình dưới hoặc truy cập trực tiếp chrome theo đường link: chrome://extensions/



-       Bật “Chế độ dành cho nhà phát triển”.

-       Import extention eSignerChrome vào Google Chrome như sau: Chọn Tải tiện ích đã giải nén -> chọn thư mục EsignerChromeTCT đã giải nén và lưu vào máy trước đó.

-       Sau khi cài đặt Google Chrome Extension thành công màn hình hiển thị.



Lưu ý: Sau khi cài đặt thành công. Người nộp thuế khởi động lại trình duyệt Google Chrome và truy cập lại website https://thuedientu.gdt.gov.vn.

 Chúc các bạn thành công


Thứ Năm, 2 tháng 9, 2021

Code Blog

CODE Gửi Email cho Google Sheet

Tạo 1 file Google Forms để nhập liệu --> qua Tab Câu trả lời để tạo file Google Sheet


Bạn có thể bấm vào biểu tượng hình con mắt để xem Form chạy (Form nhập liệu) nhấn Ctrl + U (Xem nguồn trang) để lấy mã số các đối tượng nhập qua code của Website.


Mở Google Sheet -> Công cụ -> Trình chỉnh sửa tập lệnh -> Trong phần Mã.gs thay bằng đoạn Code bên dưới

function guiBieuMau(e) {

    var email = "gmailcuaban@gmail.com";

    var subject = "Đơn đặt hàng";

    var s = SpreadsheetApp.getActiveSheet();

    var columns = s.getRange(1, 1, 1, s.getLastColumn()).getValues()[0];

    var message = "";

    for (var keys in columns) {

        var key = columns[keys];

        if (e.namedValues[key] && (e.namedValues[key] != "")) {

            message += key + ' :: ' + e.namedValues[key] + "\n\n";

        }

    }

    MailApp.sendEmail(email, subject, message);

}





Tiện ích liên hệ đẹp cho blogspot bao gồm: Nút gọi điện thoại, Zalo, Messenger, SMS, Maps.



Cách cài đặt các bạn copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.


<style> .phone-mobile {display: none;} .giuseart-nav { position: fixed; left: 13px; background: #fff; border-radius: 5px; width: auto; z-index: 150; bottom: 50px; padding: 10px 0; border: 1px solid #f2f2f2; } .giuseart-nav ul {list-style: none;padding: 0;margin: 0;} .giuseart-nav ul li {list-style: none!important;} .giuseart-nav ul&gt;li a { border:none; padding: 3px; display: block; border-radius: 5px; text-align: center; font-size: 10px; line-height: 15px; color: #515151; font-weight: 700; max-width: 72.19px; max-height: 54px; text-decoration: none; } .giuseart-nav ul&gt;li .chat_animation{display:none} .giuseart-nav ul&gt;li a i.ticon-heart { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-map.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; } .giuseart-nav ul&gt;li a i.ticon-zalo-circle2 { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-zalo-circle2.png.pagespeed.ce_.iUc59tfITH.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.giuseart-nav li .button { background: transparent; }.giuseart-nav ul&gt;li a i.ticon-angle-up { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-angle-up.png.pagespeed.ce_.NGU5VowWiC.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.giuseart-nav ul&gt;li a i { width: 33px; height: 33px; display: block; margin: auto; }.giuseart-nav ul li .button .btn_phone_txt { position: relative; top:35px; font-size: 10px; font-weight: bold; text-transform: none; } .giuseart-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; }.giuseart-nav ul&gt;li a.chat_animation svg { margin: -13px 0 -20px; } .giuseart-nav ul&gt;li a i.ticon-messenger { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-messenger.png.pagespeed.ce_.sSebhnGGgP.png) no-repeat; background-size: contain; width: 36px; height: 36px; display: block; }.giuseart-nav ul li .button .phone_animation i { display: inline-block; width: 27px; font-size: 26px; margin-top: 12px; } .giuseart-nav ul&gt;li a i.ticon-chat-sms { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-sms-1.jpg) no-repeat; background-size: contain; width: 38px; height: 36px; display: block; } .giuseart-nav ul&gt;li a i.icon-phone-w { background: url(http://fashion3.ninhbinhweb.biz/wp-content/uploads/2020/03/icon-phone-w.png) no-repeat; background-size: contain;} .giuseart-nav ul li .button .btn_phone_txt { position: relative; } @media only screen and (max-width: 600px){ .giuseart-nav li .chat_animation{display:block !Important} .giuseart-nav li .button .phone_animation {box-shadow: none; position: absolute; top: -16px; left: 50%; transform: translate(-50%,0); width: 50px; height: 50px; border-radius: 100%; background: #6cb917; line-height: 15px; border: 2px solid white; } .giuseart-nav ul&gt;li a{padding:0; margin:0 auto} .giuseart-nav { background: white; width: 100%; border-radius:0; color: #fff; height: 60px; line-height: 50px; position: fixed; bottom: 0; left: 0; z-index: 999; padding: 5px; margin: 0; box-shadow: 0 4px 10px 0 #000; } .giuseart-nav li { float: left; width: 20%; list-style: none; height: 50px; } .phone-mobile{display:block !important}} </style> <div class='giuseart-nav'> <ul> <li><a href='https://g.page/NhThang?share' rel='nofollow' target='_blank'><i class='ticon-heart'/>Tìm đường</a></li> <li><a href='https://zalo.me/0978099792' rel='nofollow' target='_blank'><i class='ticon-zalo-circle2'/>Chat Zalo</a></li> <li class='phone-mobile'> <a class='button' href='tel:0978099792' rel='nofollow'> <span class='phone_animation animation-shadow'> <i aria-hidden='true' class='icon-phone-w'/> </span> <span class='btn_phone_txt'>Gọi điện</span> </a> </li> <li><a href='https://www.messenger.com/t/nhthang.phattrientuduy' rel='nofollow' target='_blank'><i class='ticon-messenger'/>Messenger</a></li> <li><a class='chat_animation' href='sms:0978099792'> <i aria-hidden='true' class='ticon-chat-sms' title='Nhắn tin sms'/> Nhắn tin SMS</a> </li> <li class='to-top-pc'> <a href='#' rel='nofollow'> <i aria-hidden='true' class='ticon-angle-up' title='Quay lên trên'/> </a> </li> </ul> </div>




Thứ Tư, 16 tháng 6, 2021

Tạo các nút liên hệ nhanh tuyệt đẹp cho website

 

Hướng dẫn tạo các nút liên hệ nhanh tuyệt đẹp cho website

Chào các bạn, hôm qua mình đã viết một bài chia sẻ code HTML và CSS tạo các nút liên hệ nhanh cho website rồi phải không? Hôm nay mình tiếp tục share một đoạn code tạo nút liên hệ nhanh khác cũng rất đẹp và hữu ích, hy vọng các bạn sẽ thích.

Mình tham khảo một số website đẹp trên mạng, thấy họ có mấy nút liên hệ nhanh tuyệt vời quá nên mình tổng hợp và cóp nhặt về để làm cho website của mình. Kết quả là thật đáng tự hào, code HTML và CSS khá đơn giản nhưng cực kỳ hữu ích. Các bạn có thể xem hình mô tả ở đây:


Code tạo nút liên hệ nhanh bằng HTML và CSS cho website

Chúng ta cùng nhau bắt tay làm luôn nhé! Code này cực kỳ hữu ích và thích hợp đặc biệt cho các bạn mới vào nghề, đặc biệt là các bạn chưa biết gì về CODE, các bạn chỉ việc copy và paste theo đúng hướng dẫn là được thôi. Mình đã test rất nhiều lần và chỉ cần copy – paste đúng chỗ là nó hoạt động luôn không cần nói nhiều.

Đối với theme Flatsome

Bước 1: Truy cập vị trí cần dán code

Trên thanh đen đen trên cùng có chữ Flatsome – Advanced – Global Setting – Footer Script

Bước 2: Cắt dán đoạn code cần thiết

Các bạn copy và paste toàn bộ đoạn code dưới đây vào Footer Script nhé:

Bước 3: Thay thế, chỉnh sửa thông tin cần thiết

Các bạn có thể tải các ảnh icon về rồi upload lên host, lấy url link ảnh để thay thế vào các link ảnh của ninhbinhweb nha, ví dụ link như này:

thay-link-ảnh-cho-code-tạo-nút-liên-hệ-nhanh
Các bạn có thể tải ảnh về, upload lên host và lấy link ảnh để thay vào các vị trí như hình mình mô tả ở trên nhé

Các bạn cũng có thể thay nội dung các số điện thoại, link facebook và link chat zalo nhé!

Thay-link-liên-hệ-nhanh
Các bạn có thể thay các link liên hệ nhanh của các bạn vào các vị trí như mình mô tả nhé

Bước 4: Lưu lại và tận hưởng thành quả

Đối với theme bất kỳ không phải Flatsome

Nếu bạn không dùng Flatsome, chúng ta sẽ bỏ đoạn code này vào giữa hai thẻ đóng </body> và </html> của file Footer.php nhé!

Còn bạn nào mà không biết file Footer.php ở chỗ nào nữa thì vô Quản trị – Giao diện – Sửa giao diện – tìm file Footer.php ở cột bên phải nhé!

 

Email đăng ký

Email liên hệ

Email: nhthanglove@gmail.com

Trà Tâm Lan - Mang sức khỏe đến mọi nhà