Tổng hợp Thủ thuật code web giúp bạn thiết kế giao diện đẹp, đạt chuẩn Ui/Ux biến web, blog của bạn thành công cụ kiếm tiền cực kỳ hiệu quả
🔥 Hot Topics :
🏷️
Thớt Gỗ Teak
🏷️
Xưởng Thớt Gỗ Xuất Khẩu
🏷️
Xưởng Xẻ Sấy Gỗ Tràm
🏷️
Xưởng Gỗ Ghép
🏷️
Xả Kho Gỗ Ghép Giá Rẻ
🏷️
Nhật Ký Chuyên Đề
🏷️
Thương Hiệu Cá Nhân
🏷️
Điện Thoại Thông Minh Chính Hãng
🏷️
Tư Vấn Xe Đạp
🏷️
Đồ Dùng Nhỏ - Lợi Ích To
🏷️
Mẹ Và Bé
🏷️
Gia Bảo TikTok Shop
Thiết kế website và nội dung không có gì hấp dẫn không đem lại thu nhập và lợi ích gì từ Website thì quả thật " không có động lực để phát triển web - hay nói cách khác chẳng được cái vẹo gì ngoài đam mê "
Chính vì lý do " Thiết kế xây dựng nội dung Website vừa thỏa mãn đam mê vừa đẻ ra tiền. Hôm nay Gia Bảo giúp các bạn tổng hợp danh sách thủ thuật code web giúp bạn thiết kế giao diện đẹp, đạt chuẩn Ui/Ux biến web, blog của bạn thành công cụ kiếm tiền cực kỳ hiệu quả
Đối với mọi website, code web hay mã nguồn được xem là yếu tố cốt lõi, linh hồn của web giúp chủ blog chinh phục người xem, khách hàng, độc giả của mình. Công nghệ thiết kế web theo tiêu chuẩn Ui/Ux sẽ giúp bạn có được giao diện thiết kế thông minh, đẹp mắt nhờ đảm bảo theo 2 tiêu chí sau :
- Design web Ui : Thiết kế giao diện thân thiện, có tính tương tác cao với người dùng, đối với BlogWeb dựa trên nền tảng blogger việc ứng dụng các kỹ thuật thiết kế blog Ui Ux vừa giúp chủ web sở hữu template, không chỉ đẹp mà còn vô cùng tiện dụng, hữu ích phục vụ đáp ứng nhu cầu & hướng tới các đối tượng là người truy cập, độc giả trên blog, được xem là mối quan tâm hàng đầu. Trọng tâm của việc thiết kế web Ui mục tiêu chính là nhằm tối ưu cấu trúc web hỗ trợ tối đa, đáp ứng tốt nhất thoả mãn yêu cầu của người dùng đang tìm kiếm thông tin trên website của bạn, bao gồm việc bố trí thuận tiện các tiện ích, menu giúp điều hướng tới các nội dung, chủ đề liên quan dễ dàng, thiết kế đẹp mắt, màu sắc hài hòa, sắc nét thật sự tạo cảm giác thú vị và hấp dẫn người xem.
- Design web Ux : "quan tâm tới cảm nhận, trải nghiệm của người dùng cũng chính là độc giả, người truy cập, đối tượng đem lại nguồn thu nhập, giữ chân người quan tâm đến website của mình chính là động lực giúp chủ blog phát triển nội dung & xây dựng thương hiệu website ngày càng lớn mạnh". Nhằm giúp bạn giữ chân người truy cập ở lại lâu hơn trên web, kết hợp với các yếu tố nội dung hấp dẫn lôi cuốn bằng các kỹ thuật marketing online giúp website của bạn đạt thứ hạng cao theo tiêu chí đánh giá thứ hạng của bộ máy tìm kiếm như Google, Yandex, Baidu,... Từ đó đem về một lượng lớn truy cập từ cư dân mạng những người thích lướt web tìm kiếm thông tin online.
Xem danh sách từ khóa - keyword liên quan đến thủ thuật thiết kế web & blogger : https://www.digitalnomad.vn/2021/08/keyword-tu-khoa-seo-top-google-tren-Blog-Gia-BaoKsaiz9.html
Xem Demo một số mẫu : Website Ui Ux Design thiết kế dựa trên nền tảng Blogspot kết hợp với mẫu giao diện template html miễn phí
Trong nội dung bài viết này Gia Bảo chia sẻ kiến thức code web dành riêng cho website sử dụng nền tảng blogger / blogspot được xem là CMS thiết kế web đơn giản & hiệu quả phù hợp với dân viết lách chia sẻ thông tin & giải pháp hữu ích giúp bạn kiếm tiền từ nội dung website đem lại nguồn thu nhập ổn định bằng cách kiếm tiền từ mạng lưới quảng cáo ( Ad Network ) & mô hình tiếp thị liên kết ( affliate marketing ).
Xem thêm bài viết liên quan : Template blogspot đẹp
Html, css, javascript, xml được xem code web, bộ mã nguồn quan trọng giúp chúng ta thiết kế giao diện blogspot đẹp mắt hấp dẫn người dùng.
Xem thêm bài viết liên quan :
- Tổng hợp html, css, javascript chèn vào Blog/Web của bạn
- Code Post BlogSpot
- Thủ thuật BlogSpot
- Code Web & Tool cài đặt trên trang Digitalnomad.Vn - Gia Bảo Blog
- Icon & Ký Tự Đặc Biệt Chèn Vào Blog/Web
- Ví dụ điển hình giúp bạn chỉnh sửa làm đẹp template blogspot SoraSoft : https://www.digitalnomad.vn/2021/01/huong-dan-chinh-sua-blogger-template-SoraSoft-thanh-giao-dien-DigitalNomad.vn-Z8N9.html
Sau đây là phần giới thiệu & Tổng hợp Thủ thuật code web giúp bạn thiết kế giao diện đẹp, đạt chuẩn Ui / Ux biến website / blogspot của bạn thành công cụ kiếm tiền cực kỳ hiệu quả
Phần I : Code web layout.
Hay còn gọi là thiết kế bố cục cấu trúc giao diện, code layout phù hợp với bạn chuyên thiết kế web chuyên sâu còn với các bạn sử dụng blogger cho mục tiêu viết lách kiếm tiền chỉ cần dạo quanh khám phá đủ để hiểu, rất hữu ích phục vụ cho việc chỉnh sửa code blogspot trên template thiết kế sẵn được trình bày ở phần nội dung kế tiếp. Ở phần này chúng ta cùng tổng hợp thủ thuật code web dành cho thiết kế cấu trúc, bố cục giao diện trang web nhé. Có nhiều kiểu cấu trúc & bố cục web từ đơn giản đến phức tạp, màu mè hoa lá hẹ, nhưng với Gia Bảo chỉ cần phân ra 2 nhóm bố cục template blogspot như sau :
- Code Thiết kế giao diện blog/web tương thích với kích thước màn hình trên điện thoại
- Code Thiết kế giao diện blog/web tương thích với các thiết bị khác
Ngày nay việc sử dụng điện thoại lướt web, tìm kiếm thông tin, mua sắm và thảo luận, trao đổi công việc, tài liệu online ngày càng phổ biến chính vì thế thiết kế giao diện phù hợp với mobile được ưu tiên và tối ưu hóa cho phù hợp với nhu cầu của khách hàng, sau khi cấu hình giao diện tương thích với các loại điện thoại thông minh có khả năng kết nối internet băng thông rộng, chủ blog sẽ tiếp tục thiết kế các giao diện phù hợp với các thiết bị khác như PC, Laptop,...
Sau đây danh sách những thiết kế layout thường gặp :
Bố cục giao diện cơ bản :
- Layout 1 : Header / Menu / Left Sidebar / Right Sidebar / Footer
- Layout 2 : Header / Menu / Left Sidebar / Footer
- Layout 3 : Header / Menu / Right Sidebar / Footer
Bố cục giao diện mở rộng :
- Grid Layout
- Layout Landing Page
Danh sách bài viết chia sẻ kiến thức & code web liên quan đến thiết kế layout ( Cú pháp Từ khóa [keyword] - link website : Mô tả nếu có ) :
Bài viết chia sẻ kiến thức & kinh nghiệm thủ thuật thiết kế Layout :
Types of layout web / Kiểu thiết kế layout :- 3 Popular Types of Web Design Layouts : https://linkage.ph/3-popular-types-web-design-layouts : Phân biệt 3 kiểu layout phổ biến đó là Fixed Design / Liquid / Fluid Design
- 40 Free HTML landing page templates : https://dev.to/davidepacilio/40-free-html-landing-page-templates-3gfp : Danh sách 40 template thiết kế dạng landing page - trang đích.
- 9 Best Website Layout Examples and When to Use Them : https://elementor.com/blog/website-layout-ideas : 9 kiểu layout 1. Single Column Layout : The World Famous iPad - 2. Two Column Layout : Earmark - 3. Three Boxes Layout : KatchMe - 4. Split-screen Layout : Bose - 5. Asymmetrical Layout : Underbelly - 6. Fixed Sidebar: Arbor Restaurant - 7. Full-screen Media Layout: Dutch National Opera & Ballet - 8. Grid Layout : Malika Favre - 9. Boxes Layout : TSX Broadway
- Smart Hierarchy based Website Design Method : http://www.id3ntitycrisis.com/hierarchy-based-website-design-step-by-step-process-to-optimize-visitor-flow
- Quy tắc thường gặp trong thiết kế Layout : https://www.semtek.com.vn/layout : Giúp bạn quy tắc cần chú ý liên quan đến việc thiết kế web ví dụ : tỷ lệ căn lề, khoảng cách giữa các nội dung, sắp xếp bố cục.
Bài viết hướng dẫn code, cách chèn mã nguồn Code Layout / Mã nguồn thiết kế giao diện :
- Thế giới soucre code layout : https://csslayout.io/patterns : Các dạng thiết kế giao diện : Card layout ,Holy grail ,Masonry grid ,Same height columns ,Sidebar ,Simple grid ,Split screen ,Sticky footer ,Sticky header, Sticky sections. Thành phần layout Navigation - thanh điều hướng : Breadcrumb ,Circular navigation ,Dot navigation ,Drawer ,Dropdown ,Full screen menu ,Mega menu ,Menu ,Nested dropdowns ,Pagination ,Previous next buttons ,Split navigation ,Tab ,Wizard. Thành phần Layout Input - nhập liệu : Button with icon ,Chip ,Custom checkbox button ,Custom radio button ,Floating label ,Input addon ,Radio button group ,Radio switch ,Rating ,Search box ,Slider ,Spin button ,Stepper input ,Switch ,Toggle password visibility ,Upload button. Thành phần Layout Display - hiển thị : Accordion ,Arrow buttons ,Avatar ,Avatar list ,Badge ,Card ,Centering ,Close button ,Color swatch ,Concave corners ,Cookie banner ,Corner ribbon ,Curved background ,Diagonal section ,Docked at corner ,Dot leader ,Drop area ,Drop cap ,Fading long section ,Feature comparison ,Feature list ,Fixed at corner ,Fixed at side ,Folder structure ,Full background ,Initial avatar ,Inverted corners ,Keyboard shortcut ,Layered card ,Lined paper ,Media object ,Overlay play button ,Price tag ,Pricing table ,Property list ,Questions and answers ,Ribbon ,Separator ,Stacked cards ,Stamp border ,STARS ,Statistic ,Status light ,Sticky table column ,Sticky table headers ,Teardrop ,Three dimensions card ,Timeline ,Tree diagram ,Triangle buttons ,Video background ,Voting ,DRAFT ,Watermark ,Zigzag timeline. Thành phần Layout Feedback - thông tin phản hồi : Modal ,Notification ,Popover arrow ,Progress bar ,Radial progress bar ,Resizable element ,Presence indicator ,Tooltip ,Validation icon.
- Xây Dựng Layout Đơn Giản Với CSS Grid : https://www.thanhlongdev.com/xay-dung-layout-don-gian-css-grid
- CSS Website Layout : https://www.w3schools.com/css/css_website_layout.asp : Code tạo giao diện web/blog cơ bản
Phần II : Danh sách thủ thuật chỉnh sửa code web sử dụng nền tảng blogger.
Do đa phần người dùng sử dụng blogspot thường lựa chọn cài đặt template sẵn có trên blogger hoặc từ nguồn cung cấp giao diện blogspot từ bên thứ 3 có trả phí hoặc miễn phí sau đó chỉnh sửa lại cho phù hợp với nhu cầu sử dụng. Sau đây là danh sách thủ thuật và mã nguồn giúp chủ blog làm đẹp bằng cách thêm sửa xóa, sắp xếp tiện ích trên trang Blogspot của mình.
Dựa vào cấu trúc layout được thiết kế sẵn, các blogger chỉ cần bổ sung thêm các thành phần mới hoặc chỉnh sửa các phần tử, tiện ích có sẵn được cung cấp bởi nền tảng thiết kế web trên blogger như tiện ích bài viết phổ biết ( popular post ), bài viết ngẫu nhiên ( randompost ), bài viết liên quan ( related post ), bài viết nổi bật,...
Thủ thuật mã nguồn dành cho blogspot được liệt kê thành các nhóm thủ thuật như sau : Code chèn quảng cáo || Code tùy chỉnh các thành phần trên Blog || Code đăng bài viết Blog & các dạng khác bao gồm : Thủ thuật Sticky - dính phần tử || Thủ thuật Sidebar || Code thủ thuật cung cấp bởi bên thứ 3 - code bổ sung & tự thiết kế từ Css - Html & Javascript...
Xem thêm bài viết liên quan : Danh sách tiêu đề bài viết tuyển chọn sắp xếp theo từng chuyên mục ( bao gồm chủ đề code làm đẹp blogspot )
Muốn biến Website thành công cụ kiếm tiền bạn ? Sau đây là tóm tắt một số thủ thuật giúp bạn tối ưu hóa giao diện, cấu trúc & nội dung biến Website của bạn thành " địa điểm hấp dẫn online - nơi khám phá nhiều điều mới lạ - thông tin hữu ích chuyên sâu - cung cấp nhiều giải pháp giúp ích cho độc giả.
Tối Ưu Quảng Cáo thân thiện với thuật toán Panda ( Bố cục giao diện quảng cáo thân thiện với Panda cho trang web của bạn | Panda friendly ads layouts for your blog ) :
- https://khanhplus.com/toi-uu-quang-cao-google-adsense
Tối Ưu Cấu Trúc :
- https://prodima.vn/cau-truc-website-chuan-seo
Tối Ưu Code Web :
- https://seothetop.com/kien-thuc-seo/tang-toc-do-website-157176.html
Tối Ưu đường Link :
- https://seongon.com/blog/seo/toi-uu-url-hay-link-than-thien-cho-website.html
Tối Ưu Giao Diện - Hình Ảnh - infographic & Video trên Blog/Web :
- https://hocvien.haravan.com/blogs/chia-se-thong-tin/huong-dan-chi-tiet-cach-toi-uu-giao-dien-website-de-tang-trai-nghiem-khach-hang
Tối Ưu Nội Dung :
- https://www.digistar.vn/toi-uu-hoa-noi-dung-website-chuan-seo
- https://www.brandsketer.com/bai-viet/thiet-ke-website-theo-dung-diem-nhin-nguoi-doc
Tối Ưu Đối tượng & Độc Giả :
- https://vipcom.vn/web/3-yeu-to-quan-trong-can-xac-dinh-truoc-khi-thiet-ke-website.html
- https://www.adcvietnam.net/xac-dinh-doi-tuong-nguoi-doc-khi-thiet-ke-website
Lưu Ý : Tuân thủ các quy luật, định luật, quy định về tỷ lệ,... trong quá trình tối ưu thiết kế giao diện web Ui Ux ( quy luật thị giác, Quy luật về màu sắc, Quy Luật Hick, định luật gestalt Tuân Thủ Tỷ Lệ Vàng )
Danh sách bài viết chia sẻ kiến thức & code web liên quan đến thiết kế chỉnh sửa giao diện blogspot ( Cú pháp Từ khóa [keyword] - link website : Mô tả nếu có ) :
Bài viết chia sẻ kiến thức & kinh nghiệm thủ thuật blogspot :
- [ AdSense ] : https://www.igniel.com/search/label/AdSense : Bài viết hướng dẫn chèn quảng cáo google Adsense : Đây là dạng thủ thuật blogspot được nhiều bạn viết blog tạo dựng được thương hiệu cá nhân có vị thế và chỗ đứng trong làng blogger sử dụng khá phổ biến nhằm mục tiêu kiếm tiền từ nội dung website của họ đồng thời hạn chế việc xuống hạng do việc chèn quảng cáo gây hiệu ứng không tốt tới người dùng, độc giả người đem lại nguồn thu cho các Blogger chân chính.
- Danh sách tiện ích, thủ thuật hay cho blogger, blogspot : https://www.ivietpr.com/2017/12/danh-sach-tien-ich-thu-thuat-hay-cho-blogger-blogspot.html : cập nhật các thủ thuật blogger phổ biến - hay dùng trong thế giới blogspot.
- Danh sách thủ thuật - tiện ích blogspot số 2 : http://blog24ahz.blogspot.com/2010/05/danh-sach-thu-thuat-tao-blog-tren.html
- [ Using Multiple Ad Blocks ] : https://sites.google.com/site/adsenssesecrets/home/part-1-getting-started-with-google-adsense/2-adsense-making-the-money-/3-how-to-tweak-your-ads-to-make-them-click-/4-using-colors-to-increase-your-clicks/5-how-to-maximize-visibility-and-response/controlling-yor-ads/7-quickstart-adsense-a-step-by-step-guide/8-catch-fickle-visitors-with-the-google-search-box/9-google-s-referral-programs/10-using-multiple-ad-blocks : Phân tích việc chèn nhiều quảng cáo vào blogspot của bạn nhưng vẫn không gây khó chịu và ảnh hưởng đến trải nghiệm người dùng.
- [ Agar Header atau Navigasi Tidak Bergeser ke Bawah Saat Muncul Page Level Ads ] https://www.igniel.com/2019/11/agar-header-navigasi-tidak-turun-page-level-ads.html : Kỹ thuật giúp Tiêu đề hoặc Điều hướng không bị dịch chuyển xuống dưới khi quảng cáo adsense xuất hiện : Một trong số kỹ thuật vô cùng hữu ích dành riêng cho các blogger được duyệt tài khoản google adsense, phương thức xuất hiện quảng cáo đẹp mắt mà không gây khó chịu cho người dùng đồng thời không che mất các thanh điều hướng menu trên blogspot của bạn
Danh sách bài viết hướng dẫn code, cách chèn mã nguồn vào blogspot :
Thủ thuật Code tạo link liên kết tới WebSite khác hoặc điều hướng tới bài viết liên quan trên Blog :
Html, Css, Javascript tạo link liên kết là code web quan trọng giúp chủ blog chủ động tạo khung - nút - text với hiệu ứng nổi bật ở vị trí phù hợp tạo điều kiện để người truy cập web click vào nhằm điều hướng một cách có chủ đích tới trang bài viết, trang nhãn hay trang tĩnh trên Blog hoặc giúp độc giả di chuyển tới một trang web khác mà chủ blog có liên kết với mục tiêu giới thiệu web, bán hàng, kiếm tiền từ việc share link,...
Code Tạo Link Liên Kết Dạng Tab Cực Đẹp :
- [*] https://designlink.work/hover-css
- [*] https://www.cssscript.com/css3-arrow-buttons-bootstrap
- [*] https://www.quangninhbay.com/2020/02/code-widget-lien-ket-ban-be-on-gian-va.html
- https://designlink.work/protip
- https://www.code.pro.vn/2021/06/share-code-widget-lien-ket-ban-be-cho-blog-website.html
- https://honguyenit.blogspot.com/2017/12/tao-widget-lien-ket-ban-be-ep-cho.html
- https://honguyenit.blogspot.com/2017/12/tao-widget-lien-ket-ban-be-ep-cho.html
Thủ thuật Code dính phần tử :
Thủ thuật blogspot được sử dụng khá phổ biến kết hợp với kỹ thuật ẩn hiện phần tử khi scroll - cuộn chuột tạo hiệu ứng vô cùng thú vị cho trải nghiệm người dùng trên các trang web sử dụng thiết kế web ui ux.
Code tạo Sticky : từ khóa - Multiple sticky css :
- https://codepen.io/jonamar/pen/qHzsE
- https://html-online.com/articles/javascript-stick-html-top-scroll/
- https://developers.google.com/web/updates/2017/09/sticky-headers
- https://lytbox.co/changing-headers-elementor/
- https://jakegroup.com/blog/gettin-sticky-with-it/
- https://stackoverflow.com/questions/44473992/how-to-stop-a-sticky-element-at-the-end-of-parent-element
- https://www.cssscript.com/minimal-sticky-element-class/
- https://thinhweb.com/huong-dan-co-dinh-menu-khi-keo-keo-thanh-scroll-xuong-duoi/
- https://codepen.io/atelierbram/pen/drxmK
- https://www.geeksforgeeks.org/how-to-make-a-div-stick-to-the-top-of-the-screen/amp/
- https://www.geeksforgeeks.org/how-to-set-bootstrap-4-scroll-to-the-bottom-of-long-sticky-sidebar/amp/
- https://dev.to/clairecodes/how-to-make-a-sticky-sidebar-with-two-lines-of-css-2ki7
- https://stackoverflow.com/questions/8418583/can-i-keep-a-div-always-on-the-screen-but-not-always-in-a-fixed-position
- https://www.digitalocean.com/community/tutorials/how-to-build-multiple-stacking-sticky-sidebars-with-pure-css-and-bootstrap-4
- https://css-tricks.com/how-to-get-sticky-and-full-bleed-elements-to-play-well-together/
- https://www.vandelaydesign.com/sticky-sidebar/
- https://www.bennadel.com/blog/3932-using-a-top-of-1px-to-observe-position-sticky-intersection-changes-in-angular-11-0-3.htm
- https://stackoverflow.com/questions/65555875/scrolling-div-along-the-page-stop-at-the-bottom-of-itself-like-twitter
- https://lancecourse.com/howto/the-science-of-creating-fixed-components-on-scroll-with-vanilla-javascript
Thủ thuật chèn quảng cáo trên trang blogspot :
Cũng như mọi trang web có nội dung lôi cuốn và hấp dẫn, xu hướng chèn quảng cáo với mục tiêu kiếm tiền từ nội dung web nhằm tạo thêm thu nhập giúp trang trải chi phí xây dựng và thiết kế Web, các trang Blogspot thiết kế chuẩn Ui/Ux có lưu lượng truy cập lớn cũng không ngoại lệ
Xem bài viết chi tiết về : Thủ thuật chèn quảng cáo blogspot
Code chèn quảng cáo : Từ khóa Multiple Ads CSS,
Chèn nhiều quảng cáo cùng một lúc vào website ( Multiple Ads ) là một kỹ thuật không khuyết khích, tuy nhiên nhiều blogger có kỹ năng code web siêu hạng vẫn ứng dụng kỹ thuật " hiển thị đa quảng cáo mọi lúc mọi nơi trên blog nhằm kiếm thật nhiều xiền và có nhiều tiền hơn nữa từ website của họ "
- https://blogpros.com/blog/2017/02/many-ads-safely-blog
Thủ thuật chèn quảng cáo vào các vị trí trên Blogspot :
Chọn vị trí hiển thị quảng cáo rất quan trọng nó là một trong số kỹ thuật thiết kế web ui ux giúp việc hiển thị quảng cáo một cách tự nhiên theo ngữ cảnh không gây khó chịu người đang xem nội dung trên blog của bạn.
- https://www.igniel.com/2018/11/iklan-tengah-post.html : Code tự động chèn quảng cáo giữa nội dung bài đăng blogspot
Thủ thuật ứng dụng kỹ thuật Multiple ads chèn quảng cáo vào nhiều vị trí trên blogspot của bạn :
- https://www.tggyan.in/2020/07/how-to-add-4-adsense-ads-slots.html
- [ Multiple Ads blogspot ] https://www.webjaankaari.com/2020/10/how-to-add-more-adsense-ads-display-in.html
- [ Memasang Banyak Iklan AdSense (Multiple Ads) dalam Postingan ] https://www.igniel.com/2018/11/multiple-iklan-dalam-post.html : Chèn quảng cáo vào 3 vị trí giữa nội dung blogspot
- [ Memasang Iklan AdSense Sebelum atau Sesudah Elemen Tertentu ] https://www.igniel.com/2018/11/iklan-sebelum-sesudah-elemen.html : Chèn quảng cáo vào 2 vị trí giữa nội dung bài viết trên blogspot
Code đăng bài viết blog bao gồm :Chèn bài viết liên quan vào nội dung bài viết :
- Chèn multiple bài viết liên quan vào nhiều vị trí bên trong trang đăng bài viết : https://amptricks.blogspot.com/2019/03/how-to-add-inline-multiple-related-posts-inside-blogger-article-content.html
- [ Memasang Banyak Artikel Terkait (Multiple Related Post) dalam Postingan Blogger ] : https://www.igniel.com/2019/01/multiple-artikel-terkait-dalam-post.html : Kỹ thuật chèn bài viết liên quan vào nhiều vị trí vào giữa nội dung bài viết.
- [ Chèn bài viết liên quan giữa nội dung bài viết ] : https://www.igniel.com/2019/01/artikel-terkait-tengah-post.html : Kỹ thuật chèn bài viết liên quan tự động vào giữa nội dung bài viết, bạn có thể tùy chỉnh dùng chèn quảng cáo tự động vào giữa nội dung bài viết.
Chèn bài viết gần đây " Recent Posts Slider For Blogger " :
- [*] https://bazzhood.blogspot.com/2020/09/add-recent-posts-widget-in-blogger.html
- [*] https://www.mybloggertricks.com/2016/07/vertical-slider-for-blogger.html
- [*] https://www.caramanual.com/2018/04/widget-recent-post-slider.html
- [*] https://www.dewaplokis.com/2017/11/recent-post-label-halaman-statis.html
- https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html
- https://blog.doisong24.com/2014/03/recent-posts-slider-tu-chinh-kich-thuoc.html
- https://www.tutesinside.net/2016/10/add-recent-posts-list-slider-in-blogger.html
Code Tạo khung thông báo, blockquote, khung nổi bật bài viết :
Kỹ thuật khá phổ biến nhằm gây sự chú ý của người đọc liên quan đến nội dung nổi bật, thông báo mà chủ blog muốn " độc giả " quan tâm một cách đặc biệt.
- www.bietko.com/2020/08/cach-tao-khung-blockquote-dep-cho-bai-dang-blogger.html
- http://donbadao.blogspot.com/2014/08/lam-dep-code-quote-cho-blogspot.html
- [ blockquote blogspot : Kiểu blockquote đẹp khủng khiếp với CSS dành cho blogspot ] :https://1thuthuat.blogspot.com/2015/04/kieu-blockquote-ep-khung-khiep-voi-css.html
- http://itech.nisava.com/9-tag-blockquote-ep-dung-trong-blogspo/
- https://khanh98.blogspot.com/2014/09/13-kieu-blockquote-ep-cho-blogger.html
- https://www.bloggingvision.com/sylish-blockquote-css-for-blogger/
- https://www.seebeetee.com/customized-blockquote-style-in-blogger
Các dạng Popup :
Đây là một kỹ thuật khá phổ biến liên quan đến việc hiển thị form đăng ký, giới thiệu fanpage, kênh youtube, kênh MXH của bạn, mong độc giả ủng hộ, thực hiện hành vi đăng ký, subscribe, like, share,... Đây là các dạng form - khung thông báo hiển thị có kích thước lớn, nếu hiển thị liên tục sẽ che mất nhiều nội dung quan trọng và gây bực bội cho người dùng khi đang đọc nội dung trên blogspot của bạn, đặc biệt với các thiết bị như điện thoại có kích thước hạn chế việc bố trí hiển thị khéo léo nhằm gây thiện cảm tốt nhất và tránh tối đa việc tạo hiệu ứng ngược.
- http://vnzoomsoft.blogspot.com/2014/12/7-code-popup-quang-cao-khi-click-chuot.html
- https://m21love.blogspot.com/2012/10/tao-cua-so-popup-khi-di-chuot-qua-anh.html
- https://f4vnn.com/tao-popup-thong-bao-bai-viet-moi-cho-blogger.html
Tổng hợp các kiểu Menu Dùng Thiết Kế Blogspot đẹp, xịn, mịn dùng điều hướng đến chuyên mục, nội dung trên Blog.
[ Tổng hợp các kiểu thiết kế menu phổ biến : Horizontal navigation menu – điều hướng theo chiều ngang | Vertical navigation menu – điều hướng theo chiều dọc | Bottom navigation bar – điều hướng chân trang | Breadcrumbs Bar | Hamburger navigation menu – Kiểu điều hướng dạng Hamburger | Drop down navigation menu – điều hướng dạng thả xuống | Mega Menu – điều hướng dạng bảng lớn | Responsive card grid navigation – điều hướng dạng thẻ đáp ứng | Scrolling navigation menu – điều hướng dạng cuộn ]
- https://forum.framework7.io/t/how-to-make-fixed-navbar-footer/3408 [ menu Icon cố định chân trang mẫu 1 ]
- https://forum.framework7.io/t/fixed-toolbar-with-separately-clickable-fixed-footer-above/11234 [ menu Icon cố định chân trang mẫu 2 ]
- https://www.studytonight.com/post/create-modern-navigation-bar-with-icons-using-html-css-and-hover-effect [ Menu ngang thiết kế kiểu icon hiện đại ]
Tổng hợp các thủ thuật code blogspot hữu ích khác dành cho blogspot :
Những thủ thuật blogspot khác ít được sử dụng thiết kế phù hợp với từng cấu trúc blog theo ý đồ riêng của chủ Blog. Ví dụ Breaking news tiện ích được dùng khi chủ web muốn hiển thị thanh tin tức hay bài viết nổi bật trên blogspot, trên Gia Bảo Blog thanh breaking news được ứng dụng kết hợp với kỹ thuật random hiển thị bài viết ngẫu nhiên trên nhiều nhãn nổi bật cung cấp cho độc giả những bài viết " nổi bật nhất trên blogspot của Gia Bảo ". Ẩn hiện thanh menu - sidebar và cố định phần tử khi cuộn chuột đây là 2 thủ thuật blogspot mà Gia Bảo rất thích bằng cách tận dụng không gian bên trên, bên dưới, cạnh trái, cạnh phải của Blogspot để chèn thanh điều hướng gọn nhẹ giúp điều hướng đến những nội dung quan trọng trên blog/web của mình, cụ thể SideBar bên trái trên blog sử dụng kỹ thuật ẩn hiện và cố định sidebar điều hướng tới các trang tiếp thị liên kết các mặt hàng như nhu yếu phẩm, đi chợ tại nhà, thịt tươi ngon mỗi ngày,.... nút sidebar bên phải màu trắng là " Table of Content giúp di chuyển nhanh tới mục lục - nội dung trên trang bài viết. Thanh NaV hiển thị ẩn hiện khi scrolling chuột phía đầu trang bài viết blogspot bao gồm thanh bài viết liên quan - thanh breaking news tiêu đề nội dung nổi bật trên blogger, thanh tiêu đề bài viết cố định cuối trang bài viết chỉ hiển thị trên màn hình PC, Laptop ẩn khi xem trên mobile. Sau đây là danh sách kỹ thuật - thủ thuật blogspot bổ ích khác giúp bạn thiết kế web ui ux có giao diện đẹp mắt thuận thiện với người dùng trên nhiều kích thước màn hình khác nhau như điện thoại, máy tính sách tay, máy tính bảng,...
- [ cố định Widget Blogspot ] https://www.ntlruby.com/2020/07/lam-co-dinh-widget-bat-ky-tren-sidebar.html
- [ Menu cố định khi scroll chuột ] : https://vnxf.vn/threads/cach-lam-menu-co-dinh-khi-scroll-chuot.12620/
- [ Cách cố định menu khi cuộn chuột ] http://vualaptrinh.blogspot.com/2016/12/floating-menu-tao-menu-co-inh-khi.html
- [ Cố định phần tử khi cuộn chuột ] https://www.congnghethuthuat.net/2018/10/huong-dan-cach-giu-co-dinh-phan-tu-khi-cuon-chuot-voi-sticky-va-collapse-cho-blogspot.html
- [Cố định sidebar khi cuộn chuột ] https://gicovietnam.blogspot.com/2017/07/code-co-dinh-sidebar-khi-scroll-cuon-chuot.html
- [ Breaking New - Anonydark ] https://anonydark.blogspot.com/2020/10/tao-breaking-news-widget-gon-nhe-cho.html
- https://f4vnn.com/tao-breaking-new-cho-blogspot.html
- https://kimanhblog.com/tao-breaking-news-cho-blogspot
- [ Headline Breaking News blogger ] : https://www.mybloggertricks.com/2017/01/headlines-news-widget-for-blogger-with.html
- http://blogger-shortcode.blogspot.com/p/blogger-news-ticker-simple.html
- https://www.superwebtricks.com/recent-posts-breaking-news-in-scrolling-bar/
- [ breaking news blogspot 2021 ] https://www.newshank.com/2021/06/how-to-add-breaking-news-ticker-in.html
- https://indbeginners.com/breaking-news-ticker-widget-for-blogger/
- https://www.bloggerspice.com/2014/09/Latest-news-ticker-widget-for-blogger.html
- http://cybup.blogspot.com/2015/10/add-cool-breaking-news-widget-for-blogger.html
- http://linhtuty1994.blogspot.com/2013/06/ves2-slider-bai-moi-truot-ngang.html
- [ Link a Post Random ] : https://www.taoanhdep.com/2017/10/nut-bai-viet-ngau-nhienrandom-post-cho.html : Nút xem bài viết ngẫu nhiên, thích hợp với người dùng " thích xem nội dung ngẫu hứng giống như trò chơi xổ số " vậy mới vui.
- http://www.itviet360.com/2015/02/recent-posts-widget-voi-thumbnails-cho-blogger.html?m=1#more
- [ How to Add Floating Ads in Blogger Sidebar ] https://www.onlinewebbeast.com/2020/04/how-to-add-floating-ads-in-blogger-template.html
- https://www.eworldwb.com/2020/10/hide-or-remove-p-from-blogger-page-url.html
- https://median-ui.jagodesain.com
- https://fletro.jagodesain.com
- https://msd-templatemark.blogspot.com
- https://masignclean-lite.blogspot.com
- https://freepic-way2themes.blogspot.com
- https://ultra-saas.blogspot.com
- https://fiksioner.blogspot.com
- https://igniplex.blogspot.com
Phần 3 các thủ thuật Code web nâng cao :
- [ Thủ thuật tạo Sticky và Collapse Header bằng JS, CSS ] https://mylop.edu.vn/huong-dan-tao-sticky-va-collapse-header-bang-js-css/
- [Create Sticky DIV Element On Scroll ] https://codeconvey.com/stick-div-on-scroll : Thủ thuật tạo sticky bám lề bên trái khi cuộn chuột, khá hữu ích, giúp bạn tạo sidebar mục lục di chuyển nhanh đến các vị trí nội dung trên trang blogspot
- [Scroll Then Fix Content] https://css-tricks.com/scroll-fix-content : Thủ thuật giúp bạn cố định thanh tìm kiếm ( Search ) nội dung liên quan đến từ khoá mong muốn.
- [ Menu ẩn hiện khi cuộn chuột bằng jquery headroom ] http://code24h.com/lam-menu-an-hien-khi-scroll-bang-jquery-headroom-d23717.htm : thủ thuật khi người sử dụng web scroll chuột xuống(down) thì menu của bạn sẽ bị ẩn đi đồng thời nếu người dụng scroll chuột nên(up) thì menu của bạn sẽ được hiện ra
- [Sự kiện cuộn trang Jquery] https://goclamweb.com/bai-15-bat-su-kien-cuon-trang-voi-jquery : Thủ thuật giúp website biến đổi khi cuộn trang
- [ Show/Hide Table Of Content when scrolling for posts in Blogspot ] https://phucuongblogger.blogspot.com/2018/07/tao-muc-luc-hien-khi-cuon-trang-cho-bai-viet.html
- [ Tạo mục lục bài viết Table Of Content cho Blogspot ] : https://hoidapcongnghevn.blogspot.com/2017/05/tao-muc-luc-bai-viet-table-of-contents.html
- [Create Automatic Table Of Content ] https://kienthucthuongngayedu.blogspot.com/2019/08/tao-muc-luc-tu-ong-hien-cho-bai-viet.html
Phần 4 : Từ khoá liên quan đến code web & các sự kiện.
- Show/hide : ẩn hiện
- Scroll : cuộn chuột
- Sticky : Dính phần tử tại vị trí nào đó
- Sidebar : thanh menu / widget cạnh trái, cạnh phải
- Tab : khung bảng lựa chọn nội dung khi chọn chủ đề cụ thể
- Table of Content : Bảng danh mục nội dung
- Sự kiện khi thao tác với chuột : onclick | ondblclick | ondrag | ondragend | ondragenter | ondragleave | ondragover |
- Sự kiện khác tổng hợp : onshow | ontoggle
- [ Bắt sự kiện cuộn chuột và xử lý hiệu ứng ] https://nguyenvanhieu.vn/bai-tap-javascript-8
- [ Sự kiện trong Javascript - Goclamweb ] : https://goclamweb.com/bai-7-event-su-kien-trong-javascript
- [ Sự kiện trong Javascript - Freetuts ] https://freetuts.net/su-kien-event-trong-javascript-368.html
- [ Sự kiện trong Html - Vietjack.com ] : https://vietjack.com/html/cac_su_kien_trong_html.jsp
- [ Sự kiện trong Html - Webvn.com ] https://webvn.com/thuoc-tinh-su-kien-trong-html
- https://dotnet.edu.vn/ChuyenMuc/CSS-cho-cac-the-theo-trang-thai-link-hover-visited-active-focus-389.aspx
- https://hocwebchuan.com/reference/tag/html5/attr_event.php
- [ Thuộc tính Css - timoday ] : https://timoday.edu.vn/tong-hop-cac-thuoc-tinh-cua-css/
Phần 5 : Đặt câu hỏi dạng 5w1h giải quyết vấn đề bằng code web.
- Làm thế nào để Ẩn hiện sidebar khi di chuyển đến vị trí xác định trên website
- Cách nào giúp Show/hide Table Of Content khi kéo chuột lên xuống tại các vị trí xác định trên web
Phần 6 : Công Cụ / Ứng Dụng Hỗ Trợ Lập Trình Web
Công cụ Generator :
- Tự động tạo code chia cột reponsive
- Tự động tạo code Layout
- Tạo code Css Font / Table / Boder
Ý tưởng bài viết kế tiếp :
- Danh Sách phân loại từ khóa - keyword làm Seo Nội Dung
