Tạo khung đăng bài viết mới giống Facebook 99% cho Blogspot
/ lúc / 58 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!

58 nhận xét:

Dii Nô nói...

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

Star Cường IT ­ nói...

Me Too :))

Dii Nô nói...

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

Star Dương Design nói...

CMT ba

Start Tiến IT nói...

Hay quá bác ơi

Trường Nguyễn nói...

Cảm ơn so much!!

Trường Nguyễn nói...

Cứ hóng đi hihi

Ngọc Tính IT nói...

rất hay

Trường Nguyễn nói...

Cảm ơn nhé!!

Star Dũng Blog nói...

Sao blog chưa tối anh

Trường Nguyễn nói...

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

Star Sơn IT nói...

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

Trường Nguyễn nói...

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

Huỳnh Hoài Bảo nói...

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ường Nguyễn nói...

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

Nguyễn Lương Duy nói...

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

Niệm Style Blog nói...

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

Trường Nguyễn nói...

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

z0mbie win nói...

pờ rô quá

Star Cường IT ­ nói...

5 Phút code :))

Star Bình nói...

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ường Nguyễn nói...

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

Trường Nguyễn nói...

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

Huy Rocket nói...

Giờ mới share hả a

Trường Nguyễn nói...

20:56 ngày 17/12/2017

Trọng Khanh Nguyễn nói...

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

Nguyễn Trọng Trung nói...

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

Phú Cường Blogger nói...

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

Nguyễn Trọng Trung nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Nguyễn Trọng Trung nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Hữu Nhân PTS nói...

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

Trường Nguyễn nói...

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

Hữu Nhân PTS nói...

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]

Hữu Nhân PTS nói...

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

Trường Nguyễn nói...

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

Hữu Nhân PTS nói...

'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ường Nguyễn nói...

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.

Hữu Nhân PTS nói...

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

Trường Nguyễn nói...

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

Hữu Nhân PTS nói...

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

Star Sơn IT nói...

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ường Nguyễn nói...

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.

Star Sơn IT nói...

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

Trường Nguyễn nói...

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

Star Sơn IT nói...

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

Thế Lợi IT nói...

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

Trường Nguyễn nói...

Ừm cũng định đó bác, chứ form đăng bài này vô ích quá.

Nguyễn Lương Duy nói...

Nghĩ gì mà Duy bán Theme cho 😏😏

Trường Nguyễn nói...

Chỉ hỏi thôi mà.. @@

Thế Lợi IT nói...

hóng bác update :D

Game Mobi nói...

Thumbnail a tự làm hả

Trường Nguyễn nói...

Ừm em tự làm hết.

Search Tools nói...

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ường Nguyễn nói...

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

Đăng nhận xét