Hướng Dẫn Tạo Float Fanpage Bám Sát Lề Cho Website WordPress

Hướng Dẫn Tạo Float Fanpage Bám Sát Lề Cho Website WordPress

Chào các bạn! Float Menu thì chắc không còn xa lạ gì với các bạn nữa, nhưng ngoài việc chúng ta tạo ra các kiểu menu thì ta có thể tùy biến chúng thành nhiều dạng khác nhau. Float Fanpage là một trong số đó. Có thể nói Float Fanpage là một trong những tùy biến mà mình nghĩ sẽ rất nhiều bạn cần vì nó giúp chúng ta tiết kiệm được rất nhiều diện tích trên website của mình. Bài viết này mình muốn chia sẻ với các bạn điều ấy!

Làm Float Fanpage bám sát lề cho website rất đơn giản

Có thể hiểu đơn giản khối Div gồm biểu tượng icon và các liên kết bám dính sát viền phải của màn hình trình duyệt. Theo mặc định, toàn bộ khối đó sẽ ẩn đi chỉ có biểu tượng Icon facebook là hiện sát lề phải mà thôi, nhưng khi mình rê chuột (hover) vào biểu tượng icon đó thì khối đó sẽ xổ ra hết toàn bộ khung Fanpage của chúng ta. Bạn có thể tham khảo website demo của mình làm hoặc qua hình động dưới đây.

Xem demo: 

OK! Bây giờ chúng ta bắt đầu luôn nhé!

– Đầu tiên các bạn cần chuẩn bị cho mình sẵn mã nhúng của Fanpage nhé!

– Nếu các bạn chưa biết cách lấy mã nhúng của Fanpage thì xem bài viết tại đây

Chèn Code đối với giao diện Flatsome:

– Bước 1: Copy code HTML và CSS

Trong Dashboard trên thanh Admin Bar, các bạn lần lượt chọn Flatsome >> Advanced >> Global Settings >> Footer Script. (như trong hình)

Chèn Code Làm Float Fanpage Trên Flatsome
Chèn Code Làm Float Fanpage Trên Flatsome

Tại khoảng trống để nhập code trong Footer Scipt, các bạn paste toàn bộ đoạn code sau:

<style>

.boxfb_fixRight {

position: fixed;

top: 40%; /** Chỗ điều chỉnh vị trí hiển thị khung Float, hiện giò khung Float cách phần trên Website 40% **/

right: -360px;

width: auto;

transition: all 0.5s ease-in-out 0s; /** Chỉnh tốc độ hiện khung khi rê chuột ra – Nên để mặc định **/

z-index: 999;

}

.boxfb_fixRight .boxfb_content {

background: #fff;

padding: 10px;

box-shadow: 10px 0px 30px #888888;

border-radius: 10px 0 0 10px;

}

.iconfb{

display: block;

padding: 0px 0px 0px 45px;

transition: all 0.5s ease-in-out 0s;

background: url(/wp-content/uploads/2020/05/iconfb.png) no-repeat left;

background-size: 45px;

background-position: 0% 20%; /** Set vị trí hiển thị cho Icon so với khung Float **/

}

.iconfb:hover {

right: 0;

transition: all 0.5s ease-in-out 0s; /** Chỉnh tốc độ hiện khung khi rê chuột vào icon – Nên để mặc định **/

}

.boxfb_fixRight:hover {

right: 0;

transition: all 0.5s ease-in-out 0s; /** Chỉnh tốc độ hiện khung khi rê chuột vào khung – Nên để mặc định và giống thông số với icon **/

}

@media (max-width: 480px){

.boxfb_fixRight{display:block; top:150px;}

}

</style>

<div class=”boxfb_fixRight”>

<div class=”iconfb”>

<div class=”boxfb_content”>

<iframe src=”https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FThanhXuanGifts&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=442302393300693″ width=”340″ height=”500″ style=”border:none;overflow:hidden” scrolling=”no” frameborder=”0″ allowtransparency=”true” allow=”encrypted-media”></iframe>

</div>

</div>

– Bước 2: Thay đổi code Fanpage của bạn

Đoạn code demo ở trên mình gắn doạn Iframe Fanpage của mình, các bạn chỉ cần thay đổi toàn bộ code của thẻ Iframe thành của bạn là xong nhé!

Dưới đây là hình ảnh code Iframe Fanpage lấy trên trang tạo Plugin Fanpage:

code-iframe-fanpage-chen-vao-khu-vuc-muon-hien-thi-tren-website
code-iframe-fanpage-chen-vao-khu-vuc-muon-hien-thi-tren-website

Dưới đây là hình chỗ bạn cần thay đổi:

thay-doan-code-fanpage
thay-doan-code-fanpage

LƯU Ý: các bạn nhớ dán đoạn code Fanpage nằm dưới Class “boxfb_content” nhé!

– Bước 3: Lưu lại và tận hưởng thành quả nhé!

Chèn Code đối với giao diện bất kỳ không phải Flatsome:

– Bước 1: Đối với giao diện bất kỳ không phải Flatsome, các bạn vào Quản trị >> Giao diện >> Sửa >> Chọn theme đang sử dụng (theme mẹ) >> Footer.php.

– Bước 2: Copy toàn bộ đoạn code ở bên trên vào giữa thẻ đóng </body> và </html>

Chèn Code Làm Float fanpage Trên Website Bất Kỳ
Chèn Code Làm Float fanpage Trên Website Bất Kỳ

– Bước 3: Lưu lại và tận hưởng thành quả nhé!

Lời kết:

Cám ơn các bạn đã luôn theo dõi và ủng hộ. Chúc các bạn làm thành công dạng Float Fanpage để giúp website của bạn trở nên đẹp hơn nữa nhé. Nếu trong quá trình làm có điều gì thắc mắt hoặc bị lỗi thì các bạn vui lòng để lại comment phía dưới để anh em cùng hỗ trơ nhé!

 

Trả lời

Email của bạn sẽ không được hiển thị công khai.