Mỗi khi vào đọc blog của ai đó bạn thấy ô hiển thị thông tin tác giả đẹp mà bạn không biết nó được tạo như thế nào. Và nó rất đẹp có ý nghĩa rất hay khi muốn bạn đọc biết đến bản thân mình.
Hôm nay Bchiase.com xin giới thiệu và hướng dẫn các bạn có thể tạo được ô hiển thị thông tin tác giả này nhé.
Tạo author box cho blogger |
Để tạo được cái này các bạn có thể chèn sau tiêu đề hoặc bên dưới nội dung bài viết . Vậy chúng ta cần chèn nó vào đúng vị trí cần hiển thị
Đoạn code quy định style chung cho cả hai cách hiển thị bạn chèn nó vào trước thẻ </head>
/* Author Box Style */ .author-box{overflow:hidden;background-color:#fff;font-size:16px;padding:20px} .author-box .avatar{margin-right:20px;float:left} .author-box-title{font-size:18px;margin-bottom:4px;text-transform:uppercase} .author-box p:last-child{margin-bottom:0}.author-social{margin-top:10px} .author-social a{opacity:0.7;margin-left:2px}.author-social a:hover{opacity:1} .author-social a img{width:25px}
Chèn Author box sau tiêu đề
Bước 1: Vào Mẫu - Chỉnh sửa HTML. tìm đến <b:includable id='post' var='post'>
Chèn đoạn code sau vào trước thẻ <data:post.body/>
Chèn đoạn code sau vào trước thẻ <data:post.body/>
<b:if cond='data:top.showAuthor'> <h4 class='author-box-title'> <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='author profile'> <span class='fn'><data:post.author/></span></a></h4> </b:if> <div class='author-box-content' itemprop='description'> <p>Bạn đang xem "<strong><i><data:post.title/></i></strong>" tại <b><data:blog.title/></b>. Đừng quên <script type='text/javascript'> //<![CDATA[ var siteurl = window.location.href; document.write('<b><a href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">Chia sẻ ngay</a></b>'); //]]></script>để ủng hộ <b><data:blog.title/></b> nếu bài viết có ích !<br/>Like <b><a href='https://www.facebook.com/SunShiune.Angle' target='_blank'>Bchiase.com</a></b> trên Facebook để ủng hộ mình nhé.</p><p><data:post.authorAboutMe/></p> </div> <div class='author-social'> <a href='http://b-chiase.blogspot.com/' title='Website'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigmDUpK0VKh1A-z0HDYwr6lPVWDteUKft6SPeY5IS-1rdo_sCvUQlQZRR53K1tAnz37w8tevb3BUpf-0ilTWP9PmajsHVAGHQl671FgqR2z0_OWuaWykQ337yrUdtQdZEVmGNxn9bY_kld/s1600/OpV3QbH.png'/></a> <a href='#' title='Twitter'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJABAmfYqYxan-ByaCkMDVb9PAHasdLPmcRQ3URWAPt9uie3hosG1-C6a_Sy9X7K6ZL0NL_auzBM1itFCJ6YF7J2ENysngpZOzxcT3Q_lafyUS5yUdFMXuAQYltl0YNUyBaN2-2b2wnNm/s1600/mRqmS46.png'/></a> <a href='https://m.facebook.com/depzai21891/' title='Facebook'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuxguKKSoeurztjFWKbajyb2Dn2yHM-4NhbOzrD04ISRdEZgWzpIJPV3ryigiZQpBKQHuIUhK3R-GysHMEpcCK4kQwauiCl2RKl2ed2g1avuEDZE6qtG46rRGby6-SLXBXxlX7gNSPX-nB/s1600/I5cl6Zo.png'/></a> <a href='#' title='Google Plus'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo_kqF5hblCIWUw4pumfqPwPiK45xmSpdS7oObYGSS2bj4EWKS2F3FAgbik8cYPDvtVunTFUQmqW5mSx_CZRKdlJnh1E8rlAL2ASPbiFC8NJH6IR4zJQjVIWpNsc5hyphenhyphenLxFgDtNFlqFs2UQ/s1600/MFUNf7n.png'/></a> <a href='http://www.linkedin.com/depzai21891' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKr65Z4LHDtfQ91rzO7Khhq3aUnfLmFBqyk0AuZhy-6m_HEorbj-Gf-G8JxMUIRdnxeGSbyvcb4lM4JV8-X1S3zqWWJQK6kN3SnfT6xtK39xYIPR0RWufN5VIQadAbwi9vzMRZekh4ZQmD/s1600/pZdxRe0.png'/></a> <a href='http://www.flickr.com/sunshine_angle' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb5iEhKEifaEsnQaiA4xfzCW8oYVi46fWNa8RyX8qM6XdvjjYvc-NACtMX66m-UNjSgM-tghH9NUWh_za0a5GZ4_qpH2r4hsqhKj-Lqe_9JcoqlVIlyri8RymvDSJQBpUWJOpkqeMI-2tF/s1600/X7ohFwB.png'/></a> <a href='https://www.youtube.com/user/lethuc21891' title='Youtube'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6Psmwyz_anKxOxqeJM0xAoY4ANdErsAEzwqX-FWqBizmywLxWKGTa4flQWkzvx5sWVs0vRFyUub58InNe-qHFj4U4sMDHtiStW0OsAtmQOrAMLapAUUusDs_8PpAGZG6RqWmCyrr04vL/s1600/bSkd09J.png'/></a> <a href='http://pinterest.com/depzai21891' title='Pintrest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TaQpn36NcIeVSawNhOLLd78-2CKQuaTFYq1zjiGBouBeV7MaTig_n6KCjGzPVluj_-VRkc6rGiSG6qrEIxIgw2Z_a5RSe7HoxrDxeH1m2w8yXfWDiEQOk1xRZ8K6ubSFCW6MRJXY0oSN/s1600/czFNlQ5.png'/></a> </div>
Các bạn nhớ sửa lại link màu đỏ mình đã đánh dấu thành link MXH của các bạn nhé. Chúc các bạn thành công Nếu không hiểu có thể liên hệ với mình qua FB phía bên phải siderbar có mục nhắn tin vào FB đó hoặc có thể gửi tin nhắn vào Inbox https://www.facebook.com/messages/depzai21891
Comments
Post a Comment
► Comments Lịch Sự - Không Spam.
► Viết Tiếng Việt Có Dấu - Giữ lịch sự, văn hóa.
► Tích vào ô Thông báo cho tôi để nhận thông báo phản hồi.
► Bình luận của bạn sẽ được giải đáp sớm nhất bạn nhớ check mail để xem phản hồi từ mình và các bạn khác nhé