Tổng hợp hộp tác giả-author box widget cho blogspot

Tiện ích giới thiệu tác giả cuối bài viết hay còn gọi là author box widget ở các blog tin tức có vẻ ít dùng tới nhưng ở các blog cá nhân có lẽ theo mình không thể thiếu.

Nó là nơi người truy cập có thể tìm thấy thông tin về tác giả-linh hồn của blog.Dù ít hay nhiều thì cũng là người đã chia sẻ những thông tin được các thiết bị tìm kiếm đánh giá là hữu ích với người dùng.

Chỉ với chút ít css và HTML không ảnh hưởng gì mấy tới tốc độ load của blogspot thì tại sao bạn lại không dùng.

Có 2 loại:

- Dùng cho blogspot có 1 tác giả(là admin luôn)
- Dùng cho blogspot gồm nhiều tác giả đăng bài, sẽ tự động lấy thông tin tác giả gồm: Tên người dùng và avata của tác đó trên blogger.

Dưới đây là tổng hợp một số kiểu dáng về hộp thông tin tác giả-author box widget cho blogspot và kết hợp cả code tự lấy thông tin tác giả sử dụng cho blog có nhiều tác giả viết bài.Các khung author này cũng đã hiệu chỉnh responsive cho phù hợp với các thiết bị di động.

Thêm thông tin tác giả-author box cho blogspot

Lưu ý Tất cả các khung tác giả ở đây đều sử dụng icon Awesome do vậy blog của bạn chưa có fonticon Awesome thì thêm link sau vào trước thẻ </head>

<script type='text/javascript'>
      //<![CDATA[
      function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
      loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css");
      //]]>
    </script>

Kiểu 1

Bước 1
Vào chỉnh sửa mẫu thêm đoạn code sau vào trước thẻ </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style type='text/css'>
        /* Box author */
        .author{position:relative;padding:20px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin:0}
        .exlefttop{width:0;height:0;border-bottom:5px solid transparent;border-top:5px solid transparent;border-right:5px solid #42718b;font-size:0;line-height:0;position:absolute;top:15px;left:-16px;z-index:4}
        .exleftbottom{width:0;height:0;border-bottom:5px solid transparent;border-top:5px solid transparent;border-right:5px solid #42718b;font-size:0;line-height:0;position:absolute;top:116px;left:-16px;z-index:4}
        .exrighttop{width:0;height:0;border-bottom:5px solid transparent;border-top:5px solid transparent;border-left:5px solid #064888;font-size:0;line-height:0;position:absolute;top:16px;right:-15px;z-index:4}
        .exrightbottom{width:0;height:0;border-bottom:5px solid transparent;border-top:5px solid transparent;border-left:5px solid #064888;font-size:0;line-height:0;position:absolute;top:116px;right:-15px;z-index:4}
        #authorbox-reb{width:665px;height:100px;margin:0;padding:0;background:#87cefa;position:relative;top:0;left:-16px;z-index:5}
        .authorbox{padding:5px 10px;line-height:15px;font:16px Arial;color:#005595}
        .authorbox a{font:bold 16px Arial;color:#cc0033}
        .authorbox a:hover{color:#7fff00}
        .author-info{float:left;width:55%}
        .author-about{margin:0;padding:5px 0;color:#000!important;font-size:13px}
        .author-me{text-align:center;font-size:16px;color:#f90;font-weight:bold}
        .authorbox img{background:#f90;padding:2px;height:60px;width:60px;float:left;margin:10px 10px 0 0;border:#f0f2f3 solid 0px;border-radius:3px}
        /* Social Links */
        #authorsn {
          float:right;
        }
        .authorsn {
          position:relative;
        }
        .authorsn {
          display: inline-block;
          position: relative;
          cursor: pointer;
          width: 24px;
          height: 24px;
          padding: 0;
          text-align: center;
          font-style: normal;
          font-weight: normal;
          text-decoration: none;
        }
        .facebooksn{
          background: #4060A5;
        }
        .facebooksn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f09a&quot;;
          line-height: 1.7em;
        }
        .facebooksn:hover{
          color: #4060A5;
          background: #222;
        }
        .twittersn{
          background: #00ABE3;
        }
        .twittersn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f099&quot;;
          line-height: 1.7em;      
        }
        .twittersn:hover{
          color: #00ABE3;
          background: #222;
        }
        .googleplussn{
          background: #e64522;
        }
        .googleplussn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f0d5&quot;;
          line-height: 1.7em;
        }
        .googleplussn:hover{
          color: #e64522;
          background: #222;
        }
        .linkedinsn{
          background: #0094BC;
        }
        .linkedinsn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f0e1&quot;;
          line-height: 1.7em;
        }
        .linkedinsn:hover{
          color: #0094BC;
          background: #222;
        }
        .pinterestsn{
          background: #cb2027;
        }
        .pinterestsn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f0d2&quot;;
          line-height: 1.7em;
        }
        .pinterestsn:hover{
          color: #cb2027;
          background: #222;
        }
        .tumblrsn{
          background: #3a5876;
        }
        .tumblrsn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f173&quot;;
          line-height: 1.7em;
        }
        .tumblrsn:hover{
          color: #3a5876;
          background: #222;
        }
        .rsssn{
          background: #ff9900;
        }
        .rsssn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f09e&quot;;
          line-height: 1.7em;
        }
        .rsssn:hover{
          color: #ff9900;
          background: #222;
        }
        @media screen and (max-width:800px){#authorbox-reb{max-width:100% !important;width:100% !important;float:none;left:0}
          .exrightbottom,.exrighttop,.exleftbottom,.exlefttop,.authorbox img,.author-about{display:none}
        }
      </style>
    </b:if>

Bạn điều chỉnh các trị số bôi màu để phù hợp với kích thước blog của bạn.
Bước 2

Thêm đoạn code sau vào vị trí bạn muốn hiển thị thường là sau <div class='post-footer'> nhưng có thể template bố trí nhiều tiện ích chia sẻ khác nên tốt nhất là để trước tiện ích bài liên quan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <div class='author'>
                        <div class='exlefttop'>
                        </div>
                        <div class='exleftbottom'>
                        </div>
                        <div class='exrighttop'>
                        </div>
                        <div class='exrightbottom'>
                        </div>
                        <div id='authorbox-reb'>
                          <div class='authorbox'>
                            <div class='authorbox img'>
                              <a href=''>
                                <img expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' expr:title='data:post.author'/>
                              </a>
                            </div>
                            <div class='author-info'>
                              <a href='#' rel='author'>
                                <data:post.author/>
                              </a>
                              <i class='fa fa-check-circle' style='color:#3498db;font-size:16px;margin:0 0 0 3px' title='Verified Author'/>
                              <p class='author-about'>
                                Thủ thuật blogspot/blogger,Tips blogspot/blogger,Chia sẻ,hỗ trợ thủ thuật blogspot cho người mới bắt đầu
                              </p>
                            </div>
                            <div id='authorsn'>
                              <p class='author-me'>
                                Accompany me
                              </p>
                              <p>
                                <a class='facebooksn authorsn' href='#'/>
                                <a class='twittersn authorsn' href='#'/>
                                <a class='googleplussn authorsn' href='#'/>
                                <a class='linkedinsn authorsn' href='#'/>
                                <a class='pinterestsn authorsn' href='#'/>
                                <a class='tumblrsn authorsn' href='#'/>
                                <a class='rsssn authorsn' href='#'/>
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </b:if>

- Avata là ảnh được lấy tự động từ avata trên G+
- Thay link tới các trang mạng xã hội của bạn.
- Thay phần giới thiệu(mô tả)của bạn nên viết ngắn gọn.
Kiểu 2

Với kiểu 2 này cũng có thể dùng cho blogspot có nhiều tác giả nhưng code chưa được hoàn chỉnh vì vẫn có phần phải thực hiện thủ công.
- Tự động lấy avata tác giả trên G+
- Tự động lấy nickname tác giả.
- Link liên kết tới G+ cài thủ công.
Bước 1
Thêm đoạn code sau vào trước thẻ </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style type='text/css'>
        /* Box author */
        .author-box{background:#fff;width:610px;height:150px;border:2px solid #f90;margin:10px 0;padding:5px 10px;position:relative;z-index:5}
        .author img{background:#fff;padding:3px;height:90px;width:90px;float:left;margin: 15px 0 0 0;border:#f0f2f3 solid 3px;border-radius:100px}
        .author-info{float:left;padding-left:2%;width:80%}
        .author-info a{font-size:20px;font-weight:bold}
        .author-about{margin:0;padding:10px 0;color:#000!important;font-size:15px}
        /* Social Links */
        .authordtb {
          float:right;
        }
        .authorsn {
          position:relative;
        }
        .authorsn {
          display: inline-block;
          position: relative;
          cursor: pointer;
          width: 24px;
          height: 24px;
          padding: 0;
          text-align: center;
          font-style: normal;
          font-weight: normal;
          text-decoration: none;
        }
        .facebooksn{
          background: #4060A5;
        }
        .facebooksn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f09a&quot;;
          line-height: 1.7em;
        }
        .facebooksn:hover{
          color: #4060A5;
          background: #222;
        }
        .twittersn{
          background: #00ABE3;
        }
        .twittersn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f099&quot;;
          line-height: 1.7em;      
        }
        .twittersn:hover{
          color: #00ABE3;
          background: #222;
        }
        .googleplussn{
          background: #e64522;
        }
        .googleplussn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f0d5&quot;;
          line-height: 1.7em;
        }
        .googleplussn:hover{
          color: #e64522;
          background: #222;
        }
        .linkedinsn{
          background: #0094BC;
        }
        .linkedinsn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f0e1&quot;;
          line-height: 1.7em;
        }
        .linkedinsn:hover{
          color: #0094BC;
          background: #222;
        }
        .pinterestsn{
          background: #cb2027;
        }
        .pinterestsn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f0d2&quot;;
          line-height: 1.7em;
        }
        .pinterestsn:hover{
          color: #cb2027;
          background: #222;
        }
        .tumblrsn{
          background: #3a5876;
        }
        .tumblrsn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f173&quot;;
          line-height: 1.7em;
        }
        .tumblrsn:hover{
          color: #3a5876;
          background: #222;
        }
        .rsssn{
          background: #ff9900;
        }
        .rsssn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f09e&quot;;
          line-height: 1.7em;
        }
        .rsssn:hover{
          color: #ff9900;
          background: #222;
        }
        @media screen and (max-width:800px){.author-box{max-width:100% !important;width:100% !important;float:none;padding:5px 0}  
        .author img,author-about{display:none}
        }
      </style>
    </b:if>

Điều chỉnh height:150px cho phù hợp
Bước 2
Thêm đoạn code sau vào vị trí bạn muốn hiển thị thường là sau <div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <div class='author-box'>
                        <div class='author img'>
                          <a href=''>
                            <img expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' expr:title='data:post.author'/>
                          </a>
                        </div>
                        <div class='author-info'>
                          <a href='#' rel='author'>
                            <data:post.author/>
                          </a>
                          <i class='fa fa-check-circle' style='color:#3498db;font-size:16px;margin:0 0 0 3px' title='Verified Author'/>
                          <p class='author-about'>
                            Thủ thuật blogspot/blogger,Tips blogspot/blogger,Chia sẻ,hỗ trợ thủ thuật blogspot cho người mới bắt đầu.
                          </p>
                        </div>
                        <div class='authordtb'>
                          <p>
                            <a class='facebooksn authorsn' href='#'/>
                            <a class='twittersn authorsn' href='#'/>
                            <a class='googleplussn authorsn' href='#'/>
                            <a class='linkedinsn authorsn' href='#'/>
                            <a class='pinterestsn authorsn' href='#'/>
                            <a class='tumblrsn authorsn' href='#'/>
                            <a class='rsssn authorsn' href='#'/>
                          </p>
                        </div>
                      </div>
                     <div style='clear:both'/>
                    </b:if>

- Thay link tới các trang mạng xã hội của bạn.
- Thay phần giới thiệu(mô tả)của bạn nên viết ngắn gọn.
Kiểu 3: Author box dùng cho blogspot có nhiều tác giả

Với blogspot có nhiều tác giả tham gia viết bài.Để phân biệt bài viết của từng người thì tại author box của mỗi bài viết cần hiển thị avata và tên người dùng của người đó trên tài khoản blogger hay G+.
Dưới đây là author box tự động lấy avata và tên người dùng khi tham gia viết blog.
Code này nguyên bản bên Duy Phạm chỉ thêm mấy trang mạng xã hội của quản trị chính blog và chỉnh sửa một chút css.
Các bước tiến hành như ở 2 kiểu trên.
Phần CSS

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style type='text/css'>
        /* Box author */
        .author-box{background:#fff;width:610px;height:150px;border:2px solid #f90;margin:10px 0;padding:5px 10px;position:relative;z-index:5}
        .author-avatar{background:#fff;padding:3px;height:90px;width:90px;float:left;margin: 15px 0 0 0;border:#f0f2f3 solid 3px;border-radius:100px}
        .author-info{float:left;padding-left:2%;width:80%}
        .author-name{padding-left:25px}
        .author-name h3{display:inline;margin:0;padding:0;font-size:22px}
        .author-about{margin:0;padding:10px 0;color:#000!important;font-size:15px}
        /* Social Links */
        .authordtb {
          float:right;
        }
        .authorsn {
          position:relative;
        }
        .authorsn {
          display: inline-block;
          position: relative;
          cursor: pointer;
          width: 24px;
          height: 24px;
          padding: 0;
          text-align: center;
          font-style: normal;
          font-weight: normal;
          text-decoration: none;
        }
        .facebooksn{
          background: #4060A5;
        }
        .facebooksn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f09a&quot;;
          line-height: 1.7em;
        }
        .facebooksn:hover{
          color: #4060A5;
          background: #222;
        }
        .twittersn{
          background: #00ABE3;
        }
        .twittersn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f099&quot;;
          line-height: 1.7em;      
        }
        .twittersn:hover{
          color: #00ABE3;
          background: #222;
        }
        .googleplussn{
          background: #e64522;
        }
        .googleplussn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f0d5&quot;;
          line-height: 1.7em;
        }
        .googleplussn:hover{
          color: #e64522;
          background: #222;
        }
        .linkedinsn{
          background: #0094BC;
        }
        .linkedinsn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f0e1&quot;;
          line-height: 1.7em;
        }
        .linkedinsn:hover{
          color: #0094BC;
          background: #222;
        }
        .pinterestsn{
          background: #cb2027;
        }
        .pinterestsn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f0d2&quot;;
          line-height: 1.7em;
        }
        .pinterestsn:hover{
          color: #cb2027;
          background: #222;
        }
        .tumblrsn{
          background: #3a5876;
        }
        .tumblrsn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f173&quot;;
          line-height: 1.7em;
        }
        .tumblrsn:hover{
          color: #3a5876;
          background: #222;
        }
        .rsssn{
          background: #ff9900;
        }
        .rsssn:before{
          font-family: FontAwesome;
          color: #fff;
          content: &quot;\f09e&quot;;
          line-height: 1.7em;
        }
        .rsssn:hover{
          color: #ff9900;
          background: #222;
        }
        @media screen and (max-width:800px){.author-box{max-width:100% !important;width:100% !important;float:none;padding:5px 0}
          .author-avatar,author-about{display:none}
        }
      </style>
    </b:if>

Điều chỉnh height:150px cho phù hợp
Phần HTML

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <div class='author-box'>
                        <!---->&lt;img alt=&#39;<data:post.author/>&#39; class=&#39;author-avatar&#39; src=&#39;<b:if cond='data:post.authorPhoto.url'><data:post.authorPhoto.url/><b:else/>https://lh3.googleusercontent.com/uFp_tsTJboUY7kue5XAsGA=s96</b:if>&#39; title=&#39;<data:post.author/>&#39;/&gt;<!---->
                        <div class='author-info'>
                          <!---->&lt;a class=&#39;author-name&#39; style=&#39;background:left no-repeat url(<b:if cond='data:post.authorProfileUrl'>http://www.google.com/images/icons/ui/gprofile_button-16.png)&#39; href=&#39;<data:post.authorProfileUrl/><b:else/>http://www.blogger.com/img/logo-16.png)&#39; href=&#39;<data:post.authorUrl/></b:if>&#39; rel=&#39;author&#39; target=&#39;_blank&#39; title=&#39;<data:top.authorLabel/>&amp;nbsp;<data:post.author/>&#39;&gt;<!----><h3><data:post.author/></h3><!---->&lt;/a&gt;<!---->
                            <p class='author-about'>
                              Thủ thuật blogspot/blogger,Tips blogspot/blogger,Chia sẻ,hỗ trợ thủ thuật blogspot cho người mới bắt đầu.
                            </p>
                        </div>
                        <div class='authordtb'>
                              <p>
                                <a class='facebooksn authorsn' href='#'/>
                                <a class='twittersn authorsn' href='#'/>
                                <a class='googleplussn authorsn' href='#'/>
                                <a class='linkedinsn authorsn' href='#'/>
                                <a class='pinterestsn authorsn' href='#'/>
                                <a class='tumblrsn authorsn' href='#'/>
                                <a class='rsssn authorsn' href='#'/>
                              </p>
                            </div>
                        <div style='clear:both'/>
                      </div>
                    </b:if>

Kiểu 4: Author box dùng cho blogspot có nhiều tác giả đơn giản thuận tiện.

Bước 1: Thêm CSS

.author{background:#fff;width:100%;height:auto;position:relative;padding:0 auto;margin:0}
.authorbox{padding:10px 5px;line-height:16px}
.authorbox img{width:30%;height:60px;width:60px;float:left;margin:0 15px 12px 0;border-radius:100px}
.author-info{float:left;width:70%}
.authorbox a{font-size:17px;color:#005595;font-weight:bold}
.authorbox a:hover{color:#5ca6ff}
.author-about{margin:0;padding:10px 0;color:#005595!important;font-size:14px;text-align:center}

Bước 2 Thêm HTML vào nơi cần hiển thì

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <div class='author'>
                          <div class='authorbox'>
                            <div class='authorbox img'>
                             <a href=''>
                               <img expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' expr:title='data:post.author'/> 
                              </a>
                            </div>
                            <div class='author-info'>
                              <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank'>
                                <data:post.author/>
                              </a>
                              <i class='fa fa-check-circle' style='color:green;font-size:16px;margin:0 0 0 3px' title='Verified Author'/>
                             <p class='author-about'>
                                Vài dòng mô tả hoặc giãi bầy tâm sự
                              </p>
                            </div>
                          </div>
                        </div>
                    </b:if>
                    <div style='clear:both'/>

Ở trên là tổng hợp một số hộp tác giả-author box widget cho blogspot,có thể chưa thật hoàn hảo và đẹp mắt nhưng đã cố gắng tích hợp tối đa các chức năng cần có cho một hộp author và cái quan trong là đáp ứng tiêu chí:Đơn giản mà hiệu quả.