Giới thiệu Theme mới giống Facebook dành cho Blogspot
/ lúc / 171 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 tất cả các bạn, chào mừng các bạn đã trở lại với blog Bác Sĩ Windows.
Do rảnh rỗi không biết làm gì nên đã nảy ra ý tưởng thiết kế một theme cho blogspot giống y hệt Facebook (nói là giống y hệt nhưng chắc khoảng 80% thôi không hoàn toàn được :v).
Theme này mình thiết kế dựa trên theme Bác Sĩ Windows cũ, chỉ xóa những chi tiết của theme cũ, thay vào những thành phần mới sao cho giống với Facebook nhất. Bạn có thể xem trước một số ảnh chụp màn hình dưới đây:

Một số điểm nổi bật của Theme

  • Giao diện giống 90% Facebook (bài viết, bố cục, menu, widget).
  • Giao diện phẳng, siêu nhẹ và load siêu nhanh.
  • Tích hợp thanh tìm kiếm live vào menu.
  • Tích hợp widget recent comment vào menu.
  • Tích hợp hệ thống thông báo trên thanh menu giống Facebook.
  • Tích hợp widget liên kết bạn bè giống Facebook.
  • Và còn nhiều nữa,...
(Click vào ảnh để xem ảnh lớn)
Nhá hàng sơ sơ vậy thôi vì chỉ mới làm được 2 ngày nên mới làm được ngoài trang chủ và một số chỗ trong trang bài viết thôi, nên chưa có ảnh chụp màn hình trong trang bài viết đâu :))
Bài viết này chỉ có mục đích để giới thiệu đến các bạn theme mình sẽ cho ra mắt sớm trong thời gian sắp tới thôi, không có mục đích nào khác.
Mời anh chị em bình loạn đánh giá xem nhìn được chưa, hay còn chi tiết nào không ổn không để mình xem và fix. Hoặc góp ý bổ sung thêm tính năng/widget nào khác nữa thì cũng bình loạn xuống dưới luôn nhé.
Chúc các bạn một ngày vui vẻ.

171 nhận xét:

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

Comment đầu :v

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

Tổ quốc ghi công!

Tính Getter nói...

Thôi đến sau rồi thì cướp cmt 2 vậy -_-

Star Bình nói...

đẹp lắm, cướp cmt 3 :3

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

Tổ quốc ghi công luôn! :))

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

Comment vẫn ở đây không cần cướp đâu :))
https://lumiere-a.akamaihd.net/v1/images/mickeysbirthdayparty_funny_02d9aa63.gif

Nguyễn Quân IT nói...

cmt (4) hóng bác Trường ra theme sớm nhất có thể :v

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

Chúc bác hóng vui vẻ nhá =))

Chánh Đức Blog nói...

Cmt 4 :v Cướp cmt :v

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

Template dạng này hiển thị ít bài lắm.

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

Ít thì sao? Vấn đề gì à?
5 - 7 bài mà ít

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

Tổ quốc ghi công bạn :v

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

5-7 bài thì kéo cho gãy tay nhé :))
Còn ít thì sao thì tự hiểu mà, thử để bài viết ngoài trang chủ ít đi xem vui hông ^^

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

cái này là share hay là a dùng v a

Star Bình nói...

https://i.imgur.com/BgyHJdY.gif

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

Thấy cũng bình thường thôi chả có gì !!

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

Chưa biết nữa em.

Lê Thọ nói...

commen cuối :P

Star Bình nói...

share đi :3

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

https://media2.giphy.com/media/3ov9jDNPGdKaNuZ2zC/200_d.webp

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


https://2.bp.blogspot.com/-_qHfSt6Hd10/WhBFasM7m2I/AAAAAAAAALQ/VGiFuep0ygYAhTf6SVyWjatZ0bikXJPUQCLcBGAs/s1600/Facebook_Theme-for-blogspot-------bacsiwindows-com.png

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

Thui. Ông để mn hóng đi, hiện tại để t có temp giống fb đc r :D Cho mấy ông kia tự làm cho quen :))

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

Hahaaa sắp hoàn thành rồi, nhưng chắc không se đâu :))

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

chuẩn r :v

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

e cũng định làm menu trái giống bên a mak nhác tởm lợm. có j bx sau a ra temp e xin cũng đc :v

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

E đi ngủ đi rồi mơ nha, chúc e ngủ ngon :v

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

Căn bản t muốn ai làm blog bỏ chút time ra học Front End ít hay nhiều để tự làm cho mình 1 cái gì đó theo ý cho vui. Trước định làm left sidebar như trang chủ fb nhưng rồi nghĩ lại thì làm giống trang cá nhân :3

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

:3

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

Ông có thể để menu ngoài trang chủ nhưng vào trang bài viết thì ẩn nó (dùng thẻ điều kiện) được mà, vậy nhìn đẹp hơn ý :D
VD của tui: https://i.imgur.com/9YzlgUT.png

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

Trước t cũng để thế 1 lần rồi. Xong k chịu tối ưu nên gg chấm điểm thấp quá rồi bỏ. Thôi để t để lại xem sao, coi như bỏ được cái menu trên header. Mà có gì responsive cái kia để hiển thị trên mobile nó kiểu có button bấm cái ra chắc hay hơn nhỉ.

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

Lên codepen tìm menu nào đẹp đẹp có nút bấm ấy rồi mang về chỉnh sửa lại là được rồi, khỏi phải mò mẫm tối ưu.

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

À nút thích kia ông đã làm hay có ý tưởng gì với nó chưa? T mới chỉ áp dụng nút like từ likebtn trong trang bài viết, còn ngoài trang chủ vẫn là fake, chưa có chức năng gì.

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

Hiện tại thì chưa làm gì hết. Tui định áp dụng js vào nó. Khi người khác bấm vào thì nó để đã thích và thống kê số người thích. Không biết làm được không!?

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

cái này a lm đc là ngon r. e cũng đc lm nhưng nó đâu có lưu đâu

Quách Nhị nói...

Hay quá Add :P

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

https://media3.giphy.com/media/xUA7aWtFh4RUUwpmJa/200_d.webp

Việt Hưng nói...

Chỗ trống bên phải ý nên để cột liên kết bạn bè như trên FB là ai đang onl

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

Làm sao biết được ai đang onl mà để!?

Tính Getter nói...

whos.amung.us :v

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

Cái đấy xấu quá không xài :v

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

Tạm thời thì tui mới chỉ làm được như vầy
https://i.imgur.com/p07gI4t.gif

Hoàng Quốc Khánh nói...

Anh ơi, em cần hỏi 1 vài chỗ về blog của em, anh cho em link face với ạ, em cảm ơn

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

K cần hiện ai đang onl đâu ông. Để 1 tab bấm vào hiện lên danh sách bạn bè kèm fontawesome chấm xanh lá là ok rồi ông ạ. Làm phức tạp quá lại cần nhiều thứ.

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

T nghĩ nếu mình có ý tưởng thì sẽ có code làm đc điều đó thôi. Nếu trc mắt chưa mày mò ra đc thì để thế kia cũng ok rồi ông ạ. Nút của t còn chèn trực tiếp chưa có gì :))

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

Có gì em cứ hỏi đi, anh không hỗ trợ riêng qua fb nha.

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

À rồi tui hiểu rồi. Cảm ơn nhé, ý tưởng hay đấy :D
Thay vì dùng widget bạn bè dạng 3 cột thì giờ thay bằng ý tưởng này cũng được đấy.

Dii Nô nói...

Chấm

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

.

Dii Nô nói...

À, có vài bình luận dài, chữ quản trị viên che nội dung kìa, kéo lên tí là có demo

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

Okie ông :D

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

Ok thấy rồi, sửa sau.

Việt Hưng nói...

Đúng r ý tui giống ý ông Cường 70% đó
Còn 3 cột cũ thì làm widget like page fb hay tham gia nhóm gì đó tuỳ
À..mà share luôn cái widget liên kết 3 cột nhé

Hoàng Quốc Khánh nói...

Em đang làm CTV cho blog z0mbie.win, khi em đặt quảng cáo adsense vào preview trước thì nó hiện nhưng khi xuất bản nó ko hiện ạ. Link: http://www.z0mbie.win/2017/11/meo-thay-doi-mau-sac-taskbar-tren-windows-10.html

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

Cái đó chỉnh tí CSS là đc mà. Vẫn set width theo % cho li bình thường nhưng điều chỉnh height cho cân đối là đc.

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

Nhiều người thích vậy đó bác ạ, thích xài đồ của người khác hơn là tự làm :)) nên toàn kêu share share thôi mặc dù nó dễ làm vchh

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

Sắp tới ông mà ra thêm cái nào mới là cứ chuẩn bị trước 1 bài share trc r lưu lại đợi ngày post :v Mà làm web vui ở chỗ cần 1 người có ý tưởng còn thằng kia sẽ giúp hiện thực hóa ý tưởng đó.

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

Star Cường IT sẽ là người giúp thực hiện hóa ý tưởng đó (cười đểu) :))

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

https://media.tenor.co/images/065972681bf9bfbb564024333fc9e214/tenor.gif

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

Event đâu ? Sao không thấy Event -_- Thằng Admin nói láo à :v

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

10.000 bình luận có event nhé

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

Vậy đợi đến khi comment gấp đôi thằng Star Cường IT đi nhé :))

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

https://lumiere-a.akamaihd.net/v1/images/mickeysbirthdayparty_funny_02d9aa63.gif

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

Mà công nhận mới đó mà lên 1k nhanh thật :v nhưng mới comeback blog nên nó vậy thôi :v Đố ông lên đc 3k comment :3

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

Bắt đầu chán rồi đó, méo muốn chơi blog nữa =))))

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

Haha, nhanh nản chí thế này làm Blogger kiểu méo gì nhỉ :v

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

Chán viết chứ không nản chí nhé, vô vị quá!! :))
https://media.tenor.co/images/1a9a0751fe3dfe52dbe754b415ee5a79/tenor.gif

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

Chỉ cần có nội dung, còn viết lười thì đưa Star Cường IT.

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

Ai viết thấy cũng không vừa ý bằng tự viết =_=

Hoàng Quốc Khánh nói...

Ad rep đi ạ

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

Em thử qua các cách này xem sao, anh không dùng Adsense nên không rành lắm.
Ctrl + Click

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

Quảng cáo GA muốn hiển thị thì phải làm nó cố định một nơi nào đó, chứ chèn code vào bài viết nó không hiển thị đâu.

Lợi Nguyễn Thế nói...

đẹp mà không biết cái phần Like, comment và share thì có giống như facebook không

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

Tạm thời thì giống được kha khá rồi!
Nút Thích thì bấm vào nó sẽ hiện Đã thích
Nút Bình luận thì hiện thống kê số bình luận của bài, bấm vào sẽ đi đến phần bình luận trong bài viết.
Nút Chia sẻ bấm vào thì hiện popup chia sẻ bài viết lên Facebook.

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

thấy ông phú cường đang dùng temp này :3

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

Theme ổng có trước.

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

Nhưng chưa tối ưu đâu, js cả css temp t còn đặt linh tinh lắm, cả có 1 vài chức năng ở các button chưa làm nên còn sơ sài. Temp kia của Trường chất hơn, à quên cho xin nick fb add bạn nhá Trường ơi.

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

K rep cmt này của t :(

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

Tội Cường quá, bị bơ, đồng cảm ahuhu :v

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

Chắc ông ý bận hoặc đọc lướt thôi :v nên nghĩ tích cực :v

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

Ahiihiii quên rep =))
FB: báciwindows.com/admin
Cơ mà tui ít dùng fb lắm nên cũng không addfr nhiều :)) lên đây bình loạn là được rồi.

Star Dũng Blog nói...

BSW cho e xin link làm ảnh này
https://responsivedesign.is/wp-content/uploads/2016/12/Ethan-Marcotte-RWD.jpg

Nguyễn Đức Nam nói...

ami.responsivedesign.is

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

Vào link trên, nhập trang web vào rồi chụp màn hình thoi!

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

Mới cập nhật thêm thanh tìm kiếm live à, sao không share link demo cho mọi người xem luôn.

Star Bình nói...

Search live đẹp đó

Niệm Style Blog nói...

thấy TKN với Phú Cường hợp tác làm cái temp này à?

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

Không, theme này một mình mình làm nha.
Bố cục giống nhưng code khác 100%.

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

Cảm ơn ;)

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

Chưa hoàn thiện nên chưa cho demo xem được.

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

Không biết có lọc liên kết hay không nhưng Duy Ripper die domain mấy hôm rồi đấy.

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

Vậy à để tí lên máy lọc lại!!

Việt Hưng nói...

Mình nghĩ cần 1 cái lightbox đỡ phải click ảnh này rồi qua ảnh khác

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

Mình cũng đang ngâm cứu để thêm lightbox vào.

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

Back to top đâu ?

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

Xóa rồi, bấm nút Home đỡ đi!!

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

Nói thế thà ấn cái tiêu đề trên tab cho nó back to top cho lẹ.

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

Ừ thôi ấn tiêu đề tab đi :v lười thêm

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

Một câu trả lời nhanh gọn :) Cái theme đẹp rồi mà chưa có back to top là sao nhỉ, phần comment đâu phải ngắn, mà không làm nút Back to top thì ẩn phần comment hay là làm chổ comment ngắn lại đi.

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

Túm lại cho cái nút backtotop vào là được đúng không, khó quá!
https://media0.giphy.com/media/26u44QFfh0P7cfG4U/200_d.webp

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

Đúng rồi, thêm nhanh và ngay luôn đi :))

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

Ủa ủa, backtotop mình có để dưới chân trang rồi mà ta!? =_=

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

Cạnh chữ Bản quyền đó

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

hóng ad ra temp r share cái menu ở trên :v

Nguyễn Đức Huy nói...

gần 1k5 bình luận rồi

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

Menu nào?

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

70 cmt nữa

Niệm Style Blog nói...

Cái menu chưa sữa responsive trên đt à?

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

Chưa. Mà sửa cái gì vậy?

Niệm Style Blog nói...

lên bằng đt bấm vào cái menu xem là biết mà

Nguyễn Bảo Trang nói...

Gần 1k5 rr a ơi :3

BTV Học Bạn nói...

Ké vào đây chơi.

Tem nhìn kích thích đấy. Đạt đến khả năng tùy biến thế này thì vi diệu quá rồi :D

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

Hahaa có ý tưởng sẵn rồi dựng code thì quá dễ rồi. Tự tìm ý tưởng để thiết kế mới khó :D

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

Ừ e :D

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

À CSS position:fixed đây mà :D để tí sửa lại.

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

Chính là widget recent comments tích hợp trong icon tin nhắn đó ông. Cơ mà chắc TKN sắp trích đc code rồi vì hiệu ứng này ở temp fb bên star tuấn it share, t nghĩ e ý tách ra riêng đc.

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

Hình như k comment là nó trừ đi comment thì phải, giờ thì thấy có lí rồi :v

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

Vậy hả, tui dùng widget này. Chỉ chỉnh CSS lại thôi :D

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

Đúng rồi đó, nó thống kê theo từng ngày, mỗi ngày không bình luận là nó sụt từ từ, nhiều ngày không bình luận là nó sụt về 0 luôn.

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

Dạo này cảm giác như chẳng muốn tối ưu hay làm gì ở cái temp nữa :v Thông báo chỉnh responsive từ đời nào chưa thèm làm vì lười quá :v
Oh. Thế này thì thằng nào đứng top phải chăm cmt k thì rõ là k tương tác :v

NTĐ SYSTEM nói...

- Bác Trường Fix Giùm Em Cái Lỗi Hiển Thị Bài Viết Ở Trang Chủ Với

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

Đó gọi là bệnh làm biếng đó :v tui cũng mắc bệnh đó, bài viết còn chưa viết nữa là nói gì đến tối ưu theme =))

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

BỊ lỗi thế nào!?

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

cái live search nó mất điểm vcl ra. ban đầu dùng ko để ý. a có cách nào tối ưu ẻm này ko ạ =))

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

Có gì đâu mất điểm, đẹp vcl ra ý

Star Bình nói...

Uhm hihi

Niệm Style Blog nói...

Bác sĩ bữa h chưa có gì mới à?

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

Lo làm theme chưa có gì mới.

z0mbie win nói...

hay quá ta :*

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

aaaaaaaaaaaaaaaaaaaaaaaaa

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

Ồ, template mới :v

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

https://media.tenor.co/images/270758fbcf4832805b313a68861b8f45/tenor.gif

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

Sao liên kết Star Cường IT Tọt xuống thứ 2 rồi -_-

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

Thứ mấy mà chẳng được, thị phi quá đi hà cũng ở trên đầu chứ ở đâu.

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

Template cũ ông không xài nữa xin phép Star Cường IT được xài nha :v

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

https://media.tenor.co/images/58da3874fbf792c6682bdbb577052e9d/tenor.gif

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

WTF cười :v tui không đùa.

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

Muốn xài gì thì xài đi, nói tui làm gì ?? :v

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

Xin template :3

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

Never!!

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

Mất top bình luận rồi à

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

Vừa thêm đớ

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

thay temp rồi :v

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

lúc trc bảo share temp cơ mà :v

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

Có bảo chính xác thời điểm se là lúc nào khôngg :))

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

Dạ thay rồi.

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

e chưa responsive đúng ko, lap xem cái sidebar-right nó bị xuống dưới main anh ạ

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

Nói gì vậy không hiểu !?

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

Tui cũng không hiểu :v

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

https://scontent.fdad3-1.fna.fbcdn.net/v/t35.0-12/24093833_1860598000920070_357088019_o.png?oh=98a48c37a0506a481f26e5b39c4e192d&oe=5A1B8830

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

https://scontent.fdad3-1.fna.fbcdn.net/v/t35.0-12/24093833_1860598000920070_357088019_o.png

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

Cái hoái gì vậy !??

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

Thôi rồi tổ quốc ta ơi :v
https://i.imgur.com/auGPjC8.png

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

ý e là theme a xem trên laptop là cái sidebar bên phải nó bị nằm dưới phần main :v

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

xã hội loạn lạc :v y chang luôn :v

Star Bình nói...

Đã up lại tem

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

Sao nãy chuyển hướng thế :v

Star Bình nói...

Sr, k biết

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

thất kinh :v

Star Bình nói...

inb a làm cho nè

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

cho e hỏi là jquery 1.8 vs jquery 3.1.0 khác nhau ak a Trường? trc h cứ tưởng giống

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

Khác nhau đó e

Việt Hưng nói...

Temp đẹp đó ông
Nên giữ mà sài đừng bán
H đang khao khát là biết thiết kế 1 temp như ông

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

Cảm ơn ô. Thiết kế temp chỉ cần có ý tưởng thôi còn dựng code không quá khó đâu, tui toàn dùng HTML vs CSS nên cũng khá đơn giản :))

Việt Hưng nói...

Temp ông nên để màu xanh như ảnh thì em nghĩ sẽ đẹp hơn với lại cái bài viết thì nên sửa lại: TN đã chia sẽ một liên kết thay thành TN đã đăng một bài viết

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

Vậy á tại tui thích mã màu này tím tím.
Để tí về đổi lại!

Huy Rocket nói...

Template bán nhiêu a

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

100k

Cao Anh Chung nói...

temp facebook bán ko, giá nhiêu vậy bạn

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

100k nhé bạn

Đỗ Thanh Bình nói...

mới vào tưởng vào nhầm FB chứ :)))

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

Thế là t thành công r :v mục đích làm cho nó thật giống với fb =))

Đăng nhận xét