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 đâyhttp://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!
  1. Bóc cmt đầu, nhưng vẫn hóng bài search live

    Trả lờiXóa
  2. Anh Trường bỏ Nightmode rồi à?

    Trả lờiXóa
  3. Cũng chỉ để cho đẹp :( chừng nào đăng được là áp dụng vào group bsw luôn là ngon lành cành đào :v

    Trả lờiXóa
    Trả lời
    1. Đăng được đó, bấm đăng thử đi :v

      Xóa
  4. Trả lời
    1. Ơ cái bình luận này sao nó tự đưa vào spam thế nhở, giờ mới thấy :))

      Xóa
  5. Quan trọng là có đăng đc stt ko chứ !

    Trả lờiXóa
    Trả lời
    1. Quan trọng là phải đọc bài viết trước khi bình luận!!

      Xóa
    2. Có thể đăng bài được rồi đấy :v

      Xóa
    3. share code đăng bài luôn đi chứ :v

      Xóa
    4. Kiểu Sơn Lâm có share rồi mà :))

      Xóa
  6. http://group.bacsiwindows.com/p/post.html
    Bên trang này ẩn id='sidebar-bsw_wrapper' đi sẽ đẹp hơn, 2 cái lận

    Trả lờiXóa
    Trả lời
    1. Trang đó không quan trọng nữa, đã đưa widget post bài ra trang chủ rồi.

      Xóa
  7. share code đăng bài đi sếp trường

    Trả lờiXóa
    Trả lời
    1. Sếp đang bận, đi du lịch rồi nhé.

      Xóa
    2. kkk vậy thì sếp cường làm đi nà

      Xóa
    3. Kiều Sơn Lâm có share rồi đó em.

      Xóa
    4. haha không bt Kiều Sơn Lâm cho xin link di sếp trường

      Xóa
    5. //kslzone.blogspot.com/2015/01/tao-form-dang-bai-len-blogger.html

      Xóa
  8. Anh qua sửa hộ em anh ạ. Nó không hiện kìa... Nhanh Nhanh trời sập r

    Trả lờiXóa
    Trả lời
    1. Gì mà trời sập ghê vậy em :v để lại link blog anh mới biết chứ

      Xóa
    2. http://www.huunhanpts.tk/ đấy đấy nó không ở chính giữa giống của anh..... Huhu !!!! Em ngồi fix cả sáng đây...
      [i]https://i.imgur.com/bLv14e7.png[/i]

      Xóa
    3. :(( Nhọ thật. Cho em nguyên cái temp cho rồi

      Xóa
    4. Em chèn vào chỗ nào vậy, chèn sao 'content-wrapper' xem.
      150k sở hữu full temp nhé :v

      Xóa
    5. 'content-wrapper' temp em find tới sáng cũng k có -.- hay a ib face em em gửi temp qua fix giùm em đi ạ

      Xóa
    6. Quăng cái link blog vào đây anh qua xem, quy tắc anh không hỗ trợ riêng qua fb e thông cảm.

      Xóa
    7. http://www.huunhanpts.tk/ anh qua xem hộ /=he/=he/=he/=he

      Xóa
    8. Tìm 'post-inner' thêm vào sau nó!

      Xóa
    9. /=j/=j/=j đc r yêu anh

      Xóa
  9. Hiện tại em dùng temp của anh em mua lại từ một người bạn, em muốn hiển thị giống anh mà ko biết để chỗ nào nên đành cho nó vào widget trong bố cục, giờ nó hiện luôn trong bài viết thì giải quyết như nào ạ?
    Mong anh giúp đỡ, link: https://www.starsonit.xyz/

    Trả lờiXóa
    Trả lời
    1. Em mua Theme của ai thì nhờ người đó hỗ trợ, anh không có quyền và nghĩa vụ hỗ trợ cho người mua theme không chính chủ như em.

      Xóa
    2. Em rất xin lỗi anh ạ, mong anh giúp đỡ chứ em ko biết làm thế nào

      Xóa
    3. Em mua của Nguyễn Lương Duy phải không?

      Xóa
    4. Ko phaỉ Duy ạ, em mua của 1 người bạn trên fb, = 10k sub ạ!

      Xóa
    5. Nghĩ gì mà Duy bán Theme cho 😏😏

      Xóa
    6. Chỉ hỏi thôi mà.. @@

      Xóa
  10. bác thiết kế cái contacts from kiểu này là hợp lý đó

    Trả lờiXóa
    Trả lời
    1. Ừm cũng định đó bác, chứ form đăng bài này vô ích quá.

      Xóa
  11. Site của admin đẹp thiệt, load mượt mà mát mắt quá :D, bài viết thì hay nhưng không có gì để xem DEMO nên ko biết dùng như thế nào. Nếu được thì cho thêm phần XEM TRƯỚC sẽ tiện hơn. Thanks Admin.

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bạn. Mình sé cố gắng bổ sung Demo cho bài viết (y) :3

      Xóa
CÓ THỂ BẠN ĐANG TÌM