Author box cho blogspot tự động lấy thông tin từ google plus chuẩn HTML5

By Unknown

Thứ Năm, 21 tháng 8, 2014

Ở bài viết trước mình có đề cập tới nội dụng Author box cho blogger nhưng nó lấy thủ công về hình ảnh và nội dụng. Củng là nội dụng về Author box cho blogspot nhưng lần này mình cập nhật lại một cách hoàn hảo hơn đó là ảnh ảnh đại diện và thông tin mô tả từ google plus sang blogger một cách tự động và còn đạt chuẩn HTML5.

Hình như mình nhớ không lầm bài viết này được bác Duy Phạm có viết đến nhưng nó mắc một số lỗi về HTML5, nếu các bác có dùng thì chek tại validator.w3.org sẻ biết .

Author box cho blogspot tự động lấy thông tin từ google plus chuẩn HTML5

Code author box cho blogspot tự động lấy thông tin từ google plus hôm nay mình chia sẻ nó ngắn gọn viết CSS riêng đạt chuẩn HTML5.
Các bước chèn CSS và code vào template :
Bước 1: Đăng nhập vào blogger.com
Bước 2: Vào Bố cục >> Bài đăng trên blog >> Chỉnh sửa cụ thể như hình bên dưới

Sau đó chọn Hiển thị hồ sơ tác giả bên dưới bài đăng và lưu lại như hình dưới đây

Bước 3: Tiếp tục các bạn chọn mẫu >> chỉnh sửa HTML >> Ctrl+F tìm đến thẻ ]]></b:skin> và đoạn CSS3 bên dưới trước nó

CSS3 author box cho blogspot

/*Author box*/
.author-profile {
line-height: 1.7em;
font-size: 13px;
margin: 6px 0 0;
padding: 0 5px;
background: #000;
border: 2px solid #13BCC4;
color: #fff;
overflow: hidden;
}
.author-profile img {
border: 3px solid #00FA46;;
float: left;
margin-right: 5px;
border-radius: 50px;
width: 80px;
box-shadow: 1px 1px 3px 0 #fff;
padding: 3px;
}

Sau khi chèn CSS xong để hiển thị  Author box cho blogspot các bạn tìm đoạn <div class='post-footer'> thứ 2 nếu không có thì tìm đoạn <b:includable id='post' var='post'>...</b:includable> nếu có đoạn <div class='post-footer'>  thì code bên dưới dưới nó hoặc có thể chèn trong đoạn này <b:includable id='post' var='post'>...</b:includable> tùy theo mỗi template mà bạn đang sử dụng

Code Author box cho blogspot chuẩn HTML5

<b:if cond='data:post.authorAboutMe'>
        <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
          <b:if cond='data:post.authorPhoto.url'>
            <img alt='Tác giả' expr:src='data:post.authorPhoto.url' itemprop='image'/>
          </b:if>
          <div>
            <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
              <b><span itemprop='name'><data:post.author/></span></b>
            </a>
          </div>
          <span itemprop='description'><data:post.authorAboutMe/></span>
        </div>
      </b:if>

Bước 4 Các bạn lưu lại và xem kết quả
Lưu ý: Các bạn chỉnh sửa thông tin và ảnh đại diện của mình bên google plus để được cập nhật nhé vi dụ như của mình .

Chúc các bạn thành công !

Tag : Chia sẻ, CSS, HTML5