Tạo khung thông tin tác giả kèm hộp đăng ký bên dưới bài viết Blogspot

Chào các bạn, thông thường bên dưới mỗi bài viết đều có một khung nhỏ tóm tắt tác giả (người viết) của bài viết đó. Trong bài viết này mình sẽ chia sẻ cho các bạn một khung thông tin tác giả bên dưới bài viết kèm khung đăng ký nhận bài viết qua Email khá đơn giản và đẹp!
Các bạn có thể xem demo trực tiếp qua ảnh bên dưới đây nhé.

CÁC BƯỚC THỰC HIỆN

Bước 1. Chèn CSS

#author-bsw-box{user-select:none;background:#fff;float:right;width:100%;margin:0 0 10px}
#subscribe-box-bsw p{font-family:Arial,sans-serif;font-size:14px;color:#fff;margin:0 0 24px;padding:0}
#subscribe-box-bsw .emailfield{margin:auto}
#subscribe-box-bsw .emailfield input{padding:10px 15px;color:#bcc4ca;border:none;margin:20px 0;width:250px;font:300 18px Roboto}
#subscribe-box-bsw .emailfield input:focus{color:#454545;outline:none}
#subscribe-box-bsw .emailfield .submitbutton{background-color:#b59f64;color:#fff;margin:0;width:100%;font-size:16px;font-weight:700;text-transform:uppercase;cursor:pointer}
#subscribe-box-bsw .emailfield .submitbutton:focus,#subscribe-box-bsw .emailfield .submitbutton:hover{background:#666;color:#fff}
#subscribe-box-bsw{height:150px;float:right;width:280px;background-color:#7577a9;margin:0;padding:15px;overflow:hidden}
#subscribe-box-bsw h1{color:#fff;margin:0;text-transform:uppercase;text-align:center;font:700 20px Roboto;letter-spacing:0}
.author-box{height:150px;float:left;width:500px;overflow:hidden;padding:15px;text-align:justify}
.author-box .avatar{margin:0 10px 0 0;float:left;width:150px;height:150px;pointer-events:none}
.author-box-title{font:700 24px Roboto Condensed;text-transform:uppercase}
.author-box-content{font:400 18px Roboto;color:#666;line-height:1.35;margin:4px 0 0}
@media only screen and (max-width:1000px){#author-bsw-box{display:none}

Bước 2: Chèn Code

<div id=’author-bsw-box’>
<div class=’author-box’ itemprop=’author’ itemscope=’itemscope’ itemtype=’//schema.org/Person’><img alt=’logo’ class=’avatar’ height=’150′ src=’//2.bp.blogspot.com/-BdZahr9Qwy4/WNXhN6hOUxI/AAAAAAAAAJk/_7cC82z3NfEVQ-drE0LqiJCgl-1OgkbnwCLcB/s150/Logo-Bac-Si-Windows.png’ style=’display: block;’ width=’150’/>
<div class=’author-box-title’>About Author: Bác Sĩ Windows</div>
  <div class=’author-box-content’>Bacsiwindows.com – Chuyên trang chia sẻ Thủ Thuật Blogger/Blogspot, Thủ Thuật Máy Tính, Thủ Thuật Internet, Phần Mềm, Template Blogger/Blogspot, Free Blogspot Theme,… quảng cáo, hợp tác, liên hệ/báo lỗi <b><a href=’/contact’ target=’blank’>tại đây</a></b>.
</div>
</div>
<div id=’subscribe-box-bsw’>
<h1>ĐĂNG KÝ NHẬN BÀI VIẾT</h1>
<div class=’emailfield’>
<form action=’//feedburner.google.com/fb/a/mailverify’ method=’post’ onsubmit=’window.open(&apos;//feedburner.google.com/fb/a/mailverify?uri=bacsiwindowsdotcom&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’>
<input name=’email’ onblur=’if (this.value == &quot;&quot;) {this.value = &quot;[email protected]&quot;;}’ onfocus=’if (this.value == &quot;[email protected]&quot;) {this.value = &quot;&quot;;}’ placeholder=’[email protected]’ type=’text’ value=’[email protected]’/>
<input name=’uri’ type=’hidden’ value=’bacsiwindowsdotcom’/>
<input name=’loc’ type=’hidden’ value=’en_US’/>
<input class=’submitbutton’ type=’submit’ value=’Đăng ký’/>
</form>
</div>
</div>
</div>

TỔNG KẾT

Đây là một widget nhỏ khá đẹp và nhẹ, có thể chèn vào bất cứ vị trí nào trong template, nhớ thay ID feedburner lại cho phù hợp nhé!
Chúc bạn thành công!