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

Tác giả Vũ Trường

Xuất bản

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!