Mẫu giới thiệu thông tin tác giả đẹp cho Blog

Ở bài viết trong Blog số ra ngày 10 tháng 6, mình có viết bài 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. Hôm nay mình viết rộng hơn đó là bạn có thể thêm thông tin tác giả hiển thị vào bất kỳ vị trí nào chẳng hạn như chèn trong widget hay dưới chân bài viết. Dưới đây là mẫu thông tin tác giả, các bạn tham khảo:

Trường hợp chèn vào widget

Copy


<div class="about-author">

  <a href="https://plus.google.com/100425914480365587416" rel="nofollow" target="_blank" title="Việt Blogger">

    <img alt="Việt Blogger" src="https://lh3.googleusercontent.com/-iRVl7_i8as4/AAAAAAAAAAI/AAAAAAAAAAA/AGDgw-gcU5klLwHU-W-hN9mjIJH2f7nZVA/s72-c-mo/photo.jpg">

    <p class="name">

      <span>Việt Blogger</span>

      <span data-tooltip="Đã xác minh">

        <svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

          <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path>

        </svg>

      </span>

    </p>

  </a>

  <p class="aboutme">Tôi là Tuấn bắt đầu viết Blog cũng được vài năm, nay cũng có chút ít kinh nghiệm nên tôi viết những gì mà tôi tích cóp được lưu trữ trong Blog này.<br></p>

  <p class="social">

    <a href="https://www.facebook.com/vietblogdao/" rel="nofollow" target="_blank" title="Theo dõi tôi trên Facebook"><span class="facebook-icon social-icon"></span></a>

    <a href="https://twitter.com/vietblogdao/" rel="nofollow" target="_blank" title="Theo dõi tôi trên Twitter"><span class="twitter-icon social-icon"></span></a>

    <a href="https://www.linkedin.com/in/vietblogdao/" rel="nofollow" target="_blank" title="Theo dõi tôi trên Linkedin"><span class="linkedin-icon social-icon"></span></a>

  </p>

</div>

Trường hợp chèn trong bài viết

Với trường hợp này các bạn chọn thêm một thẻ tag b:includable lấy tên authorprofile cùng với các thẻ tag b:includable mặc định khác của widget Blog1

- widget Blog1 version="1"

Copy


<b:includable id='authorprofile' var='post'>

  <b:if cond='data:post.author.aboutMe'>

    <div class='about-author'>

      <b:if cond='data:post.author.authorPhoto.image'>

        <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='nofollow' target='_blank'>

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

          <p class='name'>

            <span>

              <data:post.author/>

            </span>

            <span data-tooltip='Đã xác minh'>

              <svg focusable='false' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

                <path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/>

              </svg>

            </span>

          </p>

        </a>

        <b:else/>

        <p class='name'>

          <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='nofollow' target='_blank'>

            <data:post.author/>

          </a>

          <span data-tooltip='Đã xác minh'>

            <svg focusable='false' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

              <path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/>

            </svg>

          </span>

        </p>

      </b:if>

      <p class='aboutme'>

        <data:post.authorAboutMe/>

      </p>

      <p class='social'>

        <a href='https://www.facebook.com/vietblogdao/' rel='nofollow' target='_blank' title='Theo dõi tôi trên Facebook'><span class='facebook-icon social-icon'/></a>

        <a href='https://twitter.com/vietblogdao/' rel='nofollow' target='_blank' title='Theo dõi tôi trên Twitter'><span class='twitter-icon social-icon'/></a>

        <a href='https://www.linkedin.com/in/vietblogdao/' rel='nofollow' target='_blank' title='Theo dõi tôi trên Linkedin'><span class='linkedin-icon social-icon'/></a>

      </p>

    </div>

  </b:if>

</b:includable>

- widget Blog1 version="2"

Copy


<b:includable id='authorprofile' var='post'>

  <b:if cond='data:post.author.aboutMe'>

    <div class='about-author'>

      <b:if cond='data:post.author.authorPhoto.image'>

        <a expr:href='data:post.author.profileUrl' expr:title='data:post.author.name' rel='nofollow' target='_blank'>

          <img expr:alt='data:post.author.name' expr:src='data:post.author.authorPhoto.image'/>

          <p class='name'>

            <span>

              <data:post.author.name/>

            </span>

            <span data-tooltip='Đã xác minh'>

              <svg focusable='false' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

                <path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/>

              </svg>

            </span>

          </p>

        </a>

        <b:else/>

        <p class='name'>

          <a expr:href='data:post.author.profileUrl' expr:title='data:post.author.name' rel='nofollow' target='_blank'>

            <data:post.author.name/>

          </a>

          <span data-tooltip='Đã xác minh'>

            <svg focusable='false' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

              <path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/>

            </svg>

          </span>

        </p>

      </b:if>

      <p class='aboutme'>

        <data:post.author.aboutMe/>

      </p>

      <p class='social'>

        <a href='https://www.facebook.com/vietblogdao/' rel='nofollow' target='_blank' title='Theo dõi tôi trên Facebook'><span class='facebook-icon social-icon'/></a>

        <a href='https://twitter.com/vietblogdao/' rel='nofollow' target='_blank' title='Theo dõi tôi trên Twitter'><span class='twitter-icon social-icon'/></a>

        <a href='https://www.linkedin.com/in/vietblogdao/' rel='nofollow' target='_blank' title='Theo dõi tôi trên Linkedin'><span class='linkedin-icon social-icon'/></a>

      </p>

    </div>

  </b:if>

</b:includable>

Trên đây lấy theo thẻ dữ liệu hiển thị thông tin tác giả bài viết và phần giới thiệu hồ sơ tác giả trên Google Plus áp dụng cho Blog có nhiều tác giả. Nếu Blog chỉ có một tác giả là bạn thì có thể thêm mã HTML trực tiếp không cần thẻ dữ liệu hiển thị

Copy


<b:includable id='authorprofile' var='post'>

<div class="about-author">

  <a href="https://plus.google.com/100425914480365587416" rel="nofollow" target="_blank" title="Việt Blogger">

    <img alt="Việt Blogger" src="https://lh3.googleusercontent.com/-iRVl7_i8as4/AAAAAAAAAAI/AAAAAAAAAAA/AGDgw-gcU5klLwHU-W-hN9mjIJH2f7nZVA/s72-c-mo/photo.jpg">

    <p class="name">

      <span>Việt Blogger</span>

      <span data-tooltip="Đã xác minh">

        <svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

          <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path>

        </svg>

      </span>

    </p>

  </a>

  <p class="aboutme">Tôi là Tuấn bắt đầu viết Blog cũng được vài năm, nay cũng có chút ít kinh nghiệm nên tôi viết những gì mà tôi tích cóp được lưu trữ trong Blog này.<br></p>

  <p class="social">

    <a href="https://www.facebook.com/vietblogdao/" rel="nofollow" target="_blank" title="Theo dõi tôi trên Facebook"><span class="facebook-icon social-icon"></span></a>

    <a href="https://twitter.com/vietblogdao/" rel="nofollow" target="_blank" title="Theo dõi tôi trên Twitter"><span class="twitter-icon social-icon"></span></a>

    <a href="https://www.linkedin.com/in/vietblogdao/" rel="nofollow" target="_blank" title="Theo dõi tôi trên Linkedin"><span class="linkedin-icon social-icon"></span></a>

  </p>

</div>

</b:includable>

- Chèn thẻ tag <b:include cond='data:view.isPost' name='authorprofile'/> vào vị trí muốn hiển thị thông tin tác giả bài viết

Style cho mẫu

Copy


.about-author {

    border-top: 1px solid rgba(0,0,0,0.12);

    font: 16px Roboto,"Helvetica Neue",Helvetica,sans-serif;

    transition: all .3s ease-out 0s;

    text-align: center;

    clear: both;

}

.about-author a {

    display: inline-block;

    color: #3c4043;

}

.about-author img {

    margin-top: 15px;

    width: 72px;

    height: 72px;

    border-radius: 50%;

    -webkit-border-radius: 50%;

    border: 2px solid rgba(0,0,0,0.12);

}

.about-author .name {

    font-size: 16px;

    font-weight: bold;

    line-height: 0;

    margin: 10px 0;

}

.about-author [data-tooltip] {

    position: relative;

    z-index: 5;

    cursor: pointer;

}

.about-author [data-tooltip]:before {

    position: absolute;

    bottom: 120%;

    left: 50%;

    margin-bottom: 5px;

    margin-left: -45px;

    padding: 7px;

    width: 80px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    background-color: #000;

    color: #ffffff;

    content: attr(data-tooltip);

    text-align: center;

    font-size: 13px;

    line-height: 1.2;

}

.about-author [data-tooltip]:after {

    position: absolute;

    bottom: 120%;

    left: 50%;

    margin-left: -5px;

    width: 0;

    border-top: 5px solid #000;

    border-right: 5px solid transparent;

    border-left: 5px solid transparent;

    content: " ";

    font-size: 0;

    line-height: 0;

}

.about-author [data-tooltip]:before, .about-author [data-tooltip]:after {

    visibility: hidden;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

    opacity: 0;

    pointer-events: none;

}

.about-author .name svg {

    vertical-align: middle;

    max-width: 16px;

    min-width: 16px;

    height: 16px;

    width: 16px;

}

.about-author .name svg path {

    fill: #4285F4;

    paint-order: stroke;

    stroke-width: 3px;

    stroke: #ffffff;

}

.about-author .aboutme {

    font-size: 15px;

    text-align: justify;

    line-height:1.5em

    max-width: 414px;

    margin: auto;

}

.about-author .social {

    padding-top: 10px;

    line-height: 0;

}

.about-author .social-icon {

    height: 32px;

    width: 32px;

    display: inline-block;

    transform: scale(.75);

}

.about-author .facebook-icon {

    background: no-repeat url(https://i.imgur.com/2zSBCg9.png);

}

.about-author .twitter-icon {

    background: no-repeat url(https://i.imgur.com/PNFln8C.png);

}

.about-author .linkedin-icon {

    background: no-repeat url(https://i.imgur.com/Du1IUyz.png);

}

Nội dung chính

Chuyên mục

Mẫu giới thiệu thông tin tác giả đẹp cho Blog

Tác giả

Bài đăng phổ biến

Bộ cài Windows 10 Pro Lite Version 1607 phiên bản rút gọn tính năng

Khôi phục các mục đã xóa trong Outlook

Các bài đăng gần đây

Chuyên mục

Mẫu giới thiệu thông tin tác giả đẹp cho Blog

Bài cùng chuyên mục

Tác giả

Bài đăng phổ biến

Bộ cài Windows 10 Pro Lite Version 1607 phiên bản rút gọn tính năng

Khôi phục các mục đã xóa trong Outlook

Các bài đăng gần đây