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

Chủ Nhật, 10 tháng 4, 2016

Code Con Ruồi Bò Trên Blogspot/Web

Một Source code rất hay từ Doisong.com mình vừa tìm kiếm được. Chẳng qua là thấy là lạ mà thôi, có ai mà thích có con ruồi bò trên màn hình máy vi tính, rất giống thật đó bạn.

Nghĩa là khi khách truy cập blogspot của bạn sẽ thấy 1 con ruồi nó sẽ bò đến mọi nơi(360 độ) trên màn hình của Blogspot/Website. Bản thân mình biết rồi thì thôi, có thể là bạn sẽ vô cùng thích thú với một cảnh vật vô hại do chính mình tạo ra. Có thể sẽ giúp ích rất nhiều cho sự điều tiết mắt, mà không bị nguy hại đến thị giác. Một lợi ích như thế, thiết nghĩ là cần thiết phải không các bạn. Vô tình có ai đó không biết, cũng chẳng nỡ đập cho vỡ màn hình máy vi tính đâu, ngược lại có thể còn là một sự hứng thú bất ngờ nữa đó.


Bạn có thể thấy demo ngay tại bài viết này hay xem qua DEMO ở trang khác bên dưới.
Để tạo được con ruồi như thế bạn chỉ cần sử dụng đoạn code ngắn gọn sẽ trình bầy ngay sau đây.

Bạn có thể tham khảo thêm bài: 

Xem thử
1. Đầu t.iên bạn phải có tài khoản Google Account và truy cập vào trong Blogger bằng công cụ ở phía trên, góc phải màn hình như hình dưới đây:




2. Tiếp tục Click chuột vào khung có mũi tên trỏ và chọn "Template" (Mẫu) như hình dưới đây:.


3. Nào, bây giờ bạn đã thấy khung "Chỉnh sữa HTML" chưa?  Bạn hãy Click chuột vào đây để mỡ Template 



4. Sử dụng tính năng tìm kiếm bằng tổ hợp phím Ctrl+F để tìm hàng chữ   </head>

5. Chép dán đoạn Code dưới đây vào phía trước thể </head>

Code:



Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:
Chú thích:
Trong code đó bạn có thể điều chỉnh ở đoạn:
var_1="true" var_2="false" var_3="false"

+ Bạn muốn bật 2,3 con vật bò trên Blog/Website thì thay
- var_2="false" thành true
+ Như code trên thì chỉ có 1 con ruồi bò phía trên của giao diện blogspot nếu muốn ruồi bò toàn bộ giao diện thì thay
- var_3="false" thành true

Bạn cũng có thể thay con ruồi bằng con vật khác bằng cách thay hình ảnh trong file js nếu bạn biết chỉnh sửa file javascript.
Chúc các bạn thành công!

Khanhnguyen' s blog

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ứ Sáu, 8 tháng 4, 2016

Cookie (tin học) nghĩa là gì?

Theo Bách khoa toàn thư mở Wikipedia:
"Cookie is một đoạn văn bản ghi thông tin được tạo ra và lưu trên trình duyệt của máy người dùng. Cookie thường được tạo ra khi người dùng truy cập một website, cookie sẽ ghi nhớ những thông tin như tên đăng nhâp, mật khẩu, các lựa chọn do người dùng lựa chọn đi kèm. Các thông tin này lưu trong máy tính thường được dùng để nhận ra người dùng khi viếng thăm một trang web. Nó là những tập tin mà trang web gửi đến máy tính của người dùng. Nó được gọi theo tên của bánh quy trong tiếng Anh tại Hoa Kỳ.
Khi người dùng truy cập đến một trang web có sử dụng cookie, trang web đó sẽ tự động gửi cookie đến máy tính của người dùng. Những cookie này tự động được tổ chức trong hệ thống máy tính. Khi truy cập đến các trang web sử dụng được cookie đã lưu, những cookie này tự động gửi thông tin của người dùng về cho chủ của nó (người tạo ra cookie). Tuy nhiên những thông tin do cookie ghi nhận không được tiết lộ rộng rãi, chỉ có website chứa cookie mới có thể xem được những thông tin này. Cookie được xem là một thành phần không thể thiếu được với những website có khối lượng dữ liệu lớn, có số lượng người dùng đông, và có những chức năng đi kèm với thành viên đăng kí. Phần lớn các website này là các website thương mại điện tử
Cookie có thể tiết lộ bí mật về người dùng. Các trình duyệt hiện đại cho phép đề phòng việc các cookie tiết lộ bí mật bằng các cài đặt chế độ cấm gửi ngược lại hay là hỏi ý kiến người dùng máy trước khi gửi thông tin cho ai. Tuy khối lượng thông tin mà một cookie nắm không nhiều nhưng lại đóng một vai trò hết sức quan trọng đặc biệt thời đại bùng nổ của Internet marketing."
Do đó, bạn nên định kỳ xóa Cookies và Cache trên trình duyệt để tăng tốc độ tải website cũng như tăng mức độ bảo mật cho máy tính. Trong các ứng dụng lướt Web, các xóa cũng khá đơn giản.

Bất luận người dùng trên mạng nào cũng cần phải có ít nhất một tài khoản. Công việc tạo lập tài khoản quản lý và bảo mật tài khoản người dùng trên mạng luôn luôn là một vấn đề hệ trọng, cấp thiết.
Google Chrome
Bước 1: Mở trình duyệt Google Chrome và chọn nút trình đơn Customize and control Google Chorme góc trên cùng bên phải.
Bước 2: Chọn Tools
Bước 3: Chọn Clear browsing data…

Bước 4: Trên cửa sổ Clear browsing data… trong Obliterate the following items from chọn the beginning of time để xóa tất cả Cookies và Cache tính từ thời điểm bắt đầu sử dụng trình duyệt. Sau đó bạn tick chọn Empty the cache  Delete cookies and other site and plug-in data
Bước 5: Chọn Clear browsing data để hoàn tất quá trình xóa Cookies và Cache trên trình duyệt Google Chrome
Internet Explorer 9
Bước 1: Mở trình duyệt Internet Explorer và chọn Tools (hình bánh răng cưa) ở góc trên cùng bên phải
Bước 2: Chọn Safety
Bước 3: Chọn Delete browsing history…

Bước 4: Trong cửa sổ Delete Browsing History… bỏ tick chọn ở mục Preserve Favorites website data, tick chọnTemporary Internet files  Cookies
Bước 5: Chọn Delete để hoàn tất quá trình xóa Cookies và Cache trên trình duyệt Internet Explorer

Nguồn tham khảo:
  • Bkav.com.vn
  • Bách khoa toàn thư mở Wikipedia
  • Bạn có thể tham khảo thêm ở Trang chính sách Cookie = Microsoft - Việt Nam


Share:

Thứ Ba, 5 tháng 4, 2016

Hướng dẫn chặn lời mời chơi Game trên Facebook

Bạn có thể truy cập vào liên kết này để vào tùy chỉnh luôn. Hoặc bạn có thể làm lần lượt theo các bước sau đây:
Nhấn vào mũi tên hình tam giác ở góc phải trên cùng giao diện Facebook và nhấn chọn ” Thiết lập ”

Tiếp theo bạn nhìn sang khung bên phải  và chọn ” Chặn ” (Blocking)
Giao diện tiếp theo sẽ có các lựa chọn cho bạn thiết lập:

Tại đây sẽ có những phương án cho bạn lựa chọn:
  • + Chặn lời mời sử dụng ứng dụng (Block app invites): Nếu như một người bạn nào đó của bạn thường xuyên gửi lời mời đến bạn thì sử dụng cách này. Bạn chỉ cần nhập tên người bạn đó vào là xong!
  • + Chặn ứng dụng (Block apps): Bạn có thể chặn theo tên ứng dụng, ví dụ bạn nhập tên của game hay ứng dụng đó vào ví dụ như: Candy Crush, BigKool, Bigone….
Và còn rất nhiều thiết lập trong này nữa mà bạn có thể lựa chọn cho phù hợp với mình. Ví dụ như: chặn người dùng, chặn lời mời tham gia sự kiện, chặn một trang cụ thể nào đó….
OK! giờ bạn có thể yên tâm mà lướt Facebook và không bao giờ gặp lại những ứng dụng phiền toái đó nữa. Hi vọng bài viết chặn lời mời game, ứng dụng trên Facebook này sẽ hữu ích với các bạn!!
Nguồn Kiên Nguyễn – Blogchiasekienthuc.com

Share:

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

Thêm nút Like cho nhận xét (Thread Comment) của Blogger

Tạo nút Like cho nhận xét, sử dụng tiện ích Star Ratings của Blogger





Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
.like-cm{margin-top:15px;width:10px;height:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLcGJP759W_E1xjq44RqzjGVYPjIuKZbfyYbLfl-rFEYqy5Ce5FSW_2IfW1CiNb6q8XGZtyWw9bx9imaPDnNjLIskMBHrGPA2yIYuavmHjZbNGxmnGS2MzBPPid5FxUDBZ5nugOn9zhI/s10/like.png) no-repeat}

Bước 2: Thay thế đoạn mã (function() { trong template của bạn bằng đoạn mã dưới đây: 
var items_copy=[];
(function() {

Bước 3: Thay thế đoạn mã var items = <data:post.commentJso/>; trong template của bạn bằng đoạn mã dưới đây: 
var items = <data:post.commentJso/>;
items_copy=items;

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ <data:post.commentHtml/> trong template của bạn. 
<script type='text/javascript'>
var likeurl='<data:blog.url/>';
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);gl="'"+items_copy[i].id+"'";b=a.innerHTML+'<div class="like-cm" onmousemove="likecom('+gl+')"><div id="like-cm'+items_copy[i].id+'"></div></div>';a.innerHTML=b}function likecom(i){var a=document.getElementById('like-cm'+i);if(a){a.innerHTML='<iframe style="margin:-6px 0 0 -13px" frameborder="0" allowtransparency="true" scrolling="no" height="20" src="http://www.blogger.com/blog-post-reactions.g?options=[Like]&textColor=%23666666#'+likeurl+i+'" width="100"><\/iframe>'}}
//]]>
</script>

Tác giả: Duy Pham
Nguồn: Thêm nút Like cho Thread Comment

Share:

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:

Tự tạo quảng cáo giống với Google AdSense

Bạn đang muốn đặt quảng cáo lên website? Băn khoăn trong việc chọn lựa mẫu quảng cáo? OK, bài viết này là dành cho bạn. Mẫu quảng cáo này sẽ giống với quảng cáo văn bản của Google AdSense, một mẫu quảng cáo ưa nhìn với hiệu ứng bắt mắt, kích thích người dùng nhấp vào. 
Hướng dẫn tạo quảng cáo giống với Google AdSense

Đăng nhập Blogger ~> Vào Mẫu ~> Chỉnh sửa HTML
Thêm đoạn code này vào trước thẻ ]]></b:skin>
#iklan-teks {
    height:275px;
    width:300px;
    background-color:white;
    position:relative;
    overflow:hidden;
    margin:20px auto;
}
#iklan-teks h2.iklan-header {
    cursor:pointer;
    background-color:white;
    background-image:none;
    font:normal 13px Verdana, Tahoma, Serif;
    color:#f0523f;
    border-top:1px solid #d8d8d8;
    padding:10px;
    margin:0;
    position:relative;
    text-transform:none;
    letter-spacing:0;
}
.iklan-teks-post-footer .iklan-header {
    border-bottom:0;
}
#iklan-teks h2.iklan-header:first-child {
    border-top:0;
}
#iklan-teks h2.iklan-header:before {
    content:"
    "
    ;
    width:0;
    height:0;
    position:absolute;
    top:20px;
    right:15px;
    border:5px solid transparent;
    border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
    height:120px;
    padding:10px 70px 10px 10px;
    z-index:1;
    background:white;
    font:normal 13px Verdana, Tahoma, Serif;
    color:white;
    position:relative;
    border-top:1px solid #d8d8d8;
}
.judul {
    font:normal 20px Verdana, Tahoma, Serif;
    color:#f0523f;
    margin:0 0 5px 0;
}
a.judul {
    font:normal 20px Verdana, Tahoma, Serif !important;
    color:#f0523f !important;
    text-decoration:none;
    display:inline-block;
}
.isi-iklan a {
    font:normal 13px Verdana, Tahoma, Serif;
    color:green;
    text-decoration:none;
    display:block;
    margin-bottom:10px;
}
.isi-iklan a:hover {
    color:green;
    text-decoration:underline;
}
.isi {
    padding-top:15px;
    color:#222;
    text-align:left !important;
}
.panah-besar {
    background:#f0523f;
    border-radius:50%;
    cursor:pointer;
    height:34px;
    float:right;
    margin-right:-60px;
    margin-top:-40px;
    width:34px;
    text-align:center;
    line-height:34px;
}
.panah-besar:hover {
    background:#2c343e;
}
.info-icon {
    width:15px;
    height:15px;
    position:absolute;
    top:0;
    z-index:2;
    right:0;
    cursor:pointer;
}
.info-iklan {
    background:#f2f2f2;
    height:15px;
    border-bottom-left-radius:4px;
    position:absolute;
    top:0;
    right:0;
    color:#000;
    z-index:2;
    font:normal 11px Arial, Sans-Serif;
    text-align:left;
    overflow:hidden;
    padding:5px 19px 0 5px;
}

Thêm tiếp đoạn code dưới vào trước thẻ </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h2 class="iklan-header">'+b(this).data("header")+"</h2>")});g.children("div:eq("+f+")").show().prev().css("margin-top","-37px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-37});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({right:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({right:-103},500,"easeInOutExpo")});
//]]>
</script>

Nếu template của bạn đã có thư viện JQuery rồi thì xóa bỏ dòng đầu đi nhé: <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js' type='text/javascript'></script>

Làm xong thì Lưu Mẫu lại.
Bây giờ bạn vào Bố Cục ~> Thêm tiện ích HTML/Javascript
Sao chép và dán đoạn code dưới vào tiện ích HTML/Javascript rồi Lưu lại
<div class='iklan-teks-sidebar' id='iklan-teks'>
    <!-- ads 1 -->
    <div data-header='Blog DX'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Blog DX</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Blog thủ thuật, công nghệ và mọi thứ.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBOT86zkjb12NkArjUPqyNyMbH66nCzK_zlghMwBa5Qx-fBd5m-reiGNYZThhPX3vvv_MkQv_U_VL7ibw6moBH_nKeDsDE3FBCiFRIgyGYblK5jx6mnbNpDRt5xJi0Q9xFTgQBSmtqiA/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- ads 2 -->
    <div data-header='Template'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Template Blogspot</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Chia sẻ Template Blogspot.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBOT86zkjb12NkArjUPqyNyMbH66nCzK_zlghMwBa5Qx-fBd5m-reiGNYZThhPX3vvv_MkQv_U_VL7ibw6moBH_nKeDsDE3FBCiFRIgyGYblK5jx6mnbNpDRt5xJi0Q9xFTgQBSmtqiA/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- ads 3 -->
    <div data-header='Blogspot Series'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Blogspot Series</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Học và tìm hiểu về blogspot.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBOT86zkjb12NkArjUPqyNyMbH66nCzK_zlghMwBa5Qx-fBd5m-reiGNYZThhPX3vvv_MkQv_U_VL7ibw6moBH_nKeDsDE3FBCiFRIgyGYblK5jx6mnbNpDRt5xJi0Q9xFTgQBSmtqiA/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- ads 4 -->
    <div data-header='Thủ Thuật Blogger'> <span class='isi-iklan'><a class='judul' href='http://www.dxoan.com' target='_blank'>Thủ Thuật Blogger</a><a href='http://www.dxoan.com' target='_blank'>www.dxoan.com</a><span class='isi'>Kho thủ thuật blogger, blogspot.<a class='panah-besar' href='http://www.dxoan.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilBOT86zkjb12NkArjUPqyNyMbH66nCzK_zlghMwBa5Qx-fBd5m-reiGNYZThhPX3vvv_MkQv_U_VL7ibw6moBH_nKeDsDE3FBCiFRIgyGYblK5jx6mnbNpDRt5xJi0Q9xFTgQBSmtqiA/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
</div>

Sửa lại link, tiêu đề và mô tả phù hợp với quảng cáo của bạn

Vậy là xong rồi, chúc bạn có một quảng cáo ưng ý !
Nguồn Blog DX - Dxoan.com Demo mà bạn có thể vào xem thử theo link dưới đây:
http://vokichdoinguoi.blogspot.com/2017/03/vai-net-ve-hoa-thuong-thich-thanh-tu.html

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