Hướng dẫn tạo Khung Tác giả Author Box Blogger [ Blogspot]

Sunday, November 15, 2015

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.

1. Đăng nhập vào tài khoản Blogger DashBoard> Mẫu (Template) > chỉnh sửa HTML (Edit HTML)

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'>BloggerTip</a></h6>

        <p class='author-Detail' id='author-Detail-01'>Hướng dẫn tạo Khung Tác giả Author Box Blogger &#91; Blogspot&#93; Hướng dẫn tạo Khung Tác giả Author Box Blogger &#91; Blogspot&#93;Hướng dẫn tạo Khung Tác giả Author Box Blogger &#91; Blogspot&#93;Hướng dẫn tạo Khung Tác giả Author Box Blogger &#91; Blogspot&#93;
        </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'>Follow Me:</h6></li>
               
                <li>
                    <a href='https://www.facebook.com/#yourName' rel='nofollow external' target='_blank'><span class='sm-facebook'></span></a>
                </li>
                <li>
                    <a href='https://twitter.com/#yourName' rel='nofollow external' target='_blank'><span class='sm-twitter'></span></a>
                </li>
                <li>
                    <a href='https://plus.google.com/u/0/#yourName' rel='nofollow external' target='_blank'><span class='sm-google-plus'></span></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.

Tag : Blog Design, Blog Tips

TopMenu

Banner 728x90