Tạo widget thời gian và slogan cực chất cho blogger

Anh Trai Nắng
3
Widget tiện ích HTML này hiển thị slogan kèm avatar rất đẹp mắt cho các Blogger thích trang trí Blog mình.

Đây là một widget được thiết kế để đặt ở sidebar của blog bạn. Thử nghĩ xem nếu ai đó mà vào blog bạn nhìn thấy widget này thì ngầu lòi đúng không nào! Hãy cùng xem cách làm ở dưới.

Bài cũ từ năm 2020 úp lại nên ngôn từ hơi trẻ trâu nha haha.

Tạo widget thời gian và slogan cực chất cho blogger
Tạo widget thời gian và slogan cực chất cho blogger.

Thực hiện

Bước 1: Đăng nhập vào Blog và chuyển đến phần Bố cục

Bước 2: Sau đó dán đoạn code sau vào Tiện ích HTML/Javascript mà bạn muốn hiển thị:

<style>#h { /* color: white; */
/* font-weight: 400; */
display: block;
font-size: 30px;
/* margin: 0 0 5px; */
letter-spacing: 5px;}
.testimoni {font-family: 'Roboto', Arial, sans-serif; position: relative;float: left;overflow: hidden;margin: 10px 1%; min-width: 230px; max-width: 315px; width: 100%;color: #ffffff;text-align: left; line-height: 1.4em;background-color: #d6dbff;padding-top: 120px; border-radius: 10px;}
.testimoni * {-webkit-box-sizing: border-box; box-sizing: border-box;}
.testimoni img { max-width: 100%;vertical-align: top; opacity: 0.85;}
.testimoni .pic {width: 100%; background-color: #2961ff; padding: 25px; position: relative;}
.testimoni .pic:before {position: absolute;content: '';bottom: 100%;left: 0;width: 0;height: 0;border-style: solid;border-width: 55px 0 0 400px;border-color: transparent transparent transparent #2961ff;}
.testimoni .profile {border-radius: 50%; position: absolute;bottom: 100%;left: 25px;z-index: 1; max-width: 90px; opacity: 1;box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);}
.testimoni h3 {font-size: 1.3em;margin: 25px;font-weight: 300;position: absolute; top: 0;right: 0; text-align: right;color: black;}
.testimoni h3 span {display: block; font: 700 14px Roboto Condensed;color: black;}
.testimoni p {margin: 0 0 10px;padding: 0 0 30px;letter-spacing: 1px;font-style: italic;font-weight: 300;}
.testimoni p:after {font-family: 'FontAwesome';content: "\201C";position: absolute;font-size: 180px;line-height: 1em;color: #3a40ff;font-style: normal;content: "\201D";right: 20px;bottom: -105px;}</style>
<div class="testimoni">
    <div class="pic"><img src="https://i.imgur.com/9V3auua.jpg" alt="Profile" title="Profile" class="profile" />
        <p>Luôn tìm kiếm những điều tốt đẹp nhất trong cuộc sống để chia sẻ đến các bạn.</p>
    </div>
    <h3>ANH TRAI NẮNG<span>Web Designer</span></h3>
</div>

Bước 3: Sửa các thông tin theo ý các bạn sau đó Lưu tiện ích và xem kết quả.

Lời kết

Rất đơn giản để tạo widget thời gian và slogan cực chất cho blogger đúng không nào. Chúc các bạn thành công!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

3 Nhận xét

Đăng nhận xét

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu