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.
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>
7. Bây
giờ lưu của bạn HTML
/ Javascript.
Thật
đơn giản phải không nào?
Chúc
bạn thành công !...
Nguồn: http://thegioiblogs.blogspot.com
Bạn hãy làm theo
các bước đơn giản sau:
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>7. Bây giờ lưu của bạn HTML / Javascript.
Thật đơn giản phải không nào?
Chúc bạn thành công !...
