Spotlight Blogger Template Download

[Template Blogger Free] Spotlight Blogger là một mẫu blogger sạch sẽ và thanh lịch, nó được thiết kế lại từ nguyên mẫu Litespot. Các tính năng cốt lõi của Spotlight là thiết kế sạch sẽ và trang nhã, chế độ tối bằng một lần nhấp, bài đăng liên quan nâng cao, các nút Gradient, v.v.

Các tính năng của Mẫu Blogger Spotlight

Tải nhanh: Đây là mẫu blogger tải nhanh. Theo Google Page Insights , Tốc độ của mẫu này hơn 70 trên thiết bị di động và hơn 90 trên thiết bị máy tính để bàn. Nếu tắt javascript mặc định và cải thiện dung lượng ảnh bài đăng cùng vài công việc khác thì chỉ số Page Insights sẽ tốt hơn nữa.

Chế độ tối: Mẫu này cung cấp chế độ tối trên đầu tiêu đề với các biểu tượng và chuyển màu chuyên nghiệp. Bạn có thể dễ dàng chuyển đổi chế độ tối này bằng một cú nhấp chuột.

Bài đăng nổi bật: Bài đăng nổi bật là một trong những tính năng tuyệt vời nhất của LiteSpot. Bạn có thể thêm một bài đăng nổi bật không giới hạn bên dưới tiêu đề. Và bài đăng nổi bật là rõ ràng và trang nhã trên mọi thiết bị.

Tín dụng chân trang tùy chỉnh: Mẫu này cung cấp tín dụng chân trang tùy chỉnh. Bạn có thể trực tiếp chỉnh sửa tín dụng chân trang từ bố cục trong trang tổng quan blogger .

Sạch sẽ và thanh lịch: Đây là mẫu blogger sạch sẽ và thanh lịch. Mẫu này được thiết kế lại từ Litespot. Phần bài viết, đầu trang, dày hơn, bài đăng liên quan, chân trang, v.v. được làm sạch sẽ và trang nhã.

Hoàn toàn có thể tùy chỉnh: Đây là mẫu blogger hoàn toàn có thể tùy chỉnh. Bạn có thể chỉnh sửa rất nhiều thiết kế trong mẫu này từ tùy chỉnh. Ở đó, bạn có thể chỉnh sửa màu mẫu, chiều rộng, màu nền, v.v.

Hướng dẫn sửa lỗi và sử dụng

1- Sửa chữ “Xem tât cả” bị lỗi và đổi thàng từ tiếng Anh về chữ số

Với blog sử dụng tiếng Việt sẽ bị lỗi chữ “Xem tât cả” thành "Xemtất cả" nên cần sửa như sau:

Đăng nhập vào Blogger > Chọn Blog > Bố cục >JSON Variables và click vào icon hình bút chì để chỉnh sửa widget, nếu nội dung trống thì thêm mã bên dưới.

Nhập nội dung sau:

{
viewAllText: "Xem tất cả",
dateFormat: "{d} {m}, {y}",
months: {
jan: "01",
feb: "02",
mar: "03",
apr: "04",
may: "05",
jun: "06",
jul: "07",
aug: "08",
sep: "09",
oct: "10",
nov: "11",
dec: "12"
}
}

Save lại là ok
Mục lục
Đặt code sau vào nơi muốn hiện mục lục

<b>{tocify} $title={Table of Contents}</b>

Một số button thông dụng

<a class="button link" href="#" target="_blank" rel="noopener"><b>Demo</b></a>

<a class="button preview" href="#" target="_blank" rel="noopener"><b>Preview</b></a>

<a class="button download" href="#" target="_blank" rel="noopener"><b>Download</b></a>

<a class="button cart" href="#" target="_blank" rel="noopener"><b>Buy</b></a>

<a class="button info" href="#" target="_blank" rel="noopener"><b>Info</b></a>

<a class="button share" href="#" target="_blank" rel="noopener"><b>Share</b></a>

<a class="button contact" href="#" target="_blank" rel="noopener"><b>Contact</b></a>

Chia sẻ code vẫn dùng:

<pre>................</pre>

Hoặc dùng

<div class='code-box'>
<pre>.......................</pre>
</div>

Lưu ý

Tại Author box bạn muốn show phần các trang mạng xã hội của mình để khách truy cập tiện follow(theo dõi) như phần khoanh đỏ trong hình:

Bạn vào chỉnh sửa mẫu tìm thẻ <b:includable id='postFooterAuthorProfile' var='post'>

Toàn bộ cặp thẻ có dạng:

<b:includable id='postFooterAuthorProfile' var='post'>
      <div class='about-author'>
        <div class='author-avatar-wrap'>
          <span class='author-avatar' expr:data-image='data:post.author.authorPhoto.image ? resizeImage(data:post.author.authorPhoto.image, 72, &quot;1:1&quot;) : &quot;https://4.bp.blogspot.com/-oSjP8F09qxo/Wy1J9dp7b0I/AAAAAAAACF0/ggcRfLCFQ9s2SSaeL9BFSE2wyTYzQaTyQCK4BGAYYCw/s72-c/avatar.jpg&quot;'/>
        </div>
        <div class='author-description'>
          <span class='author-title'><b:tag cond='data:post.author.profileUrl' expr:alt='data:post.author.name' expr:href='data:post.author.profileUrl' name='a' rel='noopener noreferrer' target='_blank'><data:post.author.name/></b:tag></span>
          <p class='author-text excerpt'><data:post.author.aboutMe/></p>         
        </div>
      </div>
    </b:includable>

Sau đó thay nó thành:

<b:includable id='postFooterAuthorProfile' var='post'>
      <div class='about-author'>
        <div class='author-avatar-wrap'>
          <span class='author-avatar' expr:data-image='data:post.author.authorPhoto.image ? resizeImage(data:post.author.authorPhoto.image, 72, &quot;1:1&quot;) : &quot;https://4.bp.blogspot.com/-oSjP8F09qxo/Wy1J9dp7b0I/AAAAAAAACF0/ggcRfLCFQ9s2SSaeL9BFSE2wyTYzQaTyQCK4BGAYYCw/s72-c/avatar.jpg&quot;'/>
        </div>
        <div class='author-description'>
          <span class='author-title'><b:tag cond='data:post.author.profileUrl' expr:alt='data:post.author.name' expr:href='data:post.author.profileUrl' name='a' rel='noopener noreferrer' target='_blank'><data:post.author.name/></b:tag></span>
          <p class='author-text excerpt'><data:post.author.aboutMe/></p>          
          <ul class='author-links social social-color'>
            <li class='facebook'><a href='#' rel='noopener noreferrer' target='_blank' title='facebook'/></li>
            <li class='twitter'><a href='#' rel='noopener noreferrer' target='_blank' title='twitter'/></li>
            <li class='instagram'><a href='#' rel='noopener noreferrer' target='_blank' title='instagram'/></li>
            <li class='youtube'><a href='https://www.youtube.com/channel' rel='noopener noreferrer' target='_blank' title='youtube'/></li>
            <li class='external-link'><a href='#' rel='noopener noreferrer' target='_blank' title='external-link'/></li>
          </ul>         
        </div>
      </div>
    </b:includable>

Trong đó bạn cần thay link các trang MXH của mình vào. Nhớ cần làm với 2 đoạn như vậy, một thẻ trong <b:defaultmarkups> và thẻ còn lại trong tiện ích Blog1.

Xem trước và tải về

Demo

Spotlight.zip 43.6 KB