Chúng ta thường thấy ngoài trang chủ các template blogspot hay có những slide bài viết đẹp và được trang trí với một thanh trượt nhằm mục đích làm đẹp và mượt blog. Hôm nay share123.vn giới thiệu một dạng slide khá phổ biến mà các bạn thường thấy

Demo: http://thaoduocchuabenh.blogspot.com/

Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Thường vào các blogspot lớn bạn sẽ rất nhiều popup xuất hiện quảng cáo cho site khác. Chỉ cần load lại trang là lại thêm một số popup khác xuất hiện .Dẫn đến nhiều trường hợp giảm dần lượng khách đến site bạn .Đoạn code sau sẽ giúp bạn chèn quảng cáo popup và chỉ hiện 1 lần duy nhất tránh gây phiền hà cho khách khi truy cập.

Demo: bạn có thể thấy khi bạn bấm vào vị trí bất kỳ trong khi xem bài viết này của mình

Cách 1 ( chèn file js )
1.Đầu tiên bạn cần copy đoạn code sau vào Notepad và chỉnh sữa các dòng chữ mình đã đánh dấu cho phù hợp với site của bạn

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

  

Thông thường trên một blog/web có chứa rất nhiều tiện ích ở sidebar, footer... nếu bạn đặt tiện ích theo kiểu thông thường, tức là các tiện ích đặt nối tiếp nhau thì sẽ làm cho trang blog của bạn trở nên dài và load khá chậm. Cách để bạn có thể khắc phục chính là bạn gom các tiện ích là và đặt chúng thành từng tab, điều này sẽ giúp site của bạn ngắn gọn và người dùng dễ dàng xem được các tiện ích trên blog của bạn thông qua các tab đó. Chủ đề về tạo Tab chứa nội dung thì mình trước đây đã chia sẻ cùng các bạn một số bài, tuy nhiên các thủ thuật trước thì thường nội dung của từng tab lại được thêm vào trong thẻ <div> </div>. Thủ thuật hôm nay mình chia sẻ cùng các bạn cách tạo các Tab nội dung từ những tiện ích có sẵn trên blog của bạn. Nói dễ hiểu là thủ thuật này sẽ tự động gom các tiện ích có sẵn trên blog của bạn chỉ cần bạn chỉ định số lượng tiện ích cần gom và điều kiện là các tiện ích có tiêu đề thì mời có thể gom vào trong tab.

Hình ảnh minh họa

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

  

Qua một số web mình thấy tiện ích này cũng khá hay nên mình viết bài chia sẻ cùng các bạn để mọi người có thể sử dụng cho Blogspot của mình. Tiện ích đó đơn giản là các nút bấm điều khiển trên blog của bạn, các nút như lên đầu trang hay xuống cuối trang thì bạn đã quen thuộc, ở đây mình sẽ có thêm 3 nút với tính năng như trở về trang trước, nút tự động cuộn blog và ngưng cuộn blog. Nút tự động cuộn tức là khi bạn bấm vào nút này thì blog bạn sẽ tự động cuộn xuống dưới từ từ, đây sẽ giúp người đọc có thể đọc bài viết mà không cần dùng chuột kéo thanh trượt nữa. Bạn có thể xem demo trực tiếp trên site mình, bạn nhìn san bên phải sẽ thấy các nút bạn bấm vào lần lượt các nút để xem tính năng của nó.

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Một thông báo dạng popup rất cần thiết trong thiết kế web, đặc biệt ứng dụng cho các hình ảnh quảng cáo động. Bạn có thể điều chỉnh khoảng thời gian hiển thị để thành phần popup tự động đóng. 

Thông thường để tạo một kiểu quảng cáo dạng popup như vậy, kỹ thuật webdesign phải dùng đến script có dung lượng khá lớn. Tuy nhiên ở đây, tôi sử dụng chức năng đóng thành phần giúp cho script khá gọn nhẹ.

Bạn hãy đặt đoạn code sau đây vào trước thẻ

</head>

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Script tạo danh sách các bài viết liên quan cho Blogger ban đầu được Hoctro phát triển, sau đó được nhân rộng ra với khá nhiều chỉnh sửa. Các bản "bài viết liên quan" hiện nay đều cho phép cấu hình số bài viết hiển thị và số bài viết lấy theo mỗi label. Tuy vậy, trong trường hợp cần liệt kê số lượng lớn các bài viết liên quan thì chưa script nào có khả năng phân trang. Trong bài viết này, tôi sẽ hướng dẫn các bạn làm phân trang cho chúng.

Script này thích hợp với các blog cần liệt kê số lượng lớn các bài viết liên quan (VD như các tập trong 1 bộ truyện tranh). Nếu blog bạn không có nhu cầu này, hãy dùng các bản cũ mà bạn thấy phù hợp.

Xem demo tại đây
hoặc tại đây 

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Khi trên blog có nhiều tiện ích thì câu hỏi cần đặt ra là làm sao để có thể thêm nhiều tiện ích mà vẫn tiết kiệm được không gian trên blog? Điều này rất cần thiết vì nó sẽ ảnh hưởng đến tốc độ load trang. Và một trong những cách tiết kiệm đó, bạn có thể làm theo hướng dẫn bên dưới. Thủ thuật này tạo Tabs với nhiều tiện ích, cùng với hiệu ứng bằng JQuery.

Hình ảnh minh họa

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Trong bài viết share template 01 (white template) mình viết hôm trước Dlai có nhờ mình hướng dẫn tạo dropdown menu như trên template đó nên hôm nay mình viết bài viết này để thực hiện thủ thuật trên.

Xem Demo

1. Vào Thiết kế → chỉnh sửa HTML chèn đoạn code sau vào trước thẻ ]]></b:skin>

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Nếu bạn thấy widget Labels mặc định của blogger (blogspot) chiếm diện tích blog (với những blog nhiều Labels), bạn có thể chuyển dạng hiển thị mặc định sang dạng Menu xổ xuống (Drop down Menu) gọn gàng như hình minh họa bên dưới.

Menu cho Labels dạng list xổ xuống

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Page Navigation đối với đa số các website là một công cụ không còn xa lạ. Nhưng với blogger thì công cụ này vẫn chưa được hỗ trợ mạnh lắm. Chỉ có nút Next và Preview thôi. Tham khảo ở một số nơi mình đã chế biến lại cái navipage cho blog của mình. Bạn có thể làm theo hướng dẫn dưới đây.

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Bộ 3 nút điều chỉnh size text giúp người truy cập web có thể tăng giảm kích thước font chữ cho phù hợp theo sở thích

Demo

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Để cài đặt tên miền cho blogspot trước hết bạn phải mua một tên miền, và tôi khuyên bạn không nên sử dụng tên miền miễn phí như .tk hay co.cc vì sao? Vì khi gặp sự cố thì bao nhiêu công sức của bạn sẽ thành con số 0 , chưa kể là những điều khoảng sử dụng tên miền miễn phí gây bất lợi cho bạn và họ sẽ lấy tên miền của bạn bất cứ lúc nào mà họ muốn. Đặc biệt những blogger chuyên nghiệp hay những người thông thạo về IT thì họ rất ghét và coi thường những blog có tên miền miễn phí, thà để nguyên còn có gia trị hơn.

Tôi chỉ có thể chỉ cho bạn cách cài đặt tên miền của công ty Godaddy mà thôi vì tôi chưa bao giờ dùng hàng Việt nên không rành lắm, nhưng tôi nghĩ nó cung tương tự nhau.

Chú ý: Có thể tên miền của bạn phải mất đến 48h mới có thể hoạt động.

Bước 1: Mua tên miền (yêu cầu bạn phải có thẻ Visa hoặc tài khoảng Paypal). hoặc bạn có thể mua tên miền ở các công ty Việt Nam.

http://www.godaddy.com đây là nhà cung cấp tên miền và host hàng đầu thế giới bời vậy bạn yên tâm về chuyện thanh toán.

Bước 2: Cài đặt tên miền gồm hai phần: Phần trên blog và phần trên trang web mà bạn mua tên miền.

A. Cài đặt trên blog

Bạn vào menu "Cài đặt" >>> chọn menu con "Xuất bản" >>> chọn

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Từ sau khi hoàn thiện thủ thuật "Recent posts" hiện thị giống trang tin247.com, mình nảy ý định hiển thị nhiều kiểu khác nhau cho các bài viết trong widget "Recent posts". Tức là bài này hiển có kèm ảnh thumbnail , bài khác thì chỉ hiển thị tiêu đề... Với cách này, tiện ích Recent posts của chúng ta sẽ không còn đơn điệu nữa.

Lưu ý mẫu này phù hợp với BLog có phần Main (bài đăng) rộng khoảng 660Px. những Blog bài đăng có main nhỏ hơn thì cần phải có chút hiểu biết về CSS mới có thể áp dung rễ ràng được:

Các bạn có thẻ xem Demo:

Demo for Post

 

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

 Thủ thuật này sẽ xuất hiện 2 phần 1 là danh sách bài liên quan có hình ảnh và một đoạn trích và 1 phần nữa là danh sách bài đăng ở dưới. ngoài ra hiện ngày tháng đăng bài khi chỉ chuột vào bài đăng.

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Bạn đăng nhập vào blog trong phần chỉnh sửa mẫu, bạn đặt đoạn code bên dưới vào trước thẻ </head>
Xem demo

  <style type="text/css">
    /* IE7 fix */
    div #emot_list table {
    overflow:scroll;
    position:static;
    }

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Đưa một sitemap vào blog chỉ dành cho blog đã có số lượng bài viết tối thiểu 26 bài viết và bạn sử dụng địa chỉ : http://www.têncủamình.blogspot.com. 
Điều này sẽ giúp bạn tìm thấy mình trên google search. Đi sâu hơn về vấn đề tìm kiếm thì bạn phải tìm hiểu rất nhiều, Blog cá nhân mà không cần quan tâm nhiều, chỉ cần vài bước để google search biết đến mình là được rồi.

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Đây là một Tab đa tập lệnh cho phép bạn tổ chức thường xuyên nội dung blog (WEB) vào một thẻ giao diện, với nội dung mong muốn xuất hiện khi nhấn vào tab đó, với việc này bạn có thể tiết kiệm không gian của blog(web) của bạn. Code sử dụng CSS và Javascript, và code còn hỗ trợ tính năng thẻ tab được chọn mặc định, tự động chuyển sang thẻ khác với thời gian được chọn sẵn.
Ở đây mình giới thiệu 3 lọai tab:
A. Lọai 1:
Hình minh họa:

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Đối với các Blogger ưa “táy máy” thì việc “vọc” code không những là thú vui mà còn là sự đam mê, là nơi cho những ý tưởng đầy sáng tạo thỏa sức bay bổng.

Không những vậy, nó thậm chí còn có thể mang lại lợi nhuận không nhỏ một khi bạn đã trở thành một Pro Blogger Designer, bằng việc bán Template, bán back-link,…

Tuy nhiên, để trở thành một Pro Blogger Designer không phải một sớm một chiều mà được. Và trong bài viết bên dưới, iTechPlus sẽ giới thiệu đến các bạn mới gia nhập Blogspot, một số mẹo nhỏ cơ bản trong quá trình thiết kế Template cho riêng mình.
1. Xóa thanh Navbar :
Thanh Navbar là thanh chứa các công cụ như Tìm kiếm, theo dõi, chia sẻ, báo cáo lạm dụng,…xuất hiện phía trên cùng của Blog.

Cách loại bỏ : chèn dòng code bên dưới trước thẻ đóng </b:skin>

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Chỉ với 1 dòng lệnh kết hợp với các thẻ div là bạn có thể tạo 1 button cho phép ẩn hiện nội dung của bạn khi click vào nó. Thủ thuật này ta thường thấy trong các forum ,web , blog...Các bạn xem đoạn code sau đây nhé.

.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Bài viết hướng dẫn bạn tạo Popular Posts có giao diện như hình dưới. Ban đầu mình định sử dụng CSS 3 tuy nhiên vì muốn hiển thị cả trên IE7 nên lại chuyển về CSS 2, trong đó thì việc đánh số là CSS 2.1 nên trên IE7 không có đánh số thứ tự.

.

Đọc tiếp...

Xem bài viết trên phiên bản di động