Bạn là người thích hát Karaoke? Bạn đã có website riêng của mình và muốn web này có nhiều người ghé thăm. Đồng thời vừa làm cho trang web của mình thêm nội dung phong phú, trang trí cho đẹp?
Vậy thì tại sao không làm một trang hát Karaoke cho mọi cùng ca?

 Bài viết này sẽ hướng dẫn các bạn tạo một trang Karaoke trong website của bạn.

Bước 1: Đăng nhập vào blogger => Trang => Trang mới => Trang trống.

 Bước 2: Qua thẻ HTML của trang trống, dán đoạn code sau.

<embed align="middle" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#FFFFFF" height="750" name="karaoke" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://static.ziczac.vn/zz/karaoke.swf" type="application/x-shockwave-flash" width="1020"></embed>.

Tùy chỉnh 2 thông số màu đỏ cho phù hợp với website.

Height: Chiều cao;

Width: Chiều rộng;

Bước 3: Nhấn Xuất bản.

Sau đó về trang xem thử thành quả như thế nào!

Read more…

Theo yêu cầu của bạn đọc Lê Công Lý về cách download tài liệu trên website www.tailieu.vn. Nay mình sẽ hướng dẫn các bạn cách download bằng tay và hiệu quả để in thành sách!

 

Đầu tiên bạn cần phải tải phần mềm in ra file PDF, tải tại đây. (Ở đây mình sử dụng phiên bản 7.2 ) hoặc chương trình khác có tính năng tương tự điều được .

Download và cài đặt như bình thường, nếu Dopdf hỏi có khở động lại máy không thì lick No.

Vào trang www.tailieu.vn và chọn Ebook mình cần và vào xem tài liệu đó….

Nhìn vào khung tài liệu và lick vào Embed như hình bên dưới .

Hiện ra khung hình :

Bạn chú ý dòng bôi đen nhé ! => Bôi đen và copy tài trong khung tài liệu của bạn tương tự như vậy nhé .
Chú ý đường link đó nằm sau chữ : bookfile. Lời khuyên mình là nên copy tất cả dòng đó ra Notepad hoặc word rồi lấy link cho dễ .

 

Bạn lấy link vừa copy, past (dán) vào thanh address của IE hay Opera như hình bên dưới .

Có nếu bạn cài đặt chương trình Flash player thì chỉ việc líck vào và làm theo cách bên dưới .

Tiếp tục lick chuột phải vào trang tài liệu đang chạy trong IE hay Opera chọn Print… như hình bên dưới .

Sẽ hiện lên khung dưới và làm theo hướng dẫn .

Sau đó lick Print hiện ra khung dưới .

Với số 1 là chọn đường dẫn lưu file, số 2 là Save file thành PDF, như vậy là đã có file PDF để xem.

Nếu chưa rõ bạn xem Clip hướng dẫn sau.

Read more…

Page Navigation đối với đa số các website là một công cụ không còn xa lạ. Nhưng với blogger thì công cụ này vẫn chưa được hỗ trợ mạnh lắm. Chỉ có nút Next và Preview thôi. Tham khảo ở một số nơi mình đã chế biến lại cái navipage cho blog của mình. Bạn có thể làm theo hướng dẫn dưới đây.

1. Trước tiên việc bạn cần làm là chọn 1 trong các mẫu phía dưới.

.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}
.pagenavi .pages{color:#666}

.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}
.pagenavi .pages{color:#fff}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}
.pagenavi .pages{display:none}

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none}
.pagenavi .pages{display:none}

.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}
.pagenavi .pages{background:none;border:none}

.pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}

Vào Thiết kế → chỉnh sửa HTML → Mở rộng tiện ích mẫu. Chèn đoạn code bạn đã chọn vào phía trên thẻ ]]></b:skin>
  
2. Tiếp tục tìm đoạn code sau:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Lưu ý đối với 1 số blog thì chữ Blog Posts được thay bằng Bài đăng trên Blog.  Bạn chèn sau nó đoạn code sau.

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First", 
lastText: "Last", 
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script type="text/javascript" src="http://voquocan.googlecode.com/files/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

3. Tiếp tục tìm đoạn code sau:

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

Thay đoạn code trên bằng đoạn code dưới đây:

<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>

Lưu template lại là xong.
Chú ý trong đoạn code trên.
perPage là số bài hiển thị trên 1 trang.
numPages là số trang hiển thị ra nút bấm
chữ First Last có thể thay thế bằng chữ khác tùy thích.

Nguồn bài viết: voquocan.com

Read more…

[FD's BlOg] - Bài viết trước mình có đưa ra thủ thuật chia Header thành 2 cột. Hôm nay với thủ thuật khác cũng sẽ tạo phần header có dạng như 2 cột. Và với thủ thuật này ta sẽ đưa "ảnh logo" sang 1 bên và "Tiêu đề + Mô tả" sang 1 bên.


Khi vào phần chỉnh sửa tiêu đề của blog, ta sẽ thấy có 2 phần. Phần tiêu đề (gồm tiêu đề blog và mô tả blog), phần thứ 2 là logo (banner). Và xuống dưới nữa là lựa chọn ảnh logo nằm sau tiêu đề hay thay thế tiêu đề. Để có thể hiển thị được ảnh sang phía bên trái và tiêu đề sang phải, trước tiên ta phải có 1 tấm hình có kích thước nhỏ hơn chiều rộng của Header.

Với thủ thuật này ta chỉ chỉnh sửa bên CSS mà thôi.

Ví dụ ta có đọan CSS của template Minima như bên dưới:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

- Ở đây chiều rộng là 660px, vậy ta sẽ chọn 1 tấm hình có kích thước khỏang 300px hoặc hỏ hơn. Và tải nó lên blog (trong phần tiêu đề blog), và chọn vị trí là nằm sau "Tiêu đề + Mô tả".
Bấy giờ ta bắt đầu chỉnh sửa CSS. (ở đây ta chỉ chú ý đến 3 class(id) là Header, header h1 và header .description)

1. Tìm đọan CSS sau:(hoặc tương tự)

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

sửa lại là:

#header-inner {
background-position: left;
width:650px;
}

2. Tìm đến CSS của header h1:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

và sửa lại thành:

#header h1 {
margin:0 5px 5px 300px;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

3. Tìm đến CSS của header.description

#header .description {
margin:0 5px 5px;
.........
}

và cũng thay đổi tương tự như của header h1

#header .description {
margin:0 5px 5px 500px;
.........
}

4. Save template lại.

Xem ảnh minh họa bên dưới:

Trước khi chỉnh sửa

Sau khi chỉnh sửa

Nguồn fandung.com

Read more…

(Traidatmui.com) – Có rất nhiều blog đã viết về thủ thuật tạo nút readmore (đọc thêm) cho blogger, tuy nhiên thời gian qua mình vẫn nhận thấy còn nhiều bạn chưa biết đến cách thực hiện thủ thuật này. Vì lý do đó hôm nay mình xin chia sẽ cách làm nút readmore cho blogger để các bạn tham khảo. Với thủ thuật này thì bài viết của bạn sẽ chỉ hiển thị tóm tắt một đoạn nội dung trong bài viết, và bài viết của bạn sẽ hiển thị đầy đủ khi bạn click vào nút readmore này hoặc tiêu đề bài viết.

Hình ảnh minh họa

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (design) và chọn chỉnh sửa HTML
3. Thêm đoạn code bên dưới vào trước thẻ </head>

<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

4. Bạn hãy chèn đoạn css bên dưới vào trước thẻ ]]></b:skin>

.readmore {
float:right;
margin:1px 10px 5px 0px;


padding:3px;}
.readmore a{
color:#fff;
padding:3px 5px 3px 5px;
background:#0000ff;
}
.readmore a:hover{
color:#0000ff;
background:#ddd;}

5. Tiếp theo tìm đến đoạn mã như bên dưới

<data:post.body/>

6. Sau đó chèn code sau vào bên dưới code vừa tìm được ở trên

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='readmore'><a expr:href='data:post.url'>Đọc tiếp...</a></div></b:if>

Nếu bạn muốn thay nút readmore băng hình ảnh thì bạn chỉ việc thay đoạn text trong code (Đọc tiếp...) thành đoạn mã sau

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWHWcDCtmS704OIAmQfLXSnPyf2JLCn3F-PEzZSzoINwwToWw03iEZucxRH9Fa1Dsf0JAmyov4YaRd87QpoWaiUH7g-lPbFDtSWd7VXBrOotdIVqLgbNDxPTDp2P3msslCgQgCBH6Y50rO/" />

Bạn chỉ việc thay link ảnh trên (dòng màu cam) thành link ảnh mà bạn muốn hiển thị.
7. Sau khi hoàn tất công việc trên bạn save template lại.
8. Bây giờ để sử dụng tính năng này thì trong khi đăng bài thì bạn hãy chèn thêm code vào nội dung bài đăng như sau

Phần nội dung sẽ hiển
<span class="fullpost">
Phần nội dung ẩn đi
</span>

Phần màu xanh đậm chính là đoạn nội dung hiển thị dạng tóm tắt bài đăng của bạn, còn phần màu đỏ đậm là phần còn lại của nội dung bài viết. Phần này sẽ được ẩn đi và hiển thị đầy đủ khi click vào nút readmore.


Để không quên đoạn mã trên bạn hãy làm thêm bước này. Bây giờ bạn chọn phần cài đặt (Settings), vào phần định dạng (Formatting), sau đó bạn cuộn chuột xuống tìm đến phần mẫu bài đăng (Post Template)và dán vào khung đó đoạn mã sau và save lại

Phần nội dung sẽ hiển
<span class="fullpost">
Phần nội dung ẩn đi
</span>

Bây giờ mỗi khi bạn đăng bài thì bạn sẽ thấy dòng mã đó hiển thị trong khung soạn thảo của bạn.

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

Read more…

Những ai đang dùng chức năng Read More (đọc thêm) mặc định của Blogger sẽ nhận ra là nó không được đẹp cho lắm, Trước đây mình đã hướng dẫn các bạn Xóa bỏ dòng chữ read more (đọc thêm bài viết) tuy nhiên nhiều người vẫn thích để lại dòng chữ này nhưng cần thay đổi cho đẹp hơn, vì vậy trong bài này Namkna sẽ hướng dẫn cách tùy biến sao cho trông bắt mắt hơn.

Đăng nhập vào phần dashboard >> thiết kế >> chỉnh sửa HTML >> đánh dấu chọn mở rộng mẫu tiện ích.

Tìm dòng sau:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Thay thế toàn bộ đoạn ở trên bằng:
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Đọc tiếp</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Đọc tiếp</a>
</b:if></b:if><div class='clear'/>
 Thay chữ Đọc tiếp thành chữ mà bạn muốn như: Đọc thêm bài viết, xem thêm,...
Tiếp theo, chèn đoạn CSS sau phía trên thẻ </b:skin>
a.jump-link {color:#fff;text-decoration:none}

.jump-link {
float:right;
padding:6px 12px;
margin:20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
display:inline-block;
background: #f48423;
background: -moz-linear-gradient(top, #ffdf9e, #f5b026 5%, #f48423);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd683), color-stop(.03, #f5b026), to(#f48423));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border:1px solid #e6791c;
border-bottom:1px solid #d86f15;
color:#FFF;
text-shadow: 0 1px 1px #6f3a02; }

.jump-link:hover {
background: #eb7d1d;
background: -moz-linear-gradient(top, #ffdf9e, #f1a91a 5%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffdf9e), color-stop(.03, #f1a91a), to(#f07810));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810')"; /* IE8 only */
border-bottom:1px solid #d86f15; }

.jump-link:focus {
padding:7px 13px;
color:#FFF;
text-shadow: 0 -1px 1px #894906;
border:none;
background: #e47412;
background: -moz-linear-gradient(top, #f07810, #f1a91a 95%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f07810), color-stop(.9, #f1a91a), to(#f07810));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-webkit-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-moz-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7; }
Save template lại và xem kết quả. Bạn dễ dàng nhận ra là thủ thuật này không dùng bất cứ image nào nhằm tăng tốc độ tải trang web, ngoài ra thì các blog đang sử dụng Auto-readmore script cũng hoàn toàn có thể  áp dụng code này.

Chúc thành công!

Theo :http://noct-land.blogspot.com

Read more…

  

Xin chia sẽ cùng các bạn cách để tùy chỉnh phần bài đăng cũ hơn, bài đăng mới hơn và trang chủ ở cuối mỗi bài viết trên Blogger. Trong Blogspot thường mặc định phần này là dạng text, ở đây mình sẽ giúp các bạn tùy biến chúng thành hình ảnh hoặc có thể ẩn nó đi nếu bạn muốn.

Hình ảnh minh họa

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn tiếp mở rộng tiện ích (Expand Widget Templates)

☼ Bây giờ bạn có thể chọn 1 trong hai tùy chọn bên dưới

A. Thay bài đăng cũ hơn, bài đăng mới hơn, trang chủ thành hình ảnh

a. Bạn tìm đến code bên dưới hoặc tương tự

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span></b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span></b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</div>

b. Thay code vừa tìm được thành code bên dưới

<div class='blog-pager' id='blog-pager'>

<!-- Phần "Bài đăng mới hơn" -->
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src="Link ảnh bài đăng mới hơn"/></a>
</span></b:if>

<!-- Phần "Bài đăng cũ hơn" -->
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src="Link ảnh bài đăng cũ hơn"/></a>
</span></b:if>

<!-- Phần "Trang chủ" -->
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="Link ảnh trang chủ"/></a>

</div>

Bạn thay các link màu đỏ đậm trong code thành link của các ảnh bài đăng mới hơn, bài đăng cũ hơ, trang chủ tương ứng. Bạn có thể sử dụng các chương trình đồ họa để tạo các ảnh đó, nếu không tạo được bạn có thể sử dụng các ảnh bên dưới tạm


B. Xóa/Ẩn đi phần bài đăng cũ hơn, bài đăng mới hơn, trang chủ

Bạn tìm đến code CSS bên dưới và thêm lệnh (display:none;) như bên dưới tùy bạn muốn ẩn phần nào.

/* Nếu muốn ẩn "Bài đăng mới hơn" thêm lệnh vào code như bên dưới*/
#blog-pager-newer-link {
display:none;
float:left;
}
/* Nếu muốn ẩn "Bài đăng cũ hơn" thêm lệnh vào code như bên dưới*/
#blog-pager-older-link {
display:none;
float:right;
}
/* Nếu muốn ẩn cả 3 phần thêm lệnh vào code như bên dưới*/
#blog-pager {
display:none;
text-align:center;
}

5. Sau khi chọn 1 trong 2 tùy chọn trên và thực hiện xong bạn save template lại

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

Read more…

Để người xem dễ dàng xem các bài viết có cùng nhãn là tạo một tab chứa các bài viết liên quan đến vấn đề đang đọc. Và phổ biến nhất là cho tab này hiển thị cuối bài viết.
Các bạn xem hình minh họa sau sẽ rõ hơn.

Hình minh họa.

Bước 1. Đăng nhập Blogger

Vvào Design >> Edit HTML, chọn Expand Widget Templates.
Nếu bạn đã từng cài đặt các tiện ích Bài viết liên quan kiểu khác thì nên tháo ra khỏi Template.
Đặt đoạn code sau đây vào sau dòng ]]></b:skin>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;}
#related-posts a{color:blue}
#related-posts a:hover{color:brown}
#related-posts ul{list-style-type:none;margin:0 0 0px 0;padding:0;text-decoration:none;font-size:12px;text-color:#000}
#related-posts ul li{display:block;/*background:url(&quot;http://img840.imageshack.us/img840/2004/rssqn.png&quot;) no-repeat 0 0;*/background:url(&quot;http://img208.imageshack.us/img208/9070/weedbullet.gif&quot;) no-repeat 0 0;list-style-type:none;margin:0;padding-left:21px;line-height:1.5em;border-bottom:1px dotted #ccc}
</style>
</b:if>

Bước 2. Chèn Code Script

Tìm một trong các dòng dưới đây:
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
<div class='post-footer'>
Đặt trước nó bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script language='javascript'>
// <![CDATA[
var maxnext = 5; // Chỉnh số 5 chỉ số bài viết mới hơn tối đa
var nexttitle = 'Bài viết mới hơn';
var maxprev = 6; // Chỉnh số 6 chỉ số bài viết cũ hơn tối đa
var prevtitle = 'Bài viết cũ hơn';
// ]]>
</script>
<script src='http://hacodeproject.googlecode.com/files/newer-older-related-posts.js' type='text/javascript'/>
<div id='related-posts'>
<div id='next-posts'/>
<b:loop values='data:post.labels' var='label'>
<script language='javascript'>
var vlabel = &quot;<data:label.name/>&quot;;
if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
{nextlabel = (relatedlabel == vlabel) ? 0 : 1;}
if (nextlabel == 0)
{
var vtime = &quot;<data:post.timestampISO8601/>&quot;;
vtime = vtime.substring(0,19);
var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=next_results_labels&amp;max-results=999&quot;;
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, srcurl);
script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
nextlabel +=1;
}
</script>
</b:loop>
<div id='prev-posts'/>
<b:loop values='data:post.labels' var='label'>
<script language='javascript'>
var vlabel = &quot;<data:label.name/>&quot;;
if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
{prevlabel = (relatedlabel == vlabel) ? 0 : 1;}
if (prevlabel == 0)
{
var vtime = &quot;<data:post.timestampISO8601/>&quot;;
vtime = vtime.substr(0,19);
var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=prev_results_labels&amp;max-results=999&quot;;
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, srcurl);
script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
prevlabel ++;
}
</script>
</b:loop>
</div>
</b:if>

Lưu Template.

Read more…

Như các bạn thấy ở các bào giấy, phong cách khi in bài thông thường chữ cái đầu tiên của bài viết có khác biệt như Font chữ lớn hơn, màu sắc cũng có thể khác ...
Như trong bài viết này bạn thấy chữ cái "N" khác hẳn các chữ khác trong bài viết.
Cách thực hiện cũng không có gì là phức tạp, trong bài viết này tôi xin hướng dẫn các bạn để post bài viết trong blog mang phong cách báo chí với chữ cái đầu tiên của bài viết có sự khác biệt so với các ký tự khác.

Bước 1: Truy cập vào Blogger , vào Bảng điều khiển (Dashboad) l Bố cục (Layout) l Chỉnh sửa HTML (Edit HTML)

Bước 2: Tìm dòng mã ]]></b:skin> bằng cách sử dụng tổ hợp phím Ctrl+F
Sau đó dán mã code dưới phía trước ]]></b:skin> (như hình vẽ)

.newspaper { float:left; color:#000; background:#fff; line-height:80px; padding-:1px 5px 0 0; font-family:times; font-size:100px; }

Các bạn có thể thay đổi các chỉ số đánh dấu màu đỏ tuỳ theo ý thích của mình để phù hợp với màu sắc và bố cục của Blog.
Đã cài đặt xong, việc tiếp theo là Lưu lại mẫu đã chỉnh sửa của bạn.
Tuy nhiên để hiển thị được chữ đầu tiên của bài viết theo phong cách báo chí bạn vào Cài đặt (Setings) l Định dạng (Format) l Mẫu bài đăng (Post template)

và thêm vào dong mã dưới: And add the below codes there and save it.
<span class="newspaper">First Alphabet</span>

Bây giờ khi bạn bắt đầu bài viết mới bạn cần thực hiện mã trên và chỉnh sửa trong HTML chữ cái đầu tiên của bài viết.
Chúc các bạn thành công, có vấn đề gì các bạn có thể comment cho mình để chúng ta có thể cùng nhau giải quyết nhé.
Nguồn bài viết: anshuldudeja's Blog

Read more…