/ / / Khung tác giả đẹp cho blogspot
THỦ THUẬT

Khung tác giả đẹp cho blogspot

, Edit

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>

/* CSS authorbox */
#authorbox {
  width: 636px;
  background: #46A28D;
  margin: 25px 0 35px;
  padding: 20px;
  overflow: hidden;
  border: solid 4px #398675;
  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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioRDw-Y_Rg7XjuJMubZ2h8tXK9Lt0IzX1F5TNTJUZiSvovY8GQQ5miNAqKceCMkE866uNpIiCBZYdMkfZ1iuazMsR62JXW0wM1q0EGrS__zjYsIQ-KmfYvssX_8nWefpqiHkr5I_WHsTg/s1600/rss-icon.png);
}
span.sm-twitter {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxHB2O3M4k-5iIvn1gHadbQwcDgrLbELR8RXrusPfvh3S9AORyb2YNvCAGhT6hFYvyKfJraheNYUlpwiT_IM-g9Ei0ttdOD0rU5XraRRZKpHiMlJbItTMUXRvxZQe3aeU3l-zz0gfgwoo/s1600/twitter-icon.png);
}
span.sm-facebook {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqIrzLhq5G1o7tk8tDwMgMuFYhUA5j65M7jgSdj-5nWtjT1WgKP8x2sos6ptBZ-JHlu9bLDNqCFC4LGpn8s0mvHglLb6aJZIRdmf9stpPM7f88KJo8SFJveCzGsm-DOsOOri-zsZ-YXWo/s1600/facebook-icon.png);
}
span.sm-google-plus {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaRi1YTeJzvqeElvr_3gYFbAAnKx4U1YOIEpOFxZVJFk9hv-sV9fc5YcnzJUSv_OsfHJY7yWpBuU5d_62qfdL_PFlV8naEysRp2bLo6rKumnByC-yi7mD-ecjIV-81pNS-jbywxCxER1M/s1600/googlePlus-icon.png);
}
span.sm-youtube {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc3KkIPkl7EaGSXV1fkFHib9C0AfFZEYkmwacUGfQnPKY_8MoC76bCGEqm2YIBdxBA8FSS1p4YYETTYPrvK9qaYvqzNXE4rxIdKtBUnWcd4-WDMnaVNJTLytVSkjEjCmwrLwUCvVEyrrY/s1600/youtube-icon.png);
}
span.sm-linkedin {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCxSr4pr34AjPCCNiJcfIpDE9yYrlhgIKLGuKaecHB877Ezmv6DqjgZakC4RttLfOwQ_GUJZBX8mF1wZlMntECpWJHibIVFwg_RE428R3gG_lVb2nm_VtLeOIsDQivYgVchahyphenhyphenrivND7A/s1600/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/113467738707408638989' onclick='target=&apos;_blank&apos;;' rel='author'>
            <img alt='Author Image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYQOT8665aPE8rh3VM1rlMd5SC8Wqbirp1F6tCiBANFhVUMAO8m1tLkvys7tBSUymPOif51QV22reDV31_YAH-D4NYD3q5TX24Z6aQW7wC7na7FdR6yj07FK60KZ7j1KF2ijGsZqeECLkF/s1600/avatar1.jpg'/>
        </a>
        <div class='clear'/>
    </div>

    <!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->

    <div id='author-Info'>

        <h6><a href='https://plus.google.com/u/0/113467738707408638989' title='ABOUT AUTHOR'>ARISNGUYEN ?</a></h6>

        <p class='author-Detail' id='author-Detail-01'>ARIS NGUYỄN là 1 người chả bit ji về blog cả. Vì đam mê làm webblog nên  bỏ công sưu tầm trên mạng để trang trí cho blog và đưa về đăng lên blog để lưu giữ và học hỏi cũng như giúp những ai ko bit ji và đang làm blog như mình
        </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://zarisz.blogspot.com' rel='nofollow' style='font-style:italic;color:#007ABE !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://arisvn.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/arisvnn' rel='nofollow external' target='_blank'><span class='sm-facebook'/></a>
                </li>
                <li>
                    <a href='https://twitter.com/arisvnn' rel='nofollow external' target='_blank'><span class='sm-twitter'/></a>
                </li>
                <li>
                    <a href='https://plus.google.com/u/0/113467738707408638989' 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='/https://www.youtube.com/user/NguyenAris' rel='nofollow external' target='_blank'><span class='sm-youtube'/></a>
                </li>
            </ul>
        </div>

        <div class='clear'/>

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


TÁC GIẢ : Unknown

Hi. I’m Designer and CEO/Founder of ThemeXpose. I’m Creative Web Designer, UI/UX Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

  • 0Blogger
  • Facebook
  • Disqus
  • Google+

NHẬN XÉT :

Post a Comment

More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

comments powered by Disqus
Subscribe to: Post Comments ( Atom )


Powered by Blogger.