Bài đăng

Hiển thị các bài đăng có nhãn Blogspot-tips

Tạo thông báo Blog đang bảo trì để chỉnh sửa Template

Hình ảnh
Khi việc chỉnh sửa blog của bạn hơi lâu, mất nhiều thời gian, hay ảnh hưởng nhiều đến giao diện của blog, hoặc khi bạn muốn bảo trì, dọn dẹp hay nâng cấp blog của mình mà không muốn người khác ghé thăm blog của mình thì có rất nhiều cách để thực hiện: Cách 1: bạn có thể cấp quyền cho blog. Và phần cài đặt - quyền - kéo xuống dưới phần ai có thể xem blog và click chọn "Chỉ cho tác giả" . xem hình minh họa bên dưới: Cách 2: Tuy nhiên với cách này không mấy tiện lợi khi người khác ghé thăm vào blog, và một số người không biết blog bạn đang bảo trì hoặc tưởng rằng blog bị xóa, sẽ làm giảm lượng truy cập cho blog. Vì vậy cần phải tạo một thông báo cho việc bảo trì của bạn. Để làm điều này ta chỉ cần chèn vài đọan code nhỏ vào template là xong. 1. Đăng nhập blog 2. Vào Bố cục ( Layout ) 3. Vào chỉnh sửa code HTML( edit code HTML ) 4. Chèn code sau vào sau thẻ mở <body> : {NỘI DUNG THÔNG BÁO CỦA BẠN - có thể dùng hình ảnh, hay 1 đọan thông báo...} <span class=

Gắn biểu tượng chát Yahoo vào WEB

Hình ảnh
Bạn thường thấy Biểu tượng liên kết chát Yahoo ở trên các website dưới dạng Hỗ trợ trực tuyến. Và đa phần các style này đều giống nhau. Hôm nay mình sẽ giới thiệu các style khác cho các bạn. Dưới đây là các style mà Y!M cung cấp: Bấm đây nếu không xem được hình Còn đây là code dán vào WEB: <a href="ymsgr:addfriend? YOURID "> <img src="http://opi.yahoo.com/online?u= YourID &m=g&t= StyleID " border="0"> </a> Trong đó : YOURID : là nick Y!M của bạn. YourID : là style mà bạn muốn hiển thị. Chúc thành công! theo: Fandung

Script làm thay đổi màu link liên kết

Hình ảnh
Với Script này sẽ tạo ra hiệu ứng thay đổi màu chữ liên tục của link chứa liên kết khi ta rê chuột vào. Script này hiển thị gần 10 màu sắc khác nhau khi ta rê chuột vào. Hình ảnh minh họa: Để làm việc này, rất đơn giản: 1 . Đăng nhập blog 2. Vào Chỉnh sửa code HTML 3 . Copy đọan Script bên dưới vào ngay bên dưới thẻ mở <head> <script src='http://rias.techno.wizard.googlepages.com/rainbow2.js'/> 4. Save template. Lưu ý : về việc sử dụng link trực tiếp của đọan Script trên, có thể nó sẽ không hiển thị được, khi đó là do hết băng thông, vì thế nếu ai có host riêng, hãy up lên host của mình rồi gắn link đó vào, hoặc up trực tiếp đọan Script đó lên blog(web) của mình. Bạn có thể Download file JS đó TẠI ĐÂY Chúc thành công! Nguồn rias.techno

Tạo list nhạc hình dạng ẩn/hiện cho Blogspot

Hình ảnh
Với cách này bạn tạo được một list nhạc dạng ẩn/hiện cho blogspot nhìn rất khoa học và đẹp mắt. Cách này được rất nhiều trang sử dụng để tăng tính thẩm mĩ cho blog. Đặc biệt không làm ảnh hưởng nhiều lắm tới tốc độ load của trang web do vậy được rất nhiều người sử dụng. - Để tạo được bạn làm như sau: - bạn vào Thiết kế -> Phần tử trang -> Thêm Tiện ích -> HTML/Javarscrip và dán Code dưới đây vào: .<a href=" http://www.youtube.com/watch?v=PhXVduEiyOo "> Huân Chương và đồ chơi </a> <blockquote></blockquote> .<a href=" http://www.youtube.com/watch?v=xFDw_CvKZ-M "> Cây táo tình cờ </a> <blockquote></blockquote> .<a href=" http://www.youtube.com/watch?v=_FD6oXqLnG4 "> Ông vua lùn </a> <blockquote></blockquote> .<a href=" http://www.youtube.com/watch?v=UGw8o_ZIExw "> Cậu bé thông minh </a> <blockquote></blockquote> .<a href=" http://www.you

Chèn tiện ích Photo Editor Online của pixlr.com vào blog

Hình ảnh
Tiện ích Photo Editor Online của pixlr.com có giao diện khá giống Photoshop của Adobe nhưng tính năng thì không bằng được như của Adobe . Tuy nhiên nó cũng sẽ rất hữu ích đối với những người có nhu cầu sử dụng Photoshop không thường xuyên. Không cần phải cài đặt bản PS khá nặng nề của Adobe , với chỉ vài dòng lệnh ta đã có được 1 chương trình Photo Editor Online ngay trên blog. Xem demo mình đã thực hiện : DEMO Ở đây có 2 cách để chèn iframe của pixlr.com vào blog: - 1 là các bạn dùng trang blog của mình chỉ để hiển thị tiện ích này. Như ở trang này : http://www.photoshop.tinvn.net/ - 2 là các bạn cho nó hiển thị ở 1 trang nào đó của blog. ví dụ như trong demo của mình, mình chèn nó vào 1 trang page. với cách 2 này thì có hơi phức tạp hơn 1 chút so với cách 1. Sau đây là hướng dẫn : I. Cách 1 : - vào bố cục - vào chỉnh sửa code HTML - tìm đến code CSS của id outer-wrapper và thêm đọan mã code in đậm như bên dưới : #outer-wrapper { display:none; … … … } - lưu ý về id out

Cách Upload File Flash SWF Lên Host và chèn file Flash cho Blog

Hình ảnh
File Flash làm cho blog trở nên đẹp hơn tuy nhiên một số bạn sau khi thiết kế cho mình được các file flash thì không biết Upload lên host nào để lấy link. bởi đa số các host hiện nay đều rở chứng đòi nạp tiền, mà chúng ta đâu phải ai cũng cót iền để nạp phải không. Hiện tại thì có rất nhiều host free để các bạn sử dụng nhưng tôi thường sử dụng Google Sites . Hôm nay, tôi chia sẻ với các bạn cách upload files Flash và code để các bạn chèn file Flash vào Blog. Đầu tiên, bạn VÀO ĐÂY và đăng nhập bằng tài khoản Gmail của mình. Bước kế tiếp, bạn tạo cho mình một trang Web mới (chủ yếu để mình upload file Flash nên bạn không cần chú ý đến giao diện hoặc bố cục của trang Web này). Ấn vào hình để phóng to Bạn điền đầy đủ thông tin để tạo một trang web mới Bám vào hình để phóng to Sau khi tạo được trang Web mới, bạn đăng nhập vào trang Web bấm chọn thẻ Tác vụ khác và chọn Quản lý trang Web . Bấm vào hình để phóng to Tiếp theo một trang mới xuất hiện, bạn chọn mục Tài liệu đính kèm nằm

Menu ngang xổ dọc xuống nhiều cấp (Kiểu 2)

Hình ảnh
Trước đây, tôi có đăng bài TẠO MENU  NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 1) , với kiểu này thì menu chỉ có một màu đen, chữ trắng và các bạn không thể đổi màu được. Do có một số bạn hỏi: Sao không đổi màu cho menu được?, vì vậy hôm nay tôi xin giới thiệu đến các bạn MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 2) , menu này cũng giống với menu kiểu 1 nhưng thay vào đó các bạn có thể dễ dàng đổi màu cho menu, đổi màu cho chữ trên menu... Để tạo được như vậy, các bạn cần làm theo các bước sau đây: Đầu tiên, bạn đăng nhập vào Blog > Chọn thiết kế > Chọn chỉnh sửa HTML , sau đó bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào khung dòng lệnh <head> . Bây giờ bạn copy đoạn code này và dán phía dưới dòng lệnh đó. <style type='text/css'> html .jqueryslidemenu{height: 1%;} </style><br /> <br /> <script src='http://traidatmui-tips.googlecode.com/files/jquery.min.js' type='text/javascript'/> <script src='http://tr

SEO với Heading Tab trong Blogger Template

Hình ảnh
Dưới đây là một số hướng dẫn cơ bản để làm cho Blogger Template trở nên thân thiện hơn với bộ máy tìm kiếm. Trong khuôn khổ bài viết này, namkna sẽ sử dụng template Minima để làm ví dụ. Nếu các bạn sử dụng Template khác thì sẽ vất vả hơn một chút, bởi phải hiểu được bố cục của template mình đang sử dụng cũng như cách bố trí Heading tab ( H1, H2, H3,…) trong template đó. Thực hiện như sau : Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích . Các bạn nên sử dụng tổ hợp phím Ctrl + F trên bàn phím để tìm kiếm code nhanh hơn và dễ dàng hơn. 1. Thay đổi tiêu đề bài đăng ( Post Title ) Tìm đoạn code bên dưới : <b:if cond='data:post.title'> <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data

Gắn Tem phân biệt Admin – Visitor cho Comments

Hình ảnh
Để tăng thêm phần sinh động cho Blogspot mình sẽ giới thiệu đến các bạn một thủ thuật với chức năng tương tự, đó là Gắn tem phân biệt Admin – Visitor cho Comments. Hình minh họa Các bước thực hiện : 1. Vào Thiết kế > Chỉnh sửa > Mở rộng mẫu tiện ích 2. Chèn đoạn code bên dưới trước thẻ đóng </b:skin> .authortem{font-size:10px;font-weight:700;line-height:1em;color:#FFF;float:left;margin:0;padding:1px;border:1px solid #ddd} .admintem{background:#F60;margin:0;padding:2px} .visitortem{background:#06F;margin:0;padding:2px} 3. Tìm đoạn code sau trong template : <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'> ………………… Hoặc: <p class='comment-body' style='padding-right:10px;'><data:comment.body/></p> và chèn đoạn code bên dưới vào phía trên nó : <div class='authortem'> <b:if cond='data:comment.author == data:post.author'> <div class='admint

Tạo bookmark “Sharing is sexy !”

Hình ảnh
Với thủ thuật này, các bạn sẽ có 1 thanh bookmark với hiệu ứng động nho nhỏ khi rê chuột vào icon đó. Đây là 1 plugin được viết cho wordpress bởi Josh Jones và nó được fix lại để dùng cho blogger. Cách nàu hoàn toàn khác với cách Tạo Bookmarks ở cuối bài viết mà mình giới thiệu lần trước. ☼ Các bước thực hiện : 1. vào bố cục 2. vào chỉnh sửa code HMTL 3. chọn mở rộng mẫu tiện ích Đặt đoạn code bên dưới vào sau dòng ]]></b:skin>. <style type='text/css'> div.sexy-bookmarks{height:54px;background:url('http://img191.imageshack.us/img191/8540/sharingsexys.png') no-repeat left bottom;position:relative;width:540px} div.sexy-bookmarks span.sexy-rightside{width:17px;height:54px;background:url('http://img191.imageshack.us/img191/8540/sharingsexys.png') no-repeat right bottom;position:absolute;right:-17px} div.sexy-bookmarks ul.socials{margin:0 !important;padding:0 !important;position:absolute;bottom:0;left:10px} div.sexy-bookmarks ul.socials li{dis

Tạo menu giống trang theothao.zing.vn

Hình ảnh
Bài viết này được anh Fandung viết mình giới thiệu lại cho các bạn. Lần trước mình giới thiệu Menu ngang dạng này nhưng là tích hợp với biểu tượng các lá cờ không giống với trang thể thao.zing.vn do vậy hôm nay hình sẽ hướng dẫn lại menu mới giống hơn: Xem DEMO : menu Zthethao * Sau đây là code của thủ thuật : 1. Vào bố cục 2. Vào phần tử trang 3. Tạo 1 widget HTML/javascript và dán code bên dưới vào: <style type="text/css"> .hide {display:none;} #kmenu { font-size:12px; height: 80px; background: url( http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/img/menu-bg.gif ) repeat-x; } #kmenu .kmenu-r { height: 80px; background: url( http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/img/menu-right-bg.gif ) no-repeat top right; } #kmenu .kmenu-l { height: 80px; background: url( http://data.fandung.com/blog/demo/zthetheo-menu/Zmenu/img/menu-left-bg.gif ) no-repeat top left; } #kmenu .homepage { padding: 20px 0px 0px 8px; width: 7

Hướng dẫn tạo 1 PAGE cho blogspot Bằng Bài Viết

Hình ảnh
Như các bạn đã biết tiện ích tạo trang mới giúp Blog của bạn đẹp hơn nhưng hiện tại Google chỉ cho mỗi Blog được tạo tối đa 10 trang (thông qua Bài đăng mới -> Chỉnh sửa Trang -> Trang mới) bạn có thể xem cách đó TẠI ĐÂY Cách duy nhất để tạo thêm nhiều hơn 10 trang đó là  tạo thêm 1 bài viết mới. Và lợi dụng điều này, và áp dụng các thủ thuật cũ đã đăng, hôm nay mình sẽ hướng dẫn 1 cách nhỏ để tạo thêm 1 page cho blogspot của bạn. Với thủ thuật này blog bạn sẽ ngày càng giống 1 weblog hơn. Các bạn có thể xem thử demo minh họa ở đây : http://namkna.blogspot.com/2010/07/lien-he.html Mô tả chung thủ thuật : thủ thuật này lợi dụng việc tạo thêm 1 bài viết mới để lấy link liên kết cho trang page mà bạn sẽ tạo. Tức là khi xuất bản bài viết mới, ta không cần quan tâm tới nội dung của bài viết này, có thể bạn không cần soạn nội dung của nó cũng đc, ko sao cả. Khi đã có được link, bây giờ ta sẽ tạo 1 widget HTML/Javascrip t, và soạn nội dung của page vào đó. Tiếp đến ta dùng t