Tiện ích phân trang đẹp và hấp dẫn cho blogger

By Unknown Posted at 1:56 AM Thủ Thuật Blog 0 comments

Bài hướng dẫn này sẽ giúp bạn tạo được widget chuyển hướng trang với phong cách đẹp và hấp dẫn. bạn có thể chọn nó theo ý thích, Nó giúp khách có thể truy cập vào tất cả các trang trên blog của bạn. Nó sử dụng java script, CSS và HTML cho widget.

Numbered Page Navigation Widget For Blogger

Bạn hãy làm theo các bước đơn giản sau:

1. Đăng nhập vào tài khoản blogger và nhấp thả xuống.

2. Bây giờ chọn " Mẫu "Cũng giống như dưới đây.

3. Bấm vào Thêm tiện ích và chọn "HTML / Javascript
4. Dán dưới đây một trong những mã dưới đây.
Style 1:

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/AAAAAAAAAF8/QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/AAAAAAAAAF8/QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/AAAAAAAAAF8/QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/AAAAAAAAAF8/QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px;  -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style> 
<a href="http://thegioiblogs.blogspot.com/" target="_blank" title="Free Backlinks"><img src="http://1.bp.blogspot.com/-l3S13r6EFGk/UJKXM_Tuu8I/AAAAAAAAFhA/Ix1Lh7r9LXw/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 2:

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(http://1.bp.blogspot.com/-kLtghYQy-Ao/TrrjlqQLU8I/AAAAAAAAAGU/lJ-qXnp5Td0/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(http://1.bp.blogspot.com/-kLtghYQy-Ao/TrrjlqQLU8I/AAAAAAAAAGU/lJ-qXnp5Td0/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(http://1.bp.blogspot.com/-kLtghYQy-Ao/TrrjlqQLU8I/AAAAAAAAAGU/lJ-qXnp5Td0/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(http://1.bp.blogspot.com/-kLtghYQy-Ao/TrrjlqQLU8I/AAAAAAAAAGU/lJ-qXnp5Td0/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px;  -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style> 

<a href="http://thegioiblogs.blogspot.com/" target="_blank" title="Free Backlinks"><img src="http://1.bp.blogspot.com/-l3S13r6EFGk/UJKXM_Tuu8I/AAAAAAAAFhA/Ix1Lh7r9LXw/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>

Style 3:

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {
 background:transparent url(http://3.bp.blogspot.com/-jx9IKa-4vog/TrqvgwWzXHI/AAAAAAAAAF0/n6jjqE6iLv8/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
 margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap;
 }.showpageNum a:hover,.showpage a:hover {
background-image:url(http://3.bp.blogspot.com/-jx9IKa-4vog/TrqvgwWzXHI/AAAAAAAAAF0/n6jjqE6iLv8/s1600/darkblue.png) repeat-x;
 border:2px solid #5C8CFB;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none;
 }.showpageOf{
 margin:0 8px 0 0;
background:transparent url(http://3.bp.blogspot.com/-jx9IKa-4vog/TrqvgwWzXHI/AAAAAAAAAF0/n6jjqE6iLv8/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
line-height:30px;padding:3px 10px;color:#FFF;
 }.showpagePoint {
 background:transparent url(http://3.bp.blogspot.com/-jx9IKa-4vog/TrqvgwWzXHI/AAAAAAAAAF0/n6jjqE6iLv8/s1600/darkblue.png) repeat-x;
 margin:0 3px 0 3px;padding:3px 10px;
 line-height:30px;cursor:pointer;white-space:nowrap;
 border:2px solid #5C8CFF;-webkit-border-radius:7px;
  -moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold;
 } </style> 

<a href="http://thegioiblogs.blogspot.com/" target="_blank" title="Free Backlinks"><img src="http://1.bp.blogspot.com/-l3S13r6EFGk/UJKXM_Tuu8I/AAAAAAAAFhA/Ix1Lh7r9LXw/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://bloggertrix.googlecode.com/files/bloggertrix.js'></script>