Trái Đất Mũi

Traidatmui.com – Bài viết này mình chia sẻ cho các bạn một đoạn code có thể giúp trang Fanpage Facebook của bạn hiển thị dưới dạng ẩn hiện ở góc phải của Blogspot của bạn. Với kiểu hiển thị này sẽ giúp bạn tiết kiệm rất nhiều diện tích blog của bạn, trang Fanpage chỉ hiển thị ra khi bạn rê chuột vào biểu tượng Facebook ở góc dưới bên phải, bình thường thì nó sẽ được ẩn đi. Bạn xem chi tiết hướng dẫn bên dưới.

Hình ảnh minh họa

Thủ thuật tạo trang Fanpage ẩn hiện khi rê chuột cho Blogspot

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

img,a{border:0;}
#on{visibility:visible;}
#off{visibility:hidden;
}
#facebook_div{width:280px;height:270px;overflow:hidden;}
#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:280px;height:270px;position:fixed;right:-285px;}
#facebook_right img{position:absolute;top:-2px;left:-35px;}
#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:270px;left:-2px;top:-3px;}

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

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

<div id="on"><div id="facebook_right" style="bottom: 0;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsn170R4MXT8cw7jTDK8HoeapJx7G8OtJ0854-Tu-zO5M0pVEZ6-rePNkFjoHyGwiqgK9dD57tuQPCOi4KmylgnD1KNZ4SMxC2NrzaYBwfzeq7penS59xLXSGJWryK70fRByVQ6v40diI/s1600/helperblogger.com-facebook-icon.png" alt="" />
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/vnbloggertheme"
data-width="300" data-show-faces="true" data-stream="fasle" data-header="true"></div></div></div></div>

Bạn thay https://www.facebook.com/vnbloggertheme thành link của trang Fanpage của bạn là xong.

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

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

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

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

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

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

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

.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 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.com tham gia mạng quảng cáo Ad360.vn

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)

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.

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

» 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin32ywyqoo-KgW1qXMaPojVTkZkZXj5f7APc0vNxzZp-iSk7gm-XfMmk5LwqobiLoz8b-X9DTTZXLeZvhTb81oXCquIzuQJ9sz43flarwxzCqtQAI6jm5R_Lu-dS6BR2hLhFs7k3HGDViK/s515/100307-1920x1200.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghI20b-4IZCX6wWpBzlZhGXDwld_k1m6Ou29N9XtVAFFWJN8jrFNSSJfrLgrYtJ2ojYFI2UTMnc-PoffrSCNaPkkgw4VKsxEgqIg37O48rkct6Fxqcnr-noRLq0DkacjCxoJe4RvuKCRWU/s515/22355-2560x1600+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB3jMkXcN6qmchvIf9A_D6By7ef8R4tT3bA8kNSYZghmdzQxrt2ppsR8K4IPVtBeNezT7KPpcpiwAodgv9u2vXkjwV5pZiOu4VFUv2rVOjyZJ_a2Lul0ZGY_Ivnzsror6v4Z48rBjwy75o/s515/7+%255BDesktopNexus.com%255D.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPE9S96tzUnToElUES2RCXi7bs8o6DZkjll9mnhPHIuxKSvPfv8RhFp3tYmIDnBGx3cCcf-0fDt7K278Rl4_jpd0DAQxmtVn01E91EXolc0acZao7WrqVIplpFW_IkoIVjMZF991TkxkE/s515/1254602948249.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRMMgVt7ESAsjtrnTNm5h2Eng5c7GAW2r63ApR-2WRCPUf4xbyKQWCLEMQwi7pWdDew-2zZq-Y1zTDzH4ekySt_ugu6kCukmbI2jrWWKx4BYPHVzVTy57FkHkBrl8_eQP7Gv2QLA15xs3w/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

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

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

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

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

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

div.dark_square .pp_left,div.dark_square .pp_middle,div.dark_square .pp_right,div.dark_square .pp_content{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG9v1xjncA0U09kthf-z_Fczw3Fr726Xd1a_Q5n9bosoE8IzL90rfBbIAmpsv8Yt7jZluZgamIMyqjefFo0R7-1Q-3IJCK5CEfX34hRF-nNoyqz-tvmENk5CBZ2c9A4gnlV8JnY2XOS8DT/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPSvnpoJrvQHpKNbDP0phyHDDzqTgzhgymewKoF8rrinUQenQMCfzmLYAyzeubSdHmwJKWSxsvB-Od-5WKnNRDgI7wkNNnC3rVKFdG76CRvEHzya2B8cETMkzTs3FpIEKodElr9KTFdftR/s24/loader.gif) center center no-repeat}
div.dark_square .pp_content_container .pp_left{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2h_l15r6XpbC56i7OgCic1-xJxoaqdeSZGOX8dtoYPM3wdjCb_QIqN_sdFo6YYxuGQ1g-JhFLjyfUg2QzTHNsTkcAy2tyNm6haMGuMqMU_D1YVHTEj37VyVLlaJXKTdY6LNmmrCN5M7V4/s20/contentPattern.png) top left repeat-y}
div.dark_square .pp_content_container .pp_right{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2h_l15r6XpbC56i7OgCic1-xJxoaqdeSZGOX8dtoYPM3wdjCb_QIqN_sdFo6YYxuGQ1g-JhFLjyfUg2QzTHNsTkcAy2tyNm6haMGuMqMU_D1YVHTEj37VyVLlaJXKTdY6LNmmrCN5M7V4/s20/contentPattern.png) top right repeat-y}
div.dark_square .pp_expand{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0rn8wCNB5ZLn-B22dk3TQViP52FTzIojeYvASZ2wZTaZO8kRzYFNs55JrI3zd7Tc0VEO8HFL1f_HOgjjOTSnRNYcJhBTAbLlzP-LExjlNSK3Jz0-JwWs6UGgoUrA4uMUUsVWHZ3gk4EM/s130/spriteround.png) -31px -26px no-repeat;cursor:pointer}
div.dark_square .pp_expand:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0rn8wCNB5ZLn-B22dk3TQViP52FTzIojeYvASZ2wZTaZO8kRzYFNs55JrI3zd7Tc0VEO8HFL1f_HOgjjOTSnRNYcJhBTAbLlzP-LExjlNSK3Jz0-JwWs6UGgoUrA4uMUUsVWHZ3gk4EM/s130/spriteround.png) -31px -47px no-repeat;cursor:pointer}
div.dark_square .pp_contract{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0rn8wCNB5ZLn-B22dk3TQViP52FTzIojeYvASZ2wZTaZO8kRzYFNs55JrI3zd7Tc0VEO8HFL1f_HOgjjOTSnRNYcJhBTAbLlzP-LExjlNSK3Jz0-JwWs6UGgoUrA4uMUUsVWHZ3gk4EM/s130/spriteround.png) 0 -26px no-repeat;cursor:pointer}
div.dark_square .pp_contract:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0rn8wCNB5ZLn-B22dk3TQViP52FTzIojeYvASZ2wZTaZO8kRzYFNs55JrI3zd7Tc0VEO8HFL1f_HOgjjOTSnRNYcJhBTAbLlzP-LExjlNSK3Jz0-JwWs6UGgoUrA4uMUUsVWHZ3gk4EM/s130/spriteround.png) 0 -47px no-repeat;cursor:pointer}
div.dark_square .pp_close{width:75px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0rn8wCNB5ZLn-B22dk3TQViP52FTzIojeYvASZ2wZTaZO8kRzYFNs55JrI3zd7Tc0VEO8HFL1f_HOgjjOTSnRNYcJhBTAbLlzP-LExjlNSK3Jz0-JwWs6UGgoUrA4uMUUsVWHZ3gk4EM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0rn8wCNB5ZLn-B22dk3TQViP52FTzIojeYvASZ2wZTaZO8kRzYFNs55JrI3zd7Tc0VEO8HFL1f_HOgjjOTSnRNYcJhBTAbLlzP-LExjlNSK3Jz0-JwWs6UGgoUrA4uMUUsVWHZ3gk4EM/s130/spriteround.png) -1px -100px no-repeat;height:15px;width:14px}
div.dark_square .pp_nav .pp_pause{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0rn8wCNB5ZLn-B22dk3TQViP52FTzIojeYvASZ2wZTaZO8kRzYFNs55JrI3zd7Tc0VEO8HFL1f_HOgjjOTSnRNYcJhBTAbLlzP-LExjlNSK3Jz0-JwWs6UGgoUrA4uMUUsVWHZ3gk4EM/s130/spriteround.png) -24px -100px no-repeat;height:15px;width:14px}
div.dark_square .pp_arrow_previous{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0rn8wCNB5ZLn-B22dk3TQViP52FTzIojeYvASZ2wZTaZO8kRzYFNs55JrI3zd7Tc0VEO8HFL1f_HOgjjOTSnRNYcJhBTAbLlzP-LExjlNSK3Jz0-JwWs6UGgoUrA4uMUUsVWHZ3gk4EM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0rn8wCNB5ZLn-B22dk3TQViP52FTzIojeYvASZ2wZTaZO8kRzYFNs55JrI3zd7Tc0VEO8HFL1f_HOgjjOTSnRNYcJhBTAbLlzP-LExjlNSK3Jz0-JwWs6UGgoUrA4uMUUsVWHZ3gk4EM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiclxU9ZlwuQjcGzlFYrWFN7HehIKRNW2IGBX5RTDA5RygK86mwjCDS1Qq32RnCnbM9yvNl8JIzIFVpkfFXq44H0vuxpO2az68g-jwv7caAgc_z4JkYH_MvxVMgbpQPxuKoqicnY5sn1NUY/s61/btnNext.png) center right no-repeat;cursor:pointer}
div.dark_square .pp_previous:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik58GE3bN3r4-B2cYxA0-VzlBJpdjbhkNSekgl4CherJUa77sJCjYedmZzfVQUb9SU3HrNXr8KvvwSk1hlDJecwyXyfSPMl66WP8FjQbeZp18mXTnM6dOHP1rt5-Qfg5k9eWlYf28JYSOG/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSoNd4VqlPt0Ym1BFrLX6mcCnpOnSHx6KYr88hw9AEwRCkbKD8BLq6RgrP-jP3VstwSvgWdNZFSgwICTiDOxpB5ori94xczLLOM8dHge7K0Jzl86_vEwD18Vn3JBa2Ww3WOkKJ5gQ9qHc/s130/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.light_square .pp_expand:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSoNd4VqlPt0Ym1BFrLX6mcCnpOnSHx6KYr88hw9AEwRCkbKD8BLq6RgrP-jP3VstwSvgWdNZFSgwICTiDOxpB5ori94xczLLOM8dHge7K0Jzl86_vEwD18Vn3JBa2Ww3WOkKJ5gQ9qHc/s130/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.light_square .pp_contract{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSoNd4VqlPt0Ym1BFrLX6mcCnpOnSHx6KYr88hw9AEwRCkbKD8BLq6RgrP-jP3VstwSvgWdNZFSgwICTiDOxpB5ori94xczLLOM8dHge7K0Jzl86_vEwD18Vn3JBa2Ww3WOkKJ5gQ9qHc/s130/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.light_square .pp_contract:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSoNd4VqlPt0Ym1BFrLX6mcCnpOnSHx6KYr88hw9AEwRCkbKD8BLq6RgrP-jP3VstwSvgWdNZFSgwICTiDOxpB5ori94xczLLOM8dHge7K0Jzl86_vEwD18Vn3JBa2Ww3WOkKJ5gQ9qHc/s130/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.light_square .pp_close{width:75px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSoNd4VqlPt0Ym1BFrLX6mcCnpOnSHx6KYr88hw9AEwRCkbKD8BLq6RgrP-jP3VstwSvgWdNZFSgwICTiDOxpB5ori94xczLLOM8dHge7K0Jzl86_vEwD18Vn3JBa2Ww3WOkKJ5gQ9qHc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSoNd4VqlPt0Ym1BFrLX6mcCnpOnSHx6KYr88hw9AEwRCkbKD8BLq6RgrP-jP3VstwSvgWdNZFSgwICTiDOxpB5ori94xczLLOM8dHge7K0Jzl86_vEwD18Vn3JBa2Ww3WOkKJ5gQ9qHc/s130/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
div.light_square .pp_nav .pp_pause{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSoNd4VqlPt0Ym1BFrLX6mcCnpOnSHx6KYr88hw9AEwRCkbKD8BLq6RgrP-jP3VstwSvgWdNZFSgwICTiDOxpB5ori94xczLLOM8dHge7K0Jzl86_vEwD18Vn3JBa2Ww3WOkKJ5gQ9qHc/s130/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
div.light_square .pp_arrow_previous{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSoNd4VqlPt0Ym1BFrLX6mcCnpOnSHx6KYr88hw9AEwRCkbKD8BLq6RgrP-jP3VstwSvgWdNZFSgwICTiDOxpB5ori94xczLLOM8dHge7K0Jzl86_vEwD18Vn3JBa2Ww3WOkKJ5gQ9qHc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSoNd4VqlPt0Ym1BFrLX6mcCnpOnSHx6KYr88hw9AEwRCkbKD8BLq6RgrP-jP3VstwSvgWdNZFSgwICTiDOxpB5ori94xczLLOM8dHge7K0Jzl86_vEwD18Vn3JBa2Ww3WOkKJ5gQ9qHc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiclxU9ZlwuQjcGzlFYrWFN7HehIKRNW2IGBX5RTDA5RygK86mwjCDS1Qq32RnCnbM9yvNl8JIzIFVpkfFXq44H0vuxpO2az68g-jwv7caAgc_z4JkYH_MvxVMgbpQPxuKoqicnY5sn1NUY/s61/btnNext.png) center right no-repeat;cursor:pointer}
div.light_square .pp_previous:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik58GE3bN3r4-B2cYxA0-VzlBJpdjbhkNSekgl4CherJUa77sJCjYedmZzfVQUb9SU3HrNXr8KvvwSk1hlDJecwyXyfSPMl66WP8FjQbeZp18mXTnM6dOHP1rt5-Qfg5k9eWlYf28JYSOG/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX8LqViPJvHtfC7J_Wbn5t3_8czHoXmw8k9htkUX48qN9dy0mnPatDD2UqNyfumoEZeuFng2OwS5jgzRLpSqbi-vF1HSHfShGTCs0Xwg8tztkJnZ8nUIaWnAfwveH5rhDrLqmr5RfbM_Fq/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiclxU9ZlwuQjcGzlFYrWFN7HehIKRNW2IGBX5RTDA5RygK86mwjCDS1Qq32RnCnbM9yvNl8JIzIFVpkfFXq44H0vuxpO2az68g-jwv7caAgc_z4JkYH_MvxVMgbpQPxuKoqicnY5sn1NUY/s61/btnNext.png) 10000px 10000px no-repeat;display:block;float:right;height:100%;text-indent:-10000px;width:49%}
a.pp_previous{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiclxU9ZlwuQjcGzlFYrWFN7HehIKRNW2IGBX5RTDA5RygK86mwjCDS1Qq32RnCnbM9yvNl8JIzIFVpkfFXq44H0vuxpO2az68g-jwv7caAgc_z4JkYH_MvxVMgbpQPxuKoqicnY5sn1NUY/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!

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!

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

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

.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

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

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

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!

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.

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

.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUFXTEctNmc8S0ljjPMqU4s70M7wPN6nJJWM8XSejDuw_aaHlHsLDRsqD-Cm2tZgjtRJIwX2qpll3o99Jl6_gxJBX6a-TKRZUt6BzrvnD_USwSFAM3NCE3WHVyygmgGixOYnu1Bonq_R1/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!

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!

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

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

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