Opsoso_Scrolling V2: Template blogspot hoàn toàn miễn phí - với tính năng vượt trội sẽ là bạn đồng hành cho các Doanh nghiệp/ dự án khởi nghiệp

Quản trị viên in ,

 

Chào mừng bạn đến với Opsoso! Tôi là Kỹ thuật viên Lập trình, và hôm nay tôi vô cùng hào hứng được giới thiệu đến cộng đồng Blogger phiên bản nâng cấp hoàn toàn mới của bộ template tâm huyết: Opsoso_Scrolling V2.

Nếu như phiên bản đầu tiên (Opsoso_Scrolling V1) được giới thiệu trong bài viết trước là một làn gió mới với phong cách one-page scroll mượt mà, thì Opsoso_Scrolling V2 chính là bản nâng cấp toàn diện, đưa trải nghiệm đó lên một tầm cao hoàn toàn mới. Đây không chỉ đơn thuần là một template, mà là một "trải nghiệm điện ảnh" thu nhỏ ngay trên blog của bạn, được tôi xây dựng tỉ mỉ để kể câu chuyện thương hiệu của bạn một cách sống động và chuyên nghiệp nhất.

Bước Đột Phá Về Mặt Thị Giác Và Hiệu Ứng

Điểm nhấn lớn nhất của V2 chính là hệ thống hiệu ứng đồ họa được đầu tư công phu, biến mỗi thao tác cuộn chuột thành một hành trình khám phá đầy hứng thú:

  1. Sức Mạnh Từ Các Thư Viện Hiện Đại: Tôi đã tích hợp sâu các thư viện nổi tiếng như GSAP và ScrollTrigger để tạo ra những chuyển động uyển chuyển, chính xác đến từng mili-giây. Thanh tiến trình đọc (progress bar) ở đầu trang, hiệu ứng làm nổi bật (glow) khi hover chuột vào nút bấm, hay hiệu ứng xuất hiện cho các khối nội dung (reveal animation) đều được tối ưu để mang lại cảm giác "sang trọng" và tinh tế.

  2. Hiệu Ứng 3D Với Vanilla Tilt: Các khối dịch vụ (service box) giờ đây không còn phẳng lặng nữa. Với thư viện Vanilla Tilt, chúng sẽ nghiêng theo chuyển động chuột của người dùng, tạo cảm giác về chiều sâu và sự tương tác vật lý thú vị.

  3. Particle.js - Bầu Trời Riêng Cho Blog Của Bạn: Bạn có thấy phần nền hero với những hạt sáng lấp lánh di chuyển theo chuột không? Đó là Particles.js. Nó biến phần tiêu đề chính thành một không gian nghệ thuật sống động, thu hút mọi ánh nhìn ngay lập tức.

  4. Lenis - Cuộn Trang Mượt Như Lụa: Trải nghiệm cuộn chuột (smooth scroll) được nâng cấp mạnh mẽ với thư viện Lenis. Cảm giác cuộn trang giờ đây cực kỳ mượt mà, không hề có độ trễ hay giật cục, tạo nên một luồng chảy liên tục cho nội dung.

Cấu Trúc Nội Dung Đa Dạng Và Chuyên Nghiệp

Không chỉ dừng lại ở việc làm đẹp, Opsoso_Scrolling V2 còn được trang bị những khối nội dung (section) thiết yếu, giúp bạn dễ dàng xây dựng một website chuyên nghiệp chỉ trong vài phút:

  • Hero Area (Phần Giới Thiệu Chính): Tiêu đề chữ gradient "Expertly Crafted Design" cùng các nút kêu gọi hành động (CTA) nổi bật là lời chào đầy tự tin, sẵn sàng để bạn thay bằng slogan của riêng mình.

  • Features (Tính Năng): Khu vực trình bày 3 điểm mạnh dạng lưới (grid) với icon, tiêu đề và mô tả ngắn gọn.

  • Services (Dịch Vụ): Bố cục 2 cột cân đối, một bên là mô tả chi tiết kèm danh sách (check-list), một bên là hình ảnh minh họa. Kết hợp với hiệu ứng phóng to hình ảnh khi hover tạo điểm nhấn.

  • Statistics (Thống Kê) & Pricing (Bảng Giá): Đây là những section hoàn toàn mới. Phần thống kê với hiệu ứng đếm số (counter) ấn tượng. Phần bảng giá được thiết kế dạng thẻ (card) rõ ràng, có thẻ "Phổ biến nhất" (Popular) để làm nổi bật gói dịch vụ bạn muốn bán.

  • Portfolio (Dự Án): Điểm đặc biệt ở đây là tính năng tự động lọc bài viết. Bạn chỉ cần tạo các Trang (Page) hoặc Bài đăng (Post) với tiêu đề có cấu trúc product | Tên dự án | Tính năng nổi bật, template sẽ tự động kéo về và hiển thị chúng dưới dạng lưới sản phẩm chuyên nghiệp kèm hiệu ứng hover tuyệt đẹp.

  • Contact (Liên Hệ): Biểu mẫu liên hệ mặc định của Blogger được thiết kế lại hoàn toàn để phù hợp với phong cách Dark Mode và Glassmorphism xuyên suốt template.

Tối Ưu Hóa Cho Người Dùng Và Công Cụ Tìm Kiếm

Là một lập trình viên, tôi luôn đặt yếu tố kỹ thuật lên hàng đầu. Opsoso_Scrolling V2 được xây dựng với:

  • Mã Nguồn Sạch & Tương Thích Cao: Mọi thứ từ CSS đến JavaScript đều được tổ chức logic, dễ hiểu, tuân thủ các tiêu chuẩn mới nhất của Blogger.

  • Bố Cục Linh Hoạt Với Sidebar: Không chỉ hiển thị đẹp ở chế độ trang chủ (one-page), template còn có một sidebar được thiết kế tinh tế, hỗ trợ hiển thị hoàn hảo mọi widget mặc định của Blogger như Popular Posts (có thumbnail), Labels (dạng cloud), Contact Form, Image, LinkList... Khi vào trang bài viết, các section ở trang chủ sẽ tự động ẩn đi, nhường chỗ cho nội dung bài viết và sidebar, đảm bảo trải nghiệm đọc tập trung.

  • Tối Ưu Tốc Độ & SEO: Tôi đã cố gắng tối ưu mã nguồn để template tải nhanh nhất có thể. Việc sử dụng các thẻ meta đúng chuẩn và cấu trúc HTML rõ ràng giúp blog của bạn thân thiện hơn với các công cụ tìm kiếm.

  • Trải Nghiệm "All-in-One": Template tự động nhận diện bạn đang ở trang chủ (hiển thị tất cả các section) hay trang bài viết đơn lẻ (chỉ hiển thị nội dung bài viết và sidebar) để điều chỉnh giao diện cho phù hợp.

Dành Cho Ai Và Làm Thế Nào Để Bắt Đầu?

Opsoso_Scrolling V2 là sự lựa chọn hoàn hảo cho:

  • Các Blogger Cá Nhân, Freelancer, Nghệ Sĩ, Nhà Thiết Kế: Trình bày portfolio và câu chuyện cá nhân một cách đầy nghệ thuật.

  • Doanh Nghiệp Nhỏ, Startup: Có ngay một trang web giới thiệu công ty, dịch vụ chuyên nghiệp, hiện đại mà không cần chi phí thiết kế lớn.

  • Bất Kỳ Ai Muốn Tạo Dấu Ấn Mạnh Mẽ: Nếu bạn muốn blog của mình không bị lẫn vào hàng ngàn template có sẵn khác, đây chính là lựa chọn dành cho bạn.

 


 

Thật tuyệt vời khi bạn đã quan tâm và tải về sản phẩm này. Đây là phiên bản nâng cấp hoàn toàn mới, được tôi đầu tư rất nhiều tâm huyết, tích hợp những công nghệ hiện đại nhất (GSAP, Lenis, Particles.js, Vanilla Tilt...) nhằm mang đến một trải nghiệm "cuộn trang điện ảnh" đẳng cấp cho blog của bạn. Và tin vui là nó hoàn toàn MIỄN PHÍ dành cho cộng đồng!

Tôi hiểu rằng không phải ai cũng là chuyên gia kỹ thuật. Vì vậy, tôi đã soạn thảo một hướng dẫn sử dụng chi tiết, dễ hiểu nhất có thể. Dù bạn là người mới bắt đầu hay đã có kinh nghiệm, chỉ cần làm theo các bước dưới đây một cách tuần tự, bạn hoàn toàn có thể tự tay "khoác áo mới" cho blog của mình một cách ngoạn mục.

Hãy cùng tôi bắt đầu hành trình này nhé!

Phần 1: Chuẩn Bị Trước Khi "Lên Đời"

Trước khi đi vào cài đặt, chúng ta cần chuẩn bị một vài thứ để mọi việc diễn ra suôn sẻ.

  1. Tài khoản Blogger: Bạn cần có một blog đã được tạo trên Blogger.com. Nếu chưa có, hãy truy cập Blogger.com và tạo một blog mới (có thể để tạm thời, sau này xóa đi).

  2. File Template: Bạn đã có file opsoso_scrolling_v2.xml mà tôi cung cấp. Hãy lưu file này ở một vị trí dễ tìm trên máy tính, ví dụ như Desktop (Màn hình chính).

  3. Tinh Thần Thoải Mái: Hãy dành ra khoảng 30-45 phút để đọc và làm theo hướng dẫn một cách tập trung. Đừng lo lắng nếu bạn làm sai, chúng ta có thể dễ dàng quay lại như cũ.

Phần 2: Sao Lưu Template Cũ (Bước Bắt Buộc Phải Làm)

Đây là bước cực kỳ quan trọng, giúp bạn có thể khôi phục lại blog như ban đầu nếu có bất kỳ sự cố nào xảy ra trong quá trình cài đặt.

  1. Đăng nhập vào tài khoản Blogger của bạn.

  2. Ở góc trên bên trái, nhấp vào mũi tên xổ xuống và chọn blog bạn muốn cài template mới.

  3. Trong menu bên trái, chọn mục Chủ đề (Themes).

  4. Nhìn vào ô template hiện tại của bạn, nhấp vào nút mũi tên xổ xuống (bên cạnh nút Tùy chỉnh) và chọn Sao lưu / Khôi phục (Backup / Restore).

  5. Một cửa sổ pop-up hiện ra, nhấp vào nút Tải xuống chủ đề (Download theme). File XML của template cũ sẽ được tải về máy. Hãy cất giữ cẩn thận, ví dụ như trong một thư mục tên là "Backup Blog".

Xong bước này, bạn có thể yên tâm "thử nghiệm" mà không sợ "hỏng" blog.

Phần 3: Cài Đặt Template Opsoso_Scrolling V2

Giờ là lúc "thay áo mới" cho blog của chúng ta.

  1. Vẫn trong mục Chủ đề (Themes), nhấp vào nút mũi tên xổ xuống lần nữa.

  2. Lần này, chọn Chọn tệp (Choose file).

  3. Một hộp thoại mở ra, bạn hãy tìm đến file opsoso_scrolling_v2.xml đã tải về ở bước chuẩn bị và nhấp Open.

  4. Một thông báo xuất hiện: "Ghi đè chủ đề hiện tại của tôi". Hãy nhấp vào nút Có, ghi đè chủ đề hiện tại của tôi (Yes, overwrite my current theme).

Quá trình tải lên chỉ diễn ra trong vài giây. Sau khi hoàn tất, bạn đã chính thức sở hữu giao diện Opsoso_Scrolling V2! Hãy nhấp vào Xem blog (View blog) để chiêm ngưỡng thành quả bước đầu. Bạn sẽ thấy một blog với giao diện tối (Dark Mode) sang trọng, có đầy đủ các phần như Giới thiệu, Dịch vụ, Thống kê, Bảng giá... với các hiệu ứng chuyển động rất đẹp mắt. Đẹp rồi, nhưng đó mới chỉ là hình mẫu. Nhiệm vụ tiếp theo của chúng ta là "thay" toàn bộ nội dung mẫu đó thành nội dung của riêng bạn.

Phần 4: Tổng Quan Bố Cục Template

Để dễ dàng tùy chỉnh, bạn cần hiểu blog của mình được cấu tạo từ những phần nào. Template được chia thành các khu vực (section) riêng biệt mà bạn có thể quản lý trong phần Bố cục (Layout). Hãy vào Bố cục để xem sơ đồ:

  1. Thanh điều hướng (Navbar): Phần trên cùng, chứa logo và menu.

  2. Hero Area (Khu vực tiêu đề chính): Phần đầu tiên bạn nhìn thấy, với tiêu đề to, mô tả và nút bấm.

  3. Features Area (Tính năng): Phần giới thiệu 3 điểm mạnh dạng ô (box).

  4. Services Area V2 (Dịch vụ): Phần giới thiệu dịch vụ với hình ảnh và danh sách.

  5. Statistics Area (Thống kê): Phần hiển thị các con số ấn tượng.

  6. Pricing Area (Bảng giá): Phần giới thiệu các gói dịch vụ.

  7. Main Posts (Khu vực bài viết): Đây là nơi hiển thị danh sách bài viết (ở trang chủ) và nội dung bài viết chi tiết (kèm Sidebar).

  8. Portfolio Area (Dự án): Phần trưng bày các dự án, sản phẩm nổi bật.

  9. Contact Area (Liên hệ): Phần chứa biểu mẫu liên hệ.

  10. Footer (Chân trang): Phần cuối cùng, chứa thông tin, liên kết mạng xã hội và bản quyền.

Tất cả nội dung ở các khu vực từ 2 đến 6 và 9 đều nằm trong các widget kiểu HTML. Nghĩa là bạn có thể thoải mái chỉnh sửa chúng bằng văn bản, hình ảnh, liên kết... theo ý muốn.

Phần 5: Hướng Dẫn Tùy Chỉnh Chi Tiết Từng Khu Vực

Bây giờ, chúng ta sẽ đi vào từng phần một. Hãy làm theo tuần tự để không bỏ sót nhé.

5.1. Tùy Chỉnh Thanh Điều Hướng (Navbar) và Logo

  • Đổi Logo:

    1. Trong Bố cục (Layout), tìm khu vực Header Logo.

    2. Nhấp vào Chỉnh sửa (Edit) trên widget Header.

    3. Một cửa sổ hiện ra. Bạn có hai lựa chọn:

      • Hiển thị "Tiêu đề và Mô tả" (dạng chữ): Bạn chỉ cần sửa tên blog và mô tả trong phần Cài đặt chung của Blogger là được.

      • Hiển thị "Hình ảnh" (logo ảnh): Tích chọn vào ô Thay vì tiêu đề, hãy sử dụng hình ảnh. Nhấp Chọn ảnh để tải logo của bạn lên (nên dùng ảnh nền trong suống, chiều cao khoảng 40-50px). Nhấp Lưu.

  • Sửa Menu:

    1. Trong Bố cục (Layout), tìm khu vực Navbar Menu.

    2. Nhấp vào Chỉnh sửa (Edit) trên widget Main Menu.

    3. Đây là nơi bạn quản lý các mục menu. Cấu trúc mặc định có thể có "Trang chủ" và vài mục "Menu" khác. Bạn hãy xóa hết và tạo mới theo ý muốn.

    4. Lưu ý quan trọng: Để các menu có hiệu ứng cuộc đến đúng phần (section) trên trang chủ, bạn cần nhập Địa chỉ liên kết là dấu # kèm theo ID của phần đó. Ví dụ:

      • #home -> Trỏ về đầu trang.

      • #features -> Trỏ đến phần Tính năng.

      • #services -> Trỏ đến phần Dịch vụ.

      • #stats -> Trỏ đến phần Thống kê.

      • #pricing -> Trỏ đến phần Bảng giá.

      • #portfolio -> Trỏ đến phần Dự án.

      • #contact -> Trỏ đến phần Liên hệ.
        (Bạn có thể xem ID của mỗi phần trong file XML, ví dụ <section class='scroll-section' id='services'>)

    5. Nhấp Thêm mục liên kết để tạo từng menu. Nhập Tên liên kết (ví dụ: Dịch Vụ) và Địa chỉ liên kết tương ứng (ví dụ: #services). Nhấp Lưu khi hoàn tất.

  • Tùy chỉnh nút "Call Me":

    1. Trong Bố cục (Layout), tìm khu vực Navbar Right.

    2. Nhấp vào Chỉnh sửa (Edit) trên widget Số điện thoại.

    3. Trong ô Nội dung, bạn thay số điện thoại mẫu 0123456789 bằng số điện thoại thật của bạn. Nhấp Lưu.

5.2. Tùy Chỉnh Phần Giới Thiệu Chính (Hero Area)

  1. Trong Bố cục (Layout), tìm khu vực Hero Area V2.

  2. Nhấp vào Chỉnh sửa (Edit) trên widget Hero Content.

  3. Bạn sẽ thấy một khung Nội dung chứa mã HTML. Đừng lo lắng, bạn không cần hiểu hết về code, chỉ cần biết thay thế chữ cho đúng chỗ.

    • Tìm dòng <h1 class="hero-title" ...>Expertly <br/> Crafted Design</h1>: Hãy thay cụm từ "Expertly Crafted Design" bằng tiêu đề bạn muốn. Bạn có thể dùng <br/> để xuống dòng.

    • Tìm dòng <p class="hero-desc" ...>Nâng tầm thương hiệu... hiệu ứng đỉnh cao.</p>: Thay toàn bộ đoạn văn bản này bằng mô tả ngắn gọn về blog/dịch vụ của bạn.

    • Tìm hai nút bấm:

      • <a class="glow-btn" href="#portfolio">Khám phá ngay ...</a>: Thay chữ "Khám phá ngay" và có thể đổi href="#portfolio" thành liên kết mong muốn (ví dụ: #services).

      • <a class="glow-btn secondary-btn" href="#contact">Liên hệ tư vấn</a>: Thay tương tự.

  4. Nhấp Lưu.

5.3. Tùy Chỉnh Phần Tính Năng (Features Area)

  1. Trong Bố cục (Layout), tìm khu vực Features Area.

  2. Nhấp vào Chỉnh sửa (Edit) trên widget Tính năng.

  3. Trong khung Nội dung, bạn sẽ thấy cấu trúc 3 ô (box) như sau:

    html
    <div class="grid">
    <div class="box" ...>
        <i class="fas fa-bolt"></i>
        <h3>Tốc độ đỉnh cao</h3>
        <p>Tối ưu hóa mã nguồn ...</p>
    </div>
    <div class="box" ...>
        <i class="fas fa-shield-halved"></i>
        <h3>Bảo mật tuyệt đối</h3>
        <p>Xây dựng trên nền tảng ...</p>
    </div>
    <div class="box" ...>
        <i class="fas fa-layer-group"></i>
        <h3>Giao diện hiện đại</h3>
        <p>Thiết kế theo xu hướng ...</p>
    </div>
</div>

  4. Cách chỉnh sửa:

    • Đổi icon: Tìm thư viện icon Font Awesome 6 tại https://fontawesome.com/icons. Chọn icon bạn thích, copy mã <i class="fas fa-ten-icon-moi"></i> và thay vào giữa cặp thẻ của mỗi ô.

    • Đổi tiêu đề (h3): Thay nội dung giữa cặp thẻ <h3> và </h3>.

    • Đổi mô tả (p): Thay nội dung giữa cặp thẻ <p> và </p>.

    • Thay đổi số lượng ô: Bạn có thể copy toàn bộ một ô (<div class="box">...</div>) và dán thêm vào sau ô cuối cùng để tạo ô thứ 4, thứ 5... Lưới sẽ tự động sắp xếp lại.

  5. Nhấp Lưu.

5.4. Tùy Chỉnh Phần Dịch Vụ (Services Area V2)

  1. Trong Bố cục (Layout), tìm khu vực Services Area V2.

  2. Nhấp vào Chỉnh sửa (Edit) trên widget Dịch vụ V2.

  3. Khung nội dung có cấu trúc hai cột. Bạn sẽ thấy:

    • Cột văn bản (bên trái): Chứa tiêu đề phụ (<h2>), tiêu đề chính (<h3>), đoạn văn (<p>) và danh sách (<ul class="check-list">). Hãy thay thế toàn bộ nội dung chữ bằng nội dung của bạn.

    • Cột hình ảnh (bên phải): Tìm dòng <img src="https://images.unsplash.com/...">. Thay toàn bộ địa chỉ link trong dấu ngoặc kép bằng địa hình ảnh bạn muốn sử dụng. Bạn có thể tải ảnh lên Blogger rồi copy địa chỉ hoặc dùng ảnh từ các trang ảnh miễn phí như Unsplash.

  4. Nhấp Lưu.

5.5. Tùy Chỉnh Phần Thống Kê (Statistics Area)

  1. Trong Bố cục (Layout), tìm khu vực Statistics Area.

  2. Nhấp vào Chỉnh sửa (Edit) trên widget Thống kê.

  3. Cấu trúc rất đơn giản, mỗi ô thống kê là một <div class="stat-item">. Bạn chỉ cần sửa:

    • Số trong data-target (ví dụ data-target="150") và số 0 ở giữa thẻ <h2> là con số bạn muốn hiển thị khi bắt đầu.

    • Nội dung trong thẻ <p> là mô tả cho con số đó.

    • Bạn có thể thêm bớt các ô stat-item tùy ý.

  4. Nhấp Lưu.

5.6. Tùy Chỉnh Phần Bảng Giá (Pricing Area)

  1. Trong Bố cục (Layout), tìm khu vực Pricing Area.

  2. Nhấp vào Chỉnh sửa (Edit) trên widget Bảng giá.

  3. Bạn sẽ thấy hai thẻ pricing-card: một cho gói Basic, một cho gói Premium (có thêm class popular). Cách sửa tương tự:

    • Thay tên gói (<h3>Basic</h3>).

    • Thay giá tiền (<div class="price">5.000.000đ</div>).

    • Sửa danh sách tính năng: Mỗi dòng là một <li>. Dòng nào có class="disabled" là dòng bị gạch ngang, thể hiện không có tính năng đó. Bạn có thể thêm, xóa, sửa các dòng này.

    • Sửa liên kết nút "Chọn gói này" (href="#contact").

    • Bạn cũng có thể copy thêm các pricing-card để tạo thêm gói khác.

  4. Nhấp Lưu.

5.7. Quản Lý Bài Viết và Sidebar (Khu vực quan trọng nhất)

Đây là khu vực động, hiển thị nội dung blog của bạn.

  • Trang chủ: Khi bạn ở trang chủ, phần này sẽ hiển thị danh sách các bài viết gần đây dưới dạng lưới (grid) đẹp mắt, mỗi bài có ảnh đại diện (thumbnail), tiêu đề và đoạn trích.

  • Trang bài viết: Khi bạn nhấp vào đọc một bài viết cụ thể, giao diện tự động chuyển sang dạng một cột với nội dung bài viết ở giữa và Sidebar ở bên phải. Các phần như Hero, Features... sẽ tự động ẩn đi để tập trung vào nội dung.

Cách tùy chỉnh:

  1. Quản lý bài viết: Việc này bạn làm như bình thường trong mục Bài đăng của Blogger. Template sẽ tự động hiển thị đẹp.

  2. Tùy chỉnh Sidebar (Quan trọng):

    • Trong Bố cục (Layout), tìm khu vực Sidebar.

    • Bạn sẽ thấy một vài widget mẫu tôi đã cài sẵn:

      • Biểu mẫu liên hệ (ContactForm2): Đây là form liên hệ mặc định của Blogger, đã được tôi thiết kế lại giao diện để hợp với template. Bạn có thể để nguyên hoặc xóa đi nếu không cần.

      • Liên hệ với chúng tôi (LinkList1): Đây là widget danh sách liên kết. Bạn có thể Chỉnh sửa nó để thêm các link Facebook, YouTube, v.v. của bạn.

      • Tiêu đề Thông báo (Text1): Một widget văn bản đơn giản. Bạn có thể sửa nội dung thành một thông báo nào đó.

      • Nhãn (Label1): Hiển thị danh sách các chủ đề (nhãn) của blog. Bạn có thể chỉnh sửa cách hiển thị (danh sách hoặc đám mây) trong phần cài đặt của widget.

      • Hình ảnh (Image1): Cho phép bạn thêm một hình ảnh tùy ý (ví dụ: ảnh quảng cáo, ảnh đại diện).

    • Thêm widget mới vào Sidebar: Nhấp vào nút Thêm tiện ích con (Add a Gadget) trong khu vực Sidebar. Một cửa sổ hiện ra với rất nhiều loại tiện ích của Blogger (Popular Posts, Blog Archive, Search Box, v.v.). Bạn chọn một cái, cấu hình và nhấp Lưu. Widget mới sẽ xuất hiện trong Sidebar và cũng được thiết kế giao diện tự động.

5.8. Tùy Chỉnh Phần Dự Án (Portfolio Area) - Tính năng đặc biệt

Đây là một tính năng rất thông minh mà tôi rất tâm đắc. Nó tự động lấy dữ liệu từ các Trang (Pages) bạn tạo để hiển thị thành một bộ sưu tập sản phẩm/dự án rất đẹp mắt.

Cách hoạt động:

  1. Vào mục Trang (Pages) trên Blogger.

  2. Tạo một Trang mới (New Page).

  3. Quan trọng nhất: Tiêu đề của trang này PHẢI có cấu trúc:
    product | Tên sản phẩm của bạn | Mô tả ngắn / Tính năng nổi bật
    Ví dụ: product | Dự án ABC | Thiết kế website thương mại điện tử
    (Lưu ý: có dấu | phân cách và từ "product" phải viết không dấu)

  4. Nội dung trang bạn có thể viết mô tả chi tiết về dự án đó. Bạn cũng nên thêm một hình ảnh đại diện vào bài viết (bằng cách chèn ảnh vào đầu nội dung) để Portfolio hiển thị ảnh đẹp hơn.

  5. Xuất bản trang đó.

Template sẽ tự động "đọc" tất cả các Trang có tiêu đề bắt đầu bằng "product |", lấy tên, tính năng, ảnh đại diện và liên kết để hiển thị vào lưới sản phẩm ở phần Portfolio. Bạn không cần phải làm gì thêm!

5.9. Tùy Chỉnh Phần Liên Hệ (Contact Area)

  1. Trong Bố cục (Layout), tìm khu vực Contact Area.

  2. Có hai widget ở đây:

    • Tiêu đề Liên hệ (HTML16): Nhấp Chỉnh sửa để thay đổi tiêu đề của phần này nếu muốn.

    • Biểu mẫu liên hệ (ContactForm1): Đây là widget Biểu mẫu liên hệ. Bạn không cần chỉnh sửa gì bên trong nó. Tin nhắn từ form này sẽ được gửi vào email của tài khoản Google mà bạn đang dùng cho Blogger. Bạn nên kiểm tra trong Cài đặt (Settings) > Khác (Other) > Biểu mẫu liên hệ (Contact Form) xem đã gửi tin nhắn về đúng email của bạn chưa nhé.

5.10. Tùy Chỉnh Phần Chân Trang (Footer)

Footer được chia làm 3 cột và một phần bản quyền.

  1. Cột Giới thiệu (Footer About):

    • Trong Bố cục, tìm khu vực Footer About.

    • Nhấp Chỉnh sửa widget Giới thiệu.

    • Thay nội dung trong ô Nội dung bằng đoạn văn giới thiệu blog của bạn.

  2. Cột Mạng xã hội (Footer Social):

    • Trong Bố cục, tìm khu vực Footer Social.

    • Nhấp Chỉnh sửa widget Mạng xã hội.

    • Đây là widget LinkList. Bạn hãy tạo các mục liên kết với Tên và Địa chỉ tương ứng.

    • Lưu ý về icon: Template thông minh sẽ tự động hiểu và hiển thị icon của Facebook, YouTube, Instagram, X (Twitter) và Phone nếu bạn đặt Tên chính xác như vậy. Với các link khác, nó sẽ hiển thị icon dấu link.

  3. Cột Chính sách (Footer Privacy):

    • Trong Bố cục, tìm khu vực Footer Privacy.

    • Nhấp Chỉnh sửa widget Chính sách bảo mật.

    • Tương tự, đây là widget LinkList để bạn tạo các link như "Chính sách bảo mật", "Điều khoản dịch vụ" trỏ đến các trang tĩnh bạn đã tạo.

  4. Phần Bản quyền (Footer Copyright):

    • Trong Bố cục, tìm khu vực Footer Copyright.

    • Nhấp Chỉnh sửa widget Copyright.

    • Thay nội dung dòng chữ bản quyền trong ô Nội dung bằng thông tin của bạn. Ví dụ: © 2026 Tên Blog của tôi. All rights reserved.

Phần 6: Một Số Lưu Ý Và Mẹo Nhỏ

  • Ảnh đại diện cho bài viết (Thumbnail): Để bài viết hiển thị ảnh đẹp trong lưới bài viết ở trang chủ, hãy luôn chèn một ảnh có kích thước lớn vào đầu nội dung bài viết. Blogger sẽ tự động lấy ảnh đó làm thumbnail.

  • Hiệu ứng cuộn trang (Smooth Scroll): Template đã được cài đặt sẵn hiệu ứng cuộn trang mượt mà (Lenis). Bạn không cần làm gì thêm.

  • Hiệu ứng cho các khối nội dung (AOS, GSAP, Vanilla Tilt): Các hiệu ứng như phóng to, nghiêng 3D khi rê chuột, hay chữ bay lên khi cuộn đến đã được lập trình sẵn. Bạn chỉ việc thưởng thức.

  • Kiểm tra trên điện thoại: Đừng quên xem thử blog của bạn trên điện thoại di động. Template này được tối ưu 100% cho mọi kích thước màn hình. Menu sẽ tự động thu gọn thành nút "hamburger".

  • Thay đổi màu sắc chủ đạo: Nếu bạn muốn tùy chỉnh màu sắc cho hợp với thương hiệu, bạn có thể làm như sau (dành cho người dùng có chút kiến thức CSS):

    1. Vào Chủ đề (Themes).

    2. Nhấp vào nút Chỉnh sửa HTML.

    3. Tìm đến dòng bắt đầu bằng :root {.

    4. Bạn sẽ thấy các biến màu như --primary: #6366f1;, --secondary: #ec4899;... Bạn chỉ cần thay đổi mã màu HEX ở bên phải dấu hai chấm. Ví dụ đổi --primary thành --primary: #ff5733;. Nhấp Lưu chủ đề.
      (Nếu chưa tự tin, bạn có thể bỏ qua bước này và giữ nguyên màu sắc mặc định vốn đã rất đẹp).

Xin chúc mừng! Bạn đã hoàn tất việc cài đặt và tùy chỉnh template Opsoso_Scrolling V2 cho blog của mình. Tôi hy vọng bạn sẽ có những trải nghiệm thật tuyệt vời với "đứa con tinh thần" này.

Đây là một sản phẩm tôi làm ra với tất cả niềm đam mê và sự tỉ mỉ, và tôi quyết định chia sẻ nó hoàn toàn miễn phí đến cộng đồng Blogger. Nếu bạn thấy template hữu ích, hãy giới thiệu nó đến bạn bè của mình. Mọi đóng góp ý kiến hoặc báo cáo lỗi (nếu có), bạn có thể để lại bình luận trên trang chủ Opsoso.

Một lần nữa, cảm ơn bạn đã tin tưởng và sử dụng sản phẩm của tôi. Chúc bạn thành công với blog của mình!