Cách tạo Gadget và tùy chỉnh giao diện Gadget bằng CSS trên Blogger

Nếu bạn đã thấy nhàm chán với Gadget mặc định của template, hoặc bạn muốn tạo một Gadget theo cách riêng của mình. Thì bạn có thể tham khảo qua bài viết này.

Trong bài viết này tôi xin chia sẻ cho các bạn cách tạo một Gadget trên Blogspot. Gadget này chứa các đường dẫn liên kết, hướng người đọc đến các page chứa các loạt bài bài viết riêng của bạn. Ví dụ cụ thể như trang hướng dẫn này:

• Học lập trình VBA cho người mới bắt đầu

Để thay đổi có thể tạo giao diện Gadget theo cách riêng của các bạn, thì các bạn nên trang bị thêm kiến thức về HTML và CSS nhé. Bây giờ chúng ta cùng bắt tay vào việc luôn cho nóng.

{tocify} $title = {Table of Contents}

Thêm Gadget theo định dạng HMTL/JavaScript

Trên giao diện quản lý của Blogger, các bạn vào phần Layout. Tiếp theo các bạn chọn Add a Gadget, và chọn loại HTML/JavaScript.

Tiêu đề bạn có thể đặt theo cách riêng của bạn. Nếu các bạn muốn tạo Gadget với giao diện như tôi chia sẻ, thì các bạn có thể sử dụng đoạn code bên dưới để dán vào phần Nội dung.

<div class="page-link">
	<div class="ul-page-link">
		<ul>
			<li class="li-page-link">
				<a target="_blank" href="_YOUR_LINK">Learn VBA for Beginners</a>
			</li>
			<li class="li-page-link">
				<a target="_blank" href="_YOUR_LINK">Learn PHP for Beginners</a>
			</li>
		</ul>
	</div>
	<a href="_LINK_MORE" class="show-more-btn">Show More</a>
</div>

Trong đó _YOUR_LINK là đường dẫn mà bạn muốn hướng người đọc đi đến khi nhấp vào tiêu đề. Nếu bạn có quá nhiều trang hướng dẫn học tập. Khi đưa hết vào Gadget sẽ làm cho giao diện của trang blog thiếu thẩm mỹ. Bạn có thế đưa đường dẫn vào _LINK_MORE.

Tùy chỉnh giao diện cho Gadget bằng CSS

Đoạn code CSS sau đây sẽ thay đổi giao diện của khung Gadget mới tạo như mong muốn:

.page-link{
	min-height: 144px;
}
.ul-page-link li{
	font-size: 16px;
    margin: 0;
    line-height: 29px;
	list-style: none;
    padding-left: 28px;
    position: relative;
}
.ul-page-link li:before {
    content: '';
    width: 19px;
    height: 19px;
    display: block;
    position: absolute;
    left: 0;
    top: 5px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Caj9N4be4UZYSYVNJDj4dbw2uT58t9xpXyYWcGnrudhbFViTkgyM2F9fd6iooJSKm8Lc-P3acwWKvURD06Pm6nTBQo-dU3feAg3JJtsN9qpwtM-XrAc-9laz0vZuG2zUCK878lqMHVmG/s1600/arrow.webp) no-repeat left top;
}
.page-link .show-more-btn {
    display: block;
    width: 100%;
    font-size: 12px;
    color: #3c373a;
    background: #e6eae4;
    padding: 0 15px;
    line-height: 38px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 44px;
    font-family: VisbyCF,sans-serif;
    text-align: left;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}
.page-link .show-more-btn::before {
    content: "\f078";
    position: absolute;
    top: 0;
    left: 23px;
    font-size: 12px;
    color: #3c373a;
    -webkit-transition: all ease .2s;
    transition: all ease .2s;
    font-weight: 700;
    font-family: 'Font Awesome 5 Pro';
}
.show-more-btn::hover {
	color: #1a73e8;
}

Nếu có gặp vấn đề lỗi hay bất cứ thắc mắc gì, xin hãy để lại lời bình. Good luck!