Cảm nhận tư duy và tổng hợp kiến thức

Hiển thị các bài đăng có nhãn Trang chủ. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Trang chủ. Hiển thị tất cả bài đăng

Thứ Bảy, 26 tháng 8, 2017

Hướng dẫn rút gọn bài viết trên trang chủ blogger

Làm thế nào để rút gọn bài viết trên trang chủ với một ảnh thumbnail ngay bên trái và một nút  Đọc thêm ngay bên dưới như mô tả trong hình vẽ sau.

Để làm được điều này trình tự thực hiện  như sau:

Bước 1: Mở khung soạn thảo html của blogger.
Đăng nhập vào blog của bạn. Tìm đến Template / Edit HTML
Khung Code Template sẽ hiện ra như bên dưới



Bước 2: Hiển thị bài viết dạng rút gọn
Sau khi khung soạn thảo sẽ hiện ra, nhấp vào một vị trí bất kỳ và bấm CTRL + F để tìm đoạn mã sau:
<data:post.body/>
Sẽ có hai đến ba vị trí chứa đoạn mã này. Thường thì mình tìm đến vị trí xuất hiện thứ hai, tuy nhiên cũng có lúc phải tìm đến những vị trí khác, Và chép code dưới đây chồng lấp lên đoạn mã trên bằng đoạn code mới như sau:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='readmore' style='font-weight:bold;padding:5px;float:right;'><a expr:href='data:post.url'>Đọc tiếp &#187;</a></span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Bước 3: Xác định kích thước ảnh thumbnail và nội dung tóm tắt bài viết
Làm tương tự như trên. Tìm đến dòng
</head>
Ngay phía trên dòng này, dán vào đoạn code sau:
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;text-align:justify}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
Lưu ý: 

  • Bạn có thể thay đổi số lượng ký tự hiển thị trên trang chủ bằng cách thay đổi giá trị 490 (khi không có ảnh thumbnail) và 400 (khi có ảnh)
  • Để thay đổi kích thước ảnh: ta chỉ cần đổi giá trị có màu xanh.

Bước 4: Ấn nút Save Template và xem lại thành quả
http://ketbancungkhanhnguyen5.blogspot.com/

Trên đây chỉ là những thủ thuật hay mình sưu tập, tìm kiếm được những lúc rỗi rãnh. Tuy mê vọc Code nhưng cũng chẳng thể nào rãnh rang, còn phải lo toan cái sự đời hằng ngày mỗi bữa. Hy vọng các bạn chia sẽ, tiếp giúp ý kiến nhé.
Chúc mọi người có nhiều niềm vui và thành tựu.
Bạn có thể xem thêm các tư liệu:
  • Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger
  • Cách thêm tiện ích (widget) vào vị trí bất kỳ trong blogspot

Người viết: Nguyễn Đạt Khánh

Share:

Chủ Nhật, 9 tháng 7, 2017

Thêm Admin Control Panel truy cập Blogger Dashboard từ Blog

Admin Control Panel là 1 công cụ truy cập trực tiếp vào Blogger Dashboard khi bạn đang trên trang Web/ Blog của mình. Nó do Mybloggerlab.com phát triển, Nó giúp bạn làm việc khá nhanh, Admin Panel này sẽ chỉ hữu dụng cho admin của blog nên nó sẽ chỉ xuất hiện khi bạn đăng nhập vào blogger của mình bằng chính tài khoản Google.


Bằng cách sử dụng thanh công cụ điều khiển nầy, bạn có thể nhanh chóng tạo bài viết mới, chỉnh sửa bài viết,chỉnh sửa layout, vào Template để chỉnh sữa Source Code, hoặc thiết lập một số tính năng cho Blog website...

Cách làm cụ thể như sau:

- Vào Template >> Edit HTML 

- Sau đó bạn tìm thẻ ]]></b:skin> và thêm vào trên nó đoạn code sau: 
admin-controll,.admin-controll * {    margin: 0;    padding: 0;    list-style: none;    list-style-type: none;    line-height: 1.0;}
.admin-controll ul {    position: absolute;    top: -999em;    width: 100%;}
.admin-controll ul li {    width: 100%;    background: 333333;}
.admin-controll li:hover {    visibility: inherit;}
.admin-controll li {    float: left;    position: relative;}
.admin-controll a {    display: block;    position: relative;}
.admin-controll li:hover ul,.admin-controll li.sfHover ul {    left: 0;    top: 100%;    z-index: 99;}
.admin-controll li:hover li ul,.admin-controll li.sfHover li ul {    top: -999em;}
.admin-controll li li:hover ul,.admin-controll li li.sfHover ul {    left: 100%;    top: 0;}
.admin-controll li li:hover li ul,.admin-controll li li.sfHover li ul {    top: -999em;}
.admin-controll li li li:hover ul,.admin-controll li li li.sfHover ul {    left: 100%;    top: 0;}
.mbl-admin-bar {    margin: 0px;    direction: ltr;    color: #ccc;    font: 400 13px/32px "Open Sans",sans-serif;    height: 32px;    position: fixed;    top: 0;    left: 0;    width: 100%;    min-width: 600px;    z-index: 99999;    background: #222;    float: left;}
.mbl-admin-bar li a {    display: block;    color: #fff;    padding: 7px 15px;    font-weight: 400;    text-decoration: none;    font-size: 14px;}
.mbl-admin-bar li li a {    font-size: 15px;    color: #fff;    float: none;    padding: 0px;
    width: 0;}
ul.children {    color: #fff;    background: #333333;    font-size: 18px;    min-width: 230px;    padding: 10px;    float: right;    margin-left: -98px;}
.mbl-admin-bar li a:hover,.mbl-admin-bar li a:active,.mbl-admin-bar li a:focus,.mbl-admin-bar li:hover > a,.mbl-admin-bar li.current-cat > a,.mbl-admin-bar li.current_page_item > a,.mbl-admin-bar li.current-menu-item > a {    color: #38b8f0;
    background: #333333;}
.fa {    font-size: 18px;    color: #999;    margin-right: 5px;}
.fa.fa-user {    font-size: 50px;    float: left;    padding: 20px;    border: 1px solid #212121;    background: #575757;}
ul.children img {    width: 80px;    height: auto;    float: left;    margin-right: 10px;}
ul.children a {    margin-top: 10px;}
li.mright {    float: right;}
li.mblogo a {    padding: 3px 15px 3px 15px!important;}
ul.child1 {    min-width: 180px;    color: #fff;  background: #333333;}
ul.child1 li a {    padding: 10px;    width: 100%;    background: #333333;}
- Tìm tiếp thẻ <body> </body>và thêm vào bên trong nó đoạn Code sau: 

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Open Sans:400' rel='stylesheet' type='text/css'/>
 <span class='item-control blog-admin'>
<div class='span-24'>
<div class='mbl-cpanel'>
<ul class='admin-controll mbl-admin-bar'>
  <li class='mblogo'><a href="http://www.mybloggerlab.com"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieyo1cEaGfqbRUOmNywOaNxlwJkA3u6uUUJ1h1IxmO6Gddx4lpZA7_e1_8bBUOLzAl8avDewV0u8LiBOV4MbHUnC_s4EK8cTGk1IP_X1UYlth_he73wSs-5BCjO_gviyuey1X-nLUNeVk/s1600/v.pn'/></a></li><li class='blog-title'><a expr:href='data:blog.homepageUrl'><i class='fa fa-tachometer'/> <data:blog.title/></a></li><li><a href='http://www.blogger.com/home'><i class='fa fa-puzzle-piece'/> Dashboard</a></li><li><a href="#"><i class="fa fa-pencil"></i> Posting</a>
<ul class='child1'>
  <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;'><i class='fa fa-pencil'/> New Post</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;'><i class='fa fa-file'/> New Page</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;'><i class='fa fa-th-list'/> All Posts</a></li><li><a expr:href='&quot;https://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=post;postID=&quot; + data:blog.postId + &quot;&quot;'><i class="fa fa-pencil-square"/>Edit Post</a></li>
  </ul></li>  <li><a href="#"><i class="fa fa-cogs"></i> Customize</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;'><i class='fa fa-wrench'/> Layout</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;'><i class='fa fa-pencil-square-o'/> Edit Template</a></li> </ul></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;'><i class='fa fa-comment'/> Comments</a>
<ul class='child1'><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pendingcomments&quot;'><i class="fa fa-bullhorn"></i> Pending Comments</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#spamcomments&quot;'><i class="fa fa-ban"></i> Spam Comments</a></li>  </ul>
</li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class='fa fa-cog'/> Settings</a>
<ul class='child1'><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class="fa fa-heart-o"></i> Basics</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#postandcommentsettings&quot;'><i class="fa fa-comments"></i> Post &amp; Comments</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#emailandmobilesettings&quot;'><i class="fa fa-mobile"></i> Mobile &amp; Email</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#languageandformattingsettings&quot;'><i class="fa fa-calendar-o"></i> Language</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#searchsettings&quot;'><i class="fa fa-search-plus"></i> Search Preference</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#othersettings&quot;'><i class="fa fa-code"></i> Other</a></li><li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;'><i class='fa fa-signal'/>Stats</a></li></ul></li><li class='mright'><a href='#'><i class='fa fa-signal'/>Howdy, Admin</a>
<ul class='children'>
<li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxuwUBA_D_8lA0wjf3nQT-V6c2KAbLQwXucZmfPIQV2zt5ScsiWD1pG6d2ZWykVfm0CXogmw8cvZAz98iLnkeNzdvKsq4upCgQi_oFTOFWFwLu7-D4p9XEELDrcjKh75q0QFv1NJfJ88/s1600/faizan.png'/>
<div class='mauthor'><br/>Syed Faizan Ali</div></li>
<a href='http://www.blogger.com/logout.g'>Logout</a>
</ul></li></ul></div></div></span>
- Save Template trước khi thử chạy ứng dụng của Blog nhé.



Tin là bạn sẽ làm được nếu bạn làm đúng theo tiến trình hướng dẫn. Chúc các bạn thành công.

Bạn có thể xem thử Demo của mình ở đây:


http://ngdkhanh11.blogspot.com/2017/06/lam-nao-ang-ky-tai-khoan-google.html


Tổng hợp: Nguyễn Đạt Khánh

Share:

Chủ Nhật, 1 tháng 5, 2016

Thủ thuật chia bài viết thành nhiều trang cho Blogger V1

Hôm nay Terocket sẽ chia sẽ với các bạn mê thủ thuật blog còn gọi là "Thủ thuật chia bài viết thành nhiều trang cho Blogger hay blogspot V1", đặc biệt là mê thủ thuật blogger cách để chia một bài viết thành nhiều trang, giống như của Masable, hay các blog công nghệ khác vậy.

Chia nhỏ bài viết thành nhiều phần, phù hợp với một trang đọc truyện hoặc một trang xem phim cả nhà nhé. Terocket sẽ hướng dẫn cách thiết kế trang đọc truyện hay cho cả nhà và trang xem phim bằng blogspot cho cả nhà nhé!

Điểm ưu của Thủ thuật chia bài viết thành nhiều trang cho Blogger hay blogspot V1 đó là rất tiện dụng trong việc biến thành và chia phần tuyển tập truyện trên cùng một trang, một nơi xem phim và chia phần phim trên đó, chia phần ca nhạc nữa...đặc biệt hơn, có thể chia các nội dung dài thành các đoạn ngắn, giúp các bạn nhà ta dễ dàng hơn trong việc đọc và theo dõi nội dung. Thủ thuật chia bài viết thành nhiều trang cho Blogger hay blogspot V1 thật thú vị và tiện ích đúng không nào ^^!

Giờ thì cùng Terocket thiết kế Thủ thuật chia bài viết thành nhiều trang cho Blogger hay blogspot V1 nhé các bạn mê blogger và mê thủ thuật nhé.

Live Demo

Bước 1 - Để thực hiện, trước tiên bạn vào Blog Title → Template → Edit HTML. Nhấn Ctrl + F và tìm kiếm ]]></b:skin> trong hộp tìm kiếm. Sau đó hãy dán đoạn mã code dưới đây vào phía sau ]]></b:skin> bạn nhé. Sau đó lưu lại.
<b:if cond='data:blog.pageType != &quot;index&quot;'> <style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script></b:if>

Bước 2 - Vào phần bài viết, chỉnh qua chức năng HTML và copy phần code sau vào nhé, và thay đổi tùy biến nội dung cho phù hợp. Nếu bạn muốn có nhiều trang hơn thì nhân rộng ra thôi, thêm trang 4,5,6...rất dễ dàng.
<div class="content_1">
Nội dung trang 1
</div>
<div class="content_2" style="display: none;">
Nội dung trang 2
</div>
<div class="content_3" style="display: none;">
Nội dung trang 3
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Bước 3 - Bước này cần chú ý đó copy đoạn mã javascript sau vào phía dưới <head> trong phần Blog Title → Template → Edit HTML. Nhấn Ctrl + F tìm <head>. Đặt phía dưới nó nhé! Còn nếu có rồi thì không cần đặt nha. Rồi lưu lại!
<script src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </script>

Bước 4 - Kết luận của Terocket là chúc các bạn thành công với thủ thuật này,Thủ thuật chia bài viết thành nhiều trang cho Blogger V1!
An Thành Adthinks - Terocket

Share:

Thứ Bảy, 9 tháng 4, 2016

Tiện ích Auto Readmore Hack with Thumbnail for Blogger





Auto Readmore Hack with Thumbnail là tiện ích xuất hiện đã lâu và được cộng đồng Blogspot sử dụng rất phổ biến bởi những lợi ích rất thiết thực mà nó mạng lại.
Tuy Google cũng đã bổ sung JumpLink ( một dạng Readmore ) cho Blogspot nhưng dường như vẫn chưa thỏa mãn yêu cầu của các Blogger, nhất là các WebBlog như iTechPlus. Việc thực hiện thủ công JumpLink cho từng bài post xem ra khá nhọc nhằn đối với những Blog đã có nhiều bài viết.


Vì vậy, tuy Auto Readmore không phải là mới, nhưng nhận thấy nhu cầu sử dụng của các Blogger đối với tiện ích này vẫn còn khá lớn, nên iTechPlus quyết định giới thiệu lại 2 phiên bản phổ biến nhất của tiện ích này dành cho các bạn quan tâm.
1. Auto Readmore v.4.1 by Anhvo ( Vietwebguide.com )
Đây là phiên bản cuối cùng của Anhvo – một Blogger Việt rất nổi tiếng trước đây. Tuy nhiên hiện nay trang web này đã đóng cửa.
Một số đặc điểm của tiện ích :

  • Fix lỗi Width và Height của ảnh Thumbnail. Không giống các bản trước chỉ hiện cố định Width và Height của ảnh, bản 4.1 sẽ kiểm tra kích thước của ảnh và hiện kích thước MaxWidth và MaxHeight nếu ảnh lớn, nếu như ảnh nhỏ thì hiện kích cỡ thật sự của ảnh, cả 2 trường hợp đều giữ đúng tỉ lệ Width và Height.
  • Cải tiến phương pháp lấy đoạn summary (đoạn miêu tả), không còn nối dòng lung tung mà sẽ xuống dòng y chang như bài gốc. Summary tối đa lấy theo lượng từ chứ không còn theo kiểu ký tự nữa.
  • Cải tiến tốc độ Load cho blog. Bản 4.1 đã loại bỏ hoàn toàn việc Load toàn bộ ảnh trong bài, mà sẽ chỉ Load ảnh đầu tiên của bài đó để làm ảnh Thumbnail.
  • Hỗ trợ chế độ Readmore giống Wordpress, đây là tính năng khá thú vị mặc dù nó chỉ là Manual Readmore.
  • Hỗ trợ thụt đầu dòng cho Summary. Khi Summary có 2 đoạn trở lên thì việc thụt đầu dòng sẽ làm cho người đọc thấy rõ từng đoạn.
  • Có thể chọn lựa phương pháp hiện ảnh thumbnail: dồn trái (float, phù hợp cho các blog tin tức) và Gallery (no-float, phù hợp cho các trang có nhiều hình ảnh quảng cáo, trang Softs).
  • Có thể tùy chỉnh kích thước ảnh thumbnail theo ý muốn
  • Có thể chọn lựa giữa phương pháp lấy Summary cổ điển và Summary cải tiến.
Cài đặt :
Bước 1 : Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
Bước 2 : Tìm trong template ( Ctrl + F ) dòng <data:post.body/> và thay thế nó bằng đoạn code bên dưới

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>-->đọc tiếp...</a></div>
</b:if></b:if>
* Đoạn code trên iTechPlus đã sửa lại đôi chút để tiện ích không thực thi đối với trang Static Page
Bước 3 : Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<!--
/*****************************************************
Auto-readmore link script, version 4.1 (for blogspot)
(C)2009 by Anhvo
Homepage:  http://vietwebguide.com
Please dont remove this copyright or change it into your own
******************************************************/
-->
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
   width: expression(this.width > 150 ? 150: true);
   max-height:120px;
   height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script  type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}
function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}
function getSummaryImproved(post,max){
   var re = /<.*?>/gi
   var re2 = /<br.*?>/gi
   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
   post = post.replace(re4,'')
   post = post.replace(re3,'<br /> ').split(re2)
   for(var i=0; i<post.length; i++){
    post[i] = post[i].replace(re,'');
   }
var post2 = new Array();
for(var i in post) {
  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
}
var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
  indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
   s = post2.join(indentBlank +' <br/>');
} else {
  var i = 0;
  while(s.split(' ').length < max){
   s += indentBlank + ' ' + post2[i]+'<br/>';
   i++;
  }
}
return s;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = "block";
}
else {
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
  if(thumbnail_mode == "float") {
   imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
   summ = summary_img;
  } else {
   imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
}
var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script>
Trong đoạn code trên sẽ có những chỗ bạn cần thay đổi như sau:
  • 150 và 120 lần lượt là rộng và cao của ảnh thumbnail. Các chỗ cần thay đã được tô màu nền nổi, bạn nhớ thay cho đúng, mỗi cái xuất hiện tới 3 lần.
  • Giá trị "no-float" của thumbnail_mode là chế độ hiển thị ảnh theo kiểu Gallery, khi bạn chọn chế độ này, bạn phải thay đổi giá trị left ở trên css thành none. Bạn có thể đổi "no-float" thành "float" để cho ảnh của bạn hiện dồn về trái.
  • Giá trị false của classicMode ý nói là chế độ hiện Summary cổ điển đang tắt (đã cải tiến), bạn có thể thay nó thành true nếu muốn xài Summary kiểu cũ.
  • Giá trị 50 của summary_noimg là số từ tối đa cho Summary khi bài viết không có ảnh nào.
  • Giá trị 40 của summary_img là số từ tối đa cho Summary khi bài viết có ảnh.
  • Giá trị 3 cho indent, tức là thụt vô đầu dòng 3 ký tự của đoạn Summary. Bạn có thể đặt giá trị của nó là 0,1,2,3,4... đều được.
Sau khi thiết lập xong, bạn bấm Save để lưu thay đổi, vào lại blog và kiểm tra xem Auto Readmore chạy thế nào nhé.
* Một tính năng độc đáo mà Anhvo đã giới thiệu ở trên, đó là hiện Readmore giống Wordpress. Cái readmore này có cái lợi là bạn có thể định vị chỗ ngắt Summary, tuy nhiên thêm code rất đơn giản, chỉ cần thêm dòng

<!-- more -->
vào chỗ mà bạn cần ngắt cho Summary, như thế tất cả các định dạng HTML của bạn trong Summary sẽ không thay đổi so với bài gốc. Nhưng hạn chế là bạn phải chèn dòng <!-- more --> bằng tay.
2. Automatic Read More Hack With Thumbnail for Blogger Bug Fixed
Đây là tiện ích do một Blogger nước ngoài “bào chế” mà iTechPlus sưu tầm được đã khá lâu nên cũng không nhớ rõ. Thủ thuật có đôi chút ngắn gọn và đơn giản hơn :
Bước 1 : Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
Bước 2 : Tìm trong template ( Ctrl + F ) dòng <data:post.body/> và thay thế nó bằng đoạn code bên dưới
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:10px;'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmXbMdcBh0CzuqQBUS6dCEop9w19cVeIR0rhX2jm9aJkWRp9gs7OPc_OLH0JWaRyN73QrpHGJntxcZksOrnN4uYb0kVedVoLorJ-9WbTFjOi4Lgjfz3uMbI8v_wAU_Iypv_jrdUJSwfTE/' style='border:none'/></a></span>
</b:if></b:if>
Bước 3 : Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>';
summ = summary_img;
}
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdE2pSFa2SBBxROXvmAJ63KT9tolTnq0fFcmJ02iAHTgvhNgWUbqC0nlAeym8lzsuDLgzEjVVZTdbteJ4NFQeMOqSBBZesUAnbzK7QcrtMI7pUltsINjxEaU0nxgBAaydFYAGx8XQH_uh0/" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
* Đoạn code trên iTechPlus đã thêm ảnh mặc định cho những bài viết không có ảnh
Bước 4 : Save template and Done.
Chúc các bạn thành công !

Share:

Thứ Bảy, 2 tháng 4, 2016

Phân trang cho Blogger - Page Navigation for Blogger



Phân trang (Page Navigation) là một tiện ích được nhiều blog áp dụng nhằm tăng tính chuyên nghiệp cho trang blog của họ. Dưới đây mình sẽ hướng dẫn các bạn cách phân trang cho Blogger và một số style phân trang đẹp.

Bước 1: Thêm code JavaScript phân trang
Đăng nhập Blog ~> Vào Mẫu ~> Chỉnh sửa HTML. Thêm đoạn code sau vào trước thẻ </body>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
    var postperpage=10;
    var numshowpage=4;
    var upPageWord ="&#171; Trước";
    var downPageWord ="Tiếp &#187;";
    var urlactivepage=location.href;
    var home_page="/";
  </script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 K;6 i;6 h;6 u;1x();D 1s(15){6 5=\'\';M=L(Y/2);4(M==Y-M){Y=M*2+1}A=h-M;4(A<1)A=1;e=L(15/j)+1;4(e-1==15/j)e=e-1;C=A+Y-1;4(C>e)C=e;5+="<3 7=\'1A\'>1H "+h+\' 1I \'+e+"</3>";6 1d=L(h)-1;4(h>1){4(h==2){4(i=="n"){5+=\'<3 7="1N"><a 9="\'+B+\'">\'+13+\'</a></3>\'}c{5+=\'<3 7="g"><a 9="/r/s/\'+u+\'?&b-l=\'+j+\'">\'+13+\'</a></3>\'}}c{4(i=="n"){5+=\'<3 7="g"><a 9="#" v="I(\'+1d+\');z y">\'+13+\'</a></3>\'}c{5+=\'<3 7="g"><a 9="#" v="J(\'+1d+\');z y">\'+13+\'</a></3>\'}}}4(A>1){4(i=="n"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}c{5+=\'<3 7="g"><a 9="/r/s/\'+u+\'?&b-l=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ... \'}1t(6 k=A;k<=C;k++){4(h==k){5+=\'<3 7="1L">\'+k+\'</3>\'}c 4(k==1){4(i=="n"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}c{5+=\'<3 7="g"><a 9="/r/s/\'+u+\'?&b-l=\'+j+\'">1</a></3>\'}}c{4(i=="n"){5+=\'<3 7="g"><a 9="#" v="I(\'+k+\');z y">\'+k+\'</a></3>\'}c{5+=\'<3 7="g"><a 9="#" v="J(\'+k+\');z y">\'+k+\'</a></3>\'}}}4(C<e-1){5+=\'...\'}4(C<e){4(i=="n"){5+=\'<3 7="g"><a 9="#" v="I(\'+e+\');z y">\'+e+\'</a></3>\'}c{5+=\'<3 7="g"><a 9="#" v="J(\'+e+\');z y">\'+e+\'</a></3>\'}}6 1b=L(h)+1;4(h<e){4(i=="n"){5+=\'<3 7="g"><a 9="#" v="I(\'+1b+\');z y">\'+1i+\'</a></3>\'}c{5+=\'<3 7="g"><a 9="#" v="J(\'+1b+\');z y">\'+1i+\'</a></3>\'}}6 H=x.1G("H");6 1e=x.1F("1E-1D");1t(6 p=0;p<H.S;p++){H[p].1u=5}4(H&&H.S>0){5=\'\'}4(1e){1e.1u=5}}D 16(U){6 V=U.V;6 1j=L(V.1C$1B.$t,10);1s(1j)}D 1x(){6 f=o;4(f.d("/r/s/")!=-1){4(f.d("?Z-b")!=-1){u=f.F(f.d("/r/s/")+14,f.d("?Z-b"))}c{u=f.F(f.d("/r/s/")+14,f.d("?&b"))}}4(f.d("?q=")==-1&&f.d(".5")==-1){4(f.d("/r/s/")==-1){i="n";4(o.d("#E=")!=-1){h=o.F(o.d("#E=")+8,o.S)}c{h=1}x.1g("<m X=\\""+B+"W/T/Q?b-l=1&P=O-N-m&12=16\\"><\\/m>")}c{i="s";4(f.d("&b-l=")==-1){j=1z}4(o.d("#E=")!=-1){h=o.F(o.d("#E=")+8,o.S)}c{h=1}x.1g(\'<m X="\'+B+\'W/T/Q/-/\'+u+\'?P=O-N-m&12=16&b-l=1" ><\\/m>\')}}}D I(G){11=(G-1)*j;K=G;6 R=x.1v(\'1w\')[0];6 w=x.1r(\'m\');w.1f=\'1o/1n\';w.1l("X",B+"W/T/Q?1k-1m="+11+"&b-l=1&P=O-N-m&12=17");R.1h(w)}D J(G){11=(G-1)*j;K=G;6 R=x.1v(\'1w\')[0];6 w=x.1r(\'m\');w.1f=\'1o/1n\';w.1l("X",B+"W/T/Q/-/"+u+"?1k-1m="+11+"&b-l=1&P=O-N-m&12=17");R.1h(w)}D 17(U){1a=U.V.1y[0];6 1q=1a.1p.$t.F(0,19)+1a.1p.$t.F(1J,1K);6 1c=1M(1q);4(i=="n"){6 18="/r?Z-b="+1c+"&b-l="+j+"#E="+K}c{6 18="/r/s/"+u+"?Z-b="+1c+"&b-l="+j+"#E="+K}1O.9=18}',62,113,'|||span|if|html|var|class||href||max|else|indexOf|maksimal|thisUrl|showpageNum|nomerhal|jenis|postperpage|jj|results|script|page|urlactivepage|||search|label||lblname1|onclick|newInclude|document|false|return|mulai|home_page|akhir|function|PageNo|substring|numberpage|pageArea|redirectpage|redirectlabel|nopage|parseInt|nomerkiri|in|json|alt|summary|nBody|length|posts|root|feed|feeds|src|numshowpage|updated||jsonstart|callback|upPageWord||banyakdata|hitungtotaldata|finddatepost|alamat||post|nextnomer|timestamp|prevnomer|blogPager|type|write|appendChild|downPageWord|totaldata|start|setAttribute|index|javascript|text|published|timestamp1|createElement|loophalaman|for|innerHTML|getElementsByTagName|head|halamanblogger|entry|20|showpageOf|totalResults|openSearch|pager|blog|getElementById|getElementsByName|Page|of|23|29|showpagePoint|encodeURIComponent|showpage|location'.split('|'),0,{}))
//]]>
</script>
</b:if>
</b:if>

postperpage=10; số bài viết hiển thị trên mỗi trang
numshowpage=4; số nút hiển thị trên thanh Navigation
Có thể thay &#171; Trước và Tiếp &#187; thành từ bạn muốn


Bước 2: Một số style đẹp
Thêm 1 trong các đoạn code css sau vào trước thẻ ]]></b:skin> rồi Lưu Mẫu lại

Kiểu 1
#blog-pager-older-link a,#blog-pager-newer-link a,a.home-link{width:80px;text-align:center;display:inline-block;color:#fff;font:bold 12px Arial;text-transform:none;margin:0;padding:5px 5px;background:#555;border:1px solid #111}
.blog-pager,#blog-pager{clear:both;font:bold 12px Arial;text-align:center;padding:15px 10px}
.showpageNum a,.showpage a{background:#fff;text-decoration:none;white-space:nowrap;color:#222;margin:10px 3px;padding:5px 10px;border:1px solid #999}
.showpageNum a:hover,.showpage a:hover{color:#fff;text-decoration:none;background-color:#444;border:1px solid #000}
.showpageOf{display:none;margin:0}
.showpagePoint{color:#fff;text-decoration:none;background-color:#444;font-size:12px;margin:10px 3px;padding:5px 10px;border:1px solid #000}

Kiểu 2
.blog-pager,#blog-pager{font-size:normal}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}
.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:bold}
.showpageNum a{color:#000;padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#f8b5a4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMT5IwFCtTkupNXip7w-zKZ0ENoa3Jg5rHC7dgUG7oNI1VbUE-C8vigN2vW26XT0cpDUDuJM5xgQK875ccpSw077_KjQS8fe32qcFjTjMRd-aY5FSX7em1-_WxfAGcRa5tX6P5L6buR3J3/s90/pagenav1.png) 0 -60px repeat-x}
.showpageNum a:hover{border:1px solid #888;background:#f7cac9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMT5IwFCtTkupNXip7w-zKZ0ENoa3Jg5rHC7dgUG7oNI1VbUE-C8vigN2vW26XT0cpDUDuJM5xgQK875ccpSw077_KjQS8fe32qcFjTjMRd-aY5FSX7em1-_WxfAGcRa5tX6P5L6buR3J3/s90/pagenav1.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}
.showpagePoint{color:#666;padding:3px 8px;margin:2px;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#f2f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMT5IwFCtTkupNXip7w-zKZ0ENoa3Jg5rHC7dgUG7oNI1VbUE-C8vigN2vW26XT0cpDUDuJM5xgQK875ccpSw077_KjQS8fe32qcFjTjMRd-aY5FSX7em1-_WxfAGcRa5tX6P5L6buR3J3/s90/pagenav1.png) 0 -5px repeat-x;text-decoration:none}
Bạn nào bị không hiện đủ bề rộng nút phân trang thì thay #blog-pager{font-size:normal}thành #blog-pager{font-size:normal;overflow:visible;} (Áp dụng từ Kiểu 2 đếnKiểu 11)

Kiểu 3
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#b1a7c3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDeM7eIHIC18RbBmx0zKQmD-sPuAnw8udRSa4cVv5i_g5SGc8gVZIRx-Verq6DWHflAjwRk8Bv2Wc8nYPu0LBl3pmhghIxpDAYLBH6eX0qrlkXG2TshdviOAVTvRxxnIKaXj7jpqqE_wN/s90/pagenav2.png) 0 -60px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#f7b36a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDeM7eIHIC18RbBmx0zKQmD-sPuAnw8udRSa4cVv5i_g5SGc8gVZIRx-Verq6DWHflAjwRk8Bv2Wc8nYPu0LBl3pmhghIxpDAYLBH6eX0qrlkXG2TshdviOAVTvRxxnIKaXj7jpqqE_wN/s90/pagenav2.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#444;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#f7d5b0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDeM7eIHIC18RbBmx0zKQmD-sPuAnw8udRSa4cVv5i_g5SGc8gVZIRx-Verq6DWHflAjwRk8Bv2Wc8nYPu0LBl3pmhghIxpDAYLBH6eX0qrlkXG2TshdviOAVTvRxxnIKaXj7jpqqE_wN/s90/pagenav2.png) 0 0 repeat-x;text-decoration:none}

Kiểu 4
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border-bottom:3px solid #fe9a2e;background:#f7f8e0}.showpageNum a:hover{border-bottom:3px solid #df01d7;background:#f6cee3}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#333;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;border-bottom:3px solid #fe9a2e;background:#f8e0f7;text-decoration:none}

Kiểu 5
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:2px 8px;margin:0 4px;text-decoration:none;border-bottom:2px solid #5fb404;border-top:2px solid #5fb404;background:#effbf5}.showpageNum a:hover{border-bottom:2px solid #df01d7;background:#a9f5f2;border-top:2px solid #df01d7}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:2px 8px;margin:2px;font-weight:700;border-bottom:2px solid #5e610b;border-top:2px solid #5e610b;background:#5e610b;text-decoration:none}

Kiểu 6
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANhkMlrPWm8rG91TuVULkdKeVRgL-9MI2LCg-7540FqTgff9aJiqWxqm9E1IvDz3lEVPyC6zxCW5kIwXdUJ55tujbyCNSA6uwO_S7OfWxlH3MM2s3zbSfpCvHJclDSGlkVUssj0HTlzCV/s75/wp1.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANhkMlrPWm8rG91TuVULkdKeVRgL-9MI2LCg-7540FqTgff9aJiqWxqm9E1IvDz3lEVPyC6zxCW5kIwXdUJ55tujbyCNSA6uwO_S7OfWxlH3MM2s3zbSfpCvHJclDSGlkVUssj0HTlzCV/s75/wp1.jpg) 0 -25px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgANhkMlrPWm8rG91TuVULkdKeVRgL-9MI2LCg-7540FqTgff9aJiqWxqm9E1IvDz3lEVPyC6zxCW5kIwXdUJ55tujbyCNSA6uwO_S7OfWxlH3MM2s3zbSfpCvHJclDSGlkVUssj0HTlzCV/s75/wp1.jpg) 0 0 repeat-x;text-decoration:none}

Kiểu 7
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #919106;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJAQHsJQWSC5sQ6Qr23fjBerOOaJVpTwOeqBIrqvEAhuyPTCo8iuu3kSYEf-cONl-inJ9F_-33oD7mP2vy03k4LacGmQ_Qq68t1zJuPQcCZVQGumSjqbCQkD4wN3E_4B4Xn4oUQ7D9y3CV/s75/wp2.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #aeae0a;background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJAQHsJQWSC5sQ6Qr23fjBerOOaJVpTwOeqBIrqvEAhuyPTCo8iuu3kSYEf-cONl-inJ9F_-33oD7mP2vy03k4LacGmQ_Qq68t1zJuPQcCZVQGumSjqbCQkD4wN3E_4B4Xn4oUQ7D9y3CV/s75/wp2.jpg) 0 -25px repeat-x}.showpageOf{margin:0 5px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:bold;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #919106;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJAQHsJQWSC5sQ6Qr23fjBerOOaJVpTwOeqBIrqvEAhuyPTCo8iuu3kSYEf-cONl-inJ9F_-33oD7mP2vy03k4LacGmQ_Qq68t1zJuPQcCZVQGumSjqbCQkD4wN3E_4B4Xn4oUQ7D9y3CV/s75/wp2.jpg) 0 0 repeat-x;text-decoration:none}

Kiểu 8
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FWOe0wHx38-s5tsmImn_OwV55jSUZpKIhKU36lyO_qnpkf90WQhY9L31bQwPwaYKOyP1lMo4JFYa2RCbQBnXa_cx_DuX1y5N3aXDKgwgeahKhgKZTb57kEVyDamqjztntYz8jPcmQo9J/s75/wp3.jpg) 0 -25px repeat-x}.showpageNum a:hover{background:#044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FWOe0wHx38-s5tsmImn_OwV55jSUZpKIhKU36lyO_qnpkf90WQhY9L31bQwPwaYKOyP1lMo4JFYa2RCbQBnXa_cx_DuX1y5N3aXDKgwgeahKhgKZTb57kEVyDamqjztntYz8jPcmQo9J/s75/wp3.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_FWOe0wHx38-s5tsmImn_OwV55jSUZpKIhKU36lyO_qnpkf90WQhY9L31bQwPwaYKOyP1lMo4JFYa2RCbQBnXa_cx_DuX1y5N3aXDKgwgeahKhgKZTb57kEVyDamqjztntYz8jPcmQo9J/s75/wp3.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}

Kiểu 9
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OybcE7UpVK4aEyz2nXUmHvicP0250Cin5jThPsL4hgiijtEXOwvLAfL8mF3WIN_aowk6Iu7a3f0Bav052YF_OjM4rAEN7-fp1OxsRPtgshYGVzPxMPYIh6tOF-nQCNk33Uy8PuRvMTmh/s75/wp4.jpg) 0 -25px repeat-x}.showpageNum a:hover{border-top:1px solid #999;border-left:1px solid #999;border-right:1px solid #999;border-bottom:2px solid #999;background:#999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OybcE7UpVK4aEyz2nXUmHvicP0250Cin5jThPsL4hgiijtEXOwvLAfL8mF3WIN_aowk6Iu7a3f0Bav052YF_OjM4rAEN7-fp1OxsRPtgshYGVzPxMPYIh6tOF-nQCNk33Uy8PuRvMTmh/s75/wp4.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;border-top:2px solid #000;border-left:1px solid #000;border-right:1px solid #000;border-bottom:1px solid #000;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OybcE7UpVK4aEyz2nXUmHvicP0250Cin5jThPsL4hgiijtEXOwvLAfL8mF3WIN_aowk6Iu7a3f0Bav052YF_OjM4rAEN7-fp1OxsRPtgshYGVzPxMPYIh6tOF-nQCNk33Uy8PuRvMTmh/s75/wp4.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}

Kiểu 10
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhflo4EeoqIrU5rBTFmefAkNyviIQu24WgQzlPYqUP6xOFIlbkxyiw7PAvaGWs60Qp__8m6Ml542bwi1DAPF6LRnshkyfyTSm4wtv-2vIbETGPIRzuZWGhGvHdsJBBcVlJOdMvv7oQBAa7t/s75/wp5.jpg) 0 -50px repeat-x}.showpageNum a:hover{background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhflo4EeoqIrU5rBTFmefAkNyviIQu24WgQzlPYqUP6xOFIlbkxyiw7PAvaGWs60Qp__8m6Ml542bwi1DAPF6LRnshkyfyTSm4wtv-2vIbETGPIRzuZWGhGvHdsJBBcVlJOdMvv7oQBAa7t/s75/wp5.jpg) 0 -25px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhflo4EeoqIrU5rBTFmefAkNyviIQu24WgQzlPYqUP6xOFIlbkxyiw7PAvaGWs60Qp__8m6Ml542bwi1DAPF6LRnshkyfyTSm4wtv-2vIbETGPIRzuZWGhGvHdsJBBcVlJOdMvv7oQBAa7t/s75/wp5.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0}

Kiểu 11
.blog-pager,#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#fff;font-size:11px;margin:10px;padding:8px 20px;background:#333}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#666}.showpageNum a:hover{background:#aeb404}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#da6100;text-decoration:none}.showpageOf{margin:0 5px 0 0}
Nguồn Blog DX - Dxoan.com

Share:


Thống kê Blogspot

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP