Bài đăng

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

Tab recent posts giống trang quantrimang.com.vn

Hình ảnh
Tiện ích recent posts kì này khác với tiện ích VnE Tab Recent posts . Nhưng ở bản lần này sẽ có 2 điểm khác biệt, đó là các bạn có thể tùy chỉnh số bài viết có ảnh thumbnail, và điểm chú ý ở thủ thuật này là sẽ có ảnh gif minh họa cho bài viết mới. Mới ở đây là trong phạm vi 1 ngày. Hình ảnh minh họa: DEMO - Theo yêu cầu thì tiện ích có 2 phần, 1 phần hiển thị bài viết có ảnh thumbnail, phần 2 là các biết viết dạng list. Như đã nói ở trên, các bài viết xuất bản trong ngày sẽ có ảnh gif chú thích là bài viết mới. Nếu số bài viết hiển thị dạng thumbnail là 1 thì bạn cần phải có ít nhất 2 bài viết được xuất bản trong ngày thì ảnh gif minh họa mới hiển thị. - Biến list1 để tùy chỉnh số bài viết dạng thumbnail, và còn lại sẽ là dạng list. * Sau đây là các bước thực hiện : 1. Vào bố cục 2. Vào trang phần tử 3. Tạo widget HTML/javascript ở nơi bạn muốn hiển thị và dán code của thủ thuật vào: <style type="text/css"> .wbox {background-color:#ffffff;width:auto;h
Đọc thêm

Style mới cho tiện ích VNE Recent Posts

Hình ảnh
Ở bài viết trước, Namkna đã giới thiệu đến bạn đọc tiện ích Recent Posts mang phong cách VNExpress , nằm trong bộ sưu tập những Style Recent Posts mang phong cách báo chí. Nhận thấy đây là một style rất hay và chính iTechPlus cũng từng sử dụng nó cho một Blog cá nhân của mình với một số tùy chỉnh. Và cũng theo yêu cầu của một số bạn là làm sao cho tiện ích trông bắt mắt hơn, thân thiện hơn với các SE, nên hôm nay iTechPlus sẽ chia sẻ đến các bạn một “biến thể” của style này. Những nét mới : Giao diện : bắt hơn so với style cũ   Khả năng SEO : thân thiện hơn với các SE do chèn thêm thuộc tính Alternate cho Images Cài đặt đơn giản hơn Thêm liên kết “xem thêm” kèm hình ảnh nhỏ xinh Hình minh họa :   Style cũ Style mới Thực hiện : Rất đơn giản, bạn chỉ cần tạo một widget HTML\JavaScript và chèn vào đó đoạn code bên dưới: <style type="text/css"> .fl{float:left} .fr{float:right} .folder{width:516px; margin-bottom:8px; overflow:hidden; line-h
Đọc thêm

Tạo widget “Logo Exchange” ở footer cho blogspot

Hình ảnh
Việc trao đổi logo với nhau là 1 cách rất tốt để quảng bá blog của mình tới mọi người, đa phần các logo liên kết này đều được đặt ở footer. Hôm nay theo yêu cầu của bạn NguyenSon , mình sẽ giới thiệu cho các bạn 1 khung để chèn các logo liên kết vào. Với khung “logo exchange” này, các logo liên kết sẽ được chạy lần lượt từ phải qua trái với 1 chút hiệu ứng từ javascript. Xem DEMO trên blogspot * Và sau đây là các bước thực thủ thuật : 1. Vào bố cục 2. Vào phần tử trang 3. Tạo widget HTML/javascript ở footer rồi dán code bên dưới vào: <style type="text/css"> .box { float: left; border-top:2px solid #ddd; border-bottom:2px solid #ddd; background:url(http://data.fandung.com/blog/demo/logo-exchange/bg-banner.png) no-repeat top left; padding-left:45px; } </style> <script type="text/javascript" src="http://data.fandung.com/blog/demo/logo-exchange/logo-footer.js"></script&
Đọc thêm

Hướng dẫn đổi Label Tiếng Anh thành Tiếng Việt

Hình ảnh
Như chúng ta đã biết, nhãn trong blogspot dùng để phân lọai bài viết. Đối với các blogspot tiếng việt thì việc đặt tên nhãn là tiếng việt sẽ tốt hơn cho các đọc giả. Tuy nhiên việc đặt tên nhãn là tên tiếng việt cũng có vài bất tiện, ví dụ như 1 số widget hiển thị không tốt với tiếng việt chẳng hạn. Nếu nhãn là tiếng anh thì không có trở ngại gì cho việc tạo các widget có liên quan đến các nhãn. Với các lý do đó, hôm nay mình sẽ giới thiệu thủ thuật đổi tên hiển thị của nhãn từ tiếng anh sang tiếng việt. Hình ảnh minh họa: * Sau đây là các bước thực hiện : 1. vào bố cục 2. vào chỉnh sửa code HTML, nhấp chọn “ Mở rộng mẫu tiện ích ” , và tìm tất cả các đọan code như bên dưới : <data:label.name/> 3. Và thay thế tất cả chúng bằng đọan code như bên dưới : <b:if cond='data:label.name == &quot;Blogtips&quot;'>Thủ Thuật Blog<b:else/> <b:if cond='data:label.name == &quot;Announcement&quot;'>Thông Báo<b:else/> <data:la
Đọc thêm

Hiển thị thời gian tải trang cho Blogspot

Hình ảnh
Hôm nay, namkna sẽ hướng dẫn các bạn tạo một widget đơn giản hiển thị thời gian tải trang web của bạn. thủ thuật được đăng bởi mothuthuat -Bước 1:  Đăng nhập vào blogger –> Thiết kế –> Chỉnh sửa HTML ( đánh dấu check vào Mở rộng Mẫu Tiện ích ), sau đó tìm kiếm ( Ctrl + F ) với <head> . Copy đoạn code bên dưới và paste vào phía dưới thẻ <head> <!--Star Page load timer --> <script type='text/javascript'> var d = new Date(); var starttime = d.getTime(); </script> <!-- End Page load timer --> -Bước 2:  Tìm đến thẻ </body> và copy đ0ạn code bên dưới vào trước thẻ </body> <!-- START page load timer --> <script type='text/javascript'> var d2 = new Date(); var endtime = d2.getTime(); var totaltime = (endtime - starttime)/1000; var result = Math.round(totaltime*100)/100; document.getElementById(&quot;loadtime&quot;).innerHTML = &quot;Page loaded in: &quot;+ result +&quot; seconds&quot;
Đọc thêm

Đưa link bài viết lên các trang mạng xã hội

Hình ảnh
Nói đến mạng xã hội có lẽ facebook khá thịnh hành ở Việt Nam. Nếu bạn có một blog cá nhân, đôi khi muốn đưa link bài viết lên một số trang mạng xã hôi, điển hình là facebook để giới thiệu với mọi bạn bè, người thân. Lúc đó bạn sẽ làm việc này bằng tay để đưa link lên facebook , hôm nay tuananhg sẽ giới thiệu với các bạn một widget để đưa link giới thiệu nhanh chóng lên facebook và nhiều trang nổi tiếng khác. Bây giờ chúng ta bắt đầu nhé ! Đăng nhập vào blogger –> Thiết kế –> Phần tử trang –>Thêm tiện tích loại HTML/JavaScript và copy code bên dưới vào. <a href="http://web.informer.com/button/providers/list"><img id="Webinformer_FavoritesButton_Button" src="http://s.web.informer.com/b2.gif" alt="Web Informer Button" style="border: 0" /></a></div><div><script src="http://s.web.informer.com/favorites-button.js?glass" type="text/javascript" charset="UTF-8">
Đọc thêm

Thêm nút Like cho comments Blogger

Hình ảnh
Google vừa bổ xung Google +1 vào Blogger và có vẻ như nút +1 này nhanh chóng chiếm được cảm tình của đông đảo Blogspotter. Google +1 thực hiện chức năng đánh giá cho bài viết, trang tĩnh, trang chủ hoặc trang lưu trữ, vậy còn comments? Chúng ta đều biết đến nút Like nổi tiếng đã trở thành thương hiệu của Facebook, thậm chí họ còn đăng ký bản quyền cho nó. Hoặc không kể đâu xa, "người đóng thế" Disqus cũng có 2 lựa chọn Like và Dislike trong comments. Chẳng còn gì nhanh chóng hơn 1 click Like để thay lời cảm ơn cho comment bạn thích mà đôi khi viết ra thì thấy cụt lủn, không viết thì "thâm tâm day dứt". Ngoài Hiển thị Xếp hạng theo Dấu sao (Star Ratings) hẳn bạn biết có 1 tiện ích đánh giá bài viết với nhiều lựa chọn hơn đó là Phản ứng (Reactions). Bài viết này sẽ giúp bạn đưa tiện ích đó vào đánh giá từng comment. Tìm trong template thẻ <data:comment.body/> . Sẽ có 2 thẻ như vậy, thẻ đầu tiên để hiển thị thông báo comment đã bị xóa và chắc hẳn
Đọc thêm

Tiện ích tra từ trực tuyến trên Website

Hình ảnh
I. GIỚI THIỆU Tính năng mới mà Baamboo Tratu phát triển, cho phép user có thể   tra từ trực tiếp ngay trên trang web . Để tra nghĩa của một từ bất kì trên trang web, người dùng chỉ cần giữ   phím Ctrl và kích đúp chuột   hay giữ   phím Alt và click chuột   vào từ đó, nghĩa của từ sẽ hiện ra ngay bên cạnh. Đây là tính năng rất tiện dụng, đặc biệt là cho các trang web đa ngôn ngữ. Dữ liệu được truy xuất trực tiếp từ cơ sở dữ liệu của Baamboo Tratu (http://tratu.vn) – trang web từ điển trực tuyến lớn nhất hiện nay, với các bộ từ điển lớn:   Anh – Pháp – Việt – Nhật…   và hơn   20 từ điển chuyên ngành   khác. Tính năng này hiện đã được cài đặt trên tratu. II. CÁCH SỬ DỤNG Bước 1 Để sử dụng tính năng này,   Webmaster   cần   chèn vào trước thẻ </body> của trang web   đoạn scripts sau: <script language='javascript' src=" http://tratu.vn/plugin/tratu4web_min.js " charset="utf-8"></script> Bước 2 Sau khi thực hiện xong thao tác trên, quay trở ra  
Đọc thêm

Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar

Hình ảnh
Đoạn code dùng để ản hiện một tiện ích trên Sidebar do thuthuatblo g viết Xem Demo . Bây giờ chúng ta cùng bắt đầu thực hành nhé. Bước 1. Sử dụng javascript bên dưới để tạo hiệu ứng, đặt code trước thẻ </head> . <script type="text/javascript"> //<![CDATA[ // Hide and Show Toggle Effect Script. Please keep www.thuthuatblogger.info source for your using in any ways function toggle( targetId ) { var state = 0; var blockname = "block" + targetId; var blockimage = "blockcollapse" + targetId; if ( document.getElementById ) { target = document.getElementById( blockname ); if ( target.style.display == "none" ) { target.style.display = ""; state = 1; } else { target.style.display = "none"; state = 0; } document.getElementById( blockimage ).src = state ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh01daVDeknSG0Dx1G84_DYQyalDbZ1Q9VSh3a0FOwBsUfbKELBu9Qhq-3JUUAG6Bel3IR8nz3jdzuDxroG_cRmlvfG722Wqax
Đọc thêm

Kéo và thả hình ảnh và các thành phần khác

Hình ảnh
Chúng ta đã biết cách kéo tiện ích qua bài viết này . Áp dụng rộng hơn với sự hỗ trợ của thư viện Scriptaculous, chúng ta có thể tạo thủ thuật kéo và di chuyển hình ảnh và các thành phần khác. Thủ thuật này áp dụng cho cả website thông thường và blogspot. Bước đầu tiên là đặt đoạn code sau đây vào trước thẻ </head> . (Nếu trong Template của bạn đã có đoạn code này rồi thì không cần thêm vào) <!-- Prototype and Scriptaculous--> <script type='text/javascript' src='http://www.google.com/jsapi'/> <script type='text/javascript' > google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;); google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;); </script> Bước tiếp theo, bạn cần đặt id cho hình ảnh, ví dụ image1, image2, image3, … và sử dụng cấu trúc như sau cho hình ảnh. <img id=" image1 " style="cursor:move; border:0px;" src=" URL_hình ảnh 1 "/><script type="
Đọc thêm

Kéo tiện ích sử dụng Scriptaculous

Hình ảnh
Có khi nào bạn nghĩ mình có thể dùng con trỏ kéo một tiện ích nào đó trên blog của mình đến một vị trí khác trên trang? Liệu điều đó có thể thực hiện được hay không? Tại sao không thể tạo ra thủ thuật có tác dụng như thế để nghịch trên blog một chút. Thủ thuật kéo tiện ích giúp chúng ta nghịch ngợm với blog một chút và khiến cho việc chơi blog trở nên thú vị hơn. Để tạo thủ thuật này, tôi có sử dụng đến thư viện Scriptaculous. Xem Demo . Nếu bạn thích nghịch và vọc thủ thuật này thì hãy thực hiện theo các bước sau. Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt trước thẻ </head> với đoạn code sau đây. <script src='http://www.google.com/jsapi'/> <script> google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;); google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;); </script> Lưu Template. Bước 2. Lúc này bạn cần xác định id của một tiện ích HTML/JavaScript nào đó mà bạn muốn áp dụng thủ thuật
Đọc thêm

Xóa đường viền của ảnh cho Blogspot

Hình ảnh
Đây là một trong những kiến thức cơ bản về CSS, ở đây mình cũng xin giới thiệu cho các bạn chưa biết. Những ai biết rồi thì bỏ qua đừng chém mình nha (thủ thuật áp dụng cho nhưng template mặc định sẵn thuộc tính border cho ảnh). Thực ra bình thường trong blog, nếu ta muốn post ảnh, thì chỉ cần đặt trong thẻ <img src="{link ảnh}"/> Ảnh minh họa : Là mặc định nó sẽ không có đường viền bao quanh ảnh. Khi muốn tạo đường viền bao quanh ảnh thì ta chỉ cần thêm thuộc tính border vào là xong. Ví dụ: <img src=" {link ảnh} " border="1" /> Ảnh minh họa: Tuy nhiên đối với 1 số template, mặc dù ta không gán thuộc tính border cho ảnh, nhưng ảnh post ra vẫn có dường viền bao quanh. Bạn cố gắng thêm thuộc tính border="0" vào để làm mất border của ảnh nhưng vẫn không có tác dụng. Điều này là do CSS trong tempate của bạn đã mặc định sẵn thuộc tính này. Như vậy chỉ còn cách vào CSS gỡ bỏ thuộc tính này mà thôi. Mình đã test thử với blog của mình, tr
Đọc thêm

Hướng dẫn tổng quát việc chèn Flash vào header

Hình ảnh
Bài viết này mình sẽ hướng dẫn chi tiết cho các bạn (nhất là những bạn mới làm quen với blog) cách chèn Flash vào header. Bài viết sẽ tổng hợp từ nhiều thủ thuật khác nhau như : ẩn title & description của header, tạo phần "Thêm tiện ích" cho header, chèn flash vào blog... Để thực hiện bài này, các bạn sẽ thực hiện 3 bước sau : 1. Ẩn title và description của header : - Thông thường khi chưa chỉnh sửa nhiều phần Header của 1 blog mới sẽ có dạng như bên dưới : - Để chèn flash vào ta phải xóa hoặc ẩn phần header cũ này đi. Tốt nhất ta sẽ ẩn nó đi, để ẩn nó, các bạn vào thực hiện các bước sau : + Vào bố cục + vào chỉnh sửa code HTML + tìm đoạn code sau : #header h1 { ... ... ... } #header .description { ... ... ... } + thêm đoạn code in đậm vào để ẩn nó đi : #header h1 { ... ... ... display:none; } #header .description { ... ... ... display:none; } + save template. - Mở blog lên ta sẽ thấy phần header đã biến mất, như bên dưới: 2. Tạo phần "Thêm tiện ích" cho
Đọc thêm

Gửi bài viết cho bạn bè qua yahoo

Hình ảnh
Bài viết giới thiệu việc thêm các tiện ích như : gửi bài viết cho bạn bè qua yahoo, tạo button in trang, tạo bookmark cho bài viết... Nhưng ở bài viết này mình sẽ chỉ giới thiệu thủ thuật gửi bài viết cho bạn bè qua yahoo. Còn 2 thủ thuật kia mình đã giới thiệu rồi. Đây là hình ảnh minh họa mình đã thực hiện: ☼ Tham khảo thủ thuật tạo button in bài viết ở đây . ☼ Tham khảo thủ thuật tạo thanh bookmark ở đây . ☼ Thủ thuật tạo tiện ích gửi bài viết qua yahoo: Ở đây mình sẽ giới thiệu 2 cách : A. Cách 1 : dạng button (nút nhấn) , dạng này tự động, ta không phải copy. Khi nhấn vào button , ta sẽ hiện ra hộp thoại như bên dưới: Chọn vào Yahoo! messenger » nhấn OK . Nếu bạn đang mở Yahoo nó sẽ đưa bạn tới list như bên dưới: Chọn người bạn muốn gửi và nhấn OK , nó sẽ đưa bạn tới hộp thoại chat, như bên dưới: B. Cách 2 : tạo 1 vùng text hiển thị sẵn tựa đề và link bài viết, bạn chỉ copy và gửi cho bạn bè. ☼ Sau đây là cách thực hiện: - 2 Cách mình sẽ hướng dẫn thực hiện chung: 1. V
Đọc thêm

Thay đổi các kí tự đầu dòng của danh sác bằng hình ảnh và biểu tượng

Hình ảnh
Các bạn đã khá quen với việc dùng công cụ đánh số thứ tự bài viết khi sọan thảo (ví dụ : 1,2,3 ... hay các dấu chấm đầu mỗi list), bài viết hôm nay hướng dẫn 1 thủ thuật nhỏ giúp bạn thay đổi nó.(ví dụ : A, B, C... hay I, II, III... ). ☼ Với dạng kí tự (chữ hoặc số) Ví dụ ta có đoạn văn bản như bên dưới: và code của nó là như thế này : Thay đổi style cho list: <ol> <li>Dạng 1</li> <li>Dạng 2</li> <li>Dạng 3</li> <li>Dạng 4</li> </ol> - Để thay đổi style cho list, ta chỉ cần thêm thuộc tính type="{kí tự}" vào thẻ <ol> là xong. Ví dụ như bạn muốn chuyển các số 1,2,3,4 thành A,B,C,D thì ta chỉ việc sửa thẻ <ol> lại thành <ol type="A" > là xong. xem ví dụ bên dưới. và code của nó là như thế này : Thay đổi style cho list: <ol type="A"> <li>Dạng 1</li> <li>Dạng 2</li> <li>Dạng 3</li> <li>Dạng 4</li> </ol> Dưới đây là
Đọc thêm