Chuyên mục

Blogger
  • Blogger Template 5
    • Seo Blogspot 29
      • Thiết kế Blogspot 23
        • Thủ thuật Blogspot 64
          • Tiện ích Blogspot 27
            Máy tính
            • Phần mềm 43
              • Sửa lỗi Windows 18
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    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