Hướng dẫn SEO, thiết kế webs
Showing posts with label blogspot. Show all posts
Showing posts with label blogspot. Show all posts

LIST WORKING WHEN DESIGN BLOG - ALL ABOUT BLOGSPOT

EVERY BACK GROUND NEED HTML, CSS, Javascrip, and PHP 
Now I can design web by background blog theo this is background free host strongly it will making website you design cheaper (only 250k price domain name)
Target of this website. Collection working tested, (testing) for design one website blogspot fast, most simply dont lose more time search everything because of me so that i can active everything and tồn tại lâu không mất hình minh họa. Each guide or question set link to one post. Making beautiful, SEO standard. This is backgroud development next version, record experence for the future.   

                       Google site->blogspot->worldpress->drupal 
Tools important design web
Google guide   Firebug (or here) - Chrome Dev Tool (or here)-   notepad++ - Color table - color pic- HTML -  CSS (view.pdf)- Java Scrip - Photoshop online - Blog - Group design blog - templates - codepen.io - Develope code - Google Web Designer
Making Vblog or book guide, tutorial other people (làm video, tutorial hướng dẫn mọi người làm)
Tested working
START
1. Domain name (setup domainame), Setup <title>, <description>, Google analytic,
Step1: đánh www.tenmien vào dashboard of blogger -> Google sẽ đưa ra mã
Step2: Tạo bản ghi CName với thông tin google cung cấp
Step3: Tạo thêm 4 bản ghi A point to vào địa chỉ
 
216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21
Step4: Về dasboard of blogger tick vào ô chuyển hướng -> chuyển cả không có tên miền sau đó lưu lại là xong
Khắc phục tình trạng bị chặn hình ảnh mặc dù đã thay tên miền
2.Setup SEO for web(Gsite, blog, wordpress, drupal, facebook, G+, youtube, ) 
Making blog SEO standard - Or view book 
3. Setting favicon
4. Chỉnh responsive (tương thích hiển thị trên các thiết bị khác nhau)
http://www.responsinator.com/ (nhập site của bạn vào sẽ thấy) - web nay design  responsinatior
W3school guide design - or here
5. Tạo nút call now, luôn hiển thị trên màn hình khi truy cập bằng điện thoại xem trang này -  Hướng dẫn, trong wordpress nó là một plugin call now
BANNER - 
        3 kinds banner cho blog (static, slice show, gif or flash)
NAVIGATION

3 kinds menu ngang - Loại 1 - Kind 2fpt - Kind 3 
Collection menus vertical
- Code menu horital
PAGE - POST
Styles pages in blog (index, archive, item, static, 404)
Design one Static page making home page
- Display post to homepage we need using  (Ta chỉ cần điều chỉnh điều kiện hiển thị <b:if...> nam trong </b: if>)
Đã làm thành công ở đây  (ta cần một số chỉnh sửa)
1. Hiển thị thêm More
2. Show widget at home page or other page
<b:if cond = 'data:blog.url==data:blog.homepageUrl'>
Chuyển <b:if> tới đằng sau           <b:include name='quickedit'/>
</b:if>
3. Tìm đến img.label_thumb
Chuyển height 100px, width 150px của ảnh, không cho bo tròn vì bo tròn xấu.
 - VD -  here -
- Widgets grid layout,display page product - here more -
Để 1 bài viết (post) luôn hiện lên đầu tiên
Display posts (recently, popular, the same lable,  older, comment post, like post... )
      + Display sliceshow at homepage
      + Display post the same lable to homepage, design homepage 
      +Normal cord for blogspot 
      + Đã tập hợp trong file .doc
Xây dựng trang sản phẩm bằng thẻ div - Mình đã làm 1 - Đã làm 2 - view here  - Xem các template
     #PopularPosts2>h2  { display:none; } không cho hiển thị tiêu đề h2. Có thể dụng recently post để đặt lên main post, sau đó đặt chế độ chỉ cho hiển thị ở trang chủ không cho hiển thị ở trang con.
Phân trang, đánh số trang 
WIDGETs
- Hiển thị widget ở những trang nhất định trong blog here - here - here - suadieuhoa115
-Thêm add add a gadget vào layout vào vị trí bất kỳ (mục đích để thêm widget vào vị trí trong layout)
      + Làm hiển thị thêm một add a gadget vao layout view here - view here  - here 
      + Xóa một widget không cho xóa
      + Chuyển đổi các loại layout 
      + Change element in blog 
      + Chỉnh sửa layout của blog theo ý mình như thế nào? 
Display chat in right coner - bestest here - hereHere - here - here
      + Tập hợp nhiều loại hỗ trợ Vchat, uhchat, other...
      + Nói rõ cách điều chỉnh ( xổ ra trễ 30s, hiện chữ ra giống như đánh máy... )
      + Các cách hiển thị gây ấn tượng
      + Mỗi hộp chat có thể dán vào nhiều web, chỉ mất 300k/năm
      + Hiển thị nút Share luôn nổi bên trái
      + Hiển thị menu nhấn vào sẽ xổ ra bên phải -  template1 
Setup popup đề nghị đăng nhập, quảng cáo - Template - here - here - here - hjere - here -here -  
Good widgets  - Tổng hợp widgets - Tập hợp tất cả các widget hay sử dụng
- Toi uu chay nhanh javascrip trong blogspot - View here - View here -
FACEBOOK
Phải đăng nhập facebook mới xem được toàn bộ post
- Thêm comment cho facebook
Setting button like facebook
Khi đăng bài sẽ tự động tự động đăng post to facebook, tiwtter -here -  same here -
- Cài đặt comment facebook vào tất cả các trang archive
- Auto like khi khách click vào vị trí bất kỳ trên blogspot
Widget recently comment (khi khách comment vào web sẽ chỉ ra cho thấy comment ở đâu)
- Khi khách comment vào web sẽ thấy comment đó trên facebook quản lý
- Hiển thị post có nhiều comment nhất (Popular comment)
TEMPLATE

Tập hợp các template mình đã làm
- Một số template thông dụng (bán hàng)
- 10 trang cho download template blog nổi tiếng
Nhiều template bán hàng miễn phí đẹp dạng grid layout (nhớ search từ grid layout template blogger)
- 10 Template grid layout mình thích nhất - more here -
- Flash template of blogger 
OTHERS 

21. Thay older post, newer post, home page bằng tiếng việt hoặc bằng hình ảnh 
22. SEO trên youtube
23. SEO trên facebook 
22. Image
Slice show ảnh trên website (đã test thành công) - here -
-Widget slide images blogspot (nhiều kiểu đẹp)
Làm ảnh động gif trực tuyến
- Tạo ảnh chạy theo chiều ngang - dọc view here - template -
Cho dòng chữ trong widget chạy - Tạo dòng chữ chạy trong blogger
- Widget làm chữ chạy trên sidebar
- Đặt ảnh quảng cáo 2 bên  here - here


Các việc chưa test (finish test set in tested)

8. Đưa chuột vào ảnh tạo hiệu hứng (mờ, lật)
10.Cài đặt yahoo, skype
Các việc đang cẩn thay đổi tại website
Những việc cần làm ở các website khác nhau bằng blog, chưa làm được thì đưa vào đây.
http://hsgioi.blogspot.com/
-  Cần thay đổi giao diện bài giảng thumbnail video and image giống đây. Mỗi học sinh ở một lớp nào đó có nhìn thấy ngay video cần học đúng chương trình của mình. Khi nhấn vào chương đó ra một chuyên đề do nhiều thấy giáo nổi tiếng (giảng viên ĐHSP, giảng viên trường chuyên...) giảng, mỗi thầy giảng một bài mẫu, học sinh có thể xem bài mẫu miễn phí nhưng xem hết thì phải đóng phí bằng nạp thẻ điện thoại vào tài khoản. 
-Web trên tham khảo các web:http://thayquang.edu.vn/ - http://mclass.vn/ - http://mclass.vn/thaynguyenbk -  
http://pmbokfsg.blogspot.com/
- Làm cho mỗi ảnh thumbnain xuất hiện title giới thiệu tối đa 2 dòng, nếu viết nhiều hơn sẽ xuất hiện 3 dấu chấm. Khi nhập quá 2 dòng không bị trượt like đi
-Video xuất hiện thumbnail có kích thước giống ảnh.
- Tại sao dấu like không xuất hiện trên trình duyệt firefox
- Chưa hiển thị edit khi đăng nhập nick truy cập
suamaytinhtannoihnhcm.blogspot.com
- Thay đổi tên miền phù hợp hơn
- Xây dựng menu giống đây
- Đặt back ground h2 the same here (xong)
- Hiển thị hỗ trợ trực tuyến bên góc phải





Tham khảo
Hepper of blogger
Collection  working with blogspot .doc
http://fandung.blogspot.com/2009/04/blog-tips-tutorials.html Nhiều thủ thuật hay
56 thủ thuật blogspot - pass caytamgui - trong drive down xuống và xem
How are using worlpress.org, worldpress.com or blogger? (delete wordporess.com because not by Gsite)
How are using wordpress, Joomlar or drupal?
http://www.wix.com/ Thiết kế web flash chỉ bằng việc kéo thả, không cần biết mã 45.000 người truy cập mỗi ngày
http://www.tranbadat.info/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt%20Blogspot 
13 skills every develope code need
Guide host management: Here - here - here -
Books: (Press image link to book)
    


Name: Blogger template book
Author: Amanda Farani

Name: blogger for begin
Author: Amanda Farani

Name: How to make a blogger template
author:

Name: Web development
Author: Võ Minh Mẫn Izweb

Quy trình thiết kế web





Template grid layout

Grid layout for blogger

Một trang bán hàng phải hiển thị sản phẩm dạng hình ảnh ra bên ngoài đó chính là grid layout. Thực chất bạn gọi label dạng grid layout ra bên ngoài. Dưới đây là các dạng grid layout đẹp

Lấy ở đây - here - here 
Popular grid lấy ở đây - Or here -  




Nhiều template grid layout lấy  -  ở đây  - Or here -  More template grid
http://helplogger.blogspot.com/2014/05/display-blogger-posts-in-grid-view-with-thumbnails.html

Chống copy nội dung bài viết trong blogspot

Bạn không muốn cho người khác copy nội dung bài viết của bạn trên internet nhưng vẫn muốn chia sẻ một nội dung đó với mọi người thông qua mạng internet. Bài viết này sẽ hướng dẫn các bạn cách để chống mọi hành vi muốn sao chéo nội dung bài viết trên website của bạn thông qua việc chống quét khối (bôi đen) văn bản, chống click và vô hiệu hóa các tùy chọn trên menu chuột phải để chọn các tùy chọn như copy hay xem mã nguồn.

1- Đăng nhập (login) vào Blog
2- Tải mẫu về lưu lại sau đó mới tiến hành các bước bên dưới nha (phòng khi các bạn làm nhầm sẽ gây thiệt hại rất lớn).
3- Vào Mẫu (Template)
4- Chọn Chỉnh sử HTML (Edit HTML)
5- Thay thế thẻ  <body> thành đoạn code bên dưới:
<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>
6- Bấm lưu Lưu

Cập nhật!

- Đối với các mẫu Simple của blogspot thì thẻ  <body> có thể khác như:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
-Khi đó bạn thay nó thành đoạn code như sau:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass' oncontextmenu='return false' onmousedown='return false' onselectstart='return false'>

Chúc thành công!

Với thủ thuật chống copy nội dung trên website này, chắc chắn sẽ giúp bạn phần nào bảo vệ được nội dung của mình trước những kẻ chuyên đi sao chép bài viết của người khác về làm của riêng mình. 

Nhưng Terocket cũng xin nhấn mệnh rằng, đây chỉ là biện pháp chống sao chép tặc tức thời, không mang giá trị lâu dài, vì nó sẽ ảnh hưởng đến trải nghiệm người dùng của bạn trên website nhé. Hãy tập trung vào chất lượng bài viết, hãy đóng dấu hình ảnh chẳng hạn, như vậy sẽ tốt hơn cho quá trình bạn phát triển website.

Cách tăng tốc blogspot và upload js lên host


Hiz. Đúng ra viết bài này hơi lệch chủ đề Guitar một xíu, nhưng không sao. Dân chơi Guitar phần nhiều cũng rất thích CNTT mà. Được cái nọ thì mất cái kia như lão niemdau.net nói nên tớ thấy dân Công nghệ cần học Guitar để tăng khả năng tán tình :)
Hơi lạc đề rùi. Giờ vào vấn đề chính :

Làm thế nào tôi có thể làm cho blog của tôi tải nhanh hơn?

Copyring to : http://guitarzin.blogspot.com/Tốc độ tải blog của bạn rất quan trọng để thu hút thêm người đọc vào blog của bạn. Nếu blog của bạn mất nhiều thời gian để tải, nhiều độc giả tháng năm rời khỏi blog của bạn trước khi họ có cơ hội để đọc. Dưới đây là một số mẹo và trò lừa rằng sẽ giúp blog của bạn tải nhanh hơn và thu hút thêm người sử dụng:
Blog của bạn thời gian tải có thể bị ảnh hưởng bởi số lượng bài viết của bạn hiển thị trên trang chính của bạn. Bạn có thể dễ dàng chỉnh sửa số bài viết hiển thị của chính trang Cài đặt từ | định dạng thẻ. Sau đó bạn có thể chọn trong số các bài viết mà bạn muốn hiển thị trên trang chính. Chúng tôi khuyên bạn nên hiển thị hay ít hơn 10 bài viết trên trang chính.

Javascript bên thứ ba và các liên kết

Đối với tốc độ tải tối ưu blog, chúng tôi khuyên bạn nên sử dụng công cụ Google / Blogger widgets, JavaScipt và các liên kết. Tuy nhiên, nếu bạn cần phải sử dụng bên thứ ba và các liên kết JavaScipt, blog của bạn sẽ được tải nhanh hơn nhiều nếu bạn đặt tất cả các mã JavaScript ở dưới cùng của blog của bạn. Nếu bạn có mã JavaScript bên thứ ba và các liên kết bên trong của bạn, họ trong đặt ở dưới cùng của sidebar.

Hình ảnh và Truyền thông

Các chi tiết hình ảnh, video và các phương tiện truyền thông đa mà bạn có trong blog của bạn của nó sẽ còn mất để tải. Tuy nhiên, hình ảnh và đa phương tiện khác rất quan trọng để thu hút người sử dụng blog của bạn, do đó điều quan trọng là để tối ưu hóa tốc độ tải của các hình của bạn và các phương tiện truyền thông. Dưới đây là một số mẹo để tăng tốc độ tải của phương tiện truyền thông của bạn:
  •  Giảm kích thước của các hình của bạn hoặc sử dụng hình nhỏ mà liên kết với đầy đủ kích thước hình ảnh.
  • Nếu bạn sử dụng hình ảnh bên thứ ba, xem xét việc tải lên chúng để Picasa Web Albums thông qua Blogger đăng bài biên tập.
  •  Nếu bạn có một số lượng lớn để hiển thị hình ảnh, bạn có thể tải lên tất cả các hình ảnh của bạn (từ một kỳ nghỉ hoặc sự kiện) cho một album Web Picasa và liên kết với các album trong bài viết của bạn hay sidebar.

Các gợi ý

  • Nếu bạn đã được thêm vào bất kỳ tuỳ chỉnh CSS cho blog của bạn, bạn hãy đặt chắc chắn rằng nó ở trên cùng của trang.
  • Điều quan trọng nhất, nội dung của blog của bạn rằng catches hút sự chú ý của người đọc nên nạp nhanh. Để giúp bạn nhận ra đó là bài dùng lâu để tải các bạn có thể sử dụng Stopwatch. Để sử dụng Stopwatch, blog của bạn, chỉ cần nhập URL vào hộp văn bản và bấm vào "Bắt đầu StopWatch". Stopwatch sau đó sẽ mở blog của bạn trong một khung và sẽ ghi lại thời gian cho tất cả mọi thứ trên blog của bạn để tải, bao gồm cả hình ảnh, video, widgets, vv Những bài dài quá có thể dùng thủ thuật rút ngắn bài.
Copyri
Tóm lại là :
1. JavaScipt để ở cuối cùng hoặc chỉ đường link vào host drive 
2. CSS để ở đầu tiên
3. Hình ảnh nên sử dụng hình thu nhỏ hoặc các công cụ show ảnh hay slide
4. Dùng link RSS để tăng tốc độ xem hay tăng rank trên google








Upload .js lên host
http://www.math2it.com/2014/08/upload-file-javascript-len-google-drive.html 

Các kiểu trang trong blog

Good widgets

Hướng dẫn thêm add a widget vào layout blog

Hiển thị bài viết cùng label ra trang chủ

Một trang tin tức cần hiển thị nhiều label ra các dạng khác nhau. Một trang bán hàng cũng cần hiển thị lớp label cách sản phẩm theo catalog.  Dưới đây hướng dẫn làm điều đó
- Thiết kế một trang tĩnh làm trang chủ
- Hiển thị bài viết ra ngoài trang chủ



Tham khảo
http://thoaiguideblog.blogspot.com/2016/03/hien-thi-bai-viet-theo-nhan-bat-ky-o.html 
http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html 
http://blogger-hints-and-tips.blogspot.com/2010/03/displaying-gadget-only-on-home-page.html 
http://helplogger.blogspot.com/2012/03/hideshow-widgetsgadgets-in.html 
http://thaimeo.net/2015/03/huong-dan-hien-thi-bai-viet-theo-nhan-o-trang-chu-blogger.html 
http://daihiepaccounting.blogspot.com/2015/06/bai-viet-hien-thi-theo-nhan-ngoai.html
http://daihiepaccounting.blogspot.com/2015/06/hien-thi-bai-viet-theo-nhan-ngoai-trang.html 
http://forum.idichvuseo.com/threads/bai-viet-hien-thi-theo-nhan-ngoai-trang-chu-cho-blogspot.9014/
http://hieumeoblog.blogspot.com/2011/09/hien-thi-bai-viet-ngoai-trang-chu-giong_03.html
http://www.terocket.com/2011/07/hien-thi-widget-o-nhung-trang-nhat-inh.html
http://www.mybloggertricks.com/2011/01/how-to-show-and-hide-widgets-in-blogger.html
http://www.bloggertipsseotricks.com/2014/10/hide-show-gadget-widget-in-blogger.html 
http://nguoithanhmien.blogspot.com/2014/06/cach-tao-widget-bai-viet-moi-theo-nhan.html
http://www.bloggingspell.com/add-related-posts-blogger/
http://www.bloggerwidgetgenerators.com/2014/02/related-posts-widget-for-blogger-blogspot.html
http://wikiblogvn.blogspot.com/2014/05/rut-gon-bai-viet-tren-trang-chu-blogger.html 
http://www.terocket.com/2013/04/autoreadmore-thumbnail-scripts-blogspot.html (hiển thị thumbnail có mô tả ra trang chủ)


Phân trang, đánh số trang cho blog

Hướng dẫn phân trang, đánh số trang cho blog 
- Một bài viết quá dài ta sẽ sử dụng ngắt trang (break). Khi đó nó sẽ hiển thị thêm dòng readmore
- Điều chỉnh số post hiển thị trên trang chủ ta vào
                + Setting> post and comment
                + Hoặc cũng có thể ta vào layout đặt lại số trên đó
- Đánh số trang

Trong Blogspot, ta có thể thiết lập số bài hiển thị cho mỗi trang bằng cách vào Settings - Posts and comments rồi chọn số thích hợp. Khi số bài của blog vượt quá con số đó, ta sẽ thấy blog hiển thị chữOlder Post để duyệt qua bài cũ. Cách này khiến bạn phải duyệt qua từng trang một mà không thể chủ động vị trí. Blog không hỗ trợ bất kì ứng dụng nào cho việc đánh số trang, giúp người đọc di chuyển nhanh gọn, bookmark tiện lợi hoặc biết chính xác số bài viết trong mục liên quan hoặc tổng thể.

Sau một hồi lang thang thử nghiệm, HD Việt đã lựa chọn một bài rất hay của helplogger để thực hành, với 7 kiểu cách trình bày đẹp mắt cho bạn lựa chọn,

Để thêm dòng đánh số trang cho toàn bộ blog, kể cả các trang Label, cần thực hiện 3 bước:

  • Thêm CSS để tạo style cho ứng dụng
  • Thêm JavaScript để xử lý đánh số trang
  • Chỉnh sửa cho Label

1. Thêm CSS để tạo style cho ứng dụng


  • Nhấn chuột vào ô soạn thảo code và tổ hợp Ctrl + F để tìm đến đoạn sau:


  • ]]></b:skin>
  • Chọn một style ưa thích rồi dán đoạn CSS lên ngay trên dòng ]]></b:skin>

Style 1



#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}


Style 2



#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3


 #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 4


#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 5


#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 6


#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 7


#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}



  • Nếu muốn ẩn chữ Last/Fisrt thì bạn thêm dòng sau vào dưới đoạn CSS vừa chọn
.firstpage, .lastpage {display: none;}


  • HD Việt đã chọn style 3 cho blog này, bạn có thể xem ví dụ.

2. Thêm Script để đánh số trang


  • Tìm đến đoạn sau: </body> (cuối body bài)
  • Dán đoạn code sau ngay dòng phía trên con trỏ vừa tìm đến

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=15;
    var numPages=8;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="https://googledrive.com/host/0B3s-Lt6371k3VEJRdzcteFZud0E"/>
</b:if>
</b:if>

  • Thay số màu đỏ và xanh bằng số/kí tự thích hợp cho blog của bạn
  • Đến đây bạn có thể Save template lại và kiểm tra kết quả. (có thể phải Ctrl + F5 để update blog)
  • Nếu đoạn java scrip trục trặc ta thay bằng:  http://helplogger.googlecode.com/svn/trunk/page-navigation2.js

3. Chỉnh sửa cho Label


  • Mặc định mỗi trang Label sẽ hiển thị 20 bài. Nếu bạn chỉnh đến phần trên rồi thì blog đã đánh số trang được rồi, nhưng mục Label vẫn chưa có gì thay đổi.
  • Cần tác động vào con số mặc định của Label để đánh số trang.
  • Tìm đến các đoạn sau: expr:href='data:label.url' (có thể có 3 đoạn như vậy)
  • Thay tất cả bằng expr:href='data:label.url + "?&amp;max-results=15"'
  • Save template rồi refresh blog để xem kết quả.

4. Chú ý:


  • Bài viết đã được HD Việt trực tiếp thử nghiệm và kiểm tra.
  • Nếu đoạn js bị trục trặc, bạn có thể sử dụng code này (backup) hoặc đây hoặc thay bằng      https://googledrive.com/host/0B3s-Lt6371k3VEJRdzcteFZud0E 
  • Chúc các bạn thành công.