Like Box như một trang Facebook thu nhỏ. Trong đó thể hiện Fans Page và những bài đăng trên trang Facebook riêng của bạn. Khi chèn Like Box vào Blog, bạn bè của bạn có thể xem nhanh nội dung trang Facebook của bạn và họ có thể kết nối để chia sẻ với bạn thông qua nút “Like”(thích) ngay phía trên hộp thoại. Ngoài cách tạo Box Like đơn giản như các blogger khác vẫn làm thì mình sẽ giới thiệu và hướng dẫn bạn cách làm những Box Like cực độc mà chỉ riêng blog của bạn mới có.
Okay giờ thì bắt đầu thôi :D
Đầu tiên các bạn vào trang quản trị của blogspot đi đến phần "Bố Cục" click vào "Thêm tiện ích" Chọn thẻ </> HTML/Javascript trong popup các tiện ích mới rồi Đặt tiêu đề cho Tiện ích mới của bạn: ví dụ "Box Like Siêu Cute" như của mình :D
Còn phần nội dung bạn có thể chọn một trong các style mà mình đã làm một số mẫu như sau: Nếu không thích thì phần cuối bài viết mình sẽ hướng dẫn các bạn có thể tự làm riêng cho mình một mẫu cho độc nhé :D
Chú ý: Nếu chọn style mình làm sẵn thì các bạn hãy thay 797363830276926 đoạn mã này thành ID Fanpages của bạn nhé!
Xác định Id bằng cách lấy URL trang cá nhân của bạn:
https://www.facebook.com/namkna.blogspot
Phần in đậm chính là ID fanpage của bạn.
Xác định Id bằng cách lấy URL trang cá nhân của bạn:
https://www.facebook.com/namkna.blogspot
Phần in đậm chính là ID fanpage của bạn.
Style 1:
<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw_SCqe-Qq-YDxaIlYrgwnmj9fcb14oox-ruo_N1ybGORaWlRBSnlcLHJ9nnFTDfcOnZcJhjdM34YiN2haotwKW45Ls6n-L0Y7_gAjQ4obn2_BnM2HWQxhEFl_gVJoX9aj5HfrYptqq5qo/s1600/fan-01-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 2:
<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjGMY2kTNUon8BNy8-jP_FXcLGN0Pt_wU-gDp0VIx7hyqkfxqpqa_5D0ofbNMPhgvoyBzbBBqGt1Wk_QjxND43JazpjTDeE2mdrh7BLsmnykO_2006VrIlAh6ijDYQglrc02Hn1eTCSuK6/s1600/fan-02-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 3:
<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbLqJSeR2wHonPHl8Rv4njTFIco0nk7-uYNPd6bmYvXfCdkOdez1VtXgwUipjEmad61NQDxw56DLw9AxQQj9YahGsoxtszW3BgGdUjPI8FApPa_0Ilj87cdsGmch4XpwLDjafK_F3WMEls/s1600/fan-03-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 4:
<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZNRgMwDbMVM_2xEVqZPS76JbOV085Oh4YR1aJ8Io0OLoa2Yxxzdg3y_yhMK5fBNBs_EYM99Qh00RdByWZMFPH4JTvRAAxAXR8FAOFIrMaHAh0avfys4sBTOZ7Z6Ps5nY83pCPGi-do0Z9/s1600/fan-04-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 5:
<div style="-moz-box-shadow: 0px 15px 20px 0px #777777; -webkit-box-shadow: 0px 15px 20px 0px #777777; background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCCCCC; box-shadow: 0px 15px 20px 0px #777777; height: 270px; margin: 30px; padding: 10px 0 10px 10px; width: 250px;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 6:
<div style=".width:248px; padding:10px 0px 10px 10px;height:230px;border-top:5px solid #CCCCCC;border-right:5px solid #CCCCCC;border-bottom:5px solid #cccccc;border-left:5px solid tomato;border-radius: 0px 30px 0px 0px;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDLI80KrLhBYGvmD4_Dr0ki6Cgo-7OQZ1wxTnjeKZXhzFlu8MRvV_LxAVlte76_9ZMNExSNDPBgjtAKdobwWoSjt6Q2DU81yhnHlkNxJOImBYrCZMMBIF7cSoZV2pEohLu7QBJzxRq15_I/s320/3783098647_fb208001b5.jpg');overflow:hidden;.height:250px;width: 238px;border: 5px outset #f2f2f2;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 7:
<div style=".width:248px;padding:10px 0px 10px 10px;height:230px;border-top:5px solid #CCCCCC;border-right:5px solid tomato;border-bottom:5px solid #cccccc;border-left:5px solid tomato;border-radius: 0px 30px 0px 0px;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFEaKn3CBGQI10WyRVHgH0QB5olqcp7f-7Og49uiFP3mi8VffbIfyXd5XZ1RaHtd9NV8OY7rvPQOr73PocX60IHu6uoFJfUCT4qwoiH5BBJIM7cb1VQ51LIlmmBrnj71z3TQAZXTbQ4Q6T/s1600/image4.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 8:
<div style=".background-color:#F4F4F4;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #CCCCCC;.height:250px;overflow:hidden;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 9:
<div style="background-color:#F8E0E0;width:250px;padding:10px 0 0px 10px;height:250px;border:2px ridge #CCCCCC;box-shadow:10px 5px 5px #CCCCCC;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 10:
<div style="background-color:#F4F4F4;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #CCCCCC;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 11:
<div style="background:#F6CECE;width:250px;border:1px solid#FA5858;padding:2px;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 12:
<style type="text/css">.labstrikeFB {width: 250px;height: 250px;border-radius: 3px;position: relative;
background-color:#f4f4f4;padding:5px 10px 15px 0}.labstrikeFB,.labstrikeFB:before, .labstrikeFB:after {background:#f4f4f4;border: 1px solid #ccc;}.labstrikeFB:before,.labstrikeFB:after {content:"";position:absolute;bottom: -3px;left: 2px;right: 2px;height: 1px;border-top: none;}.labstrikeFB:after {left: 4px;right:4px;bottom: -5px;box-shadow: 0 0 2px #ccc;}
</style><div class="labstrikeFB"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 13:
<div style="width:250px; height:250px; background: #FFFFCC; border:1px dashed #FF3300;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 14:
<div style="background:#f4f4f4;width:250px;padding:0 0px;margin:10px 0;border:solid 6px #e9e8e8;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 15:
<div style="background: rgb(0, 255, 0);background: -moz-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -webkit-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -o-linear gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: -ms-linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);background: linear-gradient(90deg, rgb(0, 255, 0) 14%, rgb(249, 228, 175) 69%);width:250px;padding:0 0px;margin:10px 0;border:solid 1px #c7c7c7;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Style 16:
<div style="background-color:#D6E0FF;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #66F;border-radius:10px;"><div style="height: 250px; overflow: hidden;"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F
797363830276926?ref=hl&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>
Đến đây bạn đã chọn được cho mình Style Box Like nào phù hợp chưa nếu chưa chọn được mẫu nào ưng ý thì mình sẽ hướng dẫn các bạn tự tạo một Box Like cho riêng mình cực độc nhé !
Hãy copy đoạn code Style 1 vào Notepad như mình:
Bạn thấy phần mình bôi đen rồi chứ đó là link ảnh làm nền cho Box Like các bạn hãy chọn cho mình một ảnh nền với kích thước 250x250 pixels để làm ảnh nền cho Box Like của bạn nhé !
Chúc các bạn thành công ! Có thắc mắc gì các bạn vui lòng comment bên dưới để mình trợ giúp nhé !
My Blog: Khoa Plus dot Com
Nhận xét
bài này cô đang mong chờ đó nhưng cô muốn lấy cả nút chia sẻ
Trả lờiXóaFanpage hiện tại không tích hợp nút share cô ak. CHỉ có nút like page thôi.
XóaLike Box chỉ có nút Like thui hok có nút Share đâu bạn à :D
XóaĐây thực chất là một plugin của face và hiện tại chưa tích hợp nút đó bạn ak.
XóaCảm ơ bài viết!
Trả lờiXóaNếu bạn chịu thiệt cho liên kết với mình qua trang: http://www.bannhadat.net.vn/
Hiện tại mình không add thêm liên kết nữa bạn ak.
XóaNhận xét này đã bị quản trị viên blog xóa.
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaanh nam ơi cái nay có nên theo không :
Trả lờiXóahttp://www.8dichvuseo.com/2014/03/chinh-sua-toi-uu-hoa-tieu-de-bai-viet-blogspot.html
Tùy theo yêu cầu em có thể theo hoặc không. Những đoạn code trong đó chủ yếu là thêm phần title cho các tiêu để, nói chung áp dụng cũng tốt.
Xóa-p/s: Bài viết đó anh viết khá lâu rồi từ 2012 LINK HERE
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaBạn ơi, mình mới mày mò học làm blog. Mình lớn tuổi rồi nên không rành, bạn bày giúp cho mình nhé: Khi mình làm được ô hình màu theo bạn hướng dẫn, thay ID vào thì nó thành một ô trống trơn không có cái gì cả. Bạn hướng dẫn giúp mình, cảm ơn bạn nhiều.
Trả lờiXóaNguyên nhân chính là ID bạn thay vào không đúng.
XóaBạn thay đoạn 797363830276926 thành tên trang fanpage của bạn.
Xác định tên facebook thì bạn chỉ cần lấy URL trang fanpage như bên dưới:
https://www.facebook.com/namkna.blogspot
Phần in đậm chính là tên fanpage của bạn.
Lưu ý trang fanpage chứ không phải trang cá nhân nha bạn.
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaChào bạn! Mình muốn hiển thị tất cả avata của bạn bè bấm like cho mình thì làm sao nhỉ, mình dán cốt bạn cho nó chỉ hiện ra một hàng avata thôi. Bạn hướng dẫn giúp mình nhé. Rất cảm ơn bạn.
Trả lờiXóa