Thứ Ba, 26 tháng 10, 2010

Thứ Ba, 5 tháng 10, 2010

Cách tạo các bài liên quan

Chắc hẳn các bạn cũng biết, ở các trang tin tức như vnexpress.net, dantri.com.vn,... mỗi khi ta mở xem một tin nào đó, thì ở dưới mỗi bài viết đều có các tin tức liên quan hiện ra. Điều đó là cho người đọc có thể xem nhanh các bài liên quan mà không phải ngồi mài mò, tệ hơn họ có thể không thấy được các bài viết khác có cùng chủ đề trong blog của bạn. Blogspot mặc định không hỗ trợ tính năng này. Tuy nhiên bạn đừng lo, bài viết sau sẽ giúp bạn chèn thêm nó. Đây là một thủ thuật của Hoctro (hoctro.blogspot.com), tôi trình bày lại chi tiết hơn và chỉ biến đổi chút đỉnh cho phù hợp với blogspot của bạn.




- Trước tiên, bạn vào 
Template -> Edit HTML, nhớ sao lưu một bản Full Template trước khi chỉnh sửa.
- Click chọn 
Expand Widget Templates
- Bấm 
Ctrl+F để bật hộp tìm kiếm của trình duyệt, xong gõ từ khóa cần thiết đề tìm dòng 
class='post-footer-line post-footer-line-3'


- Chèn đoạn 
CODE 1 này ngay dưới thẻ   </div> thứ hai và bên trên dòng </b:includable>
CODE 1:
<b:if cond='data:blog.pageType == "item"'><div class='widget-content'><h2>Các bài liên quan</h2><div id='data2007'/><br/><br/><div id='hoctro' style="display:none">Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u></div>&lt;script type=&quot;text/javascript&quot;&gt;homeUrl3 = &quot;vietwebguide.blogspot.com&quot;;maxNumberOfPostsPerLabel = 5;maxNumberOfLabels = 10;
function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+21);label = decodeURIComponent(label);var txt = document.createTextNode(label);var h = document.createElement(&#39;h4&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;data2007&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;
var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) { labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop>&lt;/script&gt;</div></b:if><br/>
*** Lưu ý: Trước khi Copy và Paste vào template, các bạn hãy thay các thông số màu đỏ cho phù hợp. Cụ thể:
Các bài liên quan: tiêu đề mà bạn thích
vietwebguide.blogspot.com : địa chỉ blog của bạn
+ maxNumberOfPostsPerLabel = 
10 : số bài tối đa của mỗi label mà bạn muốn hiện
+ maxNumberOfLabels = 
5 : số label tối đa mà bạn muốn hiện

Save template lại. Thế là xong rồi đó.

Ẩn hoặc xóa thanh điều khiển (Navbar) của blogger


Thanh Navbar nằm ngang trên cùng blog. Nếu bạn đang dùng mẫu của trình thiết kế của Blogger. Rất đơn giản để xoá nó.

Xóa hoàn toàn thanh Navbar

VnTim™  ^-^  Thủ thuật ẩn thanh Navbar là 1 trong những thủ thuật cơ bản mà bất cứ ai muốn blog của mình pro hơn đều biết. Và thủ thuật này mình cũng đã giới thiệu với các bạn từ rất lâu rồi. Hôm nay mình tình cờ tìm được 1 thủ thuật khác để làm ẩn thanh Navbar này đi.



Thủ thuật lần trước (có thể xem thêm ở đây) là ẩn thanh navbar. Đúng với tên gọi của thủ thuật, thanh Navbar vẫn tồn tại ở trên blog của bạn, nhưng nó chỉ bị ẩn đi, tức là blog vẫn load thanh Navbar,và các công dụng của nó vẫn còn trên blog. Còn ở thủ thuật lần này ta sẽ xóa hẳn thanh Navbar.
* 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
3. Tìm đến dòng code <body> và chèn vào trước nó đọan code bên dưới :
<!--
/*<body>*/
-->
4. Sau khi chọn save template, ngay lập tức 1 bảng thông báo sẽ hiển lên như bên dưới

và các bạn chọn Delete Wigets để xóa nó đi.
5. Và như vậy thanh Navbar đã bị xóa hòan tòan khỏi blog của bạn.(ko tải về khi bạn xem blog)
- Trước kia, khi ẩn thanh Navbar thì các công cụ chỉnh sửa của blog như : Chỉnh sửa bài viết Xóa hoàn toàn thanh Navbarchỉnh sửa widget edit widget - mothuthuat.com vẫn sẽ hiển thị khi bạn đăng nhập quyền Admin của blog, nhưng ở thủ thuật này thì nó sẽ không còn xuất hiện nữa. Chính vì vậy khi bạn muốn chỉnh sửa bài viết hay widget thì bạn phải thực hiện trong trang Admin của bạn.
- Nếu như bạn không thích điều này, và muốn chỉ ẩn thanh Navbar còn các công cụ chỉnh sửa vẫn sử dụng được thì bạn chỉ việc khôi phục lại thanh Navbar, để làm điều này bạn chỉ việc làm ngược lại bước 3, tức là xóa code mà đã thêm ở bước 3.
---------------------------------


Tranhung09: Cụ thể, vị trí ở chỗ này:
</b:template-skin>
  </head> 
Vị trí chèn 
  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  <div class='body-fauxcolumns'>



Tham khảo thêm các cách khác:
Theo: Singleboy

Đối với Blogger vừa mới tạo thì bao giờ phía trên cùng cũng hiển thị thanh Navbar, thanh này chứa các lệnh như "Tìm kiếm (Search), Bài mới đăng (New post), Tùy chỉnh (Customize), Đăng xuất (Sign out)...". Đối với thanh Navbar này, bạn có thể thay đổi màu sắc của nó cho phù hợp với từng Template của blog. Tuy nhiên, để blog trông giống một trang web hơn thì bạn có thể xóa hoặc ẩn có đi một cách dễ dàng. Bạn có thể tham khảo cách sau.
Hình ảnh minh họa

☼ Cách thực hiện
1. Đăng nhập và vào bố cục blogger
2. Vào chình sửa HTML (Edit HTML)
3. Sau đó bạn dùng một trong các code sau để dán vào sau thẻ hoặc trước thẻ đóng </head>

Cách 1: Không cho hiển thị thanh Navbar
<style type='text/css'>
#navbar-iframe {
display: none;
}
</style>




Cách 2: Giảm độ cao của navbar xuống bằng 0
<style type='text/css'>
#navbar-iframe {
display: none;
}
</style>




Cách 3: Ẩn luôn thanh navbar
<style type='text/css'>
#navbar-iframe {
visibility: hidden;
}
</style>




Cách 4: Sử dụng tổng hợp các cách trên
<style type='text/css'>
#navbar-iframe{
height: 0px;
visibility: hidden;
display: none;
}
</style>





Còn một cách nữa của Mydigitallife - xoá triệt để hơn
(Tranhung09 đã áp dụng):
Hủy bỏ và ẩn navbar trong Blogger Draft 

  1. Tìm  mã sau đây:
    ]]>
    Thêm vào bên dưới, dòng mã sau đây:
    #navbar { display: none; }
    hoặc:
    #navbar-iframe { display: none !important; }
  2. Click on SAVE TEMPLATE to make the change effective. Nhắp chuột vào SAVE TEMPLATE để làm thay đổi hiệu quả.
Hủy bỏ và ẩn navbar trong Blogger Classic
Tìm kiếm với các dòng mã sau đây:
</style> 


Sau đó, thêm dòng mã sau đây trước nó:
#navbar-iframe { display: none; } 


Sau khi ẩn Bar Nav trong Blogger sử dụng Classic Template, có có xu hướng được một khoảng cách thay thế các thanh điều khiển. Khoảng cách có thể được trắng, đỏ, xanh lá cây, màu xanh, hoặc màu đen, phụ thuộc vào màu nền của bạn là những gì. Để loại bỏ các khoảng cách, tìm đoạn mã sau (thường ở gần đầu của HTML):


body { 
Thêm vào sau như mã thẻ sau khi cơ thể:


position: relative;
top: -32px; 



Chúc bạn thành công!

Cơ cấu tổ chức của mẫu Blogger Template

Trước khi thiết kế một mẫu template, bạn cần hiểu biết về cơ bản cơ cấu tổ chức của mẫu Blogger template. Về cơ bản, cấu trúc của bất kỳ các mẫu là không hoàn toàn giống nhau. Nhưng, với những hiểu biết cơ bản bạn có thể hiểu rõ được các cơ chế của mẫu blog hiện có, thiết kế được mẫu blog và có thể làm thay đổi cơ cấu tổ chức của blog.



Một vài phần cấu trúc của mẫu blog mà bạn có thể thấy hầu hết trong các blog: headers, footers, và phần bài viết. Nhưng có một số phần tạm gọi là các sections blocks hoặc containers không hiển thị trên màn hình nhưng nó là các HTML-wise quan trọng được xây dựng để mẫu blog làm việc theo đúng chức năng.
Chúng ta xem hình ở dưới, một mẫu cơ bản container bao gồm các khối như dưới: 
image
Chi tiết cụ thể bao gồm:
  1. Body: là toàn bộ viền bao outer các khối mẫu blog của bạn (nói một cách đơn giản nó là toàn bộ những thứ mà bạn nhìn thấy hiển thị trên màn hình).
  2. Outer-wrapper: nội dung này bao trùm toàn bộ mẫu blog (Body giống như là phần bên ngoài mẫu blog). Nói chung, bạn thiết kế một wrapper để chứa nhiều các block nhỏ trong đó. Các block chung hầu hết chứa trong Outer-wrapper là các Header, Content, và Footer.
  3. Header: block này là phần trên cùng của hầu hết các blog (cái tên header đã nói lên điều này một cách rõ ràng). Nhưng bên trong Header bạn có thành phần phụ khác đó là Header Title, Header Descripaion và các thành phần khác giống như banners quảng cáo, thanh trình đơn menu bar,,,. Do vậy, để chửa toàn bộ các blocks phụ nói trên trong đó thì Header nhất thiết phải được thiết kế đủ rộng để chứa chúng.
  4. Content: nằm dưới Header là Content-wrapper – đây là phần quan trọng hơn cả, chứa các thành phần quan trọng như Sidebar containers (1,2 hoặc nhiều sidebars) và phần nội dung chính (phần chứa các bài viết, nhận xét hoặc các quảng cáo).
  5. Footer: là phần nằm ở phía dưới cùng của hầu hết các mẫu. Giống như Header section, bạn cũng cần phải thiết kế Footer-wrapper để chứa các nội dung phụ trong Footer section.
  6. Main: Main-wrapper là thành phần chính nằm trong Content-wrapper. Bên trong Main-wrapper là phần bài viết, nhận xét, ngày tháng đăng bài và các tiện ích khác được tạo từ lựa chọn “Add Page Element”.
  7. Sidebar: là thành phần bao gồm các tiện ích - About Me, Labels, Archive, Text, HTML, Adsense. Trong mẫu cơ bản của Blogger template, bạn thường thấy các mẫu có 1 sidebar - hoặc 2-column (Main and Sidebar). Nhưng bạn cũng có thể dễ dàng thêm các cột Sidebar vào mẫu Blogger. Bạn cần phải hiểu rõ về chúng, trước hết là về cơ cấu tổ chức của các mẫu Blog để có thể quyết định thêm vào bên trái hay bên phải Main container các Sidebar để tạo thành mẫu 2 sidebars – hoặc mẫu 3-column.
  8. Blog Post: Đây là phần bài viết của bạn hiển thị bào gồm Tiêu đề bài viết, bài viết, tác giả, Labels, ...
Một cách khác để hiểu rõ hơn về cấu trúc mẫu blog là xem biểu thị tree bắt đầu từ nội dung lớn cho tới các phần phụ nhìn giống như:
  • Body


    • Outer-wrapper
      • Header-wrapper


        • Blog Title
        • Blog Description
        • Other widgets
      • Content-wrapper


        • Sidebar-wrapper (1,2,3...)
        • Main-wrapper
          • Date Header
          • Posts


            • Post Title
            • Post Content (or called Post Body)
            • Post Footer (Author, Labels, etc)
          • Comments
          • Feed Link
          • Other widgets (mostly ad units)
      • Footer-wrapper


        • Footer text (disclaimer, copyrights, etc)
        • Other widgets
Một khi bạn hiểu rõ cấu trúc cơ bản này, nó sẽ giúp bạn dễ dàng hơn để bắt đầu học tập về cấu trúc mã Blogger. Học mã cấu trúc không phải là học tập về HTML hay CSS, nhưng khi hiểu rõ mã mẫu Blogger được tổ chức ra sao sẽ giúp bạn thùy chỉnh mẫu một cách khá nhiều chỉ với những kiến thức cơ bản nhất. 
Hướng dẫn tiếp theo: sẽ giúp bạn Tìm hiểu cấu trúc mã code của mẫu Blogger

Nguồn: VnPressNet
Girls Generation - Korean