Code popup thông báo xuất hiện chỉ 1 lần khi vào trang web blogspot

Code popup xuất hiện chỉ 1 lần khi vào trang web blogspot. Hướng tạo popup thông báo,banner quảng cáo xuất hiện chỉ 1 lần khi vào trang web blogspot.

Hôm nay Fphn sẽ hướng dẫn các bạn tạo code tạo popup thông báo hay banner thông báo,quảng cáo...chỉ lần đầu tiên vào website không xuất hiện thêm nữa khí vào đọc các bài viết khác nhau để không gây khó chịu cho người dùng

Code popup thông báo xuất hiện chỉ 1 lần khi vào trang web blogspot

Bước 1: Thêm đoạn code sau lên trên thẻ đóng </head>

<link rel="stylesheet" href="https://sites.google.com/site/tessssssssblog/popup.css" /> 

  <!-- <script type="text/javascript" src="jquery-1.4.4.min.js"></script> -->

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

  <script type="text/javascript" src="https://seovnpro.googlecode.com/files/popup.js"></script> 

<script type="text/javascript" >

    jQuery.noConflict();      /* dòng chống conflict jquery */

    jQuery(window).load(function() {

        if(document.cookie.indexOf("adf") == -1) /*  Bỏ dòng này thì nó hiện thông báo liên tục mỗi khi mở web lên rất là phiền  */

        {

            document.cookie = "popunder1=adf";

            jQuery('#myModal').bittuotblog(jQuery('#myModal').data());

        }

    });

</script>

Bước 2: Bạn thêm đoạn code sau lên trên thẻ đóng </body>

<div id="myModal" class="modal">

   <img src="link ảnh cảu bạn" />

   <a class="close-modal">X</a>

</div> 

Chú ý: Thay phần  <img src="link ảnh cảu bạn cần hiển thi" />   bằng hình ảnh của bạn nhé. Bạn có thể thay nó bằng đoạn text thông báo túy ý cũng dc

- Còn đối với đoạn này: <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> bạn có thể bỏ đi nếu nó không chạy thì có thể do bị xung đột jquery hoặc javascript.


Cảnh Báo: Không dùng quảng cáo cho GA 

Nếu bạn nào vi phạm chính sách của GA thì...
Sẽ bị GA cho nên đảo nhé. 

GA là gì: Google AdSense là một cách đơn giản, miễn phí để các nhà xuất bản trang web thuộc mọi quy mô kiếm tiền bằng cách hiển thị quảng cáo Google được nhắm mục tiêu trên các trang web của họ.    ( Đăng ký tại đây )

Chúc các bạn thành công!.

Người viết bài BQT: Fphn

Read More

Tổng hợp tất cả Code hay dùng nhất Cho Blogspot

Có rất nhiều bạn hỏi rằng làm sao để căn chỉnh bài viết, và căn chỉnh như thế nào



Làm sao để chèn hình ảnh vào bài viết?

Làm sao để chèn video vào bài viết?


Dưới đây mình sẽ chia sẽ full nhất cho các bạn


Nhằm giúp các blogger mới vào nghề hiểu thêm về code nên hôm nay mình chia sẻ lại một số code thông dụng thường gặp trong quá trình viết bài cũng như thiết kế blog. Hy vọng sẽ giúp ích được cho các bạn.

1. Font, màu chữ, thụt vào đầu dòng (Dùng dòng 1 hay 2 đều như nhau)

<span style="color:#339966; font:12pt Tahoma; margin-left:12px;">Nội_dung</span> <span style="color:#339966; font-family:Tahoma; font-size:12pt; margin-left:12px;">Nội_dung</span>

#339966 // Mã màu cho chữ
12pt Tahoma // Cỡ chữ và font chữ


margin-left:12px // Số pixel (khoảng cách) chữ thụt vào đầu dòng. Có thể thay left bằng right cho chiều ngược lại.

2. Canh giữa, canh phải

<div style="text-align:center;">Nội_dung</div>

center // Thay center = right cho canh phải hoặc = left cho căn trái


3. Định dạng chữ: Đậm, Nghiêng, Gạch chân, Gạch ngang chữ

<b>Nội_dung_in_đậm</b><i>Nội_dung_in_nghiêng</i><u>Nội_dung_gạch_chân</u><strike>Nội_dung_chữ_bị_gạch_ngang</strike>

4. Dấu chấm vô dòng con, đánh số đầu dòng

Dấu chấm vô dòng con

<ul><li> Nội_dung 1 </li><li> Nội_dung 2 </li><li> Nội_dung 3 </li></ul>

Đánh số đầu dòng

<ol><li> Nội_dung 1 </li><li> Nội_dung 2 </li><li> Nội_dung 3 </li></ol>

5. Bookmark đến một vị trí nhanh trong bài viết

<a href="LINK_bài_viết#Tên_gán_cho_vị_trí ">Nội_dung</a><a name="Tên_gán_cho_vị_trí ">Nội_dung</a>

Lưu ý:
Tên cách nhau không được dùng khoảng trắng mà phải dùng shift gạch. (VD: nhà_xinh)
Tốt nhất không nên dùng chữ có dấu cho tên gán.

Ví dụ:
- Đến điểm A (<a href="LINK_bài_viết_cụ thể#Diem_A">Đến điểm A</a>)
- ...
- Điểm A (<a name="Diem_A">Điểm A</a>)
Code trong ngoặc là chú thích cho ví dụ.
Như vậy khi ta click chuột vào "Đến điểm A" thì lập tức lệnh sẽ đưa ta nhảy đến vị trí "Điểm A".

6. Chèn Flash vào bài viết (Chọn loại 1 hay 2 đều được)
1.

<div style="text-align:center;"><embed wmode=Transparent pluginspage="http://www.macromedia.com/go/getflashplayer" src="LINK_FLASH" width="900" height="300"type="application/x-shockwave-flash" scale="" play="true" loop="true"menu="true"></embed></div>

2.

<embed src="LINK_FLASH" bgcolor="#000000" type="application/x-shockwave-flash" allowscriptaccess="none" width="400" height="400"></embed>

7. Chèn hình ảnh (image) vào bài viết

1. Code đơn giản

<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả"/>

 2. Code mở rộng

<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả" align="bottom" width="400" height="400"/>

 Ghi_chú // Khi rê chuột lên ảnh, sẽ hiện chú thích.
Mô_tả // Khi rê chuột lên ảnh, sẽ hiện chú thích.
Sử dụng hai lệnh này thì khi người dùng truy cập blog chọn không hiển thị ảnh thì sẽ hiện dòng chữ này thay cho ảnh đó.
align="bottom" // Vị trí ảnh so với chữ. Có thể đổi thành middle(giữa) - top(trên) - bottom(dưới). Không dùng, để mặc định theo blog chọn sẵn thì xóa nó đi.

8. Chèn link liên kết vào bài viết

<a href="LINK" target="blank">Tên_Link</a>

 target="blank" // Mở link liên kết trong một trang mới. Bỏ lệnh này thì trang mới sẽ được mở ngay tại trang đang dùng (nghĩa là trang đang dùng sẽ bị load qua trang link ta vừa click vào). Nếu người dùng có thói quen "Open new tab" thì lệnh này có hay không cũng không khác biệt.

Ví dụ:
- Dùng target="blank" - XEM
- Không dùng target="blank" - XEM


9. Chèn ảnh chứa link

<a href="LINK" target="blank"><img src="LINK_ẢNH"/></a>

 10. Tạo button ẩn hiện nội dung

<div> <div> <input type="button" value="Xem" style="width:75px; font-size:11px; margin:0px; padding:4px; border="1"" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }"> </div> <div> <div style="display: none; border:#4F4F4F 1px solid; padding: 4px; background:# ">

 NỘI_DUNG </div> </div> </div>

11. Chèn nhạc vào bài viết

<object name='hat' width=300 height=45> <embed type='application/x-mplayer2' pluginspage='http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/' controls='controlpanel' width=300 height=45 src='LINK_NHẠC' autostart="0" showstatusbar="0" ShowControls='true' loop='0' name='hat'></embed></object>

 LINK_NHẠC // Phải là link trực tiếp (VD: http://...bài_hát.mp3)
loop='0' // Không lặp lại
loop='1' // Lặp lại một lần
loop='-1' // Lặp lại mãi mãi
autostart="0" // Không tự play
autostart="1" // Play ngay khi web tải xong

12. Chia 2 cột, 3 cột, 4 cột

<table><tbody> <tr><td class="column_1" style="font:12px Tahoma; color:#000000; width:120px;padding:4px;" valign="top"><div class="column_1">

 Nội_dung_cột_1 

</div> </td><td class="column_2" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_2">

 Nội_dung_cột_2 

</div> </td></tr> </tbody></table>

 Thêm cột thì thêm trên dòng 

</td></tr> đoạn code:</td><td class="column_n" style="font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top"><div class="column_n">

 Nội_dung_cột_n </div>

13. Viền khung một nội dung trong bài viết<div style="border:#4F4F4F 1px solid; padding: 4px; background:#eee; width:400px;"> NỘI_DUNG </div>


#4F4F4F 1px solid // Lần lượt là: Mã màu - Độ dày đường viền - Loại đường viền.
- solid ______________
- dashed ----------------
- dotted ......................
background:#eee // Nền khung
width:400px // Bề rộng khung. Mặc định là sẽ rộng bằng khung bài viết (nếu bỏ lệnh này đi)

14. Chèn khung chứa code có thẻ "Select all" (Không cần mã hóa code)

<form name="MyTextBoxForm"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/> <textarea cols="59" name="MyTextBox" rows="18" wrap="on" style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">NỘI_DUNG_CODE</textarea> </form>

 cols="59" // Bề rộng khung chứa code
rows="18" // Số dòng trong khung chứa code
wrap="on" // Trong một dòng, chữ dài quá khung sẽ hiện thanh trượt kéo ngang qua
wrap="off" // Nhiều dòng chữ quá số dòng khung quy định sẽ hiện thanh trượt kéo xuống

15. Ảnh rõ hơn khi rê chuột vào
1. Ảnh có chứa link

<a href="link_liên_kết" target="blank"> <img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/> </a>

 2. Ảnh không chứa link

<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>

 opacity=0.6 và opacity=60 // Ảnh mờ trước khi rê chuột vào.
Lưu ý: Nếu thay đổi độ mờ thì phải thay đổi cả 4 giá trị.

16. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh
1. Ảnh có chứa link 

<a href="link_liên_kết" target="blank"><img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" ></a>

 2. Ảnh không chứa link

<img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" >Ví dụ:

 

17. Tạo hiệu ứng khi rê chuột vào link liên kết

<a href="LINK" target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">TEN_LINK</a>

 LINK // Link liên kết
#eee // Mã màu khi rê chuột lên
TEN_LINK // Tên gán cho link liên kết

18. Chèn trang HTML vào bài viết (Chèn trang web vào bài viết)

<iframe src="LINK_HTML" height="550" width="600" scrolling=yes frameborder="0"></iframe>

 scrolling=yes // Cho hiện thanh trượt, ngược lại không dùng thì sữa thành no
frameborder="0" // Đường viền, 0 là không viền

Ta có thể dùng lệnh này để chèn bất cứ trang nào dạng HTML (Ví dụ: http://abc.html) vào bài viết đều được hết :)

19. Các loại đường viền | border: 1px #ccc solid;

Dashed - - - - - - - - - - - - - - - - -
Solid _____________________
Dotted ..................................

20. Các kiểu định dạng chữ | text-decoration:none;

none (Không định dạng)
underline (Gạch đích)
overline (Gạch trên đầu)
line-through (Gạch ngang chữ)
blink (Chớp chớp)
inherit

21. Thêm các định dạng link vào 

class/*Link cố định*/ a:link { color:#3366ff; text-decoration:none; } /*Link đã xem qua*/ a:visited { color:#ccc; text-decoration:none; } /*Link khi rê chuột vào*/ a:hover { color:#339966; text-decoration:underline; }

22. Tạo bóng đổ và bo tròn 4 góc viền

/*Tạo bóng đổ*/ box-shadow: 8px 8px 8px #616D7E; -webkit-box-shadow: 8px 8px 8px #616D7E; -moz-box-shadow: 8px 8px 8px #616D7E; /*Tạo bóng đổ 4 cạnh*/ box-shadow: 0px 0px 8px #616D7E; -webkit-box-shadow: 0px 0px 8px #616D7E; -moz-box-shadow: 0px 0px 8px #616D7E; /*Bo tròn 4 góc viền*/ border-radius:4px; /*Bo tròn tùy chọn: top, right, bottom, left*/ border-radius:4px 4px 4px 4px;

Thay box thành text cho chữ

23. Các loại định dạng list | ... ul {list-style-type:none;}

none: Không hiển thị đánh dấu
disc: Chấm vuông
circle: Chấm tròn trắng
square: Chấm tròn đen
decimal: Kiểu số (1,2,3,4,…)
lower-alpha: Kiểu Alphabet ở dạng in thường (a, b, c, d, e, …)
upper-alpha: Kiểu Alphabet ở dạng in hoa (A, B, C, D, E, …)
lower-roman: Kiểu La Mã ở dạng thường (i, ii, iii, iv, v, …)
upper-roman: Kiểu La Mã ở dạng in hoa (I, II, III, IV, V, …)

/*Link hình thay cho list*/list-style-image:url('Link_hình');

24. Các vị trí đặt ảnh nền background | background: url(image) repeat ;

repeat: lặp ảnh
repeat-y: lặp ảnh theo chiều dọc (từ trên xuống)
repeat-x: lặp ảnh theo bề ngang (từ trái qua)
no-repeat: không lặp
top: đặt ảnh trên mép cùng
top right: đặt ảnh mép trên cùng góc phải
top left: đặt ảnh mép trên cùng góc trái
bottom: đặt ảnh mép dưới cùng
bottom left: đặt ảnh mép dưới cùng góc trái
bottom right: đặt ảnh mép dưới cùng góc phải
right: đặt ảnh bên mép phải
left: đặt ảnh bên mép trái
center: đặt ảnh ở vị trí giữa

25. Code xem địa chỉ IP, thông tin của máy truy cập blog

(Có thể post vào widget bất kỳ ở trên blog)

<img src="http://www.wieistmeineip.de/ip-address">

 26. Cách mã hóa code

Với ký tự < phải đổi thành &lt;
Với ký tự > phải đổi thành &gt;
Với ký tự & phải đổi thành &amp;
Với khoảng trắng phải đổi thành &nbsp;

Để post các chú thích kí tự trên lên blog được thì:

&lt; phải đổi thành &amp;lt;
&gt; phải đổi thành &amp;gt;
&amp; phải đổi thành &amp;amp;

27. Các lệnh điều kiện <b:if cond= ... </b:if>

1. Điều kiện ở trang chủ

<b:if cond='data:blog.url == data:blog.homepageUrl'>...</b:if>

 2. Điều kiện ở trang bài viết

<b:if cond='data:blog.pageType == "item"'>...</b:if>

 3. Điều kiện ở trang chủ, trang nhãn

<b:if cond='data:blog.pageType == "index"'>...</b:if>

 4. Điều kiện ở các trang lưu trữ

<b:if cond='data:blog.pageType == "archive"'>...</b:if>

 5. Điều kiện ở các trang tĩnh

<b:if cond='data:blog.pageType == "static_page"'>...</b:if>

 6. Điều kiện ở một trang riêng biệt nào đó

<b:if cond='data:blog.url == "URL_của_trang_riêng_biệt"'>...</b:if>

 Nếu thay == thành != thì kết quả sẽ ngược lại - Nghĩa là sẽ loại trừ trang đặt điều kiện ra và lấy phần ngược lại (các trang còn lại)

Ví dụ: Điều kiện loại trừ trang bài viết

<b:if cond='data:blog.pageType != "item"'>...</b:if>

 28. Thêm chữ ký hay ghi chú dưới mỗi bài viết (Đặt dưới dòng <data:post.body/>)

<!-- Lời ghi dưới mỗi bài viết -->
<b:if cond='data:blog.pageType == "item"'>
Nội_dung

Nội_dung // Ghi chú nội dung của bạn, có thể dùng hình ảnh, màu chữ, canh lề,v.v..

29. Script chèn file .js vào blog

<script src='Link_File_JS' type='text/javascript'/>

 30. Script chèn trực tiếp nội dung file .js vào blog

<script type='text/javascript'> //<![CDATA[Nội_dung_file_js //]]> </script>

 31. Thêm nhanh khung hướng dẫn hay nội quy comment

- Tìm đến thẻ <data:blogTeamBlogMessage/>
- Đôi khi có tên là <data:blogCommentMessage/>
- Thêm vào sau nó đoạn code sau:<!--Khung nội quy comment--> Nội dung nội quy comment của bạn <p></p>

- Sau mỗi hàng phải thêm cặp thẻ <br></br> hoặc <br/> nếu muốn xuống dòng.
- Có thể dùng các code trang trí cho khung như: hình ảnh, màu chữ, v.v..

Ví dụ: Code chèn nội dung hướng dẫn comment giống ở blog mình.<!--Nội dung hướng dẫn comment--> <div style='border:#ccc 1px solid; padding:4px;border-radius:4px; background:#eee;'> Bạn có thể sử dụng một số thẻ HTML như: <br/> <textarea cols='48' rows='4'> » Chữ in đậm: <b>Nội_dung_chữ_in_đậm</b> » Chữ in nghiêng: <i>Nội_dung_chữ_in_nghiêng</i> » Chèn link liên kết: <a href='Link'>Tên_link</a> » Chèn hình ảnh: [img]Link_hình[/img] </textarea> </div> <p/><p/>

- Fphn.blogspot.com chúc bạn thành công  

Read More

Tạo tab chứa nhiều widget giống mp3.zing.vn cho blogger

Một tiện ích giúp tiết kiệm không gian trên Blog, làm cho Blog của bạn trông gọn gàng hơn, giúp tăng thời gian tải trang cho Blog của bạn do nó kết hợp hai hay nhiều widget làm một.

1.Đăng nhập Blogger >Thiết kế >Chỉnh sửa HTML
2.Lưu mẫu cũ của bạn đề phòng rủi ro
3.Tìm kiếm nhấn (F3) và tìm: ]]></b:skin>
Chèn code trên vào trên ]]></b:skin> :

.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px} .tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left} .tabs-widget li:first-child{margin:0} .tabs-widget li a{color:#808080;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#EEF1F6));padding:6px 18px;display:block;text-decoration:none;font:bold 14px Arial;text-transform:none;border: 1px solid #ccc;margin-right: -5px;} .tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));color:#000;text-decoration:none} .tabs-widget-content{} .tabviewsection{margin-top:10px;margin-bottom:10px;} 

4.Tiếp tục tìm kiếm :  <div class='column-right-inner'> hoặc  <div id='sidebar-wrapper'>

5.Sau đó chèn đoạn code sau đây vào bên dưới chúng:

<div class='tabviewsection'><script type='text/javascript'> jQuery(document).ready(function($){ $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show(); $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show(); 
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() { $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;); $(this).addClass(&quot;tabs-widget-current&quot;); $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); var activeTab = $(this).attr(&quot;href&quot;); $(activeTab).fadeIn(); return false; }); }); </script><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'> <li><a href='#widget-themater_tabs-1432447472-id1'>Phần mềm</a></li> <li><a href='#widget-themater_tabs-1432447472-id2'>Tài liệu</a></li> <li><a href='#widget-themater_tabs-1432447472-id3'>Tag Cloud</a></li> </ul><div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'> <b:section class='sidebar' id='sidebartab1' preferred='yes'> </b:section> </div> 
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'> <b:section class='sidebar' id='sidebartab2' preferred='yes'> </b:section> </div> 
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'> <b:section class='sidebar' id='sidebartab3' preferred='yes'> </b:section> </div></div><div style='height:5px;clear:both;'/>

Sửa lại theo ý bạn như tiêu đề Phần mềm,Tài liệu,Tag cloud thành tên các Tab theo ý bạn

6.Vào phần tử trang :Các bạn sẽ nhìn thấy rõ thành quả của mình nhé.

Và các bạn có thể thêm các widget vào theo ý muốn!

Chúc các bạn thành công!

Read More

Tạo Slider Posts bài viết trượt dọc cho blogspot/blogger

1. Đăng nhập vào tài khoản Blogger

2. Vào phần thiết kế (Design)
3. Chọn Phần tử trang --> Thêm tiện ích -->HLTM/Java
4. Dán toàn bộ code sau đây vào : 

<div class='widget-content'><style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float :right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script style='text/javascript' src="http://kenhdaihoc.com/blogger/recentpostticker.js" ></script><script style='text/javascript' src='http://kenhdaihoc.com/blogger/recentpostswiththumbnailsv3.js'></script><script style='text/javascript'>var numposts = 20;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 100;$(document).ready(function () {$('#sai').vTicker({speed: 500,pause: 3000,showItems: 7,animation: 'fade',mousePause: false,height: 0,direction: 'up'});});</script><div id="sai"><script src='http://Fphn.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script></div></div>

Chú ý : Đổi  http://Fphn.blogspot.com thành tên blog/web của bạn nhé và cuối cùng thì save lại.

numposts = 20; Số bài post bạn chỉnh lại cho phù hợp nhé.

Read More

Popular Posts Blogspot giống Fphn.blogspot.com đẹp và phong cách mầu đỏ

Thủ thuật Code tạo Popular Posts cho Blogspot. Nhằm thống kê những bài viết trong toàn bộ Web đưọc xem nhiều nhất.

- Popular posts giống Fphn.blogspot.com được hiển thị 10 bài, Và có phân rõ 3 bài Top được xem nhiều nhất

- Tìm trong Template từ khóa  <b:widget id='PopularPosts1'

- Thay thế đoạn Code có sẵn bằng đoạn code sau:

<b:widget id='PopularPosts1' locked='false' title='Hot in Week' type='PopularPosts'>

              <b:includable id='main'>

<div class='tieudeboxbenphai'><a href='http://fphn.blogspot.com/'>Xem nhiều</a></div>

   <div class='widget-content popular-posts'>

    <ul>

     <b:loop values='data:posts' var='post'>

      <li>

       <b:if cond='data:showThumbnails == &quot;false&quot;'>

        <b:if cond='data:showSnippets == &quot;false&quot;'>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

        <b:else/>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

        </b:if>

       <b:else/>

        <b:if cond='data:showSnippets == &quot;false&quot;'>

         <b:if cond='data:post.thumbnail'>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'> 

  <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:title='data:post.title'/></a>

         <b:else/>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>

  

  <img alt='no image' class='item-thumbnail' expr:alt='data:post.title' expr:title='data:post.title' src='http://bit.ly/hGWr7r'/></a>

         </b:if>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

         <div class='clear'/>

        <b:else/>

         <b:if cond='data:post.thumbnail'>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:title='data:post.title'/></a>

         <b:else/>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' class='item-thumbnail' expr:alt='data:post.title' expr:title='data:post.title' src='http://bit.ly/hGWr7r'/></a>

         </b:if>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

         <div class='clear'/>

        </b:if>

       </b:if>

      </li>

     </b:loop>

    </ul>

   </div>

<b:include name='quickedit'/>

  </b:includable>

            </b:widget>

- Chèn đoạn CSS sau trên  ]]></b:skin>

#PopularPosts1 .tieudeboxbenphai a{background:#c50202 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi22_YsSzYcA2jFFw56msZePXmYuDJ02Cal5iPSvsRn_CRqz6_tGDfs9BNH7CwJ26FDZRp_wV7cWdIjwzvmQR8Q30_xbx1EnmUWZgBYUpxIqJVV2KVbp0lC9XD9rc3Yjao2D1sybCK8L_P-/s23/likeok.PNG) left no-repeat;background-position:110px 5px}#PopularPosts1 ul{list-style-type:none;float:left;width:100%}#PopularPosts1 ul li{position:relative;padding:10px;float:left;height:25px;overflow:hidden;width:100%}#PopularPosts1 ul li:first-child{background:#fff;padding:10px 30px;height:65px}#PopularPosts1 ul li:first-child a{float:left;margin-left:0 !important;padding:0 !important;width:40%;color:#B1320D;height:100%;}#PopularPosts1 ul li:first-child:after{content:"1";color:#fff !important;border:1px solid #e74c3c;background:#e74c3c}#PopularPosts1 ul li:first-child + li{background:#}#PopularPosts1 ul li:first-child + li:after{content:"2";color:#fff !important;border:1px solid #2882bc;background:#2882bc}#PopularPosts1 ul li:first-child + li + li{background:#fff}#PopularPosts1 ul li:first-child + li + li:after{content:"3";color:#fff !important;border:1px solid #f39c12;background:#f39c12}#PopularPosts1 ul li:first-child + li + li + li{background:#}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";color:#333 !important;border:1px solid #ccc;background:#fff}#PopularPosts1 ul li:first-child + li + li + li + li{background:#fff}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";color:#333 !important;border:1px solid #ccc;background:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li{background:#}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6";color:#333 !important;border:1px solid #ccc;background:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li{background:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7";color:#333 !important;border:1px solid #ccc;background:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li{background:#}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8";color:#333 !important;border:1px solid #ccc;background:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li{background:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9";color:#333 !important;border:1px solid #ccc;background:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li{background:#}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10";color:#333 !important;border:1px solid #ccc;background:#fff}#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after{position:absolute;top:10px;left:0;border-radius:100px;width:20px;height:20px;padding:5px;line-height:1em;text-align:center;font:bold 16px arial;color:#333}#PopularPosts1 ul li:first-child + li img,#PopularPosts1 ul li:first-child + li + li img,#PopularPosts1 ul li:first-child + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li img{display:none}#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;margin-left:10px;background:transparent;padding:0;width:128px;height:72px}#PopularPosts1 ul li .item-thumbnail img{width:128px;height:72px}#PopularPosts1 ul li a{font:bold 12px arial;color:#2882bc;text-decoration:none;float:left;margin-left:30px;width:85%;height:32px;overflow:hidden}#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

- Fphn.blogspot.com chúc bạn thành công  

Read More