Tạo khung đăng bài viết mới giống Facebook 99% cho Blogspot

Hello xin chào các bạn, chào mừng các bạn đã trở lại với blog Bác Sĩ Windows.
Do mình đang trong dự án thiết kế theme blogspot giống Facebook nên hôm nay rảnh rỗi ngồi viết một đoạn code ngắn về khung đăng status giống Facebook cho Blogspot chỉ trong vòng 5 phút viết HTML và CSS. Ý tưởng có sẵn và mình chỉ việc dựng code thôi, quá đơn giản và dễ dàng!

Đây chỉ là Widget để trang trí cho blog thêm đẹp hơn, giống Facebook hơn thôi chứ hoàn toàn không có tác dụng đăng status như trên Facebook, nên bạn cần cân nhắc trước khi sử dụng.

Xem Demo tại đây: http://group.bacsiwindows.com/

Các bước thực hiện

Bước 1. Truy cập chỉnh sửa HTML.
Bước 2. Chèn CSS này trước ]]></b:skin>

#post_status-by-bacsiwindows{margin:0 0 10px;background:#fff;padding:10px;box-sizing:border-box}
#post_status-by-bacsiwindows i{margin:0 5px 0 0}
#post_status-by-bacsiwindows h2{border-bottom:1px solid #eee;padding:0 0 8px;font-size:14px;color:#666;font-weight:500;margin:0}
#post_status-by-bacsiwindows .content{position:relative;height:70px;border-bottom:1px solid #eee}
#post_status-by-bacsiwindows .content img{width:40px;border-radius:50%;position:absolute;top:50%;left:0;transform:translate(0,-50%)}
#post_status-by-bacsiwindows .content input{padding:0;margin:0;position:absolute;top:50%;transform:translate(0,-50%);left:50px;color:#666;background:0;border:0;outline:0;font-family:Roboto,sans-serif;font-size:15px;width:89%}
#post_status-by-bacsiwindows .content input::-webkit-input-placeholder{color:#888}
#post_status-by-bacsiwindows .content input:focus::-webkit-input-placeholder{color:#666}
#post_status-by-bacsiwindows a.btn_status{margin:10px 0 0 0;display:inline-block;background:#f2f2f2;padding:5px 15px;border-radius:100px;font-size:14px;font-weight:500}
#post_status-by-bacsiwindows a.btn_status:hover{background:#ddd}

Bước 3. Chèn HTML vào nơi muốn hiển thị.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='post_status-by-bacsiwindows'>
  <h2><span style='padding: 0 7px 0 0; border-right: 1px solid #ddd'><i class="fa fa-pencil" aria-hidden="true"></i> Tạo bài viết mới</span><span style='margin:0 0 0 8px'><i class="fa fa-question" aria-hidden="true"></i>Q&amp;A</span></h2>
<div class='content'>
<img src='https://scontent.fhan5-1.fna.fbcdn.net/v/t1.0-9/25151913_321908118292571_6831565702998697270_n.jpg?oh=d00c42db327fdd5245520a08cabd0822&amp;oe=5ABB1764'/>
  <form  action='/post' target='blank'><input placeholder='Bạn đang nghĩ gì ?' type='text'/></form>
  </div>
  <a class='btn_status' href='/post' target='_blank'><i style='color:#5db98b' class="fa fa-picture-o" aria-hidden="true"></i>Ảnh/Video</a>
  <a class='btn_status' href='/post' target='_blank'><i style='color:#cc7762' class="fa fa-heartbeat" aria-hidden="true"></i>Cảm xúc/Hoạt động</a>
  <a class='btn_status' href='/post' target='_blank'><span>...</span></a>
  <a class='btn_status' href='/post' target='_blank' style='float: right; color: #fff; background: #4267b2; border-radius: 4px;'>Đăng</a>
</div>
</b:if>

Bước 4. Lưu mẫu.

Lời kết

Ok vậy là đã xong một widget nhỏ. Widget được làm hoàn toàn bằng CSS và HTML nên sẽ không ảnh hưởng gì đến tốc độ cũng như cấu trúc theme hết nhé.
Tạm thời là như vậy, vì là phiên bản đầu tiên và được hoàn thành nhanh chóng trong hơn 5 phút nên chỉ giống được như vậy thôi, từ từ mình sẽ bổ sung thêm javascript để trông giống Facebook hơn.
Code và bài viết thuộc bản quyền của Bác Sĩ Windows. Nếu copy hoặc sử dụng lại vui lòng ghi rõ nguồn bài viết gốc.
Chúc các bạn thành công!

Mọi bài viết đều thuộc bản quyền Bác Sĩ Windows, được viết bởi Admin. Hãy thể hiện mình là người văn minh, có văn hóa bằng cách copy ghi rõ "Nguồn: www.bacsiwindows.com". Tìm hiểu thêm