Hướng dẫn thêm tiện ích bài đăng nổi bật FeaturedPost widget vào blogspot

Nếu bạn thấy tâm đắc cho một bài viết nào nhất trong Blog của mình bạn có thể ghim nó vào trang chủ, bên Sidebar hay dưới Footer. Blogger cung cấp sẵn tiện ích tiện ích bài đăng nổi bật hay còn được gọi là FeaturedPost Widget, và bạn chỉ được phép thêm duy nhất chỉ một tiện ích hay nói cách khác chỉ được ghim một bài duy nhất.

Demo tiện ích FeaturedPost Widget

Hôm nay mình sẽ hướng dẫn các bạn một cách làm nhanh hơn trực tiếp trong chỉnh sửa HTML của template, cách thực hiện theo các bước sau:

1. Đăng nhập vào Blogger

2. Lấy ID của bài viết postID
Bạn vào phần Bài đăng tìm bài nào muốn lấy làm bài đăng nổi bật chọn Chỉnh sửa bài đăng, sau đó hãy để ý trên địa chỉ trình duyệt có dòng postID= thì sau nó là ID của bài đăng ví dụ postID=3831648690921285174, bạn chỉ cần lấy ID thôi tức là lấy dòng 3831648690921285174

3. Vào Chủ đề > Chỉnh sửa HTML > thêm tiện ích bên dưới vào chỗ nào bạn muốn hiển thị chẳng hạn như bên Sidebar hay dưới Footer

Copy

<b:widget id='FeaturedPost1' locked='false' title='Được đề xuất' type='FeaturedPost' version='2' visible='true'>

            <b:widget-settings>

              <b:widget-setting name='showSnippet'>true</b:widget-setting>

              <b:widget-setting name='showPostTitle'>true</b:widget-setting>

              <b:widget-setting name='postId'>7193141272819343210</b:widget-setting>

              <b:widget-setting name='showFirstImage'>true</b:widget-setting>

              <b:widget-setting name='useMostRecentPost'>false</b:widget-setting>

            </b:widget-settings>

            <b:includable id='main' var='this'>

 <b:if cond='data:title != &quot;&quot;'>

   <h2><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    <b:include name='snippetedPosts'/>

  </div>

</b:includable>

            <b:includable id='snippetedPostContent'>

          <b:include cond='data:this.postDisplay.showFeaturedImage and data:post.featuredImage' data='post' name='snippetedPostThumbnail'/>

           <b:include cond='data:this.postDisplay.showTitle' name='snippetedPostTitle'/>        

           <b:include cond='data:this.postDisplay.showSnippet' data='post' name='postSnippet'/>

        </b:includable>

            <b:includable id='snippetedPostThumbnail'>

  <div class='item-thumbnail'>

    <b:with value='data:post.featuredImage.isYoutube? resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 945, &quot;945:600&quot;)                            : &quot;&quot;' var='highRes'>

      <b:include data='{image: data:post.featuredImage,imageSizes: [256, 512, 945, 1684],imageRatio: &quot;16:9&quot;,sourceSizes: &quot;(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)&quot;,enhancedSourceset: data:highRes}' name='responsiveImage'/>

    </b:with>

  </div>

</b:includable>

          </b:widget>

Bạn hãy sửa lại những dòng chữ in đậm màu đỏ

4. Thêm style cho tiện ích
Chèn đoạn css sau trước ]]></b:skin>

Copy

.FeaturedPost .snippet-item{-webkit-line-clamp:5;line-height:1.6em;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;margin-bottom:10px}

.FeaturedPost .item-thumbnail{float:none;height:auto;margin-bottom:10px;margin-right:0;overflow:hidden;max-height:calc(350px + 2em);max-width:100%;text-align:center;width:100%}

.FeaturedPost .item-thumbnail img{max-width:100%;width:100%}

.FeaturedPost .post h3{margin-bottom:10px;font:18px Roboto,sans-serif}

5. chọn Lưu chủ đề

Sau này bạn muốn thay bài viết đã ghim vào tiện ích bằng bài viết khác chỉ cần thay ID của bài viết.

Share this with short URL: Get Short URL

Nguyễn Xuân Phú tháng 11 26, 2017 tháng 11 26, 2017

choi-blog + widget

Game Hay 4.8 out of 5