Tạo khung đăng bài viết mới giống Facebook 99% cho Blogspot
/ lúc / 49 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
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!

BÌNH LUẬN VỀ BÀI VIẾT (49)

Bóc cmt đầu, nhưng vẫn hóng bài search live

TRẢ LỜI
avatar
Star Cường IT ­

Me Too :))

TRẢ LỜI

Anh iêm mô hóng search live điểm danh đê!

TRẢ LỜI
avatar
Star Dương Design

CMT ba

TRẢ LỜI
avatar
Start Tiến IT

Hay quá bác ơi

TRẢ LỜI
avatar
Trường Nguyễn

Cảm ơn so much!!

TRẢ LỜI
avatar
Trường Nguyễn

Cứ hóng đi hihi

TRẢ LỜI
avatar
Ngọc Tính IT

rất hay

TRẢ LỜI
avatar
Trường Nguyễn

Cảm ơn nhé!!

TRẢ LỜI
avatar
Star Dũng Blog

Sao blog chưa tối anh

TRẢ LỜI
avatar
Trường Nguyễn

Anh cài 23 giờ rồi em.

TRẢ LỜI
avatar
Star Sơn IT

Anh Trường bỏ Nightmode rồi à?

TRẢ LỜI
avatar
Trường Nguyễn

23h mới kích hoạt em.

TRẢ LỜI
avatar
Huỳnh Hoài Bảo

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ỜI
avatar
Trường Nguyễn

Đăng được đó, bấm đăng thử đi :v

TRẢ LỜI
avatar
Nguyễn Lương Duy

hay lắm đem về blog ms đc

TRẢ LỜI
avatar
Niệm Style Blog

Quan trọng là có đăng đc stt ko chứ !

TRẢ LỜI
avatar
Trường Nguyễn

Quan trọng là phải đọc bài viết trước khi bình luận!!

TRẢ LỜI
avatar
z0mbie win

pờ rô quá

TRẢ LỜI
avatar
Star Cường IT ­

5 Phút code :))

TRẢ LỜI
avatar
Star Bình

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ỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Huy Rocket

Giờ mới share hả a

TRẢ LỜI
avatar
Trường Nguyễn

20:56 ngày 17/12/2017

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

share code đăng bài luôn đi chứ :v

TRẢ LỜI
avatar
Nguyễn Trọng Trung

share code đăng bài đi sếp trường

TRẢ LỜI
avatar
Phú Cường Blogger

Sếp đang bận, đi du lịch rồi nhé.

TRẢ LỜI
avatar
Nguyễn Trọng Trung

kkk vậy thì sếp cường làm đi nà

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Nguyễn Trọng Trung

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

TRẢ LỜI
avatar
Trường Nguyễn

//kslzone.blogspot.com/2015/01/tao-form-dang-bai-len-blogger.html

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Hữu Nhân PTS

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Hữu Nhân PTS

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]

TRẢ LỜI
avatar
Hữu Nhân PTS

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Hữu Nhân PTS

'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 ạ

TRẢ LỜI
avatar
Trường Nguyễn

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.

TRẢ LỜI
avatar
Hữu Nhân PTS

http://www.huunhanpts.tk/ anh qua xem hộ /=he/=he/=he/=he

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Hữu Nhân PTS

/=j/=j/=j đc r yêu anh

TRẢ LỜI
avatar
Star Sơn IT

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ỜI
avatar
Trường Nguyễn

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.

TRẢ LỜI
avatar
Star Sơn IT

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Star Sơn IT

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

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.