Blog Trung Hi

Một thao tác nhỏ giúp bạn trang bị cho mình tiện ích  Mega Menu nhỏ gọn, không chiếm nhiều diện tích của blog và thật chuyên nghiệp. Cách thức hoạt động đơn giản và bạn hoàn toàn có thể dễ dàng tùy biến sao cho phù hợp nhất với sở thích của mình. Cut & Paste Mega Menu Trang chủ:   Cut & Paste Mega Menu Các bước thực hiện Bước 1: Các bạn dán đoạn code sau vào trên thẻ đóng </head>. Lưu ý đây là thư viện JQuery, nếu blog của bạn đã có thư viện này thì không cần thực hiện bước này nhé! <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> Bước 2: Thêm đoạn code sau vào trên thẻ đóng  ]]></b:skin> .megamenu{position:absolute;display:none;left:0;top:0;background:white;border:1px solid #f06b24;border-width:5px 1px;padding:10px;font:normal 12px Verdana;z-index:100} .megamenu .column{float:left;width:180px;margin-right:5px} .megamenu .column ul{margin:0;padding:0;list-style-type:non

Một thao tác nhỏ giúp cho blog của bạn trở lên gọn gàng, khoa học hơn. Hơn nữa với cách làm này, đảm bảo tốc độ tải trang sẽ không bị ảnh hưởng, mình sẽ hướng dẫn các bạn cách tạo dạng Dropdown Menu cho tiện ích nhãn-label Blogspot. Các bước thực hiện Bước 1:   Các bạn vào  Bảng quản trị Blogger →Bố cục →Thêm tiện ích HTML/Javascript →Thêm một tiện ích nhãn (Label) đặt vào vị trí phù hợp với mong muốn của bạn nhé! Bước 2: Một lần nữa bạn vào  Bảng quản trị Blogger →Mẫu →Chỉnh sửa HTML →Chuyển đến tiện ích →Label1 Thay toàn bộ đoạn code mình đã đánh dấu bên dưới nhé, với blog của bạn đoạn code này cũng sẽ giống như vậy chỉ khác title do bạn đặt. Lưu ý: Thay toàn bộ code từ <b:widget ... </b :widget> <b:widget id='Label1' locked='false' title='Chuyên mục bài viết' type='Label'> <b:includable id='main'>  <b:if cond='data:title'>  <h2><data:title/></h2>  </b:if>  <div class='widget-co

Tiện ích Recent Posts với hiệu ứng trượt dọc chuyên nghiệp sẽ giúp cho người đọc cảm thấy thú vị khi đến với blog của bạn. Họ sẽ không có lí do gì mà không thử click xem bài viết đó, mình sẽ giới thiệu sau đây tiện ích này. Xem trước DEMO   Cách 1 Bước 1:   Các bạn vào Bảng quản trị Blogger →Mẫu →Thêm đoạn code sau trên thẻ  ]]></b:skin>. #recent-list{overflow:hidden;margin-top:5px;padding:0 0;height:350px} #recent-list ul{width:100%;overflow:hidden;list-style-type:none;padding:0 0;margin:0 0} #recent-list li{padding:5px 5px;margin:0 0 5px;list-style-type:none;float:none;height:70px;overflow:hidden;background:#fff url() repeat-x;border:1px solid #ddd;white-space:nowrap;text-overflow:ellipsis} #recent-list li a{text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;margin:0 0;padding:0 0 2px} #recent-list li img{float:left;margin-right:5px;background:#EFEFEF;border:0} .recent-date{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0;margin:1px 0 0

Ở bài trước mình có giới thiệu đến các bạn tiện ích Nhận xét mới (Recent Comments) đẹp có Avatar cho Blogspot , tuy nhiên mẫu này khi áp dụng đối với một số Blog thì gặp một số lỗi về hiển thị. Vậy nên, mình sẽ hướng dẫn các bạn tạo cho blog của mình tiện ích này với mẫu 2 đã được mình tối ưu. Nhận xét mới (Recent Comments) đẹp có Avatar cho Blogspot Preview Các bước thực hiện Có 2 cách để bạn tạo cho mình widget  Recent Comments cho blog. Cách 1:  Các bạn vào Trang quản trị của Blogger →Trang →Trang mới →Chuyển chế độ soạn thảo HTML →Dán đoạn code sau và lưu lại. Cách 2: Nếu như bạn không muốn tạo wiget này ở 1 trang riêng, mà muốn nó hiện ở trang chủ thì thực hiện các thao tác sau:  Các bạn vào  Trang quản trị của Blogger →Bố cục →Thêm tiện ích →HTML/Javascript →Dán đoạn code sau và lưu lại. <div dir="ltr" style="text-align: left;" trbidi="on"> <div class="widget-content"> <style type="text/css"> ul.recent_comments{l