Hướng dẫn thêm phần giới thiệu tác giả trên Google Plus vào bên dưới bài viết

Đa số các mẫu template thiết kế đều đã thêm sẵn phần này có thể đẹp về style nhưng lại cố định một tác giả lấy ví dụ khi người khác viết bài thì bài của người đó nhưng vẫn hiển thị tác giả cố định, như vậy không chuyên nghiệp lại mất tính thẩm mỹ.

Vậy chúng ta nên áp dụng chức năng thêm hồ sơ tác giả bên dưới bài đăng của Google và để làm được điều này chúng ta phải thêm thông tin giới thiệu bản thân vào hồ sơ Google+ và cấu hình đoạn mã để thêm vào template. Các bước làm như sau:

1. Truy cập vào địa chỉ aboutme.google.com đăng nhập bằng tài khoản của mình. bên trái bấm menu sổ xuống chọn hồ sơ

2. Ở phần giới thiệu các bạn kéo chuột xuống nhìn sang bên phải sẽ có dòng Câu chuyện và dưới đó là dòng Giới thiệu các bạn chọn Chỉnh sửa.

3. Nhập thông tin vào nhớ để chế độ Công khai sau đó lưu lại.

4. Tiếp đến bạn đăng nhập vào Blogger đi đến bố cục » Chỉnh sửa tiện ích Bài đăng trên Blog tích vào ô Hiển thị hồ sơ tác giả bên dưới bài đăng

5. Trường hợp template của bạn đang có sẵn tác giả bạn vào Mẫu » chỉnh sửa HTML tìm và xóa đoạn code cũ đi hoặc chưa có chèn ngay bên dưới <div class='post-footer'> trong cặp thẻ <b:includable id='post' var='post'>...</b:includable>  đoạn code sau:

Copy

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

  <div class='about-author'>

    <img expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' expr:title='data:post.author'/>

    <p class='name'>

      <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author'><data:post.author/></a>

      <svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'><path d='M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z'/></svg>

    </p>

    <p>

      <data:post.authorAboutMe/>

    </p>

    <p class='social'>

      <a href='#' rel='nofollow' target='_blank' title='Google Plus'><span class='google-plus-icon social-icon'/></a>

      <a href='#' rel='nofollow' target='_blank' title='Facebook'><span class='facebook-icon social-icon'/></a>

      <a href='#' rel='nofollow' target='_blank' title='Twitter'><span class='twitter-icon social-icon'/></a>

      <a href='#' rel='nofollow' target='_blank' title='Linkedin'><span class='linkedin-icon social-icon'/></a>

    </p>

  </div>

</b:if>

7. Tạo style cho phần giới thiệu tác chèn trong <b:skin>

Copy

.about-author{margin:20px 0;padding:5px 10px;border-radius:2px;border:1px solid #e0e0e0;font:16px Roboto,sans-serif;}

.about-author img{float:left;margin:10px 15px 0 0;width:96px;height:96px;border-radius:100%}

.about-author p.name{font-size:16px;font-weight: bold;line-height:0;margin:10px 0}

.about-author p.name svg{vertical-align: middle;min-width:16px;height:16px;width:16px;}

.about-author p{line-height:1.5em}

.about-author p.social{padding-top:8px}

.about-author a{color:#333}

.about-author a:hover{color:#2196f3}

.social-icon{height:32px;width:32px;display:inline-block;transform:scale(.75)}

.google-plus-icon{background:no-repeat url(//i.imgur.com/5PAwXhg.png)}

.twitter-icon{background:no-repeat url(//i.imgur.com/PNFln8C.png)}

.facebook-icon{background:no-repeat url(//i.imgur.com/2zSBCg9.png)}

.linkedin-icon{background:no-repeat url(//i.imgur.com/Du1IUyz.png)}

Bằng cách này các bài đăng sẽ lấy phần giới thiệu của tác giả viết bài đó tuy style không được đẹp nhưng cũng không đến nỗi nào. Các bạn có thể xem demo ngay dưới bài viết này.

Nội dung chính