«Thủ thuật - Download - Thư giản»

[Thủ thuật] - Trình bày công thức toán học trong Blogspot với MathJax

2013-05-07T08:48:00.001-07:00

Traidatmui.com – Khi dùng Blogspot thì việc làm sao để có thể viết công thức toán học một cách chuyên nghiệp vẫn là câu hỏi. Tuy nhiên với sự hỗ trợ của MathJax thì bạn sẽ hoàn toàn có thể làm được điều đó một cách dễ dàng. Như bạn biết thì khi soạn thảo công thức toán học trong Word nhìn trông rất đẹp mắt đúng không và điều đó bạn hoàn toàn có thể trình bày các công thức toán học đẹp mắt ngay trên Blogspot của bạn.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>

5. Save template lại.

Bạn có thể dùng đoạn code công thức này để test thử:

\left [ - \frac{\hbar^2}{2 m} \frac{\partial^2}{\partial x^2} + V \right ] \Psi

= i \hbar \frac{\partial}{\partial t} \Psi

\[\sqrt {{a^2} + {b^2}} \mathop {\lim }\limits_{x \to \infty } \sqrt {{b^2} - 4ac} \frac{{ - b \pm \sqrt {{b^2} - 4ac} }}{{2a}}\]

Như thế là đã xong, công thức toán học đã có thể hiển thị trên blogspot của bạn. Tuy nhiên, câu hỏi đặt ra là phải viết công thức thế nào mới có thể hiển thị được. Vâng điều này thì bạn hoàn toàn có thể yên tâm, với hỗ trợ của MathType thì việc viết công thức và lấy mã đưa vào blogspot của bạn rất dễ dàng.

Đầu tiên bạn tải MathType 6.6 (Có Keygen) này về máy tại đây hoặc tại đây và bắt đầu cài đặt. Sau khi đã cài đặt hoàn tất bạn hãy thiết lập sau: bạn vào mục Preferences và chọn Cut and Copy Preferences...

Và bạn hãy thiết lập như hình bên dưới

Bây giờ bạn đã có thể trở lại phần soạn thảo công thức để thiết lập công thức toán học mà bạn muốn chèn vào blog của mình. Sau khi đã soạn thảo xong bạn chỉ cần tô đen công thức vừa tạo ra và nhấn Ctrl C hoặc click chuột phải chọn Copy

Bây giờ thì bạn chỉ cần dán code công thức vào bài viết (Ở chế độ HTML) hoặc trong tiện ích HTML của blogspot để hiển thị công thức ở vị trí mà bạn muốn.

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

Thanh menu ngang với hiệu ứng bắt mắt bằng CSS3 cho Blogspot

2013-04-25T08:43:00.001-07:00

Traidatmui.com – Bài viết hôm nay mình chia sẻ cùng các bạn một menu với hiệu ứng cũng khá đẹp mắt dành cho blogspot, đặc biệt menu này chỉ dùng CSS3 và HTMl đơn giản nên không làm ảnh hưởng đến tốc độ của blog bạn nhiều. Với menu này bạn có thể tự mình phối màu lại để có 1 menu ưng ý cho blog của mình và cách thực hiện cũng đơn giản bạn theo dõi các bước bên dưới.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.ribbon span{font-weight:bold;background:#A81B6A;display:inline-block;line-height:3em;padding:0 1em;margin-top:0.5em;position:relative;-webkit-transition:background-color 0.2s,margin-top 0.2s; -moz-transition:background-color 0.2s,margin-top 0.2s; -ms-transition:background-color 0.2s,margin-top 0.2s; -o-transition:background-color 0.2s,margin-top 0.2s; transition:background-color 0.2s,margin-top 0.2s}
.ribbon a:hover span{background:#FFD204;color:#000;margin-top:0}
.ribbon span:before{content:"";position:absolute;top:3em;left:0;border-right:0.5em solid #9B8651;border-bottom:0.5em solid #fff}
.ribbon span:after{content:"";position:absolute;top:3em;right:0;border-left:0.5em solid #9B8651;border-bottom:0.5em solid #fff}
.ribbon a:link,.ribbon a:visited{color:#fff;text-decoration:none;float:left;height:3.5em;overflow:hidden}
.ribbon:after,.ribbon:before{margin-top:0.5em;content:"";float:left;border:1.5em solid #A81B6A}
.ribbon:after{border-right-color:transparent}
.ribbon:before{border-left-color:transparent}

5. Save template lại và trở về bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<a href='#'><span>Trang chủ</span></a>
<a href='#'><span>Tên menu 1</span></a>
<a href='#'><span>Tên menu 2</span></a>
<a href='#'><span>Tên menu 3</span></a>
<a href='#'><span>Tên menu 4</span></a>
<a href='#'><span>Tên menu 5</span></a>
<a href='#'><span>Tên menu 6</span></a>

Bạn thay đổi Tên menu lại thành tên thư mục bạn muốn cho lên thanh menu này (màu xanh lá) và thay dấu # thành link dẫn tương ứng với từng tên menu bạn đặt.

7. Cuối cùng save tiện ích lại

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

Tham khảo bloggertrix.com

MediaFire.com tham gia mạng quảng cáo Ad360.vn

2013-04-18T10:16:00.002-07:00

MediaFire là một trang web chia sẻ dữ liệu miễn phí và không giới hạn, nằm trong top 100 Alexa toàn thế giới và đứng thứ 19 tại Việt Nam (Nguồn Alexa). Theo báo điện tử compete.com, có 1,26 tỷ độc giả truy cập vào Mediafire.com trên toàn thế giới năm 2011, hơn 432.000 người sử dụng tại Việt Nam truy cập trên ngày (Theo Mediafire.com).

Mediafire “bắt tay” gia nhập mạng quảng cáo trực tuyến Ad360

Việc Mediafire chọn lựa Ad360 làm đối tác cao cấp, cho thấy Ad360 đã thực sự đáp ứng được nhiều tiêu chuẩn của một mạng quảng cáo trực tuyến quốc tế như công nghệ hiển thị và phân khúc nhóm đối tượng mà các nhà quảng cáo quan tâm, công nghệ self-serving ads, công nghệ bid giá quảng cáo… Đặc biệt, công nghệ mới Retargeting - “tái hiển thị quảng cáo” đảm bảo “đeo bám” và mang lại những khách hàng tiềm năng thực sự cho nhà quảng cáo chính là một trong những điểm nổi bật được đánh giá là thông minh của Ad360.

Demo quảng cáo của Ad360 trên MediaFire.com

Việc kí kết hợp tác với Mediafire đánh dấu một bước ngoặt cho sự lớn mạnh của Ad360. Chắc chắn, trong một tương lai không xa, Ad360 sẽ được nhiều Publisher uy tín trong và ngoài nước cùng “bắt tay” hợp tác, đảm bảo một độ phủ tối đa cho quảng cáo của doanh nghiệp.

(Theo Ad360)

Thủ thuật: Tạo Slideshow cho hình ảnh với mô tả trượt đẹp mắt cho Blogspot

2013-03-18T01:02:00.000-07:00

Traidatmui.com – Với các bài viết trước mình cũng có chia sẻ với các bạn cách tạo Slideshow cho hình ảnh. tuy nhiên slide mỗi bài mỗi kiểu trình diễn. Nhằm thêm đa dạng kiểu trình diễn ảnh thì hôm nay mình chia sẻ cho các bạn một thủ thuật nữa để tạo slideshow cho hình ảnh của bạn. Với thủ thuật này thì hình ảnh của bạn sẽ tự động trình diễn với 1 khoảng thời gian định trước cùng với nội dung mô tả cho hình ảnh tương ứng. Với 2 nút điều khiển tới lùi thì bạn có thể lần lượt xem tất cả hình ảnh trong slide đó và phần mô tả sẽ trượt lần lượt theo hình ảnh tương ứng trông đẹp mắt.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

#slider{ width:660px;height:275px;position:relative;overflow:hidden;-moz-box-shadow:0 0 6px #000;-webkit-box-shadow:0 0 6px #000;box-shadow:0 0 6px #000}
#mask-gallery{overflow:hidden}
#gallery{list-style:none;margin:0;padding:0;z-index:0;width:900px;overflow:hidden}
#gallery li{float:left}
#mask-excerpt{position:absolute;top:0;left:0;z-index:500;width:100px;overflow:hidden}
#excerpt{filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;list-style:none;margin:0;padding:0;z-index:10;position:absolute;top:0;left:0;width:100px;background-color:#000;overflow:hidden;font-family:arial;font-size:14px;color:#fff}
#excerpt li{padding:5px}
.clear{clear:both}
#btn-prev{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-prev:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-prev:active{border-top-color:#238acf;background:#238acf}
#btn-next{border-top:1px solid #96d1f8;background:#65a9d7;padding:4px 8px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:rgba(0,0,0,1) 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:white;font-size:9px;font-family:Georgia,serif;text-decoration:none;vertical-align:middle}
#btn-next:hover{border-top-color:#28597a;background:#28597a;color:#ccc}
#btn-next:active{border-top-color:#238acf;background:#238acf}

5. Chèn code bên dưới vào trước thẻ </head>

6. Save template lại và vào Bố cục (Layout)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<div id="slider">
<div id="mask-gallery">
<ul id="gallery">
<li><img src="http://1.bp.blogspot.com/-12wbu0i_muc/Ta24AqDbjcI/AAAAAAAAH7c/pTr-k1Ur8JE/s515/100307-1920x1200.jpg" width="660" height="275" alt=""/></li>
<li><img src="http://1.bp.blogspot.com/-CTFG58k6MzM/Ta24ARmgsQI/AAAAAAAAH7U/LNGbQ7kSjZg/s515/22355-2560x1600%2B%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="http://2.bp.blogspot.com/-89bQalZvhUA/Ta23_zy7c6I/AAAAAAAAH7M/Uc4eVNXNKxU/s515/7%2B%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="http://2.bp.blogspot.com/-EEYNzbtRXzI/Ta24BApWoUI/AAAAAAAAH7k/3QZoOxdoUEw/s515/1254602948249.jpg" width="660" height="275" alt=""/></li>
<li><img src="http://2.bp.blogspot.com/-Lx0_DpHs6dk/Ta23_rRARVI/AAAAAAAAH7E/HJ0cDTXl-iM/s515/2.jpg" width="660" height="275" alt=""/></li>
</ul>
</div>

<div id="mask-excerpt">
<ul id="excerpt">
<li>Nội dung thông tin mô tả cho hình ảnh 1. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 2. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 3. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 4. </li>
<li>Nội dung thông tin mô tả cho hình ảnh 5. </li>
</ul>
</div>
</div>
<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
<a href="#" id="btn-prev">prev</a> <a href="#" id="btn-next">next</a></div>

Bạn hãy thay link ảnh (Link màu xanh) thành link hình ảnh của bạn và nội dung mô tả tương ứng cho hình ảnh của bạn.

8. Cuối cùng save tiện ích lại

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

Tham khảo bloggertrix.com

Thủ thuật: Chèn link tự động vào các từ khóa trong bài viết cho Blogspot

2013-03-16T22:47:00.000-07:00

Traidatmui.com – Bạn lướt web nhiều đôi khi bạn thấy một số site hay sử dụng 1 số từ khóa và chèn link vào đến 1 bài viết hay 1 chủ đề nào đó có liên quan trong bài viết đang xem. Dĩ nhiên điều đó bạn có thể chèn thủ công trong lúc soạn thảo bài viết đó để người xem click tới bài viết liên quan đó. Tuy nhiên nếu bạn muốn đặt link cho 1 từ khóa mà thường xuyên lặp lại trong nội dung bài viết của bạn và liên quan đến nội dung web/blog bạn cung cấp rất nhiều, bạn muốn đánh dấu, đặt link cho từ khóa đó thì việc làm thủ công sẽ mất cho bạn khá nhiều thời gian. Để giải quyết vấn đề đó thì hôm nay mình chia sẻ cho các bạn một thủ thuật sẽ tự động add link cho các từ khóa mà bạn đã thiết lập trước. Khi bạn đã thiết lập từ khóa và link dẫn cho từ khóa đó trước thì nếu bất kỳ bài viết nào trong web/blog của bạn có từ khóa đó thì nó sẽ được tự động được thêm link và đường dẫn bạn thiết lập cho nó.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn code bên dưới ngay trước thẻ </head>

6. Tìm đến đoạn code như bên dưới

<data:post.body/>

7. Thay thế đoạn code vừa tìm được thành đoạn code sau

<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
highlightSearchTerms('Từ khóa 1',true,'Link cho từ khóa 1','summary<data:post.id/>');

highlightSearchTerms('Từ khóa 2',true,'Link cho từ khóa 2','summary<data:post.id/>');

highlightSearchTerms('Từ khóa 3',true,'Link cho từ khóa 3','summary<data:post.id/>');
</script>

Bạn thay từ khóa và link cho các từ khóa tương ứng. Nếu bạn muốn thêm hay bớt từ khóa thì chỉ cần copy hay xóa bỏ đoạn code highlightSearchTerms('Từ khóa 1',true,'Link cho từ khóa 1','summary<data:post.id/>'); và chỉnh sửa lại cho hợp lý là được.

8. Cuối cùng save template lại

Bây giờ bạn hãy truy cập vào bất kỳ 1 bài viết mà có chứa từ khóa bạn đã thiết lập ở trên để thấy kết quả nhé. Đây là một cách khá hay giúp bạn đặt link cho từ khóa quan trọng khá nhanh và góp phần nào vào việc SEO cho từ khóa blog bạn.

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

Thủ thuật: Tạo Slideshow cho thư viện ảnh chuyên nghiệp với hiệu ứng lightbox trong Blogspot

2013-03-15T21:04:00.002-07:00

Traidatmui.com – Trong bài viết hôm nay mình chia sẻ cho các bạn 1 thủ thuật có thể giúp các bạn tạo 1 thư viện ảnh với hiệu ứng lightbox xuất hiện trước blog một cách rất chuyên nghiệp. Với thủ thuật này thì bạn có thể tạo cho mình 1 album ảnh hay 1 thư viện ảnh ngay trên blog và khi click vào ảnh thì 1 hộp trình diễn slide sẽ xuất hiện trước blog và làm mờ đi phần thừa trên blog của bạn. Hơn nữa, thủ thuật này ngoài việc hiện thị hình ảnh dạng lightbox với các nút di chuyển qua lại để xem tất cả hình ảnh trong cùng 1 album hay cùng 1 thư viện thì còn có chức năng trình chiếu tất cả các hình ảnh đó dưới dạng slideshow 1 cách tự động.

Hình ảnh minh họa

div.dark_square .pp_left,div.dark_square .pp_middle,div.dark_square .pp_right,div.dark_square .pp_content{background:url(https://lh3.googleusercontent.com/-xDFe54MINJY/UUPYDOHDiUI/AAAAAAAAA2A/VFmpM3uk80E/s10/contentPattern2.png) top left repeat}
div.dark_square .currentTextHolder{color:#c4c4c4}
div.dark_square .pp_description{color:#fff}
div.dark_square .pp_loaderIcon{background:url(https://lh3.googleusercontent.com/-THyG2nYXTdI/UUPTfLX7ZPI/AAAAAAAAA1E/PkF0yqSr__0/s24/loader.gif) center center no-repeat}
div.dark_square .pp_content_container .pp_left{background:url(https://lh4.googleusercontent.com/-cfhCAsMgHvA/UUPTe2YdNCI/AAAAAAAAA0o/s2Si5I87agw/s20/contentPattern.png) top left repeat-y}
div.dark_square .pp_content_container .pp_right{background:url(https://lh4.googleusercontent.com/-cfhCAsMgHvA/UUPTe2YdNCI/AAAAAAAAA0o/s2Si5I87agw/s20/contentPattern.png) top right repeat-y}
div.dark_square .pp_expand{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -31px -26px no-repeat;cursor:pointer}
div.dark_square .pp_expand:hover{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -31px -47px no-repeat;cursor:pointer}
div.dark_square .pp_contract{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) 0 -26px no-repeat;cursor:pointer}
div.dark_square .pp_contract:hover{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) 0 -47px no-repeat;cursor:pointer}
div.dark_square .pp_close{width:75px;height:22px;background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -1px -1px no-repeat;cursor:pointer}
div.dark_square #pp_full_res .pp_inline{color:#fff}
div.dark_square .pp_gallery a.pp_arrow_previous,div.dark_square .pp_gallery a.pp_arrow_next{margin-top:12px !important}
div.dark_square .pp_nav .pp_play{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -1px -100px no-repeat;height:15px;width:14px}
div.dark_square .pp_nav .pp_pause{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -24px -100px no-repeat;height:15px;width:14px}
div.dark_square .pp_arrow_previous{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) 0 -71px no-repeat}
div.dark_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default}
div.dark_square .pp_arrow_next{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -22px -71px no-repeat}
div.dark_square .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default}
div.dark_square .pp_next:hover{background:url(https://lh4.googleusercontent.com/-9O7U4ama61Y/UUPTe-elTyI/AAAAAAAAA1A/kR6PM81euJg/s61/btnNext.png) center right no-repeat;cursor:pointer}
div.dark_square .pp_previous:hover{background:url(https://lh6.googleusercontent.com/-9fLHedPjzsU/UUPTe8Mv2eI/AAAAAAAAA0g/LscCol_akn4/s61/btnPrevious.png) center left no-repeat;cursor:pointer}
div.light_square .pp_left,div.light_square .pp_middle,div.light_square .pp_right,div.light_square .pp_content{background:#fff}
div.light_square .pp_content .ppt{color:#000}
div.light_square .pp_expand{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.light_square .pp_expand:hover{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.light_square .pp_contract{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.light_square .pp_contract:hover{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.light_square .pp_close{width:75px;height:22px;background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.light_square #pp_full_res .pp_inline{color:#000}
div.light_square .pp_gallery a.pp_arrow_previous,div.light_square .pp_gallery a.pp_arrow_next{margin-top:12px !important}
div.light_square .pp_nav .pp_play{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
div.light_square .pp_nav .pp_pause{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
div.light_square .pp_arrow_previous{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) 0 -71px no-repeat}
div.light_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default}
div.light_square .pp_arrow_next{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -22px -71px no-repeat}
div.light_square .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default}
div.light_square .pp_next:hover{background:url(https://lh4.googleusercontent.com/-9O7U4ama61Y/UUPTe-elTyI/AAAAAAAAA1A/kR6PM81euJg/s61/btnNext.png) center right no-repeat;cursor:pointer}
div.light_square .pp_previous:hover{background:url(https://lh6.googleusercontent.com/-9fLHedPjzsU/UUPTe8Mv2eI/AAAAAAAAA0g/LscCol_akn4/s61/btnPrevious.png) center left no-repeat;cursor:pointer}
div.pp_pic_holder a:focus{outline:none}
div.pp_overlay{background:#000;display:none;left:0;position:absolute;top:0;width:100%;z-index:9500}
div.pp_pic_holder{display:none;position:absolute;width:100px;z-index:10000}
.pp_top{height:20px;position:relative}
* html .pp_top{padding:0 20px}
.pp_top .pp_left{height:20px;left:0;position:absolute;width:20px}
.pp_top .pp_middle{height:20px;left:20px;position:absolute;right:20px}
* html .pp_top .pp_middle{left:0;position:static}
.pp_top .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px}
.pp_content{height:40px}
.pp_fade{display:none}
.pp_content_container{position:relative;text-align:left;width:100%}
.pp_content_container .pp_left{padding-left:20px}
.pp_content_container .pp_right{padding-right:20px}
.pp_content_container .pp_details{margin:10px 0 2px 0}
.pp_description{display:none;margin:0 0 5px 0}
.pp_nav{clear:left;float:left;margin:3px 0 0 0}
.pp_nav p{float:left;margin:2px 4px}
.pp_nav .pp_play,.pp_nav .pp_pause{float:left;margin-right:4px;text-indent:-10000px}
a.pp_arrow_previous,a.pp_arrow_next{display:block;float:left;height:15px;margin-top:3px;overflow:hidden;text-indent:-10000px;width:14px}
.pp_hoverContainer{position:absolute;top:0;width:100%;z-index:2000}
.pp_gallery{left:50%;margin-top:-50px;position:absolute;z-index:10000}
.pp_gallery ul{float:left;height:35px;margin:0 0 0 5px;overflow:hidden;position:relative}
.pp_gallery ul a{border:1px #000 solid;border:1px rgba(0,0,0,0.5) solid;display:block;float:left;height:33px;overflow:hidden}
.pp_gallery ul a:hover{border-color:#fff}
.pp_gallery ul a img{border:0}
.pp_gallery li{display:block;float:left;margin:0 5px 0 0}
.pp_gallery li.default a{background:url(https://lh5.googleusercontent.com/-RbF0X2w01Cw/UUPViv2b_OI/AAAAAAAAA1o/d2deezxHg70/s50/default_thumbnail.gif) 0 0 no-repeat;display:block;height:33px;width:50px}
.pp_gallery li.default a img{display:none}
.pp_gallery .pp_arrow_previous,.pp_gallery .pp_arrow_next{margin-top:7px !important}
a.pp_next{background:url(https://lh4.googleusercontent.com/-9O7U4ama61Y/UUPTe-elTyI/AAAAAAAAA1A/kR6PM81euJg/s61/btnNext.png) 10000px 10000px no-repeat;display:block;float:right;height:100%;text-indent:-10000px;width:49%}
a.pp_previous{background:url(https://lh4.googleusercontent.com/-9O7U4ama61Y/UUPTe-elTyI/AAAAAAAAA1A/kR6PM81euJg/s61/btnNext.png) 10000px 10000px no-repeat;display:block;float:left;height:100%;text-indent:-10000px;width:49%}
a.pp_expand,a.pp_contract{cursor:pointer;display:none;height:20px;position:absolute;right:30px;text-indent:-10000px;top:10px;width:20px;z-index:20000}
a.pp_close{display:block;float:right;text-indent:-10000px}
.pp_bottom{height:20px;position:relative}
* html .pp_bottom{padding:0 20px}
.pp_bottom .pp_left{height:20px;left:0;position:absolute;width:20px}
.pp_bottom .pp_middle{height:20px;left:20px;position:absolute;right:20px}
* html .pp_bottom .pp_middle{left:0;position:static}
.pp_bottom .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px}
.pp_loaderIcon{display:block;height:24px;left:50%;margin:-12px 0 0 -12px;position:absolute;top:50%;width:24px}
#pp_full_res{line-height:1 !important}
#pp_full_res .pp_inline{text-align:left}
#pp_full_res .pp_inline p{margin:0 0 15px 0}
div.ppt{color:#fff;display:none;font-size:17px;margin:0 0 5px 15px;z-index:9999}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}

5. Chèn code bên dưới vào trước thẻ </head>

6. Và bên dưới là code để bạn tạo link hình ảnh hay tạo thư viện ảnh, bạn có thể chèn code vào bài viết hay tiện ích HTML/Javascript trên blog của bạn.

Bạn hãy thay đổi các link ở trên thành link hình ảnh của bạn và thay đổi độ rộng và chiều cao của hình ảnh trong Style. Ở đây phần hiển thị hình ảnh trong thư viện ảnh mình không dùng css để trang trí nhiều, bạn hoàn toàn có thể thêm các thuộc tính css với class gallery để tạo ra cho mình 1 thư viện hình ảnh phong cách riêng nhé.

Lưu ý: Nếu trong blog của bạn đã có jquery.min.js cùng phiên bản thì bạn không cần chèn thêm file jquery.min.js ở trên.

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

Code tạo quảng cáo popup xuất hiện 1 lần/1 ngày/1 ip

2013-03-14T22:59:00.002-07:00

Traidatmui.com – Trước đây mình đã có chia sẻ cùng các bạn code để tạo quảng cáo dưới dạng popup, tức là một cửa sổ mới sẻ hiện ra khi bạn click vào bất kỳ vị trí nào trên web/blog. Tuy nhiên với các code trước đây cũng có nhiều ưu và nhược điểm như số lần xuất hiện cửa sổ quá nhiều hay xuất hiển chỉ lần click đầu tiên... Hôm nay mình chia sẻ thêm cho các bạn 1 đoạn script nữa cũng nhằm tạo quảng cáo dưới dạng popup cho Blogspot của mình để bạn có thể lựa chọn phù hợp với mục đích của site mình.

Ở code này thì quảng cáo hay cửa sổ popup chỉ xuất hiện 1 lần/1 ngày/1 IP nhất định. Nên nếu bạn muốn tránh gây phiền hà và bực bội cho khách truy cập của mình thì mình nghĩ tốt nhất bạn nên dùng cách hiển thị kiểu này sẽ chạy quảng cáo tốt hơn.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm đến thẻ <body> và thay thế thành như bên dưới

<body onclick='popunder();'>

<script>
/* <![CDATA[ */
function Set_Cookie(a,b,c,e,f,g){var d=new Date;d.setTime(d.getTime());d=new Date(d.getTime()+c);document.cookie=a+"="+escape(b)+(c?";expires="+d.toGMTString():"")+(e?";path="+e:"")+(f?";domain="+f:"")+(g?";secure":"")}function Get_Cookie(a){var b=document.cookie.indexOf(a+"="),c=b+a.length+1;if(!b&&a!=document.cookie.substring(0,a.length)||-1==b)return null;a=document.cookie.indexOf(";",c);-1==a&&(a=document.cookie.length);return unescape(document.cookie.substring(c,a))} function Delete_Cookie(a,b,c){Get_Cookie(a)&&(document.cookie=a+"="+(b?";path="+b:"")+(c?";domain="+c:"")+";expires=Mon, 11-November-2020 00:00:01 GMT")}
function popunder(){null==Get_Cookie("cucre")&&(Set_Cookie("cucre","cucre Popunder","1","/","",""),
pop=window.open("http://www.traidatmui.com","windowcucre"),
pop.blur(),window.focus())}function addEvent(a,b,c){a.attachEvent?a.attachEvent("on"+b,c):a.addEventListener?a.addEventListener(b,c,!0):a["on"+b]=c} addEvent(window,"load",function(){addEvent(document.body,"click",function(){popunder()})});
/* ]]> */</script>

Bạn thay địa chỉ http://www.traidatmui.com ở trên thành địa chỉ web/blog mà bạn muốn chạy quảng cáo.

5. Cuối cùng bạn save template lại

Xem thêm bài viết "Mở nhiều cửa sổ popup khi click chuột vào vị trí bất kì trên web/blog"

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

Chèn các nút chia sẻ lên mạng xã hội dạng "Lazy Loading" cho Blogspot

2013-03-01T06:53:00.000-08:00

Traidatmui.com – Lợi ích của việc chèn các công cụ, các nút để khách truy cập vào web/blog chia sẻ lên các mạng xã hội thì các bạn đã biết ở đây mình không đề cập đến. Bài viết này chỉ chia sẻ cho các bạn 1 trong những cách chèn các nút chia sẻ lên mạng xã hội như Facebook , Twitter , Google+ , LinkedIn , Digg. Cách chèn các nút này thì có rất nhiều cách và ở đây mình chia sẻ cho các bạn 1 cách chèn vào blogspot tối ưu. Tức là khi bạn chèn theo bài viết này thì các nút chia sẻ mạng xã hội này sẽ không được tải về ngay nên giảm được dung lượng tải blog của bạn, đến khi được rê chuột vào thì các nút này mới được tải về. Các nút này ban đầu chỉ là những hình ảnh nút giả không có tác dụng chia sẻ, khi được rê chuột vào các nút mới được tải về nên phần nào giảm được dung lượng khi tải trang.

Hình ảnh các nút chia sẻ minh họa

.fb-like {display:inline !important;}
#facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget,#digg-widget,#stumble-widget, #linkedin-widget { border-radius:5px;color: #ffffff !important; display: inline-block; line-height: 22px; text-align: center; text-decoration: none;width: 55px;}
#facebook-widget, .facebook-widget { background: #3b5b99; }
#linkedin-widget { background: #069; }
#digg-widget {background:#FDFFB0;color:#716803 !important;}
#stumble-widget {background:red;}
#google-widget, .google-widget { background: #dd4b39; }
#twitter-widget ,.twitter-widget {background: #33ccff;}

5. Chèn code bên dưới vào trước thẻ </body>

6. Bây giờ bạn chỉ cần chèn code bên dưới vào vị trí bạn muốn trên blog của mình

<table>
<tr> <td width="100" ><a href="#" id='twitter-widget' >Tweet</a>
<a class='twitter-share-button' data-count='horizontal' data-related="Your-Twitter-Handle" href='https://twitter.com/share' ></a></td> <td width="100" ><a href="#" id='stumble-widget' >Stumble</a>
<su:badge layout="2"></su:badge></td> <td width="100" ><a href="#" id='google-widget' >+1</a>
<span class='g-plusone' data-size='medium' ></span></td> <td width="100" ><a href="#" id='facebook-widget' >Like</a>
<div class='fb-like' data-layout='button_count' data-send='false' >
</div>
</td> <td width="100" ><a href="#" id='digg-widget' >Digg</a>
<a class="DiggThisButton DiggCompact"></a></td> <td width="100" ><a href="#" id='linkedin-widget' >Share</a>
<script type="IN/Share" data-counter="right"></script></td> </tr>
</table>

7. Cuối cùng save tất cả lại là xong

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

Tham khảo stylifyyourblog.com

Tùy chỉnh trang báo lỗi không tìm thấy 404 theo ý mình trong Blogspot

2013-02-28T06:11:00.000-08:00

Traidatmui.com – Thông thường khi bạn truy cập vào 1 đường link nào đó trên blogspot mà đường dẫn đó sai hay không tồn tại trong blog của bạn, bạn sẽ nhận được thông báo lỗi từ blog hay còn gọi là lỗi 404. Trong giao diện mới của blogger đã cung cấp cho bạn thêm tính năng tùy chỉnh cho dòng thông báo này thay cho dòng thông báo mặc định của blogspot. Và bài viết hôm nay mình chia sẻ cùng các bạn cách để có thể tùy chỉnh và tạo trang thông báo lỗi 404 cho blogger của mình hoàn toàn theo ý tưởng của mình. Với tùy chỉnh này thì bạn có thể tự thiết kế cho mình trang thông báo lỗi không tìm thấy này thật đẹp và mang phong cách riêng của mình.

Hình ảnh thông báo mặc định

Hình ảnh thông báo sau khi tùy chỉnh

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ </head>

5. Tùy chỉnh thông báo 404

Đó mới chỉ là chèn css để hình thành khung thông báo lỗi, bây giờ là việc bạn vào tùy chỉnh nội dung thông báo lỗi khi không tìm thấy trang

5.1 Bạn vào phần cài đặt (Settings)
5.2 Click vào mục "Tùy chọn tìm kiếm" (Search preferences)
5.3 Tiếp theo bạn chèn code bên dưới vào ô "Lỗi và chuyển hướng" (Errors and redirections)

<div class="erropage">
<h2><div class="num">404</div>ERROR</h2>
<br/>Thật xin lỗi trang bạn đang tìm không tồn tại trên webblog.<br/>

Bạn vui lòng click <a href="http://www.traidatmui.com">vào đây</a> để trở lại trang chủ</div>

Bạn có thể thao khảo hình ảnh minh họa bên dưới

Ở đây mình chỉ hướng dẫn các bạn các bước để tùy chỉnh và ở trên là code trang 404 mà mình tạo theo ý tưởng của mình. Bạn hoàn toàn có thể thêm các class, nội dung và tùy chỉnh lại css để có 1 trang 404 cho riêng blog của mình.

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

Tạo nút với hiệu ứng bọt nước bằng CSS3 cho Blogspot

2013-02-27T03:53:00.004-08:00

Traidatmui.com – Việc tạo nút (button) trong quá trình thiết kế web/blog là đều rất cần thiết và tùy vào mục đích sử dụng mà bạn có thể tạo ra những kiểu nút khác nhau. Có nhiều cách để bạn có thể hình thành nên hình dạng của các nút phục vụ cho việc thiết kế, có thể tạo bằng hình ảnh bằng các công cụ tạo ảnh hay bằng flash, dạng ảnh động... Bài viết hôm nay mình cũng chia sẻ cho các bạn cách tạo nút không cần phần mềm hỗ trợ để bạn thiết kế nút mà chỉ bằng CSS3. Với bài viết này bạn sẽ có thể tạo nên các nút và khi rê chuột bạn sẽ thấy các bọt nước chuyển động rất đẹp mắt và nhẹ nhàng hơn việc bạn sử dụng hình ảnh tạo nút rất nhiều.

.button{font:15px Calibri,Arial,sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important;white-space:nowrap;display:inline-block;vertical-align:baseline;position:relative;cursor:pointer;padding:10px 20px;background-repeat:no-repeat; background-position:bottom left;background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'); background-position:bottom left,top right,0 0,0 0;background-clip:border-box; -moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px; -moz-box-shadow:0 0 1px #fff inset;-webkit-box-shadow:0 0 1px #fff inset;box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s;-moz-transition:background-position 1s;transition:background-position 1s}
.button:hover{ background-position:top left;background-position:top left,bottom right,0 0,0 0}
.button:active{ bottom:-1px}
.button.big{font-size:30px}       /*Cỡ chữ nút lớn*/
.button.medium{font-size:18px}       /*Cỡ chữ nút trung bình*/
.button.small{font-size:13px}        /*Cỡ chữ nút nhỏ*/
.button.rounded{-moz-border-radius:4em;-webkit-border-radius:4em;border-radius:4em}

.blue.button{color:#0f4b6d !important;border:1px solid #84acc3 !important; background-color:#48b5f2; background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-moz-radial-gradient( center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb))}
.blue.button:hover{background-color:#63c7fe;background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-moz-radial-gradient( center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7))}

.green.button{color:#345903 !important;border:1px solid #96a37b !important;background-color:#79be1e;background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317);background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1)),to(rgba(162,211,30,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#82cc27),to(#74b317))}
.green.button:hover{background-color:#89d228;background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e);background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1)),to(rgba(183,229,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#90de31),to(#7fc01e))}

.orange.button{color:#693e0a !important;border:1px solid #bea280 !important;background-color:#e38d27;background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f);background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1)),to(rgba(232,189,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f1982f),to(#d4821f))}
.orange.button:hover{background-color:#ec9732;background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1)),to(rgba(241,192,52,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f9a746),to(#e18f2b))}

.gray.button{color:#525252 !important;border:1px solid #a5a5a5 !important;background-color:#a9adb1;background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1)),to(rgba(197,199,202,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#c5c7ca),to(#92989c))}
.gray.button:hover{background-color:#b6bbc0;background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image:url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),url('https://lh5.googleusercontent.com/-fTsjO4st1xE/US3xHW9KWoI/AAAAAAAAAQo/e2XrKPtvjG8/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1)),to(rgba(202,205,208,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#d1d3d6),to(#9fa5a9))}

5. Và bây giờ bạn chỉ cần tìm vị trí để chèn nút vào với code như bên dưới

<a href="#" class="button big blue">Big Button</a>
<a href="#" class="button big green">Big Button</a>
<a href="#" class="button big orange">Big Button</a>
<a href="#" class="button big gray">Big Button</a>

<a href="#" class="button blue medium">Medium Button</a>
<a href="#" class="button green medium">Medium Button</a>
<a href="#" class="button orange medium">Medium Button</a>
<a href="#" class="button gray medium">Medium Button</a>

<a href="#" class="button small blue">Small Button</a>
<a href="#" class="button small green">Small Button</a>
<a href="#" class="button small blue rounded">Rounded</a>

<a href="#" class="button small orange">Small Button</a>
<a href="#" class="button small gray">Small Button</a>
<a href="#" class="button small green rounded">Rounded</a>

Bạn hãy thay dấu # thành link và tên màu tím thành tên của nút bạn muốn tạo. Như vậy là đã hoàn tất bạn chỉ cần chèn nút vào vị trí mà mình mong muốn là xong.

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

Tạo phân trang cho nội dung bài viết (Với bài viết có nội dung dài) trong Blogspot

2013-02-22T21:09:00.001-08:00

Traidatmui.com – Bài viết hôm nay mình chia sẻ cho các bạn 1 thủ thuật rất bổ ích đối với những blog đăng bài viết có nội dung dài, đặc biệt đối với blog đăng tải truyện, tiểu thuyết nhiều phần và nhiều tập. Thực ra thủ thuật này không mới mẻ và cũng có 1 số blogger chia sẻ, tuy nhiên mình đã nhận được nhiều bạn yêu cầu qua email nên mình chia sẻ để các bạn có thể tham khảo thêm. Với cách phân chia nội dung bài viết thế này sẽ rất giúp các bạn dễ dàng quản lý nội dung bài viết, việc đăng tải nội dung cũng logic hơn và giúp người độc dễ dàng thao tác hơn. Thủ thuật này thì bạn hoàn toàn có thể tùy chỉnh nội dung phần phía trước số phân trang thành trang 1, trang 2... hay nội dung 1, nội dung 2... Bạn có thể xem qua demo bên dưới để thấy rỏ hơn hoạt động của thủ thuật này.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào trước thẻ </head>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.nd-cut {
display:none;
}
.nd-page {
padding: 3px;
}
.nd-page a, .nd-page a.visited {
font-weight: bold;
text-decoration: none;
color: green;
}
.nd-page a:hover, .nd-page a.mcurrent {
text-decoration: underline;
color: blue;
}

6. Save template lại
7. Phân trang cho nội dung bài viêt

Để có thể phân chia nội dung của bài viết ra thành nhiều phần khác nhau thì bạn phải chèn thêm đoạn code bên dưới khi đăng bài.

<div id="noidung-all">
$modoan
Nội dung đoạn 1
$ketdoan

$modoan
Nội dung đoạn 2
$ketdoan

$modoan
Nội dung đoạn 3
$ketdoan
</div>

<script type="text/javascript"> NumberedPage(numPage=3,title="Nội dung",separator="|"); </script>

- $modoan là phần đánh dấu phần mở đầu của 1 đoạn
- $ketdoan là phần đánh dấu phần kết của đoạn đó

Bạn có thể thay số 3 thành số trang bạn muốn phân chia nội dung và thay Nội dung thành tên bạn muốn hiển thị trong mục phân trang, phía trước các số.

Như vậy là xong, khi bạn muốn phân chia nội dung bài viết nào thì chỉ cần đăng theo mẫu như bên trên là được.

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

Tiện ích menu tự động lấy bài viết của link nhãn hay link tìm kiếm cho Blogger

2013-02-18T23:49:00.001-08:00

Traidatmui.com – Bài viết hôm nay mình chia sẻ cho các bạn 1 thủ thuật tạo menu với nhiều điểm khác biệt so với các menu mình đã giới thiệu cùng các bạn trước đây. Menu này hoạt động chủ yếu dựa vào thư viện JQuery và JSON feed API của blogger. Với menu này ngoài việc bạn chỉ dừng ở chỗ đặt tên và link cho các menu thì ở đây đối với các link là link của trang nhãn hay link của trang tìm kiếm của blogger thì các bài viết của nhãn đó hay của từ khóa tìm kiếm đó sẽ được hiển thị ra trên menu của bạn, đúng thư mục bạn đã đặt. Để thấy rõ hơn bạn có thể xem qua demo bên dưới.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau trước thẻ </head>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.menu *{font-size:12px;margin: 0;padding: 0;}
ul.menu {list-style: none;line-height: 1;overflow: visible !important;}
ul.menu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.menu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.menu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #333 !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.menu li a:hover,ul.menu li a.hoverover{background: #f5f5f5 !important;}
ul.menu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.menu li:hover > ul{display: block;}
ul.menu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.menu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.menu ul li a:hover,ul.ajaxmenu ul li a.hoverover{background: #fff !important;}
ul.menu ul ul{display: none;left: 100%;top: 0;}

ul.ajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.ajaxmenu li:hover div.submenu {display: block;}
ul.ajaxmenu ul ,ul.ajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.ajaxmenu ul li{background: none !important;float: none !important;}
ul.ajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.ajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.ajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.ajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.ajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.ajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.ajaxmenu ul.postslist li a{color:#444;display: block;line-height: 1.4;padding: 0 !important;}
ul.ajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.ajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#ajaxmenu {border-radius:5px;background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<ul class="menu" id="ajaxmenu">

<li> <a href="/">Trang chủ</a></li>

<li><a href="#">Danh mục menu 1</a>
<ul>
<li><a href="http://www.traidatmui.com/search/label/Advanced%20blogger">Blogger nâng cao</a></li>
<li><a href="http://www.traidatmui.com/search/label/SEO">Thủ thuật SEO</a></li>
<li><a href="http://www.traidatmui.com/search?q=Blogger co ban">Blogger cơ bản</a></li>
<li><a href="http://www.traidatmui.com/search/label/Kiem%20tien">Kiếm tiền</a>
</li>
</ul>
</li>
<li>
<a href="#">Danh mục menu 2</a>
<ul>
<li><a href="http://www.traidatmui.com/search/label/Kinh%20nghiem%20song">Kinh nghiệm</a></li>
<li><a href="http://www.traidatmui.com/search/label/Dieu%20y%20nghia">Ý nghĩa cuộc sống</a></li>
<li><a href="http://www.traidatmui.com/search/label/Marketing">Marketing</a></li>
<li><a href="http://www.traidatmui.com/search/label/Kien%20thuc%20IT">Kiến thức IT</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Menu 7</a></li>
<li><a href="#">Menu 8</a></li>
<li><a href="#">Menu 9</a></li>

</ul>

Lưu ý:

- Bạn chú ý ở trên mình chỉ đặt Danh mục menu 1 và Danh mục menu 2 là link dạng lấy bài viết tự động lên menu. Bạn có thể làm tương tự cho các menu khác.
- Đối với các link dạng thông thường thì bạn chỉ cần đặt tương tự từ Menu 3 (Thay # thành link)
- Đối với các link muốn lấy bài viết tự động ra menu thì bạn đặt link dạng trang nhãn hay trang tìm kiếm của blogger. Có 3 loại link được chấp nhận lấy bài viết tự động lên menu

Ví dụ: Link trang nhãn: http://yourblogdomain.blogspot.com/search/label/Tên nhãn
Link trang tìm kiếm: http://yourblogdomain.blogspot.com/search?q=Từ khóa
Link trang nhãn và tìm kiếm: http://yourblogdomain.blogspot.com/search/label/Tên nhãn?q=Từ khóa

8. Cuối cùng save tiện ích lại

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

Menu ngang đơn giản, hiệu ứng mượt với CSS3

2013-01-29T20:24:00.002-08:00

Traidatmui.com – Bài viết hôm nay mình chia sẻ cho các bạn một thủ thuật tạo menu ngang với hiệu ứng rất mượt, thủ thuật chỉ dùng đến css3 không dùng script hay Jquery nên sẽ rất nhẹ nhàng. Menu không ở dạng dropdown mà chỉ dạng đơn giản 1 cấp và hoạt động tốt trên Firefox, Chrome, Sarafi... không chạy tốt trên IE và Opera.

Hình ảnh minh họa

.menu{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FFFFFF;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
a:link {color:#ffffff;}
a:hover {color:#ffffff;text-decoration: none;}
a:visited {color: #FFFDFD;text-decoration: none;}
ul.menu li{list-style:none;float:left;height:40px;text-align:center;background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
ul li a{display:block;padding:0 20px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(0,0,0,0.1);text-align:center;line-height:40px;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
ul li a:hover{background:transparent none;}
ul[rel=sam] li a{background:#606060;}
ul[rel=sam] li a:hover{background:transparent none;}
ul li.active a{background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới

Bạn thay # thành link menu của bạn.

8. Cuối cùng save tiện ích lại

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

Tham khảo bloggertrix.com

Thủ thuật: Tạo tiện ích đánh giá bài viết dạng ngôi và lượt xem trang với Graddit.com

2012-11-14T02:56:00.000-08:00

Traidatmui.com – Trước đây để có tiện ích đánh giá bài viết dạng ngôi sao thì các Blogger hay sử dụng đến js-kit-rating (http://js-kit.com/ratings.js) với 5 ngôi sao đánh giá. Tuy nhiên thời gian gấn đây file http://js-kit.com/ratings.js không còn hoạt động nữa dẫn đến tiện ích các blogger chèn vào blog mình bị die theo. Chính vì thế hôm nay mình xin chia sẻ cùng các bạn một cách để tạo tiện ích đánh giá dạng ngôi không chỉ cho cho bài viết trong blogger mà cả phần comment của blog. Hơn nữa, với tiện ích này bạn còn có thể biết được số lượt xem bài viết (view) trong blogger của bạn và dễ dàng tùy chỉnh.

Hình ảnh minh họa

Thật ra tiện ích này cũng đã được Blogger tích hợp sẵn trong Template, mình sẽ chia sẻ luôn cách kích hoạt tiện ích này để các bạn chọn tiện ích phù hợp cho blog mình.

A. Thực hiện với Graddit.com

Đầu tiên bạn hãy vào Graddit.com và chọn kiểu hay dạng ngôi sao mà mình ưng ý, sau đó chọn nền tảng (Platform) là Blogger (Nếu chèn vào comment bạn chọn Blogger comments) để lấy code.

Đến bước chèn vào Blogger

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn code bên dưới vào sau thẻ <head>

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

<div class='post-header-line-1'/>

7. Chèn code mà bạn vừa lấy tại Graddit.com ở trên vào ngay dưới code vừa tìm được (ví dụ code có dạng)

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[["☆","★"]]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&views=yes&average=yes&votes=yes"'></script></b:if>

8. Cuối cùng bạn save lại là xong

B. Kích hoạt tiện ích Rating của Blogger

Đầu tiên bạn vào địa chỉ http://draft.blogger.com và đăng nhập bằng tài khoản Blogger của mình.

Tiếp theo bạn vào phần bố cục (Layout) chọn Chỉnh sửa (Edit) của phần Post

Tiếp theo bạn Check "Hiển thị xếp hạng theo dấu sao" (Show Star Ratings)

Cuối cùng save lại là xong

Lưu ý: Đối với cách này thì đối với những mẫu bạn đã tùy chỉnh, đã loại bỏ các biến Variable có thể không hiện được, chỉ đối với những mẫu sẵn có của blogger kích hoạt sẽ được hiển thị ngay. Để có thể hiện thị được với mẫu bạn đã tùy chỉnh thì sau khi thực hiện xong các bước trên bạn hãy thực hiện thêm các bước sau:

Vào Template (Mẫu) >> Edit HTML (Chỉnh sửa HTML) >> Expand Widget Templates (Mở rộng mẫu tiện ích) và tìm đến code sau

<data:post.body/>

Chèn thêm code bên dưới vào ngay bên dưới code vừa tìm được

Tiếp đến bạn tìm code sau:

<b:include name='feedLinks'/>

Chèn thêm code (Màu xanh lá) bên dưới vào sau code vừa tìm được (Nếu chưa có), code sau khi thêm sẽ có dạng như bên dưới.

<b:include name='feedLinks'/>
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
</b:includable>

Cuối cùng save lại

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

Thủ thuật: Tự động tóm tắt bài viết với ảnh thumbnail cho Blogspot - Bản mới nhất

2012-11-08T02:40:00.000-08:00

Traidatmui.com – Theo yêu cầu của bạn Nguyễn Thanh Hải thì hôm nay mình xin chia sẻ cùng các bạn thủ thuật "Tự động tóm tắt bài viết cho Blogspot" với cách hiển thị hoàn toàn khác so với thủ thuật trước đây. Với thủ thuật "Tiện ích tự động tóm tắt bài viết có ảnh thumb cho blogger" mà mình chia sẻ trước đây chỉ giới hạn ở việc phần ảnh thumbnail và phần nội dung bài viết, còn những phần khác như tiêu đề bài viết, phần chân bài viết, ngày tháng đăng bài... sẽ tùy chỉnh theo mặc định của blogger. Nếu bạn thực hiện theo thủ thuật trước đây phần tiêu đề bài viết sẽ hiện thị ở trên còn hình ảnh và phần tóm tắt nội dung sẽ được hiện bên dưới và các phần khác sẽ được giữ nguyên không bị tác động đến.

Hình ảnh minh họa

Và thủ thuật mình sắp giới thiệu sẽ giúp bạn có thể tùy chỉnh cho cách hiển thị bài viết trông đẹp hơn, theo ý muốn của mình. Ảnh thumb sẽ được float về bên trái và tiêu đề, nội dung hay thông tin bài viết được đưa về phía bên phải trông chuyên nghiệp hơn và dễ dàng tùy chỉnh theo ý mình.

Lưu ý: Ở đây mình chỉ hướng dẫn chung với template cơ bản của Blogger, các bạn hãy tùy theo giao diện blog hiện tại của mình mà chỉnh sửa màu sắc lại cho phù hợp nhé

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.sumpost{text-shadow:0 1px #fff;color:#111;font-family:arial;font-size:12px;line-height:1.4;margin:0;padding:6px 8px}
.img-post img{background:#fff;float:left;margin:6px 8px 0 8px;border:1px solid #ccc;height:100px;width:120px;padding:2px}
.sumpost h2{font-size:16px;background:none;padding:0;margin:0;line-height:1.2}
.sumpost h2 a{color:#160}
.sumpost .postinfo{color:#0e3f4f;padding:3px 0 3px 8px;margin:0;border-bottom:dotted #ddd 1px}
.sumpost .postinfo .numcm{margin:0 2px 0 2px}
.sumpost .postinfo .author{margin:0 2px 0 0}
.sumpost .postinfo .numcm .num{color:#f80}
.sumpost .postinfo .label{margin:0 2px 0 2px}
.sumpost .postinfo .label a{color:#b0039a}
.readmore{float:right;margin:8px 0 0;padding:0 0 0 0}
.readmore a{color:#d7034e;padding:0}
.readmore a:hover{color:#00f}
.borderline{border-top:1px solid #bbb;border-bottom:1px solid #fff;margin:4px 0 0 0}

6. Chèn tiếp code bên dưới vào trước thẻ </head>

7. Tiếp theo bạn hãy tìm đến dòng code bên dưới

<data:post.body/>

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

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<p><data:post.body/></p>
</div>
<b:loop values='data:post.labels' var='label'>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>","<data:post.title/>","<data:post.url/>","<data:post.author/>","<data:top.authorLabel/>","<data:post.numComments/>","<data:top.commentLabelPlural/>","<data:label.name/>","<data:postLabelsLabel/>","<data:label.url/>");
</script>
</b:loop>
</b:if>
</b:if>

9. Cuối cùng là save lại.

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

Hiện thị Fanpage của Facebook ra trước web/blog với lightbox

2012-10-11T18:16:00.000-07:00

Traidatmui.com – FanPage của facebook chắc hẵn là mọi người đã không còn xa lạ nữa và việc tạo trang fanpage cũng không quá khó khăn. Bạn hiện tại đang có 1 trang fanpage và muốn đặt chúng vào blog hay website của mình nhưng bạn không biết đặt như thế nào để thu hút khách truy cập click Like fanpage của bạn thì mình nghĩ hãy để chúng show ra trước blog hay web là cách hiệu quả. Với thủ thuật này bạn hoàn toàn có thể hiển thị trang fanpage của mình ra trước blog hay web với 1 khoảng thời gian nhất định kèm theo đó là hiệu ứng lightbox. Trang fanpage sẽ hiện ra, làm tối đi những phần khác trên blog hay web của bạn và sẽ trượt xuống khi bạn cuộn chuột xuống cuối trang, cách này sẽ thu hút sự chú ý của người dùng truy cập click Like cho bạn.

Lưu ý: Cách hiện thị như thế có thể gây phiền hà đến người dùng, chính vì thế bạn không nên lạm dụng mà nên đặt thời gian hiện Fanpage cho hợp lý.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Template (Mẫu)
3. Chọn chỉnh sửa HTML (Edit HTML) >> Chọn Tiếp tục
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
cursor: pointer;
overflow: hidden;
z-index: 110004;
display: none;
}
#fancybox-loading div {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 480px;
background-image: url('https://lh4.googleusercontent.com/-vnc6ePIwZ00/UHFw7M3m-WI/AAAAAAAAAQI/CJMgBx5idxo/s480/fancybox.png');
}
#fancybox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 110000;
display: none;
}
#fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
overflow: auto;
display: none;
}
#fancybox-wrap {
position: absolute;
top: 0;
left: 0;
padding: 20px;
z-index: 110001;
outline: none;
display: none;
}
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
border: 3px dashed #ccc;
}
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('https://lh4.googleusercontent.com/-vnc6ePIwZ00/UHFw7M3m-WI/AAAAAAAAAQI/CJMgBx5idxo/s480/fancybox.png') -40px 0px;
cursor: pointer;
z-index: 110003;
display: none;
}

5. Chèn tiếp code bên dưới vào trước thẻ </head>

- delay":"5000" chính là thời gian hiển thị Fanpage, đơn vị là giây, ở đây 5000 tương ứng là 5 giây.
- Bạn thay id 301202423307434 thành ID trang Fanpage của bạn

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

Hiển thị bài viết dạng lật trang cho Blogspot

2012-06-27T09:37:00.001-07:00

Traidatmui.com – Khi bạn đọc một cuốn sách nào đó thì để xem trang tiếp theo bạn sẽ làm một động tác là "lật" trang và thủ thuật này sẽ ứng dụng cách lật trang như thế cho các bài viết trên blogger của bạn. Bạn hãy xem demo sẽ thấy rỏ hơn, bạn chỉ cần click chuột hoặc kéo trang qua hoặc click next để xem tiếp.

» Bắt đầu thủ thuật

1. Đăng nhập vào 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 code bên dưới vào sau thẻ <head>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới.

7. Cuối cùng save tiện ích lại

Để hiển thị cho tất cả bài viết bạn thay http://data-traidatmui.appspot.com/scripts/booklet_label.js thành link bên dưới

http://data-traidatmui.appspot.com/scripts/booklet_allpost.js

Có vấn đề gì chưa rỏ bạn để lại comment bên dưới để trao đổi thêm nhé

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

Tham khảo builtbywill.com

Thủ thuật tạo tiện ích video liên quan (Related videos) cho Blogspot

2012-06-16T22:42:00.000-07:00

Traidatmui.com – Theo yêu cầu của bạn Nguyễn Minh Ngọc thì hôm nay mình xin chia sẻ cùng các bạn thủ thuật tạo tiện ích liên quan cho video lấy từ Youtube. Trước đây thì mình cũng đã có chia sẻ 2 thủ thuật là Recent Video, liên quan đến video từ youtube (bạn có thể tham khảo tại đây và tại đây). Với tiện ích này khi bạn nhúng code lấy từ Youtube vào blog thì nó sẽ tự động lấy ảnh thumbnail bạn không cần phải upload hình ảnh kèm theo trong khi đang bài viết nữa. Những video trong cùng 1 nhãn sẽ được hiển thị ngay bên dưới video mà bạn đang xem.

» Bắt đầu thủ thuật

1. Đăng nhập vào 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 mở rộng mẫu tiện ích (Expand Widget Templates)
5. Chèn code bên dưới vào sau thẻ <head>

6. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.relatedvideo {
padding:2px 2px 0px 2px;
font-size:12px;
display:block;
background:#eee;
width:100px;
float:left;
border:1px solid #ccc;
border-radius:5px;
margin:0 8px 8px 0px;}
.relatedvideo h3{height:45px;padding:5px 2px 4px 2px;margin:0;line-height:0.8em!important;}
.relatedvideo h3 a{
font-weight:bold;
text-decoration:none;
color:#333!important;
font-size:12px;}
.relatedvideo h3 a:hover{
color:#666;
text-decoration:underline;}
.related_thumb {
margin:0px;
width:94px;
height:80px;
padding:0px;
}
.related_thumb:hover {
filter: alpha(opacity:0.7);
KHTMLOpacity: 0.7;
MozOpacity: 0.7;
-khtml-opacity:.70;
-ms-filter:"alpha(opacity=70)";
-moz-opacity:.70;
filter:alpha(opacity=70);
opacity:.70;
}

7. Tìm đến dòng code như bên dưới hoặc tương tự

8. Tiếp theo chèn đoạn code bên dưới ngay sau code vừa tìm được ở trên

<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?orderby=published&alt=json-in-script&callback=relatedvideo"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

9. Cuối cùng save template lại là xong.

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

Tạo bức màn đóng mở cho Blogspot bằng jQuery

2012-06-04T19:21:00.001-07:00

Traidatmui.com – Các bạn thường thấy ở những sân khấu có bức màn che ngang, khi chương trình bắt đầu thì người ta sẽ giật dây để bức màn mở ra và đi về 2 phía của sân khấu. Mình nói vậy để các bạn hình dung dễ dàng về bài viết này, bài viết này mình tham khảo tại buildinternet.com và xin chia sẻ các bạn cách để tạo một bức màn che ngang trong Blogspot. Với thủ thuật này thì blog của bạn sẽ bị che bởi một bức màn đỏ, người dùng muốn xem blog bạn thì chỉ cần làm một thao tác là giật dây bằng cách nhấn "Click Me" bức màn sẽ mở ra. Bạn có thể xem demo bên dưới để thấy rỏ hơn.

- width:'60px' : Đây là độ rộng còn lại sau khi mở màn.
- Số 2000 ở trên chính là thời gian kéo màn ra tương ứng là 2 giây, bạn có thể thay đổi giá trị này (Càng lớn sẽ càng chậm đi).
- Để bức màn tự kéo ra mà không cần phải "Click Me" thì bạn chỉ cần thay dòng code $(".rope").click(function(){ thành $(window.onload=function(){.

5. Tiếp theo bạn chèn đoạn code bên dưới vào sau thẻ <body>

6. Cuối cùng là save template lại

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

Tham khảo tại buildinternet.com

Bản hoàn thiện - Thủ thuật tạo bài viết giống trang dantri.com.vn

2012-05-21T03:22:00.002-07:00

Traidatmui.com – Như mình đã nói cùng các bạn thì hôm nay mình chia sẻ cho các bạn thủ thuật hoàn chỉnh để tạo bài viết giống với trang Dân Trí. Thủ thuật này mình đã từng chia sẻ tại đây, tuy nhiên với bài viết trước còn nhiều nhược điểm như sử dụng 2 file JS, code rờm rà, trùng biến với một số thủ thuật đã có... Chính vì những lý do đó hôm nay mình viết bài này chia sẻ lại cho các bạn thủ thuật này với sự cải tiến hơn, chỉ dùng 1 file JS, thay đổi tên biến, bên cạnh đó mình cũng chia sẻ cho các bạn cách để lặp lại cho từng nhãn khác nhau một cách dễ dàng nhất.

Hình ảnh minh họa

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới.

Bạn chỉ việc chỉnh sửa lại code theo các hướng dẫn trong code. Bạn thay các text màu tím đậm thành tên thư mục bạn muốn hiển thị và các link tương ứng với các thư mục đó (màu tím nhạt).

7. Cuối cùng save tiện ích lại là xong

Mở rộng thủ thuật

Để lặp lại tiện ích cho các nhãn khác trên blog của mình thì bạn chỉ cần lặp lại đoạn code như bên dưới và chỉnh sửa phần số màu đỏ lại cho phù hợp

<div class="tab" id="neocat-2" onmouseover="Hovercat('2')" onmouseout="Outcat('2')">
<div class="iframpost">
<ul class="dpost">

<li class="active"><a href="#">Thủ thuật blogger</a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao | </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản | </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/tien-ich-blogger.html">Tiện ích blog</a></li> </ul>

</div>
<script type="text/javascript">
dtlabel = "Templates"; // Thay thành tên nhãn bài bạn muốn hiển thị
document.write("<script src=\""+dthome_page+"feeds/posts/default/-/"+dtlabel+"?max-results="+dtnumposts+"&orderby=published&alt=json-in-script&callback=dtposts\"><\/script>");</script>
</div>

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

Thủ thuật hiển thị và sắp xếp bài đăng có ảnh thumbnail trên Blogspot

2012-04-22T17:01:00.000-07:00

Traidatmui.com – Tiện ích sắp xếp bài viết theo một tiêu chí nào đó như sắp xếp theo chữ cái a, b, c hay theo ngày tháng năm đăng bài đã được nhiều website ứng dụng và hôm nay mình xin chia sẻ cho các bạn thủ thuật sắp xếp bài viết có ảnh thumbnail dành cho Blogspot. Với thủ thuật này thì mình sẽ sắp xếp tăng dần hoặc giảm dần theo 4 tiêu chí là theo chữ cái của tên bài viết, theo tên của nhãn bài viết, theo ngày tháng năm xuất bản và cuối cùng là theo số comment của bài viết. Người dùng chỉ cần click vào tiêu đề là có thể sắp xếp các bài viết theo tiêu chí đã chọn có thể là tăng dần hoặc giảm dần theo chữ cái hay số. Bạn có thể xem qua demo bên dưới.

Hình ảnh minh họa

Giải thích: Bạn chú ý ở phần sortList:[[2,1]], đây là giá trị mặc định sắp xếp, ở đây khi load xong thì bài đăng sẽ được sắp xếp theo thời gian, tức là cột 3 và sẽ giảm dần. Nếu bạn muốn sắp xếp ở cột khác thì bạn thay số 2 ở phần sortList thành số cột mà bạn muốn sắp xếp, lưu ý là số 0 là bắt đầu cột thứ nhất. Nếu muốn sắp xếp tăng dần bạn thay số 1 ở phần sortList thành số 0.

Ở trên là chúng ta chỉ chọn 1 cột để sắp xếp, nếu bạn muốn mặc định sắp xếp theo 2 cột: ví dụ mình chọn cột 1 sắp xếp tăng dần và cột 3 giảm dần thì trong phần sortList bạn thay thành sortList:[[0,0],[2,1]] và nó sẽ sắp xếp ưu tiên từ trái sang phải.

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới

7. Cuối cùng save tiện ích lại

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

Thủ thuật tạo các nút điều khiển trên Blogspot

2012-04-05T20:23:00.000-07:00

Traidatmui.com – Qua một số web mình thấy tiện ích này cũng khá hay nên mình viết bài chia sẻ cùng các bạn để mọi người có thể sử dụng cho Blogspot của mình. Tiện ích đó đơn giản là các nút bấm điều khiển trên blog của bạn, các nút như lên đầu trang hay xuống cuối trang thì bạn đã quen thuộc, ở đây mình sẽ có thêm 3 nút với tính năng như trở về trang trước, nút tự động cuộn blog và ngưng cuộn blog. Nút tự động cuộn tức là khi bạn bấm vào nút này thì blog bạn sẽ tự động cuộn xuống dưới từ từ, đây sẽ giúp người đọc có thể đọc bài viết mà không cần dùng chuột kéo thanh trượt nữa. Bạn có thể xem demo trực tiếp trên site mình, bạn nhìn san bên phải sẽ thấy các nút bạn bấm vào lần lượt các nút để xem tính năng của nó.

5. Giờ bạn save template lại là xong

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

Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot

2012-03-25T01:38:00.000-07:00

Traidatmui.com – Tiếp theo các thủ thuật về "tiện ích các bài viết mới" thì hôm nay mình chia sẻ cùng các bạn một cách trình diễn các bài viết dạng slide trông rất hấp dẫn và mượt mà dành cho blog. Nhược điểm của tiện ích này là sử dụng nhiều file JS nên có thể load hơi chậm, tuy nhiên đổi lại thì các bài viết của bạn được trình diễn đẹp hơn. Ở tiện ích này sẽ được tích hợp các nút như Next, Previous và nút Stop/Play các bài viết. Ở đây mình không chỉ cung cấp cho các bạn một kiểu hiệu ứng cho tiện ích này mà mình sẽ cung cấp một vài kiểu hiệu ứng cho bạn lựa chọn, bạn có thể xem demo để thấy trực quan hơn.

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.main-slider{width:414px; /*độ rộng của phần bên trái*/
height:300px; /*chiều cao của phần bên trái*/
border-right:#ccc solid 1px;}
.lof-slidecontent { width:710px; /*độ rộng của cả tiện ích*/
height:300px; /*chiều cao của cả tiện ích*/
background:#eee;position:relative; overflow:hidden; border:#ccc solid 3px;}
.preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.preload div{ height:100%;width:100%; background:transparent url(https://lh4.googleusercontent.com/-TPsUtEKQzA0/TzN1m9oJHAI/AAAAAAAABug/MKqh5Yyz2CU/s16/load-indicator.gif) no-repeat scroll 50% 50%;}
.sliders-wrapper{position:relative; height:100%; z-index:3px; overflow:hidden; }
ul.sliders-wrap-inner{overflow:hidden; background:transparent url(https://lh4.googleusercontent.com/-TPsUtEKQzA0/TzN1m9oJHAI/AAAAAAAABug/MKqh5Yyz2CU/s16/load-indicator.gif) no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; overflow:hidden;}
ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;}
ul.sliders-wrap-inner li img{ padding:0px;
width:414px; /*độ rộng của ảnh bên trái*/
height:300px; /*chiều cao của ảnh bên trái*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:400px; /*độ rộng của phần mô tả hay phần tóm tắt nội dung*/
background:#000;
height:100px; /*chiều cao của phần mô tả hay phần tóm tắt nội dung*/
padding:0px 8px 5px 8px;
color:#fff;
opacity:0.8;
line-height:1.5em;
}
ul.navigator-wrap-inner h2,.slider-description h2{background:none; }
.slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;}
.slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff}
.navigator-content {position:absolute;right:0;top:0px;z-index:9;height:300px;color:#FFF
}
ul.navigator-wrap-inner h2{line-height:1.3em;padding:0 0 0 8px;font-size:14px;margin-left:85px;color:#fff;}
.navigator-wrapper{ z-index:10;
height:180px; /*chiều cao của list bài viết bên phải*/
width:310px; /*độ rộng của list bài viết bên phải*/
overflow:hidden;
color:#FFF;
}
ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
ul.navigator-wrap-inner li{ cursor:hand; cursor:pointer; list-style:none; padding:0; margin:0px; overflow:hidden; display:block; text-align:center;}
ul.navigator-wrap-inner li.active{background:url(https://lh6.googleusercontent.com/-JF6BDxbFvT8/TzN1kZh9yfI/AAAAAAAABug/a9qvkaGKbBI/s38/arrow-bg.png) no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner li.active div{background:url(https://lh3.googleusercontent.com/-3166O68fw-c/TzN1mPK7YLI/AAAAAAAABug/Bq7OLInYka4/s100/grad-bg.gif);
color:#FFF;}
ul.navigator-wrap-inner li > div{
background:#333;
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.navigator-wrap-inner img{
height:75px; /*chiều cao của ảnh thumb ở list bài viết bên phải*/
width:75px; /*độ rộng của ảnh thumb ở list bài viết bên phải*/
margin:8px 8px 8px 0px;
float:left;
padding:2px;
border:#C5C5C5 solid 1px;
}
.button-next,
.button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.button-next {
right:0px;
background:url(https://lh3.googleusercontent.com/-NJHX5XNWDJQ/TzN1m7ckUWI/AAAAAAAABug/MeA_exerz4M/s38/next.png) no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://lh3.googleusercontent.com/-D1J3UKSPQrw/TzN1pEXT2KI/AAAAAAAABug/M-3RqyZfmlY/s38/previous.png) no-repeat left center;
}
.button-control {
background:#333;
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
}
.button-control span { display:block; width:100%; height:100%;}
.action-start span {
background:url(https://lh5.googleusercontent.com/-ORdj9T9-ijA/TzN1oq-vxaI/AAAAAAAABug/wmCTLxgCUyI/s16/play.png) no-repeat center center;
}
.action-stop span {
background:url(https://lh4.googleusercontent.com/-34Ebtf56jbc/TzN1n55BOjI/AAAAAAAABug/wXMS9_HvW1c/s16/pause.png) no-repeat center center;
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới

- Ở trên mình chọn kiểu hiệu ứng là (easeOutBounce), bạn có thể chọn kiểu trình diễn khác bằng cách thay (easeOutBounce) thành một trong các tên sau: easeInOutExpo, easeInOutQuad.
- Ở trên mình cho tiện ích hiển thị tất cả bài viết trên blog không theo từng nhãn riêng nên bạn không cần quan tâm đến phần (label = "Advanced blogger";), phần đó mình thêm phụ để bạn nào muốn hiển thị theo nhãn thì sẽ phải quan tâm đến biến này. Để hiển thị theo từng nhãn riêng biệt thì bạn cần thay file JS bên dưới

http://data-traidatmui.appspot.com/scripts/jqslidernews.js

thành file JS sau

http://data-traidatmui.appspot.com/scripts/jqslidernews_label.js

Bạn nhớ sửa tên nhãn (Advanced blogger) lại cho đúng với tên nhãn mà bạn muốn hiển thị cho blog của bạn.

8. Cuối cùng bạn save tiện ích lại là xong.

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

Tham khảo code từ landofcoder.com

Tạo trang in chuyên nghiệp nhiều tùy chọn cho Blogspot

2012-03-14T06:40:00.010-07:00

Traidatmui.com – Hiện tại thì Blogger chưa có tính năng tạo trang in cho bài viết như các trang web được thiết kế trên joomla. Các blogger có thủ thuật về tạo nút print bài viết (bạn có thể xem tại đây) tuy nhiên với cách in bài như thế không chuyên nghiệp lắm và nó không loại bỏ được hết những phần thừa của trang blog như những hình ảnh, những tiện ích nhỏ lẻ trên blog đó. Mặc dù có thể thêm phần css để loại bỏ khi in ra, tuy nhiên nó không chuyên nghiệp. Hôm nay mình chia sẻ cùng các bạn các tạo trang in dưới dạng lightbox với Print Friendly, tức là trang in bài viết sẽ hiện ra trước blog và các phần khác của blog sẽ bị che lại giống như hiệu ứng lightbox cho hình ảnh.

Với Print Friendly thì có nhiều lựa chọn cho người dùng khi in bài viết của blog bạn rất tiện lợi,người dụng có thể chọn không in hình ảnh trong bài viết chỉ với thao tác đơn giản, có thể save nội dung bài viết của bạn thành file PDF rất dễ dàng và nhanh chóng. Hơn nữa, người dùng hoàn toàn có thể xóa phần nội dung bất kỳ chỉ với cái nhấp chuột để không in nội dung đó ra, ngoài ra nó còn có thể giúp người dùng lựa chọn file chữ để in ra hay save thành file pdf.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào 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 mở rộng mẫu tiện ích (Expand Widget Templates)
5. Tìm đến dòng code sau (Ctrl F)

6. Thêm code bên dưới vào ngay code vừa tìm được

<b:if cond='data:blog.pageType == "item"'><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><span style='float:right;background: url(http://lh3.ggpht.com/_BTztXRwC9ik/TOtCNrGN2qI/AAAAAAAAE94/XAaPXI5ro90/print-this.png) left no-repeat; padding-left: 25px;'><a class='printfriendly' href='#' onclick='window.print(); return false;' title='In bài viết này'>In bài này</a></span></b:if>

7. Cuối cùng save template lại là xong

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

Thủ thuật tạo Lazy Load cho hình ảnh trên Blogspot

2012-03-03T01:03:00.007-08:00

Traidatmui.com – Bài viết hôm nay mình xin chia sẻ cùng các bạn một thủ thuật có thể phần nào làm tăng tốc độ load trang blog của bạn. Với Lazy Load thì những hình ảnh trên blog của bạn mà không nhìn thấy thì sẽ không được load hay load về sau khi nội dung đã tải xong. Nếu trên blog của bạn có quá nhiều hình ảnh thì đây là thủ thuật hữu ích cho bạn, cách thức hoạt động của lazy load là những hình ảnh bạn nhìn thấy được trên trình duyệt và nội dung sẽ load trước và khi bạn cuộn chuột xuống tới hình ảnh nào bị khuất trên màn hình thì những hình ảnh đó lần lượt được tải về, tương tự như ở trang vietnamnet.vn. Điều này tăng tốc độ load của blog nhanh hơn vì không phải load một lần tất cả các hình ảnh trên blog của bạn. Có thể nói bạn sẽ khó hình dung được tác dụng của Lazy Load, bạn có thể xem demo bên dưới sẽ rỏ hơn, bạn hãy để ý cách load của các hình ảnh trong demo.

Như vậy là xong, tuy nhiên bạn vẫn cần tìm hiểu một số tùy chỉnh bên dưới để tùy biến cho phù hợp với blog của mình.

A. Chọn vùng sử dụng Lazy Load

Theo mặc định ở trên thì tất cả các ảnh trên blog sẽ được lazyload, bây giờ bạn muốn chỉ một phần nào đó trên blog của mình sử dụng Lazy Load. Ví dụ nếu bạn chỉ muốn Lazy Load cho phần bài viết (Post) thì bạn thay code mau đỏ trên thành bên dưới

$(".post img").lazyload({
effect : "fadeIn"
});

B. Thêm sự kiện

Mặc định là khi bạn cuộn chuột xuống tới ảnh nào thì nó sẽ được tải về và hiển thị ra, bạn cũng có thể thay đổi sự kiện cho nó với event.

$("img").lazyload({
effect : "fadeIn",
event : "click"
});

- Sự kiện click: khi bạn click vào ảnh thì nó mới load về
- Sự kiện mouseover: khi bạn rê chuột vào ảnh nó sẽ tải về

C. Số pixel ảnh load

Mặc định thì khi bạn thấy được hình ảnh nó sẽ hiện ra ngay, bạn có thể tùy chỉnh lại với tham số threshold.

$("img").lazyload({
effect : "fadeIn",
threshold : 100
});

threshold : 100 tương đương với ảnh sẽ được hiện khi nó load được 100 pixel, bạn có thể thay đổi thành số tùy ý.

D. Ảnh thay thế khi chưa load ảnh

Mặc định thì khi ảnh chưa được tải về nó sẽ hiện khung trống, bạn có thể dùng một hình ảnh để thay thế trong lúc chờ ảnh tải về hoặc không thể tải về với tham số placeholder.

$("img").lazyload({
effect : "fadeIn",
placeholder : "link ảnh"
});

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

Tham khảo appelsiini.net