Kiếm tiền từ giao diện blogspot hỗ trợ Multiple thumbnails, Multiple Columns widgets [ Flexbox & Responsive CSS Icon Grid ]

Chào mừng quý độc giả đến với kênh template blogspot MMO, thủ thuật kiếm tiền trên mạng cùng CMS Blogger.

Là fan hâm mộ nền tảng thiết kế web giá rẻ được cung cấp bởi google. Chính vì vậy tác giả có nhiều trải nghiệm khá thú vị khi tạo blog, thiết kế website từ  nền tảng này.

Trong quá trình vọc code chỉnh sửa đủ kiểu chủ đề giao diện blogger khác nhau từ template blogspot bán hàng, blog content marketing, web du lịch, web nhiếp ảnh, du lịch & gần đây là các mẫu theme dành cho dân MMO kiếm tiền từ Affiliate Marketing.

Sau một thời gian mày mò, code web đủ kiểu, hôm nay Blog Gia Bảo sẽ cùng các bạn tóm tắt & sẻ chia một số thủ thuật nho nhỏ giúp các bạn kiếm tiền theo mô hình tiếp thị liên kết bằng cách chỉnh sửa các giao diện blogspot có hỗ trợ Multiple thumbnails, Multiple Columns widgets [ Flexbox & Responsive CSS Icon Grid  ]

Trong nội dung bài viết chúng ta sẽ sử dụng một số template blogspot điển hình sau :

Speedily : 

  • Demo :  https://speedily-et-demo.blogspot.com
  • Tải về : https://my.bloggertemplate.org/p/speedily.html
  • Hướng dẫn cài đặt : https://blogging.pikitemplates.com/2021/12/documentation-of-speedily.html

Cooking :

  • Demo :  https://cooking-pikitemplates.blogspot.com 
  • Tải về : https://my.bloggertemplate.org/p/cooking.html
  • Hướng dẫn cài đặt : https://blogging.pikitemplates.com/2021/05/documentation-of-cooking.html

2 mẫu template blogspot Speedily & Cooking là 2 mẫu được chia sẻ trên trang bloggertemplate.org, chuyên trang chia sẻ các mẫu giao diện blogger thiết kế chuẩn seo, load nhanh, nhẹ, đẹp mắt chuẩn Ui / Ux.

Đặc điểm chung của 2 mẫu giao diện trên là sử dụng thiết kế dạng multiple column có hỗ trợ tiện ích, widget Flexbox & Responsive CSS Icon Grid.

Trên Speedily sử dụng css flex hiển thị dạng lưới 9 icon, còn trên Cooking là cấu trúc dạng lưới 12 ô hình ảnh thumbnail kết hợp với tiêu đề và mô tả, gọn nhẹ & siêu đẹp mắt.

Cấu trúc widget dạng Flexbox & Responsive CSS Icon Grid trên blogspot rất thích hợp dùng làm nơi quảng bá, giới thiệu bài viết có nội dung nổi bật thông qua cấu trúc hình ảnh thumbnail nhỏ gọn,  hiển thị tương thích trên màn hình PC, lẫn trên mobile.

Giao diện blogger Speedily & Cooking, được Gia Bảo lựa chọn làm mẫu đại diện điển hình dùng chỉnh sửa sang dạng template blogspot MMO, do có cấu trúc thiết kế đẹp, đơn giản phù hợp với nhu cầu của các blogger mới vào nghề muốn thử sức với cách kiếm tiền online trên nền tảng blogger. 

Với 2 mẫu theme blogger trên chỉ với một số thao tác đơn giản là bạn có thể hô biến giao diện blogspot được giới thiệu trên thành nơi gắn link affiliate marketing giúp bạn kiếm tiền từ tiếp thị liên kết ngay trên trang blog của mình .

Còn làm cách nào, mời bạn xem tiếp nhé !  

Cài đặt & thiết kế blogspot cơ bản bạn có thể tìm hiểu các bài viết được chia sẻ trên blog này nhé, bạn cũng có thể search google tìm kiếm các từ khóa sau  :

  1. Cách tạo blogspot free
  2. Hướng dẫn tạo blogspot chuyên nghiệp  
  3. Theme blogspot

Coi như bạn đã nắm vững kỹ thuật tạo web cá nhân bằng CMS Blogger cơ bản rồi nhé !

Chúng ta bắt đầu từng bước thiết kế website giúp bạn  :  Kiếm tiền từ giao diện blogspot hỗ trợ Multiple thumbnails, Multiple Columns widgets [ Flexbox & Responsive CSS Icon Grid  ]

Bước 1 : Sau khi tải file về laptop, PC của mình & cài đặt thành công mẫu giao diện. 

Bước 2 : Bạn vào phần bố cục : 

Chỉnh sửa gán link tiếp thị liên kết, đường dẫn hình ảnh, tiêu đề & mô tả chú thích  & lưu lại thế là xong.

Minh họa & hướng dẫn bằng hình ảnh.

Trong phần bố cục bạn tìm đến khu vực Category Labels -  Giống như hình trên

Kế đến bạn chỉ cần chèn thêm hình ảnh, link sản phẩm tiếp thị liên kết, thêm tiêu đề & mô tả, chú thích vào khung Định cấu hình hình ảnh như hình ảnh phía dưới.    

  1. Thay hình ảnh, bạn  Copy link hình ảnh sản phẩm dán vào ô Url hình ảnh.
  2. Thêm link tiếp thị liên kết, bạn  Copy link dán vào ô Đường Liên Kết.    
  1. Thêm tiêu đề bạn gõ text văn bản vào ô Tiêu Đề.
  2. Thêm chú thích bạn gõ hoặc copy mô tả dán vào ô Chú thích 

 Xem kết quả mẫu :


Bước 3 : Mặc định widget này được cấu hình chỉ hiển thị trên trang chủ, nếu bạn muốn chúng hiển thị lên các định dạng trang Blogspot chỉ cần chỉnh sửa lại thẻ điều kiện , hoặc loại bỏ thẻ điều kiện nếu muốn chúng hiện thị lên tất cả kiểu trang blogspot của bạn.

Cách làm như sau vào chỉnh sửa Html :

Search : ( Crlt + F ) đoạn text sau : 

 b:section class='ListButtons-area' id='ListButtons-area' maxwidgets='5

 Mẫu Code minh họa :      

<main id='feed-view'>
      

<b:if cond='data:view.isHomepage'>        

<b:section class='ListButtons-area' id='ListButtons-area' maxwidgets='5' name='Category Labels' showaddelement='no'>
          <b:widget id='Image1' locked='true' title='Listed Tech' type='Image' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/--WdOArDZPKM/YcqdAeNHh-I/AAAAAAAAAaY/cZiI1ojV2nECdumDr0XjJB2uKjj2NTcQACNcBGAsYHQ/s100/blogger-templates-icons--6-.png</b:widget-setting>
              <b:widget-setting name='displayHeight'>100</b:widget-setting>
              <b:widget-setting name='sectionWidth'>150</b:widget-setting>
              <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
              <b:widget-setting name='displayWidth'>100</b:widget-setting>
              <b:widget-setting name='link'>/search/label/Entertainment</b:widget-setting>
              <b:widget-setting name='caption'/>
            </b:widget-settings>
            <b:includable id='main' var='this'>
            <b:include name='content'/>
          </b:includable>
            <b:includable id='content'>
                  <div class='widget-content'>
                    <div class='ListButtons-area-img'>
                      <b:if cond='data:link'>
                        <a expr:href='data:link'>
                          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
                        </a>
                        </b:if>
                    </div>
                  </div>
                  <b:if cond='data:title != &quot;&quot;'>
                    <div class='ListButtons-area-title'>
                      <h2>
                        <a expr:href='data:link'>
                          <data:title/>
                        </a>
                      </h2>
                    </div>
                  </b:if>
                </b:includable>
          </b:widget>
          <b:widget id='Image2' locked='true' title='Time Manager' type='Image' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/-YGhwzJCrdxA/YcqdPcMoiCI/AAAAAAAAAac/b3b4Xsk4KEg7reTQIgk6KyR3h0slgX_CACNcBGAsYHQ/s100/blogger-templates-icons--14-.png</b:widget-setting>
              <b:widget-setting name='displayHeight'>100</b:widget-setting>
              <b:widget-setting name='sectionWidth'>150</b:widget-setting>
              <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
              <b:widget-setting name='displayWidth'>100</b:widget-setting>
              <b:widget-setting name='link'>/search/label/Entertainment</b:widget-setting>
              <b:widget-setting name='caption'/>
            </b:widget-settings>
            <b:includable id='main' var='this'>
            <b:include name='content'/>
          </b:includable>
            <b:includable id='content'>
                  <div class='widget-content'>
                    <div class='ListButtons-area-img'>
                      <b:if cond='data:link'>
                        <a expr:href='data:link'>
                          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
                        </a>
                         </b:if>
                    </div>
                  </div>
                  <b:if cond='data:title != &quot;&quot;'>
                    <div class='ListButtons-area-title'>
                      <h2>
                        <a expr:href='data:link'>
                          <data:title/>
                        </a>
                      </h2>
                    </div>
                  </b:if>
                </b:includable>
          </b:widget>
          <b:widget id='Image3' locked='true' title='Earn Revenue' type='Image' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/-CT8aNWJYQEM/YcqdUF4r66I/AAAAAAAAAag/kjtbfetMFek2PrdqUCtr3k9qXhXsSCiUgCNcBGAsYHQ/s100/blogger-templates-icons--4-.png</b:widget-setting>
              <b:widget-setting name='displayHeight'>100</b:widget-setting>
              <b:widget-setting name='sectionWidth'>150</b:widget-setting>
              <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
              <b:widget-setting name='displayWidth'>100</b:widget-setting>
              <b:widget-setting name='link'>/search/label/Entertainment</b:widget-setting>
              <b:widget-setting name='caption'/>
            </b:widget-settings>
            <b:includable id='main' var='this'>
            <b:include name='content'/>
          </b:includable>
            <b:includable id='content'>
                  <div class='widget-content'>
                    <div class='ListButtons-area-img'>
                      <b:if cond='data:link'>
                        <a expr:href='data:link'>
                          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
                        </a>
                       </b:if>
                    </div>
                  </div>
                  <b:if cond='data:title != &quot;&quot;'>
                    <div class='ListButtons-area-title'>
                      <h2>
                        <a expr:href='data:link'>
                          <data:title/>
                        </a>
                      </h2>
                    </div>
                  </b:if>
                </b:includable>
          </b:widget>
          <b:widget id='Image4' locked='true' title='Remote Devices' type='Image' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/-zQVJBJqYess/YcqdWx0w8GI/AAAAAAAAAak/cuZRkPgBg2A2BYhs4Ex4XdhzRzJoSNMvQCNcBGAsYHQ/s100/blogger-templates-icons--5-.png</b:widget-setting>
              <b:widget-setting name='displayHeight'>100</b:widget-setting>
              <b:widget-setting name='sectionWidth'>150</b:widget-setting>
              <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
              <b:widget-setting name='displayWidth'>100</b:widget-setting>
              <b:widget-setting name='link'>/search/label/Entertainment</b:widget-setting>
              <b:widget-setting name='caption'/>
            </b:widget-settings>
            <b:includable id='main' var='this'>
            <b:include name='content'/>
          </b:includable>
            <b:includable id='content'>
                  <div class='widget-content'>
                    <div class='ListButtons-area-img'>
                      <b:if cond='data:link'>
                        <a expr:href='data:link'>
                          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
                        </a>
                        </b:if>
                    </div>
                  </div>
                  <b:if cond='data:title != &quot;&quot;'>
                    <div class='ListButtons-area-title'>
                      <h2>
                        <a expr:href='data:link'>
                          <data:title/>
                        </a>
                      </h2>
                    </div>
                  </b:if>
                </b:includable>
          </b:widget>
          <b:widget id='Image5' locked='true' title='Blogging Checklist' type='Image' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/-RWdEBqlsiMw/YcqdZ0UG9TI/AAAAAAAAAao/pvCoqdsrepksK5QsC3_xueCmPieDMGXAgCNcBGAsYHQ/s102/homework%2B%25281%2529.png</b:widget-setting>
              <b:widget-setting name='displayHeight'>102</b:widget-setting>
              <b:widget-setting name='sectionWidth'>150</b:widget-setting>
              <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
              <b:widget-setting name='displayWidth'>102</b:widget-setting>
              <b:widget-setting name='link'>/search/label/Entertainment</b:widget-setting>
              <b:widget-setting name='caption'/>
            </b:widget-settings>
            <b:includable id='main' var='this'>
            <b:include name='content'/>
          </b:includable>
            <b:includable id='content'>
                  <div class='widget-content'>
                    <div class='ListButtons-area-img'>
                      <b:if cond='data:link'>
                        <a expr:href='data:link'>
                          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
                        </a>
                         </b:if>
                    </div>
                  </div>
                  <b:if cond='data:title != &quot;&quot;'>
                    <div class='ListButtons-area-title'>
                      <h2>
                        <a expr:href='data:link'>
                          <data:title/>
                        </a>
                      </h2>
                    </div>
                  </b:if>
                </b:includable>
          </b:widget>
          <b:widget id='Image6' locked='true' title='Ranking Experiments' type='Image' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/-8xYVTlxApNc/Ycqdc7l5sCI/AAAAAAAAAas/Ufo9L47pfMkT7n0yUFrnPboGLqn3yIpwQCNcBGAsYHQ/s100/chemical%2B%25281%2529.png</b:widget-setting>
              <b:widget-setting name='displayHeight'>100</b:widget-setting>
              <b:widget-setting name='sectionWidth'>150</b:widget-setting>
              <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
              <b:widget-setting name='displayWidth'>100</b:widget-setting>
              <b:widget-setting name='link'>/search/label/Entertainment</b:widget-setting>
              <b:widget-setting name='caption'/>
            </b:widget-settings>
            <b:includable id='main' var='this'>
            <b:include name='content'/>
          </b:includable>
            <b:includable id='content'>
                  <div class='widget-content'>
                    <div class='ListButtons-area-img'>
                      <b:if cond='data:link'>
                        <a expr:href='data:link'>
                          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
                        </a>
                         </b:if>
                    </div>
                  </div>
                  <b:if cond='data:title != &quot;&quot;'>
                    <div class='ListButtons-area-title'>
                      <h2>
                        <a expr:href='data:link'>
                          <data:title/>
                        </a>
                      </h2>
                    </div>
                  </b:if>
                </b:includable>
          </b:widget>
          <b:widget id='Image7' locked='true' title='Google SEO' type='Image' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/-_sZr2pkQS4A/YcqdfhbwgHI/AAAAAAAAAa0/lKMaIXEGg4QF0pMWlo2-vfYQfM5HlmgYgCNcBGAsYHQ/s100/whiteboard%2B%25281%2529.png</b:widget-setting>
              <b:widget-setting name='displayHeight'>100</b:widget-setting>
              <b:widget-setting name='sectionWidth'>150</b:widget-setting>
              <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
              <b:widget-setting name='displayWidth'>100</b:widget-setting>
              <b:widget-setting name='link'>/search/label/Prisma%20Theory</b:widget-setting>
              <b:widget-setting name='caption'/>
            </b:widget-settings>
            <b:includable id='main' var='this'>
            <b:include name='content'/>
          </b:includable>
            <b:includable id='content'>
                  <div class='widget-content'>
                    <div class='ListButtons-area-img'>
                      <b:if cond='data:link'>
                        <a expr:href='data:link'>
                          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
                        </a>
                         </b:if>
                    </div>
                  </div>
                  <b:if cond='data:title != &quot;&quot;'>
                    <div class='ListButtons-area-title'>
                      <h2>
                        <a expr:href='data:link'>
                          <data:title/>
                        </a>
                      </h2>
                    </div>
                  </b:if>
                </b:includable>
          </b:widget>
          <b:widget id='Image8' locked='true' title='SEO Tips' type='Image' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/-MM5siP2K27k/YcqdlGWK50I/AAAAAAAAAa4/-95rspN18N0_zWDk-uufuAuMxMwMMJzmwCNcBGAsYHQ/s100/blogger-templates-icons--2-.png</b:widget-setting>
              <b:widget-setting name='displayHeight'>100</b:widget-setting>
              <b:widget-setting name='sectionWidth'>150</b:widget-setting>
              <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
              <b:widget-setting name='displayWidth'>100</b:widget-setting>
              <b:widget-setting name='link'>/search/label/Entertainment</b:widget-setting>
              <b:widget-setting name='caption'/>
            </b:widget-settings>
            <b:includable id='main' var='this'>
            <b:include name='content'/>
          </b:includable>
            <b:includable id='content'>
                  <div class='widget-content'>
                    <div class='ListButtons-area-img'>
                      <b:if cond='data:link'>
                        <a expr:href='data:link'>
                          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
                        </a>
                        </b:if>
                    </div>
                  </div>
                  <b:if cond='data:title != &quot;&quot;'>
                    <div class='ListButtons-area-title'>
                      <h2>
                        <a expr:href='data:link'>
                          <data:title/>
                        </a>
                      </h2>
                    </div>
                  </b:if>
                </b:includable>
          </b:widget>
          <b:widget id='Image9' locked='true' title='Posts Ping' type='Image' version='2' visible='true'>
            <b:widget-settings>
              <b:widget-setting name='displayUrl'>https://1.bp.blogspot.com/--fx2-DijkaQ/YcqdoyiiLLI/AAAAAAAAAa8/OOdn9gfXj-M-pQp7wyCUBznGo8hUfP6IQCNcBGAsYHQ/s100/blogger-templates-icons--3-.png</b:widget-setting>
              <b:widget-setting name='displayHeight'>100</b:widget-setting>
              <b:widget-setting name='sectionWidth'>150</b:widget-setting>
              <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
              <b:widget-setting name='displayWidth'>100</b:widget-setting>
              <b:widget-setting name='link'>/search/label/Entertainment</b:widget-setting>
              <b:widget-setting name='caption'/>
            </b:widget-settings>
            <b:includable id='main' var='this'>
            <b:include name='content'/>
          </b:includable>
            <b:includable id='content'>
                  <div class='widget-content'>
                    <div class='ListButtons-area-img'>
                      <b:if cond='data:link'>
                        <a expr:href='data:link'>
                          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_img&quot;' expr:src='data:sourceUrl' expr:width='data:width'/>
                        </a>
                         </b:if>
                    </div>
                  </div>
                  <b:if cond='data:title != &quot;&quot;'>
                    <div class='ListButtons-area-title'>
                      <h2>
                        <a expr:href='data:link'>
                          <data:title/>
                        </a>
                      </h2>
                    </div>
                  </b:if>
                </b:includable>
          </b:widget>
        </b:section>
         <div class='clearfix'/>

             <!-- Featured Wrapper -->
....

           </b:if>

<!-- Main Wrapper -->

1. Cắt ( Cut ) code màu xanh chuyển lên phía trên dòng code được tô màu đỏ đầu tiên :

 <b:if cond='data:view.isHomepage'>         

...

</b:if>

Nếu bạn muốn hiển thị lên tất cả định dạng link trên trang Blogspot của bạn.

2. Sửa dòng code được tô màu đỏ đầu tiên thành :

  • <b:if cond='data:blog.isMobile'> : Nếu muốn chỉ hiển thị trên mobile
  • <b:if cond='data:blog.url == "Link cụ thể trên Blog của bạn"'> : Nếu muốn chỉ hiển thị trên link cụ thể nào đó.
  • <b:if cond='data:blog.searchLabel'> : Nếu muốn chỉ hiển thị trên trang nhãn 
  • <b:if cond='data:view.isMultipleItems'> : Nếu muốn hiển thị trên trang chủ, trang nhãn, trang tìm kiếm
  • <b:if cond='data:view.search.label in ["Viết Blog Kiếm Tiền", "Thủ Thuật Blogspot", "Kiếm Tiền Tại Nhà", "Marketing Online"]'> : Nếu muốn hiển thị trên trang trang nhãn có tên tương ứng được liệt kê trong danh sách

Xem thêm bài viết liên quan : Thẻ Tag Điều Kiện Blogspot

Cách làm được hướng dẫn chi tiết trên mẫu template blogger Speedily, trên giao diện Cooking bạn " chỉnh sửa " & làm tương tự như hướng dẫn này nhé. 

🐾 Xem xong cách làm, đúng là " đơn giản như đang giỡn " phải không nào ?

Đây là các giúp các lính mới, dân tập sự thiết kế giao diện web kiếm tiền từ affiliate marketing trên nền tảng Blogger.

Trong các bài viết kế tiếp trong chuyên đề template blogspot MMO, Gia Bảo sẽ chia sẻ thêm một số  kỹ thuật blogspot từ cơ bản đến nâng cao giúp bạn tự tay chỉnh sửa giao diện Blogspot thành trang web cá nhân giúp người làm công việc văn phòng, mẹ bỉm sữa,  sinh viên học sinh & người làm công ăn lương kiếm thêm thu nhập với nghề tay trái, sáng tạo content, viết blog kiếm tiền,...

Digitalnomad.vn : Thiết Kế Web đa cấu trúc, trải nghiệm viết blog đa nội dung, Koc Content truyền thông cho chính mình, xây dựng hệ thống kiếm tiền tự động online, đa dạng nguồn tài chính từ việc kiến tạo các thu nhập thụ động trên internet. Gia Bảo, Blogger viết vì đam mê, chia sẻ kỹ thuật giúp bạn biến các thiết bị công nghệ kết nối internet, thành cỗ máy MMO khai thác mỏ vàng trực tuyến, các thức giúp chúng ta chạm tay vào 'tự do tài chính'.

Chủ Đề Nổi Bật :


Sponsor

1. thotgo.asia
2. goghepthanh.com
3. dichvuketoannasa.com
4. remcuakimanh.vn