Tạo khung Author tác giả đẹp

Khung thông tin tác giả (Author Box) được sử dụng phổ biến hiện nay ở tất cả các blog, website hay diễn đàn. Đây là phần giới thiệu vắn tắt về tác giả hoặc cũng có thể để chưa một số liên kết tắt tới các mạng xã hội. Thông qua khung này các độc giả có thể hiểu sơ qua về tác giả của bài viết hoặc blog.

Bài viết hôm nay mình xin hướng dẫn các bạn "Tạo Khung Tác Giả Đẹp Cho Blogger". Hy vọng nó bổ ích cho blog hay website của bạn.


Hình Minh Họa:

Sau đây là các bước thực hiện:

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ ]]></b:skin>

#authorbox {
  width: 650px;
  background: #5E4C4C;
  margin: 25px 0 35px;
  padding: 20px;
  overflow: hidden;
  border: solid 2px #4E4C4C;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}

#authorbox a {
  font-size: 18px;
  line-height: 1em;
  font-weight: 700;
  color: #FFF !important;
  text-decoration: none;
}

#authorbox #author-Thumb {
  float: left;
  display: block;
  width: 20%;
}

#author-Thumb img {
  float: left;
  width: 70%;
  height: 100%;
  border: 2px solid #bbb;
  margin: 0;
  padding: 5px;
  text-align: center;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
}

#author-Thumb img:hover {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -o-border-radius: 0;
  -ms-border-radius: 0;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  cursor: pointer;
}

#authorbox #author-Info {
  float: right;
  display: block;
  width: 79%;
}

#author-Info p.author-Detail {
  color: #fff;
  font-size: 16px !important;
  font-family: Georgia;
  font-style: italic;
  margin: 0;
  padding: 10px 0;
}

#author-Info p#author-Detail-01 {
  border-bottom: solid 2px #ccc;
}

#author-Info #social-menu {
  float: left;
  padding: 10px 0 0 5px;
  position: relative;
}

#author-Info #social-menu ul {
  overflow: hidden;
}

#author-Info #social-menu ul li {
  float: left;
  display: block;
  margin: 0 7px 0 0;
}

#author-Info #social-menu ul li:hover {
  opacity: 0.9;
}

#author-Info #social-menu ul li a {
  float: left;
  display: block;
  text-decoration: none;
}

#author-Info #social-menu ul li a span {
  float: left;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat no-repeat !important;
}

h6.social-title {
  margin: 5px 15px 0 0 !important;
  font-size: 18px;
  line-height: 1em;
  font-weight: 500;
  color: #fff;
  vertical-align: middle;
}

span.sm-rss {
  background: url("https://googledrive.com/host/0B1Pd4j1vHw5od291OTRhbnRJSlk/rss-icon.png");
}

span.sm-twitter {
  background: url("https://googledrive.com/host/0B1Pd4j1vHw5od291OTRhbnRJSlk/twitter-icon.png");
}

span.sm-facebook {
  background: url("https://googledrive.com/host/0B1Pd4j1vHw5od291OTRhbnRJSlk/facebook-icon.png");
}

span.sm-google-plus {
  background: url("https://googledrive.com/host/0B1Pd4j1vHw5od291OTRhbnRJSlk/googlePlus-icon.png");
}

span.sm-youtube {
  background: url("https://googledrive.com/host/0B1Pd4j1vHw5od291OTRhbnRJSlk/youtube-icon.png");
}

span.sm-linkedin {
  background: url("https://googledrive.com/host/0B1Pd4j1vHw5od291OTRhbnRJSlk/linkedIn-icon.png");
}

5. Tìm đoạn code  <data:post.body/> bên trong thẻ <b:includable id='post' var='post'>, chèn code sau vào phía sau nó.

<div id='authorbox'>

    <div id='author-Thumb'>
        <a href='https://plus.google.com/#yourName' onclick='target=&apos;_blank&apos;;' rel='author'>
            <img alt='Author Image' src='https://googledrive.com/host/0B1Pd4j1vHw5oWEtvOUE1SXYyVDA/author-blog.jpg' />
        </a>
        <div class='clear' />
    </div>

    <!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->

    <div id='author-Info'>

        <h6><a href='https://plus.google.com/u/0/#yourName' title='ABOUT AUTHOR'>MINH TRIẾT LÀ AI ?</a></h6>

        <p class='author-Detail' id='author-Detail-01'>Minh Triết là một người đẹp trai đến khó tin, hát hay đến không ngờ, dễ thương đến thẫn thờ. Văn hay, toán giỏi, trên thông thiên văn, dưới tường địa lý, hiền lành, chịu khó, chung thủy, ga-lăng, không lăng nhăng. v.v...và có Nhược điểm duy nhất 1 đó là hay .... ăn nhiều!
        </p>

        <p class='author-Detail' id='author-Detail-02'>
            - Hãy &quot;LIKE&quot; hoặc &quot;G+&quot; nếu bài viết có ích!
            <br/> - Nhớ ghé thăm website thường xuyên nhé các bạn!
            <br/>
        </p>

        <!--XXXXXXXXXX-->

        <div id='myWebsite' style='margin:10px 0 !important'>
            <a href='http://vnshoptemplate.blogspot.com' rel='nofollow' style='font-style:italic;color:#F08D2E !important' target='_blank'> &gt;&gt; GO TO MY WEBSITE </a></div>

        <div id='social-menu'>
            <ul>
                <li>
                    <h6 class='social-title'>Social Links:</h6></li>
                <li>
                    <a href='http://vnminhtriet.blogspot.com/feeds/posts/default?alt=rss' rel='nofollow external' target='_blank'><span class='sm-rss' /></a>
                </li>
                <li>
                    <a href='https://www.facebook.com/#yourName' rel='nofollow external' target='_blank'><span class='sm-facebook' /></a>
                </li>
                <li>
                    <a href='https://twitter.com/#yourName' rel='nofollow external' target='_blank'><span class='sm-twitter' /></a>
                </li>
                <li>
                    <a href='https://plus.google.com/u/0/#yourName' rel='nofollow external' target='_blank'><span class='sm-google-plus' /></a>
                </li>
                <li>
                    <a href='/#' rel='nofollow external' target='_blank'><span class='sm-linkedin' /></a>
                </li>
                <li>
                    <a href='/#' rel='nofollow external' target='_blank'><span class='sm-youtube' /></a>
                </li>
            </ul>
        </div>

        <div class='clear' />

    </div>
    <!--END: #AUTHOR-INFO-->
</div>

Các bạn nhớ thay #yourName thành Tên hoặc ID của bạn.
Vậy là xong. Chúc các bạn thành công.

Theo nguồn:vnminhtriet