Hiển thị danh ngôn ngẫu nhiên bằng PHP trên blogspot

Cũng như ngôn ngữ Javascript, mình đến với PHP chỉ bằng con đường tự mày mò nghiên cứu trong những thời gian rảnh rỗi và chưa từng trải nghiệm qua bất kỳ khóa học nào. Quả thật, PHP không dễ cảm thụ, nhưng mình nghĩ các bạn có thể học được nếu có lòng kiên trì và đam mê. Hy vọng qua những ví dụ từ dễ đến khó được ứng dụng trên nền tảng Blogspot, các bạn sẽ từng bước hiểu được tường tận về ngôn ngữ PHP.

Qua bài này, mình sẽ giúp bạn hiển thị những câu danh ngôn một cách ngẫu nhiên theo như DEMO bên dưới (nhấn F5 để thấy tác dụng).



Điều trước tiên là bạn cần có một hosting (có thể dùng free hosting như byethost.com để thử nghiệm). Mở công cụ Notepad trên máy tính của bạn rồi dán vào đó bằng đoạn code bên dưới rồi lưu file với tên là randomquotes.php.

1. <?
2. //////////////////////////////////////////////////////
3. // PHP Random Quote Script for Blogspot applied by www.thuthuatblogger.info
4. // Many thanks to http://davidmarotz.com/ for its original PHP code
5. //////////////////////////////////////////////////////
6. Header("content-type: application/x-javascript");
7. $bgcolor = '#FFFFCC';
8. $textcolor = 'black';
9. $textcolor2 = 'brown';
10. $textsize = '4';
11. $textsize2 = '3';
12. // Array Structure:  "Quote","Author"
13. $allqts = array
14.     ("The Black Knight Always Triumphs!",
15.         "Monty Python",
16.     "I swear by my life and love of it that I will never live for the sake of<br>another man, nor ask another man to live for mine" ,
17.         "Atlas Shrugged",
18.     "It is clear that the individual who persecutes a man, his brother,<br> because he is not of the same opinion, is a monster",
19.         "Voltaire",
20.     "I agree that there is a natural aristocracy among men<br>The grounds of this are virtue and talents.",
21.         "Thomas Jefferson",
22.     "Liberty, when it begins to take root, is a plant of rapid growth.",
23.         "George Washington",
24.     "Never argue with an idiot. <br>They drag you down to their level <br>then beat you with experience",
25.         "Dilbert",
26.     "The Answer is 42. What is the question?",
27.         "Hitchikers Guide to the Galaxy",
28.     "Anyone who has never made a mistake has never tried anything new",
29.         "Albert Einstein",
30.     "Progress doesn't come from early risers, progress is made<br>by lazy men looking for easier ways to do things.",
31.         "Lazarus Long <font size=-2>(Time Enough for Love by Robert A. Heinlein)</font>",
32.     "Throughout history, poverty is the normal condition of man. <br>Advances which permit this norm to be exceeded - here and there, now and then - <br>are the work of an extremely small minority, frequently despised,<br> often condemned, and almost always opposed by all right-thinking people. <br>Whenever this tiny minority is kept from creating, or (as sometimes happens)<br> is driven out of a society, the people then slip back into abject poverty.<br><br>This is known as 'bad luck.'",
33.         "Robert Heinlein",
34.     "A little learning is a dangerous thing; Drink deep, or taste not the<br>Pierian spring.  There shallow draughts intoxicate the brain, <br>and drinking largely sobers us again",
35.         "Alexander Pope",
36.     "The early bird gets the worm, but the second mouse gets the cheese",
37.         "Anonymous",
38.     "Subjugating the enemy's army without fighting is the true pinnacle of excellence",
39.         "Sun-tzu, The Art of War",
40.     "Work as though you were to live 100 years; pray as if you were to die tomorrow",
41.         "Benjamin Franklin",
42.     "The world is a stage, but the play is badly cast",
43.         "Oscar Wilde",
44.     "Truth is generally the best vindication against slander.",
45.         "Abraham Lincoln",
46.     "...mercy to the guilty is cruelty to the innocent...",
47.         "Adam Smith",
48.     "...I wish that I may never think the smiles of the great and powerful<br> a sufficient inducement to turn aside from the straight path<br> of honesty and the convictions of my own mind",
49.         "David Ricardo",
50.     "Democracy is the worst form of government except for all the others",
51.         "Winston Churchill",
52.     "You can only know the highest peaks if you have experianced the lowest valley's",
53.             "Richard Nixon",
54.     "They dress the wound of my people as though it were not serious. <br>'Peace, peace,' they say, when there is no peace.",
55.         "Jeremiah 6:14",
56.     "It is better to remain silent and be thought a fool<br> than to open your mouth and remove all doubt.",
57.         "Jonathan Swift",
58.     "The market system delivers the goods people want,<br>but those who make it work cannot readily explain why it is so.<br>The socialst or communist system does not deliver the goods, <br>but those who operate it can readily explain away its failure.",
59.         "F.A. Hayek, Law, Legislation and Liberty, Vol. II",
60.     "Never Stop Exploring^tm",
61.         "The North Face"
62.         );
63. // Gets the Total number of Items in the array
64. //  Divides by 2 because there is a Quote followed by an Author
65. $totalqts = (count($allqts)/2);
66. // Subtracted 1 from the total because '0' is not accounted for otherwise
67. $nmbr = (rand(0,($totalqts-1)));
68. $nmbr = $nmbr*2;
69. //$nmbr = 18;
70. $quote = $allqts[$nmbr];
71.          $nmbr = $nmbr+1;
72. $author = $allqts[$nmbr];
73. $space = "<font color=$bgcolor>.....................................</font>";
74. echo "document.write(\"<center><font color=$textcolor size='$textsize'><i>$quote</i></font><br>$space<font color=$textcolor2 size='$textsize2'>$author</font></center>\")";
75. ?>

Trong đoạn code trên, bạn có thể thay thế những câu danh ngôn tiếng Anh bằng những câu danh ngôn tiếng Việt tương ứng, thêm hoặc bớt tùy ý theo đúng định dạng. Chú ý dùng <br> để xuống dòng cho câu văn.

Upload file randomquotes.php lên hosting của bạn để sử dụng.

Để hiển thị danh ngôn thì bạn đặt trong bài viết Blogspot hoặc tiện ích HTML/Javascript bằng dòng code như sau:

1. <script type="text/javascript" src="http://www.tenmienhostingcuaban.com/randomquotes.php"></script>

Chạy PHP bằng Javascript ngoại
Danh ngôn ngẫu nhiên bằng Javascript

More about →

Cuộc thi dự đoán thứ hạng đội tuyển U23 Việt Nam tại SEA Games 26

Đội tuyển bóng đá U23 Việt Nam sẽ có trận cầu đầu tiên quan trọng chiều nay với đội U23 Philippines. Với lòng nhiệt thành của một fan hâm mộ thật sự đối với bóng đá Việt Nam, thay mặt Ban Quản trị Thủ thuật Blogger, xin chúc các chàng trai trẻ của đội tuyển U23 Việt Nam sẽ có một trận đấu cống hiến, chiến thắng chính mình và chiến thắng đối thủ, để lại nhiều cảm xúc sâu sắc cho khán giả và người xem truyền hình. Xin chúc đội tuyển U23 Việt Nam sẽ thi đấu ấn tượng suốt đại hội thể thao SEA Games 26, vượt qua mọi đối thủ để đi đến trận đấu cuối cùng và đứng trên bục vinh quang cao nhất để thỏa lòng người hâm mộ Việt Nam.

Đồng hành cùng đội tuyển bóng đá U23 Việt Nam tham dự SEA Game 26, Thủ thuật Blogger tổ chức cuộc thi dự đoán thứ hạng của đội tuyển U23 Việt Nam tại giải đấu này.

* Thể lệ cuộc thi như sau:

1. Chủ đề: Dự đoán thứ hạng của đội tuyển bóng đá nam U23 Việt Nam tại SEA Games 26. Các thứ hạng gồm: vô địch, á quân, hạng ba, hạng tư, không có thứ hạng.

2. Thời gian tham gia dự đoán: 04/11 – 15/11/2011.

3. Giải thưởng:

- 1 giải nhất: Một Blogger Template trị giá 10 USD;

- 1 giải nhì: 01 suất tùy biến Template theo yêu cầu trị giá 5 USD.

Người trúng giải nhất là người dự đoán đúng thứ hạng của đội tuyển và dự đoán gần đúng nhất về số người có cùng câu trả lời. Nếu kết thúc chương trình, có từ 2 bạn đọc trở lên cùng dự đoán đúng thì Ban Tổ chức sẽ trao giải cho bạn đọc có thời gian dự đoán đúng sớm nhất. Người trúng giải nhì là người dự đoán đúng thứ hạng của đổi tuyển và dự đoán gần đúng nhất về số người có cùng câu trả lời sau người trúng giải nhất.

Để tham gia cuộc thi, bạn đọc soạn tin nhắn theo cú pháp:

U23VN [Thứ hạng] [Số người cùng dự đoán như bạn] gửi 0909841270

Chúc các bạn may mắn!

* Kết quả dự đoán công bố ngày 22/11/2011:

Có 3 người dự đoán như sau:
- Số điện thoại 01278882345 dự đoán U23 Việt Nam vô địch, số người cùng dự đoán là 500
- Số điện thoại 0972990892 dự đoán U23 Việt Nam xếp hạng 3, số người cùng dự đoán là 92
- Số điện thoại 0977504688 dự đoán U23 Việt Nam xếp hạng 3, số người cùng dự đoán là 2.

Rất tiếc không có bạn nào trúng giải. Chân thành cảm ơn các bạn. Hẹn các bạn ở lần sau.

More about →

HIỂN THỊ BÀI VIẾT TRONG CÙNG MỘT NHÃN (KIỂU 2)

Với thủ thuật này, các bài viết trong cùng một nhãn sẽ hiển thị một hình ảnh đại diện phía trên, dưới hình ảnh là tiêu đề bài đăng. Và được trình diễn chạy tự động từ phải qua trái hay ngược lại.

Bạn bấm vào thẻ XEM THỬ để trải nghiệm trước.

Xem thử

Đầu tiên, bạn đăng nhập vào Blog > chọn Thiết kế > Chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào đó dòng lệnh ]]></b:skin> và dán trước dòng lệnh đó đoạn code phía dưới

.bgcontent{background:#efefef; /*màu nền của tiện ích*/
height:140px; /*chiều cao của tiện ích*/
width:500px; /*độ rộng của tiện ích*/
}
#rc-content {
padding:4px;
width:500px; /*độ rộng của tiện ích*/
}
#rc-main {
width:110px;
background:#fff url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXXfgP5zNLI/AAAAAAAAAGU/Dh1jYQZoSgM/main-bg.png) repeat-y;
}
#rc-top {
background:#fff url(https://lh3.googleusercontent.com/_9-sNIAfGhKg/TXXff4uaqaI/AAAAAAAAAGQ/cj2q0Y_nb-A/top-bg.png) no-repeat top;
height:3px;
}
#rc-bottom {
background:#fff url(https://lh5.googleusercontent.com/_9-sNIAfGhKg/TXXffoEZMJI/AAAAAAAAAGM/JJSC-pSoUTk/bottom-bg.png) no-repeat bottom;
height:3px;
}
.rc-thumbs {
padding:2px 5px 5px 5px;
height:70px;
}
.rc-thumbs IMG {
width:100px; /*độ rộng của ảnh thumbnail*/
height:70px; /*chiều cao của ảnh thumbnail*/
}
.rc-title {
height:48px;
padding:0px 3px 2px 3px;
line-height:1.3em;
font-size:11px;
font-weight:bold;
}
.rc-title a {color:#0000ff;}
.rc-title a:hover {color:#ff0033;}

Bạn bấm Lưu lại và trở lại Thiết kế > Thêm tiện ích HTML/Javacript rồi tiếp tục dán đoạn code phía dưới vào

<div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#FFF380;">Thủ thuật Win 7</div>
<div class="bgcontent">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNMqNxuCt4XjYoSsazlH_3IwuFhmBXTLef_zFl4IPVB4wsohg8hCDfblYNanHF-TB5G2Ioku8MiZhYwZ9HVlnJ-7OXZJbVKAvv9Wt9tHwUP1Ipa5unx-A1SedlZc-nE3J1ePdrqyW2Yf6E/";
showRandomImg = true;
zaBold = false;
numposts = 20; //số bài trình diễn trong tiện ích
label = "WIN 7"; //thay thành tên nhãn của blog bạn
summaryTitle = 40; //số ký tự của tiêu đề bài viết
home_page = "http://www.dungheineken.blogspot.com/"; //thay thành địa chỉ blog bạn
</script>

<marquee align="center" direction="left" height="150" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="500">
<script src="http://dl.dropbox.com/u/66348944/rc_label.js" type="text/javascript">
</script>
</marquee></div>

<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="http://dungheineken.blogspot.com/search/label/WIN%207"> Thủ thuật Win 7 &#187;</a></p>

Bây giờ bạn dựa theo các phần ghi chú trong code (màu đỏ) để chỉnh sửa lại cho phù hợp với ý thích của mình và Bấm lưu lại.
Nếu không muốn tiện ích này hiển thị các bài viết trong nhãn mà hiển thị hết cho các bài ở Blog thì bạn thay chữ label (màu vàng) thành chữ allpost là xong

Lưu ý: Bạn phải điền chính xác tên nhãn, địa chỉ Blog của mình và quan trọng nhất là số bài trình diễn trong tiện ích phải bằng hoặc ít hơn số bài trong cùng một nhãn, nếu số bài trình diễn trong tiện ích nhiều hơn số bài hiện có trong nhãn thì hình ảnh sẽ không được hiển thị...

More about →

Script phân trang cho bảng

Trước đây hẳn bạn nghe nhiều đến script phân trang cho toàn bộ blog và phân trang cho nội dung trong bài viết, chứ ít khi nghe kiểu phân trang cho bảng. Đôi khi bạn cần phải dùng đến bảng (table) để bố trí nội dung theo nhiều cột và nhiều dòng giống như trong văn bản Microsoft Word. Trong trường hợp nội dung quá nhiều thì bảng sẽ trở nên rất dài, khi đó với script phân trang sẽ giúp bảng trở nên gọn gàng hơn.

DEMO

Để phân trang cho bảng như vậy, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.

1. <script type="text/javascript">
2. //<![CDATA[
3. function Pager(tableName, itemsPerPage) {
4.     this.tableName = tableName;
5.     this.itemsPerPage = itemsPerPage;
6.     this.currentPage = 1;
7.     this.pages = 0;
8.     this.inited = false;
9.    
10.     this.showRecords = function(from, to) {      
11.         var rows = document.getElementById(tableName).rows;
12.         // i starts from 1 to skip table header row
13.         for (var i = 1; i < rows.length; i++) {
14.             if (i < from || i > to)
15.                 rows[i].style.display = 'none';
16.             else
17.                 rows[i].style.display = '';
18.         }
19.     }
20.    
21.     this.showPage = function(pageNumber) {
22.           if (! this.inited) {
23.                    alert("not inited");
24.                    return;
25.           }
26.  
27.         var oldPageAnchor = document.getElementById('pg'+this.currentPage);
28.         oldPageAnchor.className = 'pg-normal';
29.        
30.         this.currentPage = pageNumber;
31.         var newPageAnchor = document.getElementById('pg'+this.currentPage);
32.         newPageAnchor.className = 'pg-selected';
33.        
34.         var from = (pageNumber - 1) * itemsPerPage + 1;
35.         var to = from + itemsPerPage - 1;
36.         this.showRecords(from, to);
37.     }  
38.    
39.     this.prev = function() {
40.         if (this.currentPage > 1)
41.             this.showPage(this.currentPage - 1);
42.     }
43.    
44.     this.next = function() {
45.         if (this.currentPage < this.pages) {
46.             this.showPage(this.currentPage + 1);
47.         }
48.     }                      
49.    
50.     this.init = function() {
51.         var rows = document.getElementById(tableName).rows;
52.         var records = (rows.length - 1);
53.         this.pages = Math.ceil(records / itemsPerPage);
54.         this.inited = true;
55.     }
56.  
57.     this.showPageNav = function(pagerName, positionId) {
58.           if (! this.inited) {
59.                    alert("not inited");
60.                    return;
61.           }
62.           var element = document.getElementById(positionId);
63.          
64.           var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> &#171 Prev </span> | ';
65.         for (var page = 1; page <= this.pages; page++)
66.             pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
67.         pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next &#187;</span>';          
68.        
69.         element.innerHTML = pagerHtml;
70.     }
71. }
72. //]]>
73. </script>

Bước 2. Đặt đoạn CSS sau đây vào trước dòng ]]></b:skin> để định dạng các thuộc tính cho phần phân trang:

1. .pg-normal {
2.        color: red;
3.        font-weight: normal;
4.        text-decoration: none;  
5.        cursor: pointer;  
6. }
7. .pg-selected {
8.        color: black;
9.        font-weight: bold;      
10.        text-decoration: underline;
11.        cursor: pointer;
12. }

Lưu Template.

Bước 3. Khi tạo nội dung trong một bài viết nào đó, hãy sử dụng cấu trúc HTML cho bảng dưới dạng như sau (ở đây demo bảng có 3 cột và 9 dòng để phân trang thành 3 trang, bạn có thể vận dụng linh hoạt):

1. <table id="results">
2.      <tr>
3.           <th>Heading 1</th>
4.           <th>Heading 2</th>
5.           <th>Heading 3</th>
6.      </tr>
7.      <tr>
8.           <td>Column 1 – Row 1</td>
9.           <td>Column 2 – Row 1</td>
10.           <td>Column 3 – Row 1</td>
11.      </tr>
12.      <tr>
13.           <td>Column 1 – Row 2</td>
14.           <td>Column 2 – Row 2</td>
15.           <td>Column 3 – Row 2</td>
16.      </tr>
17.      <tr>
18.           <td>Column 1 – Row 3</td>
19.           <td>Column 2 – Row 3</td>
20.           <td>Column 3 – Row 3</td>
21.      </tr>
22.      <tr>
23.           <td>Column 1 – Row 4</td>
24.           <td>Column 2 – Row 4</td>
25.           <td>Column 3 – Row 4</td>
26.      </tr>
27.      <tr>
28.           <td>Column 1 – Row 5</td>
29.           <td>Column 2 – Row 5</td>
30.           <td>Column 3 – Row 5</td>
31.      </tr>
32.      <tr>
33.           <td>Column 1 – Row 6</td>
34.           <td>Column 2 – Row 6</td>
35.           <td>Column 3 – Row 6</td>
36.      </tr>
37.      <tr>
38.           <td>Column 1 – Row 7</td>
39.           <td>Column 2 – Row 7</td>
40.           <td>Column 3 – Row 7</td>
41.      </tr>
42.      <tr>
43.           <td>Column 1 – Row 8</td>
44.           <td>Column 2 – Row 8</td>
45.           <td>Column 3 – Row 8</td>
46.      </tr>
47.      <tr>
48.           <td>Column 1 – Row 9</td>
49.           <td>Column 2 – Row 9</td>
50.           <td>Column 3 – Row 9</td>
51.      </tr>
52. </table>
53. <div id="pageNavPosition"></div>
55. <script type="text/javascript"><!--
56.        var pager = new Pager('results', 3);
57.        pager.init();
58.        pager.showPageNav('pager', 'pageNavPosition');
59.        pager.showPage(1);
60. //--></script>

Ở đoạn script trên thì số 3 biểu thị số dòng mỗi trang, bạn có thể điều chỉnh tùy theo trường hợp áp dụng của bạn.

More about →

TIỆN ÍCH XEM BÁO TRỰC TIẾP NGAY TẠI BLOG (KIỂU 2)

Trước đây, tôi có chia sẻ với các bạn tiện ích xem báo ngay tại blog (kiểu 1) xem TẠI ĐÂY, hôm nay tôi sẽ tiếp tục chia sẻ với các bạn cách gắn tiện ích xem báo hoặc xem trang Web ưa thích trực tiếp ngay tại Blog (kiểu 2).

Với kiểu này, các trang Web, trang báo sẽ có các Tab riêng biệt, được sắp xếp khá gọn gàng ở hàng phía trên cùng, khi muốn xem trang nào các bạn chỉ cần bấm về tab đó để xem mà không cần rời khỏi trang Blog hiện tại. Nếu muốn xem trang Web đó ở một tab mới, các bạn chỉ cần đánh dấu chọn vào hàng chữ cuối cùng của khung Open tab links in browser window instead, ngay lập tức sẽ mở trang Web đó ở một trang riêng biệt hoàn toàn.

Bạn bấm vào XEM THỬ phía dưới để trải nghiệm nha.

Xem thử

Rất đơn giản, chỉ cần bạn đăng nhập vào Blog > chọn thiết kế > Thêm tiện ích HTML rồi dán tất cả các code phía dưới vào

<style type="text/css">

/*Eric Meyer's based CSS tab*/

#tablist{

padding: 3px 0;

margin-left: 0;

margin-bottom: 0;

margin-top: 0.1em;

font: bold 12px Verdana;

}

#tablist li{

list-style: none;

display: inline;

margin: 0;

}

#tablist li a{

text-decoration: none;

padding: 3px 0.5em;

margin-left: 3px;

border: 1px solid #778;

border-bottom: none;

background: white;

}

#tablist li a:link, #tablist li a:visited{

color: navy;

}

#tablist li a:hover{

color: #000000;

background: #C1C1FF;

border-color: #227;

}

#tablist li a.current{

background: lightyellow;

}

</style>

<script type="text/javascript">

/***********************************************

* Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/

var selectedtablink=""

var tcischecked=false

function handlelink(aobject){

selectedtablink=aobject.href

tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false

if (document.getElementById && !tcischecked){

var tabobj=document.getElementById("tablist")

var tabobjlinks=tabobj.getElementsByTagName("A")

for (i=0; i<tabobjlinks.length; i++)

tabobjlinks[i].className=""

aobject.className="current"

document.getElementById("tabiframe").src=selectedtablink

return false

}

else

return true

}

function handleview(){

tcischecked=document.tabcontrol.tabcheck.checked

if (document.getElementById && tcischecked){

if (selectedtablink!="")

window.location=selectedtablink

}

}

</script>

<ul id="tablist">

<li><a class="current" href="địa chỉ trang Web, bạn dán tại đây" onClick="return handlelink(this)">Tên tờ báo</a></li>

<li><a href="địa chỉ trang Web bạn dán tại đây" onClick="return handlelink(this)">Tên tờ báo</a></li>

<li><a href="Địa chỉ trang Web, blog bạn dán vào đây" onClick="return handlelink(this)">Tên tờ báo</a></li>

<li><a href="Địa chỉ trang Web, bạn dán vào đây" onClick="return handlelink(this)">Tên tờ báo</a></li>

<li><a href="Địa chỉ trang Web, bạn dán vào đây" onClick="return handlelink(this)">Tên tờ báo</a></li>

</ul>

<iframe id="tabiframe" src="http://www.dunghennessy.blogspot.com" width="98%" height="350px"></iframe>

<form name="tabcontrol" style="margin-top:0">

<input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.

</form>

Bây giờ, bạn thay địa chỉ trang Web hoặc trang tờ báo ở dòng lệnh

<li><a href="Địa chỉ trang Web, bạn dán vào đây" onClick="return handlelink(this)">Tên tờ báo</a></li>

Nếu muốn thêm một trang Web nào nữa thì bạn chỉ cần dán thêm dòng lệnh phía trên vào phía dưới tiếp theo là được, cuối cùng bấm Lưu lại rồi trở lại vào Blog xem kết quả

More about →

XEM TRỰC TIẾP MỘT TRANG WEB NGAY TẠI BLOG

Khi đang ở trang Blog của mình, nếu bạn muốn xem một trang Web bất kỳ nào đó thì bạn phải mở thêm Tab mới trên trình duyệt.

Với thủ thuật đơn giản dưới đây, bạn có thể xem trang Web mình ưa thích ngay tại trang Blog của mình mà không cần mở Tab mới và không cần rời khỏi trang Blog của mình "nửa bước"!!!

Bạn bấm vào XEM THỬ phía dưới để thử nghiệm nha

Xem thử

Đầu tiên bạn đăng nhập vào Blog > chọn Thiết kế > Thêm tiện ích HTML rồi copy đoạn code phía dưới dán vào.

<iframe height="400" width="98%" frameBorder="0" src="URL OF WEB PAGE">your browser does not support IFRAMEs</iframe>

Bây giờ, bạn thay địa chỉ trang Web mình ưa thích vào thay cho dòng lệnh URL OF WEB PAGE, bạn có thể chỉnh sửa độ dài của trang Web hiển thị trên Blog mình bằng cách thay số 400 bằng số khác mà mình muốn. Cuối cùng bấm Lưu lại và quay trở lại xem kết quả nha.

More about →

Thêm 2 cột tiện ích trên khu vực bài đăng

Thông thường các bạn có thể thêm nhiều tiện ích trên khu vực bài đăng nhưng những tiện ích này sẽ có chiều ngang bằng với chiều ngang của khu vực bài đăng, điều này gây nhiều bất tiện khi bạn muốn chèn nhiều tiện ích có chiều ngang nhỏ hơn. 

Với thủ thuật dưới đây, các bạn có thể thêm được 2 cột tiện ích có chiều ngang bằng phân nửa chiều ngang của khu vực bài đăng.

Bạn xem hình phía dưới sẽ rõ

Đầu tiên, bạn đăng nhập vào Blog > Chọn Thiết kế > Chọn Chỉnh sửa HTML, bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng lệnh <div id='main-wrapper'> rồi Enter, bạn sẽ thấy trên bảng lớn có dòng lệnh này và được highlight màu xanh.

Bạn copy code phía dưới và dán vào ngay sau dòng lệnh đó

<b:section class='sidebar' id='magazine-left2' showaddelement='yes'>
<b:widget id='Text512' locked='false' title='Column 1' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-right2' showaddelement='yes'>
<b:widget id='Text522' locked='false' title='Column 2' type='Text'/>
</b:section>

                             <div style="clear:both;"></div>

Bước kế tiếp, bạn gõ vào hộp tìm kiếm dòng lệnh ></b:skin> và copy code phía dưới vào ngay trên dòng lệnh ></b:skin>


#magazine-left2 {
width: 45%;
float: left;
}
#magazine-right2 {
width: 45%;
float: right;
}

Cuối cùng, bấm Lưu mẫu rồi trở vào bố cục, bạn sẽ thấy trên khu vực bài đăng của mình xuất hiện thêm 2 cột tiện ích.

Lưu ý: Thủ thuật này chỉ thực hiện thành công cho giao diện Blogspot V2 (giao diện tải về trên mạng), không thực hiện được đối với giao diện mặc định của Blogspot

More about →