Chủ Nhật, 16 tháng 9, 2012

HƯỚNG DẪN CÁCH THÊM HIỆU ỨNG TRÁI TIM RƠI VÀO BLOG


Dành cho những ai thích trang trí cho Blog của mình 1 cách sinh động hơn, các bạn có thể thêm vào đoạn code dưới đây để tạo hiệu ứng những trái tim đang rơi ngay trên site của mình.

Đoạn code bên dưới bạn có thể đặt vào bất kỳ vị trí nào trên trang cũng được. Trong thẻ <head> và </head>
hoặc thẻ <body> ----code hiệu ứng ---- </body>

Nếu bạn sử dụng Blogger thì vào phần chỉnh sửa HTML nhé. Có gì ko làm đc pm bên dưới mình sẽ chỉ dẫn chi tiết :)

<script src='https://sites.google.com/site/love4all1080/Home/heart_fly.txt' type='text/javascript'></script>
chúc bạn thành công
vào lúc Không có nhận xét nào:

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


Published : 16:07 Author : 

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.

    <?
    //////////////////////////////////////////////////////
    // PHP Random Quote Script for Blogspot applied by www.thuthuatblogger.info
    // Many thanks to http://davidmarotz.com/ for its original PHP code
    //////////////////////////////////////////////////////
    Header("content-type: application/x-javascript");
    $bgcolor = '#FFFFCC';
    $textcolor = 'black';
    $textcolor2 = 'brown';
    $textsize = '4';
    $textsize2 = '3';
    // Array Structure:  "Quote","Author"
    $allqts = array
        ("The Black Knight Always Triumphs!",
            "Monty Python",
        "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" ,
            "Atlas Shrugged",
        "It is clear that the individual who persecutes a man, his brother,<br> because he is not of the same opinion, is a monster",
            "Voltaire",
        "I agree that there is a natural aristocracy among men<br>The grounds of this are virtue and talents.",
            "Thomas Jefferson",
        "Liberty, when it begins to take root, is a plant of rapid growth.",
            "George Washington",
        "Never argue with an idiot. <br>They drag you down to their level <br>then beat you with experience",
            "Dilbert",
        "The Answer is 42. What is the question?",
            "Hitchikers Guide to the Galaxy",
        "Anyone who has never made a mistake has never tried anything new",
            "Albert Einstein",
        "Progress doesn't come from early risers, progress is made<br>by lazy men looking for easier ways to do things.",
            "Lazarus Long <font size=-2>(Time Enough for Love by Robert A. Heinlein)</font>",
        "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.'",
            "Robert Heinlein",
        "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",
            "Alexander Pope",
        "The early bird gets the worm, but the second mouse gets the cheese",
            "Anonymous",
        "Subjugating the enemy's army without fighting is the true pinnacle of excellence",
            "Sun-tzu, The Art of War",
        "Work as though you were to live 100 years; pray as if you were to die tomorrow",
            "Benjamin Franklin",
        "The world is a stage, but the play is badly cast",
            "Oscar Wilde",
        "Truth is generally the best vindication against slander.",
            "Abraham Lincoln",
        "...mercy to the guilty is cruelty to the innocent...",
            "Adam Smith",
        "...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",
            "David Ricardo",
        "Democracy is the worst form of government except for all the others",
            "Winston Churchill",
        "You can only know the highest peaks if you have experianced the lowest valley's",
                "Richard Nixon",
        "They dress the wound of my people as though it were not serious. <br>'Peace, peace,' they say, when there is no peace.",
            "Jeremiah 6:14",
        "It is better to remain silent and be thought a fool<br> than to open your mouth and remove all doubt.",
            "Jonathan Swift",
        "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.",
            "F.A. Hayek, Law, Legislation and Liberty, Vol. II",
        "Never Stop Exploring<sup>tm</sup>",
            "The North Face"
            );
    // Gets the Total number of Items in the array
    //  Divides by 2 because there is a Quote followed by an Author
    $totalqts = (count($allqts)/2);
    // Subtracted 1 from the total because '0' is not accounted for otherwise
    $nmbr = (rand(0,($totalqts-1)));
    $nmbr = $nmbr*2;
    //$nmbr = 18;
    $quote = $allqts[$nmbr];
             $nmbr = $nmbr+1;
    $author = $allqts[$nmbr];
    $space = "<font color=$bgcolor>.....................................</font>";
    echo "document.write(\"<center><font color=$textcolor size='$textsize'><i>$quote</i></font><br>$space<font color=$textcolor2 size='$textsize2'>$author</font></center>\")";
    ?>
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:

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

cảm ơn các bạn!!!
vào lúc Không có nhận xét nào:

Tạo bài viết liên quan cho blog (Related Posts)

Tiện ích cho phép hiển thị các bài viết liên quan (có cùng nhãn) ở cuối mỗi bài viết. Thủ thuật có sử dụng CSS để làm cho tiện ích trông bắt mắt hơn. Ngoài ra, cũng để khách viếng thăm dễ theo dõi chủ đề liên quan hơn.
Thủ thuật blog: Tạo bài viết liên quan cho blog (Related Posts) 


Related Posts

Giới thiệu: Tiện ích cho phép hiển thị các bài viết liên quan (có cùng nhãn) ở cuối mỗi bài viết. Thủ thuật có sử dụng CSS để làm cho tiện ích trông bắt mắt hơn. Ngoài ra, cũng để khách viếng thăm dễ theo dõi chủ đề liên quan hơn.


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích) 

4. Chèn script 

Bước 1: Tìm thẻ đóng </head> 

- Thêm vào trước nó đoạn code sau:
<!-- Widget bài viết liên quan (1) -->
<style>
/*Khung chính của bài viết liên quan*/
#related-posts {
    float:left;
    min-width: 100%;
    margin: 30px 5px 30px 0;
    font: 11px Tahoma;
}

#related-posts .widget { 
    List-style-type: none;
    margin: 5px 0 5px 0;
    padding: 0;
}

#related-posts .widget h2, #related-posts h2 {
    color: #940f04; 
    font-size: 20px;
    font-weight: normal;
    margin: 5px 7px 0;
    padding: 0 0 5px;
}

/*Màu link của bài viết liên quan*/
#related-posts a {
    color: #318686;
    font-size: 13px;
    text-decoration: none;
}

/*Màu link khi rê chuột vào*/
#related-posts a:hover {
    color: #C4436A;
    text-decoration: underline;
}

#related-posts ul {
    border: medium none;
    margin: 10px;
    padding: 0;
}

#related-posts ul li {
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUNG__OdQblLXI0H9HrNPpJAOeGGbQSZvoQQEoUeuU7GUMmm7LS-kfov2d03uDQTWs7AkbNrjBuPfqDvRyRMMV2aWaGIaa1pyhKwRBZ5yYH2oR4XKn0hCUffj2RQUWygsxt4t2yg7zQ93e/) no-repeat 0 0;
    margin: 0;
    padding: 0 0 1px 16px;
    margin-bottom: 5px;
    line-height: 2em;
    border-bottom:1px dotted #cccccc; /*Gạch đích dưới mỗi link bài viết liên quan*/
}
</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
}
//]]>
</script>


Bước 2: Tìm dòng <data:post.body/>

- Thêm vào sau nó đoạn code sau:
<!-- Widget bài viết liên quan (2) -->
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">

  <div style='border-top:#AAAE95 1px dashed; margin: 0 50px 0 50px; padding-top:30px;'/>
<font face='Arial' size='3'><b>Bài viết liên quan: </b></font>

<font color='#FF0000'> <!-- Màu chữ label -->
<b:loop values='data:post.labels' var='label'> 
<data:label.name/> <!--Dòng code hiện label kế bên bài viết liên quan-->
<b:if cond='data:label.isLast != "true"'>
, <!--Dấu phẩy ngăn cách các label -->
</b:if>
<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8"' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

max-results=8 // Số bài viết liên quan hiển thị

Lưu ý: Đối với những blog có tiện ích đọc thêm (Read more...) thì việc bạn đặt code trên trước hay sau code của link Readmore đều không quan trọng (do 2 tiện ích này không thể xuất hiện chung trên một trang), quan trọng là các code này phải được đặt sau dòng<data:post.body/>


Bước 3: Save template. (Lưu mẫu)

THE END. 
vào lúc Không có nhận xét nào:

Tạo liên kết Labels theo bảng chữ cái (Blogger)


Dưới đây là đoạn mã HTML dùng để tạo widget liên kết labels cho Blogger (blogspot) dạng bảng chữ cái. Đoạn mã này rất phù hợp trong việc liệt kê danh sách bài viết theo chữ cái cho những blog phát triển dạng thư viện (lời bài hát, bài hát, ca sĩ, truyện,...). Khi click vào chữ cái bất kỳ trong bảng liên kết thì sẽ hiện ra danh sách những bài viết có ký tự đầu tiên trong tựa đề là chữ cái đó. Bạn có thể xem demo tại trang Hợp âm Guitarhoặc hình minh họa bên dưới.
[HTML] Tạo liên kết theo bảng chữ cái
Hướng dẫn:
- Dựa vào chữ cái đầu tiên của tựa đề bài viết để tạo Nhãn (labels)
VD: Bài viết "Tạo liên kết theo bảng chữ cái" thì labels là chữ "T"
- Cách tạo Wedget: Bạn vào Bảng điều khiển, chọn Thiết kế, bấm Thêm tiện ích, chọn HTML/Javascript. Dán đoạn mã bên dưới vào. 
<center><table border="1" width="95%" id="table1"> <tr> <td align="center"> <a href="http://www.hopamguitar.com/search/label/A?&max-results=10"> <span style="text-decoration: none">A</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/B?&max-results=10"> <span style="text-decoration: none">B</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/C?&max-results=10"> <span style="text-decoration: none">C</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/D?&max-results=10"> <span style="text-decoration: none">D</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/Đ?&max-results=10"> <span style="text-decoration: none">Đ</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/E?&max-results=10"> <span style="text-decoration: none">E</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/F?&max-results=10"> <span style="text-decoration: none">F</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/G?&max-results=10"> <span style="text-decoration: none">G</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/H?&max-results=10"> <span style="text-decoration: none">H</span></a></td> </tr> <tr> <td align="center"> <a href="http://www.hopamguitar.com/search/label/I?&max-results=10"> <span style="text-decoration: none">I</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/J?&max-results=10"> <span style="text-decoration: none">J</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/K?&max-results=10"> <span style="text-decoration: none">K</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/L?&max-results=10"> <span style="text-decoration: none">L</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/M?&max-results=10"> <span style="text-decoration: none">M</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/N?&max-results=10"> <span style="text-decoration: none">N</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/O?&max-results=10"> <span style="text-decoration: none">O</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/P?&max-results=10"> <span style="text-decoration: none">P</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/Q?&max-results=10"> <span style="text-decoration: none">Q</span></a></td> </tr> <tr> <td align="center"> <a href="http://www.hopamguitar.com/search/label/R?&max-results=10"> <span style="text-decoration: none">R</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/S?&max-results=10"> <span style="text-decoration: none">S</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/T?&max-results=10"> <span style="text-decoration: none">T</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/U?&max-results=10"> <span style="text-decoration: none">U</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/V?&max-results=10"> <span style="text-decoration: none">V</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/X?&max-results=10"> <span style="text-decoration: none">X</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/Y?&max-results=10"> <span style="text-decoration: none">Y</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/Z?&max-results=10"> <span style="text-decoration: none">Z</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/0-9?&max-results=10"><span style="text-decoration: none">9</span></a></td> </tr> </table></center>
Lưu ý: Thay tên miền hopamguitar.com thành tên miền của bạn. Giá trị "10" là số bài viết tối đa hiển thị trong 1 trang, bạn có thể thay đổi thành giá trị khác tùy ý.
vào lúc Không có nhận xét nào:

Tạo form liên hệ gọn đẹp cho Blogger


Việc đưa form liên hệ vào blog sẽ tạo sự thuận tiện nhất cho người muốn liên lạc với bạn. Ngoài ra, bạn sẽ không phải lo lắng nhiều nếu bạn không thích public địa chỉ email của mình trên blog. 
Và sau đây mình sẽ hướng dẫn các bạn cách tạo form liên hệ cho blogger thông qua dịch vụ miễn phí của Foxyform. (xem demo)
form liên hệ đẹp cho blogger (blogspot)

Hướng dẫn:
- Trước tiên, bạn bấm vào đây để truy cập vào trang chủ dịch vụ.
- Tại mục Setting, bạn hãy chọn thông tin muốn hiển thị trong form liên hệ (1). Thông tin nào bạn yêu cầu bắt buộc người liên hệ phải điền thì bấm chọn required field tại vị trí tương ứng (2). Mặc định dịch vụ chỉ để hiển thị vài thông tin cần thiết, nếu bạn muốn nhiều hơn thì bấm vào Show further options (3).
hướng dẫn tạo mẫu liên hệ cho website blog
- Ở tùy chọn Advanced settings, bạn có thể tùy chỉnh màu nền, màu chữ, fonts chữ,.. cho form liên hệ (4).
- Nhập chính xác địa chỉ email của bạn tại ô Target e-mail address (5). Sau đó bấmCreate Formular (6) để sang bước tiếp theo.
tạo trang liên hệ miễn phí cho website blogspot
- Copy đoạn mã trong ô (7)
- Bạn đăng nhập vào Blogger rồi tạo 1 trang tĩnh (theo đường dẫn: Đăng bài ~> Chỉnh sửa Trang ~> Trang mới). Dán đoạn mã vừa copy vào trang tĩnh này (ở dạng chỉnh sửa HTML), bấm Xuất bản trang nữa là xong.
Lưu ý tùy chỉnh cho form:
- Bạn có thể tăng giảm chiều rộng và cao bằng cách thay đổi lần lượt 2 giá trị width vàheight trong đoạn mã này. Nếu form tạo khoảng trống lớn phần dưới, bạn hãy giảm chiều cao.
- Bên dưới form sẽ có 1 liên kết đến trang chủ dịch vụ, nếu bạn không thích thì có thể xóa nó bằng cách xóa đoạn mã bên dưới này (hoặc tương tự).
<a style="font:8px Arial;color:#5C5C5C;" href="http://www.foxyform.com">foxyform.com</a>

vào lúc Không có nhận xét nào:

Code quảng cáo từ dưới trồi lên ở góc phải (Blogger)

Dưới đây là đoạn code quảng cáo banner dạng popup trồi từ dưới lên trên ở góc phải của Blog mỗi khi khách ghé thăm. Bên cạnh đó sẽ có nút Ẩn/Hiện tương ứng với việc quảng cáo sẽ hạ xuống hoặc trồi lên. Bạn có thể xem demo tại ngay góc dưới bên phải trang này.
Hướng dẫn
- Vào Bảng điều khiển của Blogger, chọn Thiết kế, chọn tiếp Phần tử trang
- Tạo một widget HTML\JavaScripts và đưa code bên dưới vào.
<style type="text/css">
* html div#fl813691 {position: absolute; overflow:hidden;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight));}
#fl813691{font: 12px Arial, Helvetica, sans-serif; color:#666; position:fixed; _position: absolute; right:0; bottom:0; height:150px; }
#eb951855{ width:279px; padding-right:7px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Uz4vreHReKHAq6PpsEi7gs8KqX3bzTdXGyZsRvz_kxIVax0dRnhS7ZE83h13oeoUDzHgWoemFLWyo19B0m8817v_JyHzqUJsjjY_pBHXIdQb-rUfAgoSyrdTMegxUYoD7gXrZSfFWKc/s1600/rightp.gif) no-repeat right top;}
#cob263512{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcrB8RLPlqrjy1Dx-JOqlCjuS7MwT0t8qfo9BJbtm-MPoqLyMyQbyMJ4xl8M2cqWr9aoZ_CkPdtlkH-s5Xa0LAPHRLTjk49C-7sog92JVMFTb2X2HHpql_5bDHefmGrogDg_0Nza4j8jQ/s1600/fulld.gif) no-repeat left top; height:150px; padding-left:7px;}
#coh963846{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:277px;}
#coh963846 a{color:#690;text-decoration:none;}
#coc67178{float:right; padding:0; margin:0; list-style:none; overflow:hidden; height:15px;}
#coc67178 li{display:inline;}
#coc67178 li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9kNz2qiQOXUq5J_J4PbPaqd9mfAR0bym25gZxsGFNR1upRxF58aUXIf0Jhfcr_fg5Z5OYaCbrjzdl64YJfvScSXv1Limb98ejtDaIgr5kqCO0cCfZHkQJCzS0rJOU9mnpTqCIMU8XRoc/s1600/closebutton.gif); background-repeat:no-repeat; width:30px; height:0; padding-top:15px; overflow:hidden; float:left;}
#coc67178 li a.close{background-position: 0 0;}
#coc67178 li a.close:hover{background-position: 0 -15px;}
#coc67178 li a.min{background-position: -30px 0;}
#coc67178 li a.min:hover{background-position: -30px -15px;}
#coc67178 li a.max{background-position: -60px 0;}
#coc67178 li a.max:hover{background-position: -60px -15px;}
#co453569{display:block; margin:0; padding:0; height:123px; border-style:solid; border-width:1px; border-color:#111 #999 #999 #111; line-height:1.6em; overflow:hidden;}
</style>
<div id="fl813691" style="height: 152px;">
<div id="eb951855">
<div id="cob263512">
<div id="coh963846">
<ul id="coc67178">
<li id="pf204652hide"><a class="min" href="javascript:pf204652clickhide();" title="Ẩn đi">Ẩn</a></li>
<li id="pf204652show" style="display: none;"><a class="max" href="javascript:pf204652clickshow();" title="Hiện lại">Xem </a></li>
</ul>
&nbsp;Đêm Không Ngủ - Diễn đàn Kết bạn
</div>
<div id="co453569">
<!-- code ads -->
<a target="_blank" href="http://demkhongngu.com/" rel="dofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfWSkReJIuk4b0XUAx36XKXW6avsVDViMt1MgIk7zI6VmsUwY4KvC9yIOWt2raT0OwqR5uOtJX5anW_GqCiiU3mFCFOMTF0wkddinWxJl7adl6d7kABEkk6xguIvKjB-2zTlvhWkbc3UI/s1600/demkhongngu.jpg" height="115" title="Diễn đàn Kết bạn"/></a>
<!-- code ads -->
</div>
</div></div></div>
<script>
pf204652bottomLayer = document.getElementById('fl813691');
var pf204652IntervalId = 0;
var pf204652maxHeight = 148;//Chieu cao khung quang cao
var pf204652minHeight = 20;
var pf204652curHeight = 0;
function pf204652show( ){
pf204652curHeight += 2;
if (pf204652curHeight > pf204652maxHeight){
clearInterval ( pf204652IntervalId );
}
pf204652bottomLayer.style.height = pf204652curHeight+'px';
}
function pf204652hide( ){
pf204652curHeight -= 3;
if (pf204652curHeight < pf204652minHeight){
clearInterval ( pf204652IntervalId );
}
pf204652bottomLayer.style.height = pf204652curHeight+'px';
}
pf204652IntervalId = setInterval ( 'pf204652show()', 5 );
function pf204652clickhide(){
document.getElementById('pf204652hide').style.display='none';
document.getElementById('pf204652show').style.display='inline';
pf204652IntervalId = setInterval ( 'pf204652hide()', 5 );
}
function pf204652clickshow(){
document.getElementById('pf204652hide').style.display='inline';
document.getElementById('pf204652show').style.display='none';
pf204652IntervalId = setInterval ( 'pf204652show()', 5 );
}
function pf204652clickclose(){
document.body.style.marginBottom = '0px';
pf204652bottomLayer.style.display = 'none';
}
</script>
- Bạn chỉnh sửa lại các phần tô màu cho phù hợp:
+ Đêm Không Ngủ - Diễn đàn Kết bạn : Thay bằng tiêu đề quảng cáo của bạn
+ http://demkhongngu.com/ : URL website quảng cáo
+ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfWSkReJIuk4b0XUAx36XKXW6avsVDViMt1MgIk7zI6VmsUwY4KvC9yIOWt2raT0OwqR5uOtJX5anW_GqCiiU3mFCFOMTF0wkddinWxJl7adl6d7kABEkk6xguIvKjB-2zTlvhWkbc3UI/s1600/demkhongngu.jpg : Link hình ảnh banner quảng cáo
+ Diễn đàn Kết bạn: Tên website quảng cáo
+ Thay right:0 thành left:0 nếu bạn muốn banner trồi lên phía bên trái thay vì bên phải Blog.
vào lúc Không có nhận xét nào:

Tạo phân trang cho Blogger (Blogspot)


Trong bài viết này, mình sẽ trình bày cách tạo phân trang đẹp kèm theo ô trống để người xem có thể nhập và truy cập đến số trang bất kì trên blog, các bạn có thể xem demo bằng hình ảnh bên dưới hoặc ngoài trang chủ DoPhuQuy's Blog. 
Tạo phân trang cho Blogger (Blogspot)
- Đầu tiên, các bạn vào Thiết kế, chọn Chỉnh sửa HTML, bấm chọn vào ô Mở rộng mẫu tiện ích.
- Bấm Ctrl+F để tìm đoạn mã bên dưới:
<b:include name='nextprev'/>
Thay đoạn mã vừa tìm được bằng đoạn mã bên dưới:
<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>
<div align="center" style="margin:5px;"><form action="#" name="pager20"><span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form></div>
<script type="text/javascript">
var blogID = "6628069224773557671";
var home_page = "/";
var pager_max_main = 5;
var pager_first_text = "First";
var pager_last_text = "Last";
var pager_prev_text = "Prev";
var pager_next_text = "Next";
</script>
<script type='text/javascript'>
//<![CDATA[
var pager_max_results = 20;
if(location.href.match("max-results=")){
pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("&")[0]);
} else if(!location.href.match("/search/label/")){
pager_max_results = pager_max_main;
}
var per_page = pager_max_results ;
if(!location.href.match('/search/label/')) {
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary";
pager_pageurl = home_page+"search";
}
else {
label = location.href.split("/")[5];
label = label.split("?")[0];
label = label.replace(/ /g,"%20");
pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
pager_pageurl = home_page+"search/label/"+label;
}
var pager_opening = 1;
if(location.href.match("popening=")){
pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("&")[0]);
}
var num_pages = 1;
function createBlogPager(){
var script = document.createElement('script');
script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
script.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(script)
}
function countnumpost(json) {
var posts = json.feed.openSearch$totalResults.$t;
num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
var a1 = document.createElement("a");
a1.className = "blogpager";
a1.title = "Jump to page: (1)";
a1.href = "javascript:page(1)";
a1.innerHTML = pager_first_text;
document.getElementById("vwg-pager-first").appendChild(a1);
var a4 = document.createElement("a");
a4.className = "blogpager";
a4.title = "Jump to page: ("+num_pages+")";
a4.href = "javascript:page("+num_pages+")";
a4.innerHTML = pager_last_text;
document.getElementById("vwg-pager-last").appendChild(a4);
var prev = (pager_opening!=1) ? pager_opening-1 : 1;
var a2 = document.createElement("a");
a2.className = "blogpager";
a2.title = "Jump to page: ("+prev+")";
a2.href = "javascript:page("+prev+")";
a2.innerHTML = pager_prev_text;
document.getElementById("vwg-pager-prev").appendChild(a2);
var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages;
var a3 = document.createElement("a");
a3.className = "blogpager";
a3.title = "Jump to page: ("+next+")";
a3.href = "javascript:page("+next+")";
a3.innerHTML = pager_next_text;
document.getElementById("vwg-pager-next").appendChild(a3);
document.pager20.showingpage.value = pager_opening;
document.pager20.pagestotal.value = num_pages;
}
function checkpager(){
var uinput = parseInt(document.pager20.showingpage.value);
if((uinput <= num_pages)&&(uinput >= 1)) {
page(uinput);
}
else {
alert("Invalid page number. Please try by another!");
document.pager20.showingpage.focus() ;
document.pager20.showingpage.select();
}
}
function getDateAndGo(json){
var date2 = json.feed.entry[0].published.$t;
ss = parseFloat(date2.substring(17,19));
if(ss<59) ss++;
if(ss<10) { ss = "0"+ ss; }
date4 = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening;
}
function page(startindex) {
pager_opening = startindex;
var i = per_page*(startindex-1)+1;
var script2 = document.createElement("script");
script2.src = pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo";
document.getElementsByTagName('head')[0].appendChild(script2)
}
createBlogPager();
//]]>
</script>
</b:if>
- Bạn thay 6628069224773557671 thành ID Blog của bạn. Thay số 5 thành số bài viết bạn muốn hiển thị trong 1 trang.
- Bấm Lưu mẫu để hoàn thành
vào lúc Không có nhận xét nào:

Sửa lỗi không hiển thị khung nhận xét trong Blogger


Hôm trước có người bạn nhờ mình giúp đỡ vì tình huống sau khi đổi template thì không còn thấy khung nhận xét dưới mỗi bài viết nữa (Mặc dù đã chọn Hiển thị trong cài đặt nhận xét).Mình đã tìm hiểu và sửa thành công.Nếu các bạn có gặp tình huống như trên,hãy thử làm theo các bước mà mình chia sẽ bên dưới:
Khung nhận xét trong Blogger

1. Đăng nhập vào Blogger,chọn Thiết kế,Chỉnh sửa HTML.(Nếu bạn cẩn thận hơn,hãy chọn Tải xuống mẫu đầy đủ để có gì phục hồi lại khi cần thiết).
2. Chọn Mở rộng mẫu tiện ích
3. Bạn tìm đến đoạn code sau 
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/>
4. Bạn đổi toàn bộ đoạn code vừa tìm được ở trên bằng đoạn code bên dưới.
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
5. Lưu mẫu
6. Bạn ra ngoài xem thử dưới mỗi bài viết đã có khung nhận xét chưa nhé.
Chúc các bạn thành công!
vào lúc 1 nhận xét:

Hiệu ứng phóng to ảnh khi rê chuột vào



Hôm nay LyLd sẽ giới thiệu cho các bạn một hiệu ứng phóng hình ảnh khi bạn rê chuột vào nó. Khi rê chưa rê chuột ảnh sẽ nhỏ và có hiệu ứng mờ ảo nhưng khi rê chuột vào thì ảnh lớn và sáng hẳn lên. Hiệu ứng này khá đẹp mắt cho những blog có bộ sưu tập ảnh. Sau đây là cách làm:




Các bước thực hiện:

     1. Các bạn vào Thiết kế rồi Chỉnh sửa HTML
     2. Thêm đoạn Code dưới đây trước thẻ </head>

<style type="text/css"> .hovergallery img{ -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/ -o-transform:scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .hovergallery img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:scale(1.1); /*Mozilla scale version*/ -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style>

Như vậy mỗi khi viết bài có hình ảnh các bạn chỉ cần bật qua HTML và dán code sau:

<div class="hovergallery">
<img src="URL" />
<img src="URL" />
</div>
Nguồn Dynamicdrive


Cập nhật hiệu ứng cho tất cả ảnh trong bài đăng:

     1. Vào Thiết kế --> Chỉnh sửa HTML

     2. Thêm đoạn mã bên dưới trước ]]></b:skin>

.post img{ -webkit-transform:scale(0.8);
/*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8);  /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
 -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ }

.post img:hover{ -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; }

Các bạn có thể thay đổi số tô xanh theo ý muốn: 
0.8 : độ thu nhỏ của ảnh khi chưa rê chuột (muốn ảnh bình thường thì đặt là 1)
0.5 : thời gian
1.1 : độ phóng to của ảnh khi rê chuột vào

Thích hợp trên các trình duyệt : Firefox 3.6+ , G.Chrome , Safari 4+ , Opera 9.5+ .
Không áp dụng trên IE .
vào lúc Không có nhận xét nào: