Category Archives: Blogspot

Hiển thị bài viết có ảnh thumb và phân trang

Hôm nay mình xin giới thiệu cách lấy ảnh đại diện của bài viết hay còn gọi là get thumbnail bài viết hoặc hiển thị ảnh thumbnail và các vấn đề liên quan khác của thumbnail trong blog

Hình minh Họa
Hiển thị bài viết có ảnh thumb và phân trang

1. Đầu tiên đăng nhập tài khoản Blogger==>>Vào phần thiết kế (Design) chọn chỉnh sửa HTML==>>Thêm ccode bên dưới vào trước thẻ ]]></b:skin>

Hiển thị bài viết giống trang dantri.com.vn

Hình ảnh minh họa
Hi&#7875;n th&#7883; b&agrave;i vi&#7871;tdantri.com.vn

1. Đăng nhập vào tài khoản blogger==>>Vào thiết kế, chọn chỉnh sửa HTML==>>Chèn code bên dưới vào sau thẻ <head>

Hiển thị bài viết giống trang tin247.com

Đối với những bạn lướt web nhiều chắc hẳn bạn đã từng vào trang tin247.com đọc tin và cũng đã thấy cách hiển thị bài viết trên trang đó. Trang web đó hiển thị bài đăng cho từng nhãn riêng và mỗi nhãn sẽ hiển thị một bài (dạng tóm tắt) và có thêm tiện ích bài viết liên quan trong cùng nhãn đó.

trangtin247
Hình ảnh minh họa thủ thuật(hiển thị giống trang tin247.com

Cách thực hiện thủ thuật:

1. Đầu tiên hãy đăng nhập vào tài khoản Blogger==>>Vào bố cục và thêm phần tử HTML/Javascript==>>Chèn đoạn mã bên dưới vào phần tử tiện ích trên

Tùy chỉnh phần bài đăng cũ hơn, bài đăng mới hơn, trang chủ trên Blogspot

Hình ảnh minh họa
T&ugrave;y ch&#7881;nh ph&#7847;n b&agrave;i &#273;&#259;ng c&#361; h&#417;n

1. Đăng nhập tài khoản Blogger==>>Vào phần thiết kế (Design)==>>Chọn chỉnh sửa HTML (Edit HTML)==>>Chọn tiếp mở rộng tiện ích (Expand Widget Templates)

☼ Bây giờ bạn có thể chọn 1 trong hai tùy chọn bên dưới

Tiện ích bài viết liên quan cũ mới cùng chủ đề

Với tiện ích này thì khi người dùng xem một bài viết nào đó, nó sẽ hiển thị các viết cũ hơn hay bài viết mới hơn trong cùng một nhãn với bài viết đó. Ở đây chúng ta sẽ cho tiện ích này nằm ở cuối mỗi bài đăng trên blog, tiện ích này sẽ giúp người dùng có thể dễ dàng tìm kiếm các bài viết trong chủ đề mà họ đang quan tâm. Bạn có thể xem hình ảnh bên dưới để thấy các hiển thị của tiện ích này.

Hình ảnh minh họa
Ti&#7879;n &iacute;ch b&agrave;i vi&#7871;t li&ecirc;n quan c&#361; m&#7899;i c&ugrave;ng ch&#7911; &#273;&#7873;

1. Đăng nhập Blogger ==>> Vào thiết kế, chọn chỉnh sửa HTML==>>Chọn Mở rộng mẫu tiện ích (Expand Widget Templates). Chèn code css sau vào trước thẻ ]]></b:skin>

Tạo Chữ Chạy Đơn Giản Với marquee

I:Với việc đơn giản là bạn chỉ cần cho nội dụng vào giữa 2 Tab <marquee> … </marquee>

Code:
<marquee>http://Baongoc.co.cc</marquee>

Kết Quả
http://Baongoc.co.cc

II:Bạn có thể định dạng thêm( kiểu chữ, font chữ,kích thước chữ, màu sắc,…) liên kết, hình ảnh….

Kiểu chữ nghiêng
Code:
<marquee><span style=”FONT-STYLE: italic”>http://Baongoc.co.cc</span></marquee>

Kết Quả:

Tiện ích bài viết mới nhất với hiệu ứng autoscroll bằng Jquery

I.Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.
Đặt đoạn code dưới đây vào trước thẻ ]]></b:skin>

<!–Bai viet hieu ung autoscroll Start–>

div.autoscroll {
background:#eee; //màu nền của tiện ích
color:#0000ff; //màu text của tiện ích
width: 300px; //độ rộng của tiện ích
position: relative;
overflow: hidden;
height: 425px; //chiều cao của tiện ích
border:3px solid #000000; //đường viền của tiện ích
}
.autoscroll a{
color:#0000ff; //màu tiêu đề bài viết
}
.autoscroll a:hover{
color:#ff0033; //màu tiêu đề bài viết khi rê chuột
}

div.autoscroll ul {
position: relative;
list-style-type: none;
padding: 0px;
margin: 0px;
}
div.autoscroll ul li {
margin-top: 3px;
padding-bottom: 2px;
border-bottom:1px solid #0000ff;
}
.autoimg{
float:left;
margin:3px 5px 0px 5px;
padding:2px;
border:1px solid #000000;}

<!–Bai viet hieu ung autoscroll End–>

II.Bạn chèn tiếp code bên dưới vào trước thẻ </head>

SIGN UP TO RECEIVE E-MAIL

Sign up for newsletters to update interesting articles and HOT news via email

Successful registration Please Check Mail to confirm!

An error occurred, Please try again!