Cách tạo một trang chuyên biệt cho Blogger

Như các blogger đều biết kể từ khi Blogger ra đời, nếu bạn muốn tạo một trang blog thì chỉ có một cách duy nhất là tạo một bài viết (trang item). Gần đây Blogger đã thêm tính năng mới là tạo trang tĩnh (static page) với số lượng tối đa cho mỗi Blog là 10 trang. Tính năng này phần nào giúp bạn dễ dàng hơn trong việc tạo các trang About, Contact, Terms of Use, Forum,… Tuy nhiên con số 10 trang không phải là nhiều mà đôi khi bạn còn muốn nhiều hơn thế nữa.

Thông thường trong phần thân của Blogspot có hai phần chính là phần Main-wrapper/Content và phần Sidebar (đối với Template chuẩn gồm 2 cột). Đôi khi bạn muốn tạo một trang nào đó thật nổi bật với không gian thiết kế rộng để bạn tha hồ sáng tạo ý tưởng thì bạn phải dấu đi phần Sidebar và nới rộng phần Main. Để làm được như vậy bạn cần phải làm gì?

Tại Việt Nam có blogger Phan Dũng đã giới thiệu cách tạo 1 trang cho blogspot với một số thủ thuật kết hợp khá phức tạp (đối với người mới chân ước chân ráo tìm hiểu Blogger). Thủ thuật này hiệu quả tuy nhiên phải can thiệp vào Template và sử dụng tiện ích HTML/Javascript. Bạn có thể tham khảo bài viết này tại đây.

Hôm nay tôi tin giới thiệu một cách tạo trang chuyên biệt đơn giản hơn mà hiệu quả thật lớn.

Bước đầu tiên là bạn cần tạo ý tưởng cho trang chuyên biệt mà bạn muốn tạo. Cần xác định một số thành phần trên trang phải dấu đi để có diện mạo khác những trang thông thường (item). Những phần cần ẩn đi như: sidebar, ngày đăng, phần chân bài viết, nhận xét, phân trang. Ngoài ra cần định dạng chiều rộng phần Main-wrapper (trong một số Template là Content) bằng với chiều rộng của toàn bộ phần Outer-wrapper. Lấy ví dụ phần Outer-wrapper trong Template của bạn là 900px thì bạn đặt chiều rộng phần Main-wrapper ở đây là 900px. Tựu trung lại, bạn thiết lập code cho bài viết của bạn như sau:

<p>

Nội dung code cho bài viết chuyên biệt nằm ở đây

</p>
<style>#main-wrapper {width:900px;background:white} #sidebar, .post-footer, #blog-pager, #comments,.date-header {display:none;}</style>

Bạn có thể đưa phần CSS vào trong Template theo kiểu như dưới đây, đặt sau dòng ]]></b:skin>.

<b:if cond='data:blog.url == "URL_trang chuyen biet"'>
<style>#main-wrapper {width:900px;background:white} #sidebar, .post-footer, #blog-pager, #comments,.date-header {display:none;}</style>
</b:if>

Bằng cách này bạn có thể tạo nhiều trang chuyên biệt tùy ý mà không cần phải động nhiều đến Template và không cần phải tốn nhiều thời gian loay hoay với CSS, HTML…

Hy vọng bài viết này sẽ giúp nhiều cho các blogger.

Loại bỏ chức năng Read more khỏi các trang tĩnh (static page)

Đối với Blogger thì thủ thuật tóm tắt bài viết tự động với nút Read More và ảnh đại diện là một phần quan trọng tạo nên diện mạo đẹp cho Blog của bạn. Tuy nhiên kể từ khi Blogger phát hành đặc tính tạo trang tĩnh (New Page/ static page) thì thủ thuật Read More gặp vấn đề đối với các trang tĩnh. Thông thường các trang tĩnh dùng để tạo các trang About, Contact… Khi bạn mở trang tĩnh thì nó hiển thị Read More, khi click chuột vào liên kết Read More vẫn không hiển thị toàn bộ nội dung bài viết. Để giải quyết vấn đề này thì cần phải loại bỏ chức năng Read More có ảnh đại diện ra khỏi các trang tĩnh.

Để làm được điều này, bạn thực hiện theo các bước sau đây:

1. Đăng nhập Blogger Dashboard >> Design >> Edit HTML chọn Expand Widget Templates. Dùng tổ hợp phím Ctrl + F tìm dòng mã như bên dưới.

<div class='post-body'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read more … "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

2. Thêm đoạn mã dưới đây vào sau dòng <div class='post-body'>.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

Và thêm thẻ đóng </b:if> vào trước dòng <div style='clear: both;'/>

Toàn bộ phần mã sau khi thực hiện có dạng như sau:

<div class='post-body'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read more … "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Những dòng đánh dấu màu đỏ là phần được thêm vào theo thủ thuật này.

Ý nghĩa của toàn bộ phần mã này như sau: Đối với các trang tĩnh (static page) thì hiển thị toàn bộ nội dung bài viết; không hiển thị chức năng Read more ở các trang bài viết (item) và đối với các trang bài viết (item) thì hiển thị toàn bộ nội dung bài viết. Như vậy chức năng Read more đã được loại bỏ hoàn toàn khỏi các trang tĩnh một cách triệt để.

Gắn thanh phát nhạc Streampad lên Blogger

Tình cờ trong một lần lướt web mình phát hiện một ứng dụng chơi nhạc tự động được thiết kế như một tiện ích gắn vào các trang blog hoạt động trên các nền như Tumblr, Wordpress, TypePad, Blogger… Ứng dụng đó là Streampad. Nó tự động hiển thị thông tin về bài hát và người trình bày và chứa đầy đủ các nút cần thiết đối với một trình chơi nhạc. Bạn có thể tùy ý điều chỉnh thông số màu sắc cho ứng dụng.

Một điểm khá độc đáo đối với thanh phát nhạc này là nó sẽ phát tất cả các file nhạc MP3 mà bạn đặt liên kết trong bài viết trên Blog của bạn.

Lấy ví dụ dưới đây là một số file nhạc MP3 mà tôi đã đặt liên kết trong bài viết này để làm demo. Bạn hãy thử nhấn nút Play trên thanh Streampad và sẽ thấy kết quả ngay.

1. Hotel California

2. Cherish

3. Careless Whisper

4. Beautiful Sunday

5. Heal The World

6. Caravan of Life

7. Casablanca

8. Those Were the Days

9. Lemon Tree

Thật thú vị phải không bạn? Gắn Streampad vào Blogger thật là đơn giản. Bạn chỉ việc dán toàn bộ đoạn mã dưới đây vào trong một tiện ích HTML/Javascript ở phần Footer là được.

<script type="text/javascript" src="http://o.aolcdn.com/art/merge?f=/_media/sp/sp-player.js&f=/_media/sp/sp-player-blogger.js&expsec=86400&ver=11&bgcolor=#4e5369&trackcolor=#dddded&clickimg=true&progressfrontcolor=b85353&progressbackcolor=000000&btncolor=white-gray"></script>

Chú ý trên đoạn mã ở trên, bạn có thể điều chỉnh các thông số màu sắc cho bgcolor, trackcolor, progressfontcolor, progressbackcolor, btncolor theo ý thích của bạn.

Hiệu ứng phóng to hình ảnh bằng CSS

Có nhiều cách tạo hiệu ứng phóng to hình ảnh như sử dụng CSS, Javascript hoặc kết hợp cả hai, nhưng nếu bạn không muốn mất nhiều thời gian thì có thể sử dụng một phương pháp đơn giản hơn.

Việc xác định chiều rộng và chiều cao tối đa định trước của một hình ảnh giúp chúng ta giới hạn được chiều rộng và chiều cao tối đa của hình đó một cách dễ dàng. Ví dụ muốn cho hình ảnh lớn không tràn ra ngoài phần nội dung trang web thì chỉ cần định trước chiều rộng tối đa của hình ảnh đó.

Chúng ta có thể tạo ra một lớp (class) và sử dụng nó trong thẻ <img> như sau:

<img class="expa" src="URL_hình ảnh gốc có kích thước lớn" />

Tiếp đến chúng ta định thuộc tính CSS cho hình ảnh:

<style>
img.expa {
cursor: pointer;
max-width: 150px;
}
img.expa:hover {
max-width: none;
}
</style>

Trong phần CSS này chúng ta xác định kích thước tối đa cho hình ảnh hiển thị ban đầu, sau đó khi rê con trỏ vào hình ảnh thì nó được phóng to ra hình ảnh gốc có kích thước lớn.



Ví dụ: Rê con trỏ vào hình ở trên để xem hiệu ứng.

Phân trang Blogger theo kiểu Wordpress

Về phân trang thì Blogger chỉ mặc định các nút Older Posts (Bài đăng Cũ hơn), Newer Posts (Bài đăng Mới hơn), Home (Trang chủ) để liên kết đến các bài viết lẫn nhau và kiểu phân trang sơ đẳng này không làm thỏa mãn các blogger.

Nếu ai từng lướt qua một blog được thiết kế bằng Wordpress thì có thể thấy kiểu phân trang khá chuẩn bằng 1 plugin có tên WP-PageNavi. Nếu tìm hiểu plugin này thì sẽ thấy phần mã CSS mặc định như sau:

/*
Default style for WP-PageNavi plugin
http://wordpress.org/extend/plugins/wp-pagenavi/
*/
.wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}
.wp-pagenavi span.current {
font-weight: bold;
}

Chúng ta có thể điều chỉnh một chút từ phần CSS này để sử dụng cho Blogger.

Đăng nhập Blogger, vào Edit HTML. Chèn vào trước dòng ]]></b:skin> với đoạn mã bên dưới.

.pagenavi{clear:both;margin:10px auto;text-align:center;}
.pagenavi span {padding:3px;margin-right:5px;background:transparent;border:none;}
.pagenavi a {padding:3px;margin-right:5px;text-decoration: none;background:#747170;}
.pagenavi a:visited{color:#fff}
.pagenavi a:hover {background:#044697;color:#fff;text-decoration:none}
.pagenavi .current {font-weight:bold;color:#fff;background:#F87217;text-decoration: none;}
.pagenavi .pages {font-weight:bold;border:none;}

Bạn có thể điều chỉnh các thông số màu sắc để điều chỉnh cho phù hợp với Blog của mình.

Lưu Template rồi chọn Expand Widget Templates.

Tiếp theo là cài đặt javascript. Trong Template (dùng tổ hợp phím Ctrl + F) tìm đến các dòng mã:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
..................
<b:includable id='main' var='top'>
..................
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='comments' var='post'>
…………………..
</b:widget>
</b:section>

Chèn trước dòng <b:includable id='feedLinksBody' var='links'>

bằng đoạn mã bên dưới.

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</script>
<script src='http://hacodeproject.googlecode.com/files/pagenavi_v2.min.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

Bạn có thể tải về file pagenavi_v2.min.js và upload lên hosting để sử dụng cho Blog của mình.

Tiếp đến, tìm đến dòng sau đây:

<!-- navigation -->
<b:include name='nextprev'/>

Thay thế nó bằng đoạn mã bên dưới:

<!-- navigation -->
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
</b:if>

Ý nghĩa của đoạn mã trên là hiển thị phân trang kiểu Wordpress ở các trang chủ, trang label và trang lưu trữ, còn các trang bài viết thì dùng kiểu phân trang mặc định của Blogger.

Bạn có thể điều chỉnh các tham số sau đây:

var pageNaviConf = {
perPage: 7,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}

trong đó:

- perPage: số bài viết hiển thị trong 1 trang
- numPages: số trang hiển thị
- firstText, lastText, nextText, prevText: tương ứng là các từ hiển thị cho các nút First, Last, Next, Prev

Nếu bạn gặp khó khăn trong việc cài đặt, xin vùi lòng để lại câu hỏi dưới đây.

Tạo số đếm cho nhận xét trên Blogger

Thỉnh thoảng lướt qua một số blogpot bạn sẽ thấy các nhận xét của độc giả được đánh số từ 1 đến n số nhận xét cho bài viết. Có thể nhiều blogger không thích thủ thuật này song về một phương diện nào đó thì nó cũng giúp cho blogspot của bạn khác với các blog khác. Ngoài ra nó còn giúp độc giả tìm bất kỳ một nhận xét nào đó dễ dàng hơn.

Trước khi thực hiện thủ thuật này khi đăng nhập Dashboard ở mục Settings >> Comments bạn nên chọn chế độ Embedded below post.

Bước 1: Vào Design >> Edit HTML nhớ backup Template của bạn và chọn Expand Widget Templates.

Nhấn Ctrl + F tìm dòng code: <b:loop values='data:post.comments' var='comment'>

Thay nó bằng đoạn code sau đây:

<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>

Tiếp tục tìm dòng code: <data:commentPostedByMsg/>

Chèn bên dưới nó bằng đoạn code sau đây:

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Kế đến kéo xuống dưới một chút sẽ thấy đoạn code:

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

Thêm thẻ </div> vào sau đoạn code ở trên.

Bước 2: Thêm đoạn code CSS dưới đây vào trước thẻ ]]></b:skin>.

.comment-number {
float: right;
background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}

/*since the numbers are actually links, we need to force the color properties*/

.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}

Bạn có thể thay hình nền cho số đếm nhận xét theo URL đánh dấu màu xanh. Nếu vị trí số đếm không cân xứng với hình nền thì bạn điều chỉnh thông số ở 2 dòng bên dưới.

margin-right: 15px;
margin-top: -35px;

Hiệu ứng đàn xếp khung lưới sử dụng CSS kết hợp jQuery

Hiệu ứng đàn xếp khung lưới là một kiểu thanh điều hướng đàn xếp cải tiến được xây dựng bằng jQuery.

Nó hoạt động tương tự như các hiệu ứng đàn xếp khác, chỉ một ô được mở ra vào một thời điểm và sẵn sàng hiển thị thông tin chi tiết về các mục bên trong một khung lưới.

Điều quan trọng là cột của ô mở hiện tại mở rộng theo chiều rộng hợp lý. Kỹ thuật này do Chris Coyier tại bang Florida (Mỹ) tạo ra.

Xem Demo.

Nếu bạn thích kỹ thuật này thì thực hiện theo các bước sau đây.

1. Đặt phần code bên dưới vào trước thẻ </head>.

<style type='text/css'>
#page-wrap { width: 960px; padding: 0 0 0 15px; margin: 0 auto; overflow: hidden; height: 100%; }

.info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }

.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; }

.batman { background: url(http://css-tricks.com/examples/InfoGrid/images/batman.jpg) center center no-repeat; }
.spiderman { background: url(http://css-tricks.com/examples/InfoGrid/images/spiderman.jpg) center center no-repeat; }
.aquaman { background: url(http://css-tricks.com/examples/InfoGrid/images/aquaman.jpg) center center no-repeat; }
.ironman { background: url(http://css-tricks.com/examples/InfoGrid/images/ironman.jpg) center center no-repeat; }
.superman { background: url(http://css-tricks.com/examples/InfoGrid/images/superman.jpg) center center no-repeat; }

dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }

dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }

dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }

dt:nth-of-type(3) { background: #ffb03b; }
dd:nth-of-type(3) { background: #ffb03b; }

dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }

dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }

dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }
</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://css-tricks.com/examples/InfoGrid/js/infogrid.js'></script>

2. Thiết lập cấu trúc HTML như bên dưới.

<div id="page-wrap">
<div class="info-col">
<h2>Tiêu đề lớn 1</h2>
<a class="image superman"></a>
<dl>
<dt>Tiêu đề 1</dt>
<dd>Mô tả chi tiết 1</dd>
<dt>Tiêu đề 2</dt>
<dd>Mô tả chi tiết 2</dd>
<dt>Tiêu đề 3</dt>
<dd>Mô tả chi tiết 3</dd>
<dt>Tiêu đề 4</dt>
<dd>Mô tả chi tiết 4</dd>
<dt>Tiêu đề 5</dt>
<dd>Mô tả chi tiết 5</dd>
<dt>Tiêu đề 6</dt>
<dd>Mô tả chi tiết 6</dd>
</dl>

</div>

<div class="info-col">
<h2>Tiêu đề lớn 2</h2>
<a class="image batman"></a>
<dl>
<dt>Tiêu đề 7</dt>
<dd>Mô tả chi tiết 7</dd>
<dt>Tiêu đề 8</dt>
<dd>Mô tả chi tiết 8</dd>
<dt>Tiêu đề 9</dt>
<dd>Mô tả chi tiết 9</dd>
<dt>Tiêu đề 10</dt>
<dd>Mô tả chi tiết 10</dd>
<dt>Tiêu đề 11</dt>
<dd>Mô tả chi tiết 11</dd>
<dt>Tiêu đề 12</dt>
<dd>Mô tả chi tiết 12</dd>
</dl>

</div>

<div class="info-col">

<h2>Tiêu đề lớn 3</h2>

<a class="image aquaman"></a>

<dl>
<dt id="starter">Tiêu đề 13</dt>
<dd>Mô tả chi tiết 13</dd>
<dt>Tiêu đề 14</dt>
<dd>Mô tả chi tiết 14</dd>
<dt>Tiêu đề 15</dt>
<dd>Mô tả chi tiết 15</dd>
<dt>Tiêu đề 16</dt>
<dd>Mô tả chi tiết 16</dd>
<dt>Tiêu đề 17</dt>
<dd>Mô tả chi tiết 17</dd>
<dt>Tiêu đề 18</dt>
<dd>Mô tả chi tiết 18</dd>
</dl>

</div>

<div class="info-col">

<h2>Tiêu đề lớn 4</h2>

<a class="image spiderman"></a>

<dl>
<dt>Tiêu đề 19</dt>
<dd>Mô tả chi tiết 19</dd>
<dt>Tiêu đề 20</dt>
<dd>Mô tả chi tiết 20</dd>
<dt>Tiêu đề 21</dt>
<dd>Mô tả chi tiết 21</dd>
<dt>Tiêu đề 22</dt>
<dd>Mô tả chi tiết 22</dd>
<dt>Tiêu đề 23</dt>
<dd>Mô tả chi tiết 23</dd>
<dt>Tiêu đề 24</dt>
<dd>Mô tả chi tiết 24</dd>
</dl>

</div>
<div class="info-col">
<h2>Tiêu đề lớn 5</h2>

<a class="image ironman"></a>

<dl>
<dt>Tiêu đề 25</dt>
<dd>Mô tả chi tiết 25</dd>
<dt>Tiêu đề 26</dt>
<dd>Mô tả chi tiết 26</dd>
<dt>Tiêu đề 27</dt>
<dd>Mô tả chi tiết 27</dd>
<dt>Tiêu đề 28</dt>
<dd>Mô tả chi tiết 28</dd>
<dt>Tiêu đề 29</dt>
<dd>Mô tả chi tiết 29</dd>
<dt>Tiêu đề 30</dt>
<dd>Tiêu đề 30</dd>
</dl>
</div>
</div>

Điều bạn cần phải làm là đặt tên cho các Tiêu đề lớn, Tiêu đề và Mô tả chi tiết cho các tiêu đề tương ứng.