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

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.

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!