tag:blogger.com,1999:blog-29032012738777486812024-03-05T06:56:07.478-08:00hzingcung chia se! tong hop thu thuat: thu thuat blog, thu thuat may tinh vv...Cac van de cuoc song: tinh yeu, tinh ban,hon nhan gia dinh, anh dep, blog radio, musicHptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.comBlogger230125tag:blogger.com,1999:blog-2903201273877748681.post-50009098465802228232011-09-17T22:50:00.000-07:002011-07-19T05:33:58.037-07:00câu chuyện cảm động về tình bạn...<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVyzaQTeiT82CU0QHAVtRG4g75axbQI5tin_f6HukbyAkCQtY8hyphenhyphengsGT7e1IVnj0uXy7LDMHUhrERDNy6SCvwIzzD6Y1x7FIoBjh4Rj8L7W-eqBlmN4hdYPZM4WeezoCuup67Qrc486e6s/s1600/475cbc20_5.jpg" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-size: large;"><img border="0" height="200" n4="true" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVyzaQTeiT82CU0QHAVtRG4g75axbQI5tin_f6HukbyAkCQtY8hyphenhyphengsGT7e1IVnj0uXy7LDMHUhrERDNy6SCvwIzzD6Y1x7FIoBjh4Rj8L7W-eqBlmN4hdYPZM4WeezoCuup67Qrc486e6s/s200/475cbc20_5.jpg" width="146" /></span></a></div><div id="post_message_34128"><i><span style="font-size: large;">cuộc sông là thế đôi khi có những thứ thật nghiệt ngã........</span></i><br />
<i><span style="font-size: large;">mọi người đọc cho ý kiến nhé!!!!</span></i><br />
<span style="font-size: large;">............</span><br />
<span style="font-size: large;"><br />
</span><br />
<b><span style="font-size: large;">Có lẽ gần chín giờ tối.<br />
<br />
Người đàn bà vẫn rấm rứt khóc.<br />
<br />
Người đàn ông:<br />
<br />
- Anh không ngờ rằng nó lại đổ đốn ra như vậy! Hồi mới ở Viện Điều dưỡng về, nó có thế đâu!<br />
<br />
- Vâng... Chỉ từ khi đứa bé chết... anh ấy đâm ra rượu chè... Mà lúc không uống, thì cứ như dở người...<br />
<br />
- Em tính... vợ chồng mãi mới có một mụn con, thì lại như thế. Nó buồn, bệnh cũ tái phát là phải. Thôi được... Em cứ về đi, mai anh sẽ bảo nó!<br />
<br />
Người đàn bà hốt hoảng:<br />
<br />
- Đừng... Anh đừng! Không được đâu!<br />
<br />
- Sao không?<br />
<br />
- Anh ấy không còn coi anh như... như trước nữa!<br />
<br />
- Ra thế...! Em nói đi! Đừng giấu anh điều gì!<br />
<br />
Im lặng nặng nề. Giọng người đàn bà khó nhọc.<br />
<br />
- ... Đứa bé chết. Anh ấy chửi mắng em thậm tệ. Bảo là em hư đốn, thích chơi bời lăng nhăng, không muốn có nó, nên cố tình để nó chết. Và ... anh ấy còn nói do anh với em... với nhau nên đứa bé mới bị thế.<br />
<br />
Người đàn bà nói một hơi, như thể nếu dừng lại thì sẽ không đủ can đảm nói tiếp. Khi chợt nhìn thấy người đàn ông trắng bệch trong cơn giận dữ tột độ, cô bỗng im bặt. Anh bấu tay vào mép bàn, mười đầu ngón tay cũng trắng bệch, hàm nghiến chặt, cằm bạnh ra, cả người rùng rùng như sắp lên cơn động kinh.<br />
<br />
- Thằng đốn mạt! Thôi thì... nó nghĩ về anh thế nào cũng được, nhưng ai cho phép nó nghĩ về em như thế?<br />
<br />
Người đàn bà nghẹn ngào:<br />
<br />
- Em khổ lắm! Em thấy có tội với anh...<br />
<br />
Người đàn ông đau đớn nhìn vào mặt người đàn bà, thay lời hỏi. Cô vội vã nói tiếp.<br />
<br />
- ... Là vì anh ấy như thế!<br />
<br />
- Anh cấm em không được nghĩ như vậy! Nó hành hạ em chưa đủ hay sao? Giá mà anh có thể chịu thay cho em được! Thôi... khuya rồi, em về đi. Để từ giờ đến sáng mai, anh nghĩ xem còn cách gì không.<br />
<br />
Người đàn bà ngập ngừng.<br />
<br />
- Em... em không về được!<br />
<br />
Và cô lại òa khóc.<br />
<br />
- Nó đánh em à?<br />
<br />
- Không... chẳng thà anh ấy đánh...<br />
<br />
Người đàn ông thở dài, đứng dậy, đến bên người đàn bà, đặt bàn tay nặng nề lên đầu cô.<br />
<br />
- Thật khốn nạn thân em! Thôi, đừng khóc nữa! Từ nay, hễ nó đuổi, thì em cứ đến đây! Còn mặc xác nó, nó muốn nghĩ gì thì nghĩ!<br />
<br />
Anh giúi vào tay người đàn bà một nắm tiền.<br />
<br />
Người đàn bà ngập ngừng.<br />
<br />
- Còn anh... Anh không sợ...?<br />
<br />
- Sợ gì? Anh chỉ sợ em nghĩ quẩn!<br />
<br />
- Em không thể làm cái chuyện kia được, nên liều tìm đến anh. Nhưng... anh cũng nghèo lấy đâu ra?<br />
<br />
Và cô lại sụt sùi. Người đàn ông gắt:<br />
<br />
- Anh sẽ có cách! Nhưng dứt khoát, em không được làm liều. Em phải đến đây! Nhớ chưa? Còn bây giờ thì em về đi.<br />
<br />
Người đàn bà vừa khóc, vừa lê bước về nhà. Cô gọi cửa.<br />
<br />
Người đàn ông lè nhè sau cánh cửa vọng ra:<br />
<br />
- Tiền đâu?<br />
<br />
- Anh mở cửa cho em! Em xin anh!<br />
<br />
- Tiền đâu đã! Đưa đây! Đút qua khe cửa ấy!<br />
<br />
Cô vừa đút tiền qua khe cửa, vừa khóc.<br />
<br />
Then cửa lạch xạch. Chồng cô vẫn một tay cầm chai rượu, một tay vơ nắm tiền. Chai rượu vẫn còn đầy, nhưng mặt mũi anh ta đã đỏ gay, nước mắt nước mũi dàn dụa. Anh ta đưa tay áo bạc quệt ngang mặt, hỏi vợ, giọng méo xệch.<br />
<br />
- Tiền của nó phải không?<br />
<br />
Người đàn bà nín lặng.<br />
<br />
Người đàn ông nhìn mắt vợ sưng húp, làm như không biết.<br />
<br />
- Tôi biết ngay mà! Cô chỉ có đến đấy thôi! Nhưng nó không thèm ngủ với cô à, mà về sớm thế???<br />
<br />
Người đàn bà chắp tay, mếu máo:<br />
<br />
- Em xin anh! Anh đừng nghĩ thế cho em, phải tội! Còn anh ấy cũng không phải là người như thế! Anh ấy là bạn anh...<br />
<br />
- Hừm! Bạn bè gì? Tin bợm mất bò...<br />
<br />
Nhưng giọng anh đã dịu xuống. Anh bỏ mặc vợ, lại bàn, ngồi xuống ghế và lại lặng lẽ tu rượu. Người đàn bà không thể chịu được dáng ngồi của chồng, gương mặt hốc hác, khắc khổ, tóc hai bên thái dương đã bạc trắng, cái đầu hơi cúi xuống.<br />
<br />
Chị nhẹ nhàng đến bên chồng:<br />
<br />
- Anh đừng uống rượu nữa! Anh thương em... Anh đang bệnh tật thế kia...<br />
<br />
- Thì mới uống cho chết mẹ nó đi!... Mà ai cho phép cô dạy khôn tôi? Cút!<br />
<br />
Và anh lại tu rượu.<br />
<br />
Khuya...<br />
<br />
Người đàn bà mắc màn. Một tiếng dằn chai "cạch":<br />
<br />
- Từ nay tôi ngủ dưới đất! Tôi không thể ngủ chung với cô được.<br />
<br />
Người đàn bà đứng thần mặt ra. Cô thở dài, trải chiếu, mắc thêm một cái màn dưới nền nhà, rồi chui vào.<br />
<br />
- Thôi, để em ngủ dưới này!<br />
<br />
Người đàn ông gầm lên:<br />
<br />
- Đã bảo là tao ngủ dưới đất! Tao cũng sắp về với đất rồi! Lên trên kia, không nói nhiều!<br />
<br />
Người đàn bà lại lặng lẽ chui lên giường. Giát giường run lên theo tiếng nức nở âm thầm của cô. Người đàn ông vẫn ngồi uống. Cái đầu cúi thấp hơn nữa.<br />
<br />
Một buổi sáng, anh bảo cô:<br />
<br />
- Cô gọi thằng bạn của tôi đến đây! Tôi có chuyện muốn nói với nó! Bảo là tôi sắp chết rồi, thế nào nó cũng phải đến! Nhanh lên!<br />
<br />
Cô tất tưởi chạy đi.<br />
<br />
Nhìn vẻ mặt cô, người đàn ông hỏi:<br />
<br />
- Sao? Nó nguy lắm rồi phải không?<br />
<br />
Người đàn bà bật khóc:<br />
<br />
- Vâng... Anh ấy bảo em đến gọi anh! Em xin anh... anh đừng giận anh ấy...!<br />
<br />
Người đàn ông quát:<br />
<br />
- Cô có im đi không? Xin xỏ gì! Đi!<br />
<br />
Anh đẩy vội cô ra, khóa cửa, vớ lấy chiếc xe, đạp hối hả. Anh ào vào nhà, ôm lấy bạn bật khóc hu hu:<br />
<br />
- Mày đừng bỏ tao...<br />
<br />
Người bệnh mặt nhợt nhạt, cười hiền lành:<br />
<br />
- Mày cũng biết khóc cơ à? Tao còn có chuyện muốn nói với mày đây! Mà chưa nói được, thì tao chưa chết! Nói vậy thôi, cũng sắp rồi đấy...<br />
<br />
Vừa lúc, người vợ bước vào. Người bệnh xua tay:<br />
<br />
- Cô ra ngoài! Đã bảo ra! Đàn bà con gái, biết gì mà nghe...<br />
<br />
Chờ vợ ra khỏi, anh bảo:<br />
<br />
- Mày mang cái ba-lô trên nóc tủ xuống đây!... ở đáy... có tờ giấy..., đúng nó đấy..., mày đọc đi...<br />
<br />
Người bạn cắm cúi đọc. Một lượt. Hai lượt. Đấy là tờ giấy anh cam kết với bệnh viện, đồng ý hủy đứa bé, vì nó là một quái thai.<br />
<br />
Người bạn khóc:<br />
<br />
- Sao mày không cho nó biết?<br />
<br />
- Không! ích gì! Nó đẻ khó, phải mổ... lúc ấy đang mê. Chỉ có tao, với bác sĩ bệnh viện trưởng, với ca trực hộ sinh. Tao yêu cầu họ đừng cho nó biết, chỉ bảo là thai bị chết lưu... Nó tỉnh, chỉ khóc...<br />
<br />
- Đã vậy, sao mày còn hắt hủi nó? Thằng khốn kiếp! Mày còn nghĩ ra được trò gì dã man hơn thế nữa không?<br />
<br />
Cái giọng trách móc, chứ không giận.<br />
<br />
Người bệnh cười yếu ớt.<br />
<br />
- Có thế, thì nó mới dám đến với mày! Và... để mày đừng vội đi lấy vợ... Còn tao, sau khi nhìn thấy đứa trẻ, thì tao hiểu kể như đời tao đã xong. Nhưng còn nó... con vợ tao ấy... là một người đàn bà tử tế! Tao không muốn nó sẽ gặp phải một thằng đểu. Mà mày... là một thằng bạn tốt!<br />
<br />
Bàn tay khỏe mạnh ấm áp nắm chặt bàn tay xương xẩu, giá lạnh...<br />
<br />
- Tao không ngờ mày lại đến nông nỗi này... Mày đừng giận tao, đã bỏ mặc mày...<br />
<br />
- Đừng nói chuyện ấy nữa... Sau khi mày ra bắc, tao bị một trận bom dập. Chúng nó tóm được tao, với mấy đứa nữa. Chúng tao bị giam trong một cái kho chứa chất độc. Mày tính, sáu tháng trời, gì mà chẳng ngấm...<br />
<br />
Im lặng. Như thể trời sắp bão.<br />
<br />
- ... Tao đã định làm một liều thuốc... nhưng nghĩ vậy thì hèn quá! Mà sống đến giờ, cũng là dai lắm rồi...<br />
<br />
- Mày đừng nói nữa...<br />
<br />
- Mày sợ à?... ờ mà thôi, nói cái chuyện chó đẻ ấy làm gì... Đứng lên đem cái hòm lại đây cho tao! Đấy, cái hòm ấy!...<br />
<br />
Hòm bị khóa, nắp hòm có trổ một khe nhỏ.<br />
<br />
- Mày phá khóa ra! Tao vứt mẹ nó chìa đi rồi...<br />
<br />
Bạn anh phá khóa. Trong hòm là tiền.<br />
<br />
- Tiền của ai đây?<br />
<br />
- Của mày! Mấy năm nay, mày đưa cho nó, mày không nhớ à?<br />
<br />
- Trời ơi! Thằng này điên thật rồi! Mày bày ra cái trò này làm gì?<br />
<br />
- Để gả nó cho mày, sau khi tao ngoẻo! Hai đứa còn có cái mà tiêu...<br />
<br />
Im lặng.<br />
<br />
Người bạn khóc không thành tiếng. Còn anh nhắm mắt vì quá mệt. Bàn tay gầy guộc của anh quờ tìm tay bạn. Một lúc lâu, anh mới nói, giọng đứt quãng:<br />
<br />
- Hồi ở chiến trường, tao có thể chết cho mày sống... Và mày cũng vậy! Song thời ấy còn bom đạn, nếu tao có chết, thì chắc gì mày đã được sống! Còn bây giờ, tao chắc là chết rồi, mày chắc là sống rồi. Nhưng còn nó, con vợ tao ấy, nó cũng đáng được sống cho tử tế. Bây giờ thì mày hiểu ý tao chưa?<br />
<br />
Người bạn lặng lẽ gật đầu, nước mắt vẫn ròng ròng trên khuôn mặt đã méo xệch đi vì đau đớn và bất lực.<br />
<br />
Rồi anh mệt mỏi thiếp đi. Gương mặt anh bình tĩnh và thanh thản lạ lùng. Đó là gương mặt mà thần chết chờ đợi ở những con bệnh hiểm nghèo </span></b></div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-89409970117462307732011-07-30T10:06:00.000-07:002011-07-30T10:06:11.933-07:00Thanh trạng thái "breadcrumb" cho Blogspot<div class="wlWriterEditableSmartContent" id="scid:51CF81A4-8F44-4a2c-8837-198C090B9994:ff3c6c36-3db7-41db-843f-9e1a17b185aa" style="color: #333333; display: block; float: none; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; margin-left: auto; margin-right: auto; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 414px;"><a atomicselection="true" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2EppdNgTDvG6BMHk45LxCsDwQiz6r-gZrreWFy4QJnSlhUPVZpKmFxegNBSupyyF-KbRUAk4Igy4d-qkNLa5jUdX4WmjsLliij_VxE4SvKBjAjK-dX61Wk4fuNP5BGLsSX9CTNpP_-g/s400/breadcrumb.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2EppdNgTDvG6BMHk45LxCsDwQiz6r-gZrreWFy4QJnSlhUPVZpKmFxegNBSupyyF-KbRUAk4Igy4d-qkNLa5jUdX4WmjsLliij_VxE4SvKBjAjK-dX61Wk4fuNP5BGLsSX9CTNpP_-g/s400/breadcrumb.jpg" style="border-bottom-color: initial; border-bottom-style: initial; border-bottom-width: 2px; border-color: initial; border-left-color: initial; border-left-style: initial; border-left-width: 2px; border-right-color: initial; border-right-style: initial; border-right-width: 2px; border-top-color: initial; border-top-style: initial; border-top-width: 2px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" width="394" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Breadcrumb là tiện ích được sử dụng khá phổ biến, đặc biệt là các trang Web/Blog vận hành trên nền tảng Wordpress. Cùng với tiện ích “ <a href="http://www.itechplus.info/2011/01/numbered-page-navigation-phan-trang-cho.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Page Navigation – phân trang cho Blogspot</a> “, cả hai góp phần điều hướng tốt hơn cho Web/Blog của bạn.</div><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:b4817606-3e22-44c8-8700-f9c5fcd94172" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Hơn nữa, với breadrumb, độc giả có thể biết được chủ đề mình đang theo dõi thuộc trương mục ( Breadcrumbs based on a post's category ) nào, thời gian nào ( Breadcrumbs based on a post's date ), có thể giúp gia tăng lượng click của độc giả và kéo họ ở lại Blog của bạn lâu hơn.</span><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Chính từ những ưu điểm đó, hôm nay iTechPlus sẽ giới thiệu cho các bạn 2 style của tiện ích này : một cái dựa trên trương mục ( có dạng : Browse » Home » Category » Post Title ) và một cái dựa trên thời gian ( có dạng : You are here: Home > Year > Month > Post Title )</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">A. Style 1 : Breadcrumbs based on a post's category</span></strong> ( <a href="http://www.bloggerplugins.org/2009/06/breadcrumb-for-blogger-blogspot.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">BloggerPlugins</a> )</div><div class="wlWriterEditableSmartContent" id="scid:51CF81A4-8F44-4a2c-8837-198C090B9994:a6df545a-8a8c-4da6-98da-24e9392f7a81" style="color: #333333; display: block; float: none; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; margin-left: auto; margin-right: auto; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 448px;"><a atomicselection="true" href="http://lh5.ggpht.com/_PAuO_he0N0k/TS7AOFgiu5I/AAAAAAAABGQ/tKus4Khif8I/s800/breadcrumb1.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img height="157" src="http://lh5.ggpht.com/_PAuO_he0N0k/TS7AOFgiu5I/AAAAAAAABGQ/tKus4Khif8I/s600/breadcrumb1.jpg" style="border-bottom-color: initial; border-bottom-style: initial; border-bottom-width: 2px; border-color: initial; border-left-color: initial; border-left-style: initial; border-left-width: 2px; border-right-color: initial; border-right-style: initial; border-right-width: 2px; border-top-color: initial; border-top-style: initial; border-top-width: 2px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" width="428" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">1. Tìm đoạn code bên dưới :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:include data='top' name='status-message'/></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">và thay thế thành :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:include data='top' name='status-message'/><br />
<b:include data='posts' name='breadcrumb'/></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">2. Tiếp theo, tìm đoạn code này :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:includable id='main' var='top'></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">và thay thế thành :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:includable id='breadcrumb' var='posts'><br />
<b:if cond='data:blog.homepageUrl == data:blog.url'><br />
<!-- No breadcrumb on home page --><br />
<b:else/><br />
<b:if cond='data:blog.pageType == "item"'><br />
<!-- breadcrumb for the post page --><br />
<p class='breadcrumbs'><br />
<span class='post-labels'><br />
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a><br />
<b:loop values='data:posts' var='post'><br />
<b:if cond='data:post.labels'><br />
<b:loop values='data:post.labels' var='label'><br />
<b:if cond='data:label.isLast == "true"'> »<br />
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><br />
</b:if><br />
</b:loop><br />
<b:else/><br />
»Unlabelled<br />
</b:if><br />
» <span><data:post.title/></span><br />
</b:loop><br />
</span><br />
</p><br />
<b:else/><br />
<b:if cond='data:blog.pageType == "archive"'><br />
<!-- breadcrumb for the label archive page and search pages.. --><br />
<p class='breadcrumbs'><br />
<span class='post-labels'><br />
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/><br />
</span><br />
</p><br />
<b:else/><br />
<b:if cond='data:blog.pageType == "index"'><br />
<p class='breadcrumbs'><br />
<span class='post-labels'><br />
<b:if cond='data:blog.pageName == ""'><br />
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts<br />
<b:else/><br />
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/><br />
</b:if><br />
</span><br />
</p><br />
</b:if><br />
</b:if><br />
</b:if><br />
</b:if><br />
</b:includable><br />
<b:includable id='main' var='top'></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">3. Cuối cùng, thêm đoạn code CSS bên dưới vào trước thẻ đóng </b:skin></div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">.breadcrumbs {<br />
padding:5px 5px 5px 0px;<br />
margin: 0px 0px 15px 0px;<br />
font-size:95%;<br />
line-height: 1.4em;<br />
border-bottom:3px double #e6e4e3;<br />
}</div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">4. Save template</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">B. Style 2 : Breadcrumbs based on a post's date</span></strong> ( <a href="http://purplemoggy.blogspot.com/2006/11/year-month-breadcrumbs.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">PurpleMoggy</a> )</div><div class="wlWriterEditableSmartContent" id="scid:51CF81A4-8F44-4a2c-8837-198C090B9994:b553cefb-8d03-4bc9-989a-56312b1d9ee4" style="color: #333333; display: block; float: none; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; margin-left: auto; margin-right: auto; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 374px;"><a atomicselection="true" href="http://lh6.ggpht.com/_PAuO_he0N0k/TS7ANq51hKI/AAAAAAAABGM/mG4Fy2VudG4/s800/breadcrumb2.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img height="180" src="http://lh6.ggpht.com/_PAuO_he0N0k/TS7ANq51hKI/AAAAAAAABGM/mG4Fy2VudG4/s600/breadcrumb2.jpg" style="border-bottom-color: initial; border-bottom-style: initial; border-bottom-width: 2px; border-color: initial; border-left-color: initial; border-left-style: initial; border-left-width: 2px; border-right-color: initial; border-right-style: initial; border-right-width: 2px; border-top-color: initial; border-top-style: initial; border-top-width: 2px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" width="354" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">1. Tìm đoạn code tương tự như bên dưới :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:includable id='main' var='top'></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><!-- posts --></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><div class='blog-posts'></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:include data='top' name='status-message'/></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><data:adStart/></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:loop values='data:posts' var='post'></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Ngay sau nó các bạn chèn đoạn code này :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:include data='post' name='breadcrumbs'/></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">2. Cuộn xuống dưới cùng của widget này ( xem hình minh họa bên dưới )</div><div class="wlWriterEditableSmartContent" id="scid:51CF81A4-8F44-4a2c-8837-198C090B9994:610663dd-33ce-44da-bc3a-a9b56025f22c" style="color: #333333; display: block; float: none; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; margin-left: auto; margin-right: auto; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 594px;"><a atomicselection="true" href="http://lh6.ggpht.com/_PAuO_he0N0k/TS7CFQMCkPI/AAAAAAAABGc/uW4GRYhrXdU/s800/bc2.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img height="343" src="http://lh6.ggpht.com/_PAuO_he0N0k/TS7CFQMCkPI/AAAAAAAABGc/uW4GRYhrXdU/s600/bc2.jpg" style="border-bottom-color: initial; border-bottom-style: initial; border-bottom-width: 2px; border-color: initial; border-left-color: initial; border-left-style: initial; border-left-width: 2px; border-right-color: initial; border-right-style: initial; border-right-width: 2px; border-top-color: initial; border-top-style: initial; border-top-width: 2px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" width="574" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">và dán code sau vào giữa </b:includable> và </b:widget> :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:includable id='breadcrumbs' var='post'></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:if cond='data:blog.pageType == "item"'></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><p class='breadcrumbs'></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class='post-labels'></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">You are here:</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script type="text/javascript"></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">//<![CDATA[</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var strCrumbHref = location.href.toLowerCase();</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var intCrumbHtml = strCrumbHref.indexOf('.html');</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var intCrumbWhereAt = strCrumbHref.lastIndexOf('/', intCrumbHtml);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var intCrumbYearStart = intCrumbWhereAt - 7;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var intCrumbMonthStart = intCrumbWhereAt - 2;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var intCrumbYear = parseInt(strCrumbHref.substr(intCrumbYearStart, 4));</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var intCrumbYearPlusOne = intCrumbYear + 1;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var strCrumbMonthNum = strCrumbHref.substr(intCrumbMonthStart, 2);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var strCrumbMonth = '';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">switch(strCrumbMonthNum) {</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '01':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'January';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '02':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'February';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '03':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'March';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '04':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'April';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '05':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'May';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '06':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'June';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '07':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'July';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '08':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'August';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '09':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'September';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '10':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'October';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '11':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'November';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">case '12':</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbMonth = 'December';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">break;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var strCrumbOutput = ' > ';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbOutput += '<a href="/search?updated-min=' + intCrumbYear;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&updated-max=' + intCrumbYearPlusOne;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&max-results=50">' + intCrumbYear + '</a> > ';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strCrumbOutput += '<a href="/' + intCrumbYear + '_' + strCrumbMonthNum + '_01_archive.html">' + strCrumbMonth + '</a>';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">document.write(strCrumbOutput);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">//]]></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><noscript></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:if cond='data:post.labels'></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:loop values='data:post.labels' var='label'></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:if cond='data:label.isLast == "true"'></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a expr:href='data:label.url' rel='tag'> <data:label.name/></a></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></b:if></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></b:loop></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></b:if></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></noscript></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:if cond='data:post.title'></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">> <b><data:post.title/></b></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></b:if></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></p></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></b:if></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><!-- End of Breadcrumbs Hack --></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></b:includable></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">3. Cuối cùng, chèn đoạn code sau vào trước thẻ đóng </b:skin></div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">.breadcrumbs {</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">border-bottom:1px dotted $bordercolor;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">margin:0 0 0.5em;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">padding:0 0 0.5em;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">}</div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">4. Save template</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Chúc các bạn thành công !</div><div><br />
</div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-35411457762690779812011-07-30T10:05:00.001-07:002011-07-30T10:05:28.561-07:00Tạo Email Subscribe Form dạng Popup cho Blogger<div class="separator" style="clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; text-align: center;"><a href="http://4.bp.blogspot.com/-6voFZDZr7f4/TY7bv-XS-4I/AAAAAAAAFTQ/B2_-va4sdBQ/s1600/form-subscribe-capture-mail%25281%2529.jpg" imageanchor="1" style="color: #336699; margin-left: 1em; margin-right: 1em; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img border="0" src="http://4.bp.blogspot.com/-6voFZDZr7f4/TY7bv-XS-4I/AAAAAAAAFTQ/B2_-va4sdBQ/s1600/form-subscribe-capture-mail%25281%2529.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" /></a></div><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Email Subscribe Form có lẽ là tiện ích không thể thiếu trên mỗi Blog, vì đây là một trong những công cụ rất quan trọng giúp tăng traffic cho “ngôi nhà” của bạn.</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></span><br />
<div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:884d4d61-ab18-476e-99ca-45b4e9fbb17c" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><a href="http://www.blogger.com/post-create.g?blogID=2903201273877748681" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></span></div><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Khi đọc giả đăng ký nhận tin thông qua Email Subscribe form, họ chỉ cần truy nhập vào hòm thư của mình và kích hoạt dịch vụ là có thể cập nhật những bài viết mới trên Blog của bạn một cách nhanh nhất thông qua Email.</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Tuy nhiên, hầu hết Subscribe Form trên các Blog hiện nay đều chiếm một vị trí nhất định, có thể là ở Sidebar, bên dưới bài đăng, footer,…vv…Vì vậy, để đỡ chiếm diện tích, cũng như tạo nên sự độc đáo khác biệt, hôm nay iTechPlus xin giới thiệu đến bạn đọc một thủ thuật mới, đó là Pop-up Subscribe Form for Blogger.</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><br />
<div class="separator" style="clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; text-align: center;"><a href="http://2.bp.blogspot.com/-6hKZKQxS4nU/TY7ZEJ6cRAI/AAAAAAAAFTI/cQ3TbxDNKYk/s1600/Popup-email-subscribe-form.jpg" imageanchor="1" style="color: #336699; margin-left: 1em; margin-right: 1em; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img border="0" src="http://2.bp.blogspot.com/-6hKZKQxS4nU/TY7ZEJ6cRAI/AAAAAAAAFTI/cQ3TbxDNKYk/s1600/Popup-email-subscribe-form.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" /></a></div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><em>Hình minh họa</em></div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><a href="http://demoitechplus.blogspot.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank"><strong>DEMO</strong></a></div><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Pop-up này sẽ chỉ hiển thị ở lần đầu tiên đọc giả ghé thăm Blog bạn, và chỉ xuất hiện lại trong một khoảng thời gian do bạn chỉ định.</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Nào, chúng ta bắt tay cùng làm nhé !</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">Bước 1</span></strong></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">: Vào Thiết kế > Chỉnh sửa HTML</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">Bước 2</span></strong></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">: Chèn đoạn code bên dưới vào trước thẻ đóng </b:skin></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;">#popupContactClose{<br />
cursor: pointer;<br />
text-decoration:none;<br />
}<br />
#backgroundPopup{<br />
display:none;<br />
position:fixed;<br />
_position:absolute; /* hack for internet explorer 6*/<br />
height:100%;<br />
width:100%;<br />
top:0;<br />
left:0;<br />
background:#000000;<br />
border:1px solid #cecece;<br />
z-index:1;<br />
}<br />
#popupContact{<br />
display:none;<br />
position:fixed;<br />
_position:absolute; /* hack for internet explorer 6*/<br />
height:328px;<br />
width:438px;<br />
background:#FFFFFF;<br />
border:2px solid #cecece;<br />
z-index:2;<br />
padding:12px;<br />
font-size:13px;<br />
}<br />
#popupContact h1{<br />
text-align:left;<br />
color:#6FA5FD;<br />
font-size:22px;<br />
font-weight:700;<br />
border-bottom:1px dotted #D3D3D3;<br />
padding-bottom:2px;<br />
margin-bottom:20px;<br />
}<br />
#popupContactClose{<br />
font-size:14px;<br />
line-height:14px;<br />
right:6px;<br />
top:4px;<br />
position:absolute;<br />
color:#6fa5fd;<br />
font-weight:700;<br />
display:block;<br />
}</blockquote><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">Bước 3</span></strong></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">: Tiếp tục, chèn đoạn code bên dưới vào trước thẻ đóng </body></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div id='popupContact'><br />
<a id='popupContactClose'>x</a><br />
<h1>Đăng ký nhận thủ thuật mới từ iTechPlus.info</h1><br />
<p>Bằng cách đăng ký nhận thủ thuật mới từ iTechPlus.info qua Email, bạn sẽ luôn được cập nhật những thủ thuật mới nhất mà không bỏ sót bất cứ bài nào từ iTechPlus.info<br/></p><p><b><i>Lưu ý : Vui lòng đăng nhập hòm thư của bạn để kích hoạt dịch vụ trước khi sử dụng.</i></b></p> <br />
<p id='contactArea'><br />
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=<strong><span style="color: blue;">itechplus</span></strong>&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Nhập địa chỉ Email của bạn:</p><p><input name='email' style='width:230px' type='text'/></p><input name='uri' type='hidden' value='<strong><span style="color: blue;">itechplus</span></strong>'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Đăng ký'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form><br />
</p><br />
</div><br />
<div id='backgroundPopup'/></blockquote><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Bạn cần thay phần được in đậm màu xanh ở đoạn code trên cho phù hợp</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">Bước 4</span></strong></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">: Cuối cùng, chèn đoạn code bên dưới vào trước thẻ đóng </head></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/> <br />
<script src='http://dl.dropbox.com/u/18732740/jquery.cookie.js<a href="http://dinhquanghuy.110mb.com/jquery.cookie.js'" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">'</a> type='text/javascript'/><br />
<script type='text/javascript'><br />
var popupStatus = 0;<br />
//this code will load popup with jQuery magic!<br />
function loadPopup(){<br />
//loads popup only if it is disabled<br />
if(popupStatus==0){<br />
$(&quot;#backgroundPopup&quot;).css({<br />
&quot;opacity&quot;: &quot;0.7&quot;<br />
});<br />
$(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);<br />
$(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);<br />
popupStatus = 1;<br />
}<br />
}<br />
//This code will disable popup when click on x!<br />
function disablePopup(){<br />
//disables popup only if it is enabled<br />
if(popupStatus==1){<br />
$(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);<br />
$(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);<br />
popupStatus = 0;<br />
}<br />
}<br />
//this code will center popup<br />
function centerPopup(){<br />
//request data for centering<br />
var windowWidth = document.documentElement.clientWidth;<br />
var windowHeight = document.documentElement.clientHeight;<br />
var popupHeight = $(&quot;#popupContact&quot;).height();<br />
var popupWidth = $(&quot;#popupContact&quot;).width();<br />
//centering<br />
$(&quot;#popupContact&quot;).css({<br />
&quot;position&quot;: &quot;absolute&quot;,<br />
&quot;top&quot;: windowHeight/2-popupHeight/2,<br />
&quot;left&quot;: windowWidth/2-popupWidth/2<br />
});<br />
//only need force for IE6 <br />
$(&quot;#backgroundPopup&quot;).css({<br />
&quot;height&quot;: windowHeight<br />
});<br />
}<br />
//CONTROLLING EVENTS IN jQuery<br />
$(document).ready(function(){<br />
if ($.cookie(&quot;anewsletter&quot;) != 1) { <br />
//centering with css<br />
centerPopup();<br />
//load popup<br />
loadPopup(); <br />
} <br />
//CLOSING POPUP<br />
//Click the x event!<br />
$(&quot;#popupContactClose&quot;).click(function(){<br />
disablePopup();<br />
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: <strong><span style="color: red;">3</span></strong> });<br />
});<br />
//Click out event!<br />
$(&quot;#backgroundPopup&quot;).click(function(){<br />
disablePopup();<br />
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: <strong><span style="color: red;">3</span></strong> });<br />
});<br />
//Press Escape event!<br />
$(document).keypress(function(e){<br />
if(e.keyCode==27 &amp;&amp; popupStatus==1){<br />
disablePopup();<br />
$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: <strong><span style="color: red;">3</span></strong> });<br />
}<br />
});<br />
});<br />
</script></blockquote><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Với số</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: red;">3</span></strong></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">tương ứng với số ngày mà Popup sẽ lại hiển thị.</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">Bước 5</span></strong></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">: Save template and done</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><em>* Lưu ý : bạn nên download file jquery.cookie.js về upload lên host riêng hoặc chèn thẳng nội dung của nó vào template để tránh các sự cố về sau.</em></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: red;">* Update : </span></strong></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">nếu muốn Popup xuất hiện sau một khoảng thời gian nào đó sau khi Blog được load, bạn thay code ở bước 4 với code bên dưới</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script> <br />
<script src="http://dl.dropbox.com/u/18732740/jquery.cookie.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
var popupStatus = 0;<br />
//loading popup with jQuery magic!<br />
function loadPopup(){<br />
centerPopup();<br />
//loads popup only if it is disabled<br />
if(popupStatus==0){<br />
$("#backgroundPopup").css({<br />
"opacity": "0.7"<br />
});<br />
$("#backgroundPopup").fadeIn("slow");<br />
$("#popupContact").fadeIn("slow");<br />
popupStatus = 1;<br />
}<br />
}<br />
//disabling popup with jQuery magic!<br />
function disablePopup(){<br />
//disables popup only if it is enabled<br />
if(popupStatus==1){<br />
$("#backgroundPopup").fadeOut("slow");<br />
$("#popupContact").fadeOut("slow");<br />
popupStatus = 0;<br />
}<br />
}<br />
//centering popup<br />
function centerPopup(){<br />
//request data for centering<br />
var windowWidth = document.documentElement.clientWidth;<br />
var windowHeight = document.documentElement.clientHeight;<br />
var windowscrolltop = document.documentElement.scrollTop;<br />
var windowscrollleft = document.documentElement.scrollLeft;<br />
var popupHeight = $("#popupContact").height();<br />
var popupWidth = $("#popupContact").width();<br />
var toppos = windowHeight/2-popupHeight/2+windowscrolltop;<br />
var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;<br />
//centering<br />
$("#popupContact").css({<br />
"position": "absolute",<br />
"top": toppos,<br />
"left": leftpos<br />
});<br />
//only need force for IE6<br />
$("#backgroundPopup").css({<br />
"height": windowHeight<br />
});<br />
}<br />
//CONTROLLING EVENTS IN jQuery<br />
$(document).ready(function(){<br />
if ($.cookie("anewsletter") != 1) { <br />
//load popup<br />
setTimeout("loadPopup()",<strong><span style="color: blue;">5000</span></strong>); <br />
} <br />
//CLOSING POPUP<br />
//Click the x event!<br />
$("#popupContactClose").click(function(){<br />
disablePopup();<br />
$.cookie("anewsletter", "1", { expires: 3 });<br />
});<br />
//Click out event!<br />
$("#backgroundPopup").click(function(){<br />
disablePopup();<br />
$.cookie("anewsletter", "1", { expires: 3 });<br />
});<br />
//Press Escape event!<br />
$(document).keypress(function(e){<br />
if(e.keyCode==27 && popupStatus==1){<br />
disablePopup();<br />
$.cookie("anewsletter", "1", { expires: 3 });<br />
}<br />
});<br />
});<br />
</script></blockquote><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">với</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">5000</span></strong></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">là thời gian Popup sẽ xuất hiện sau khi Blog được load, tương ứng với 5 giây.</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Chúc các bạn thành công</span>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-63718057648053493942011-07-30T10:03:00.000-07:002011-07-30T10:03:02.813-07:00Tiện ích Auto Readmore Hack with Thumbnail for Blogger<div class="wlWriterEditableSmartContent" id="scid:51CF81A4-8F44-4a2c-8837-198C090B9994:be631c6f-081c-49fa-863b-d233aaa24ddf" style="color: #333333; display: block; float: none; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; margin-left: auto; margin-right: auto; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 245px;"><a atomicselection="true" href="http://lh5.ggpht.com/_PAuO_he0N0k/TW-1svCzYNI/AAAAAAAADz0/fdv8GoS8YMQ/s400/readmore.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img height="206" src="http://lh5.ggpht.com/_PAuO_he0N0k/TW-1svCzYNI/AAAAAAAADz0/fdv8GoS8YMQ/s288/readmore.jpg" style="border-bottom-color: initial; border-bottom-style: initial; border-bottom-width: 2px; border-color: initial; border-left-color: initial; border-left-style: initial; border-left-width: 2px; border-right-color: initial; border-right-style: initial; border-right-width: 2px; border-top-color: initial; border-top-style: initial; border-top-width: 2px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" width="225" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">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.</div><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:48be6209-ccdc-4898-9c72-2d891435b6d6" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div></span><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">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.</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><img alt="iTechPlus Auto Readmore" height="377" src="https://lh6.googleusercontent.com/_PAuO_he0N0k/TW-1vFF65YI/AAAAAAAADz4/iUaJ2taACyY/s640/autoreadmore.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="iTechPlus Auto Readmore" width="539" /></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">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.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><span style="color: blue;"><strong>1. Auto Readmore v.4.1 by Anhvo</strong> </span><span style="color: black;">( Vietwebguide.com )</span></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Đâ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.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: teal;">Một số đặc điểm của tiện ích :</span></strong></div><ul style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>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.</li>
<li>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.</li>
<li>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.</li>
<li>Hỗ trợ chế độ Readmore giống Wordpress, đây là tính năng khá thú vị mặc dù nó chỉ là Manual Readmore.</li>
<li>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.</li>
<li>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).</li>
<li>Có thể tùy chỉnh kích thước ảnh thumbnail theo ý muốn</li>
<li>Có thể chọn lựa giữa phương pháp lấy Summary cổ điển và Summary cải tiến.</li>
</ul><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: teal;">Cài đặt :</span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong>Bước 1</strong> : Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong>Bước 2</strong> : Tìm trong template ( Ctrl + F ) dòng <data:post.body/> và thay thế nó bằng đoạn code bên dưới</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br />
<b:else/><br />
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><br />
<b:else/><br />
<div expr:id='&quot;summary&quot; + data:post.id' style='display:none;'><data:post.body/></div><br />
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><br />
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>-->đọc tiếp...</a></div><br />
</b:if></b:if></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><em>* Đ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</em></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong>Bước 3</strong> : Chèn đoạn code bên dưới vào trước thẻ đóng </head></div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><!--<br />
/*****************************************************<br />
Auto-readmore link script, version 4.1 (for blogspot)<br />
(C)2009 by Anhvo<br />
Homepage: http://vietwebguide.com<br />
Please dont remove this copyright or change it into your own<br />
******************************************************/<br />
--></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><style type="text/css"><br />
.thumbnailimg IMG {<br />
max-width:<strong>150</strong>px;<br />
width: expression(this.width > <strong>150</strong> ? <strong>150</strong>: true);<br />
max-height:<strong>120</strong>px;<br />
height: expression(this.height > <strong>120</strong> ? <strong>120</strong>: true);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">}<br />
.thumbnailimg {<br />
float:left;<br />
padding:0px 10px 5px 0px;<br />
}<br />
</style><br />
<script type='text/javascript'><br />
var thumbnail_mode = "<strong>no-float</strong>" ;<br />
var classicMode = <strong>false</strong> ;<br />
var summary_noimg = <strong>50</strong>;<br />
var summary_img = <strong>40</strong>;<br />
var indent = <strong>3</strong>;<br />
</script><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">function getSummaryLikeWP(id) {<br />
return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];<br />
}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">function getSummaryImproved(post,max){<br />
var re = /<.*?>/gi<br />
var re2 = /<br.*?>/gi<br />
var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi<br />
var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi<br />
post = post.replace(re4,'')<br />
post = post.replace(re3,'<br /> ').split(re2)<br />
for(var i=0; i<post.length; i++){<br />
post[i] = post[i].replace(re,'');<br />
}<br />
var post2 = new Array();<br />
for(var i in post) {<br />
//if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);<br />
if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">}<br />
var s = "";<br />
var indentBlank = "";<br />
for(var i=0;i<indent;i++){<br />
indentBlank += " ";<br />
}<br />
if(post2.join('<br/>').split(' ').length < max-1 ){<br />
s = post2.join(indentBlank +' <br/>');<br />
} else {<br />
var i = 0;<br />
while(s.split(' ').length < max){<br />
s += indentBlank + ' ' + post2[i]+'<br/>';<br />
i++;<br />
}<br />
} <br />
return s;<br />
}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">function createSummaryAndThumb(pID){<br />
var div = document.getElementById(pID);<br />
var content = div.innerHTML;<br />
if (/<!--\s*more\s*-->/.test(content)) {<br />
div.innerHTML = getSummaryLikeWP(pID);<br />
div.style.display = "block";<br />
}<br />
else {<br />
var imgtag = "";<br />
var img = div.getElementsByTagName("img");<br />
var summ = summary_noimg;<br />
if(img.length>=1) {<br />
if(thumbnail_mode == "float") {<br />
imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';<br />
summ = summary_img;<br />
} else {<br />
imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';<br />
summ = summary_img;<br />
}<br />
}<br />
var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';<br />
div.innerHTML = summary;<br />
div.style.display = "block";<br />
}<br />
}<br />
//]]><br />
</script></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Trong đoạn code trên sẽ có những chỗ bạn cần thay đổi như sau:</div><ul style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>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 <strong>3</strong> lần.</li>
<li>Giá trị <i>"no-float"</i> 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 <em>"no-float"</em>thành <i>"float"</i> để cho ảnh của bạn hiện dồn về trái.</li>
<li>Giá trị <i>false</i> 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 <i>true</i> nếu muốn xài Summary kiểu cũ.</li>
<li>Giá trị 5<i>0</i> của summary_noimg là <b>số từ</b> tối đa cho Summary khi bài viết không có ảnh nào.</li>
<li>Giá trị 4<i>0</i> của summary_img là <b>số từ</b> tối đa cho Summary khi bài viết có ảnh.</li>
<li>Giá trị <i>3</i> 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.</li>
</ul><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Sau khi thiết lập xong, bạn bấm <b>Save</b> để lưu thay đổi, vào lại blog và kiểm tra xem Auto Readmore chạy thế nào nhé.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">* 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</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><code><!-- more --></code></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">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 <i><!-- more --></i>bằng tay.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">2. Automatic Read More Hack With Thumbnail for Blogger Bug Fixed</span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Đâ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 :</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong>Bước 1</strong> : Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong>Bước 2</strong> : Tìm trong template ( Ctrl + F ) dòng <data:post.body/> và thay thế nó bằng đoạn code bên dưới</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br />
<b:else/><br />
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><br />
<b:else/><br />
<div expr:id='"summary" + data:post.id'><data:post.body/></div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></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/AVvXsEjhxeLYon0bOqxMMDQLy9i6r-oEg1M2BCIy3SbNYSuiXlxjkdvZhuJRXoLvv_lIO5Hz-b57PU0uFD_2HOqSgF7M9Ywjxc_lNlXsgaf6U4NdFdE56C6IUMZAw3p7DvVvgdhR2i87jvnToHU/' style='border:none'/></a></span><br />
</b:if></b:if></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong>Bước 3</strong> : Chèn đoạn code bên dưới vào trước thẻ đóng </head></div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script type='text/javascript'>var thumbnail_mode = "no-float" ;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">summary_noimg = 430;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">summary_img = 340;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">img_thumb_height = 100;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">img_thumb_width = 120;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script type='text/javascript'></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">//<![CDATA[</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">function removeHtmlTag(strx,chop){</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">if(strx.indexOf("<")!=-1)</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">{</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var s = strx.split("<");</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">for(var i=0;i<s.length;i++){</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">if(s[i].indexOf(">")!=-1){</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strx = s.join("");</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">chop = (chop < strx.length-1) ? chop : strx.length-2;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">strx = strx.substring(0,chop-1);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">return strx+'...';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">function createSummaryAndThumb(pID){</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var div = document.getElementById(pID);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var imgtag = "";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var img = div.getElementsByTagName("img");</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var summ = summary_noimg;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">if(img.length>=1) {</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">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>';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">summ = summary_img;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">if(img.length<1) {</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9rwXC8a85M2ncKGGulWtQUWXEx1sk7PlvMgJz5mBYUc6HtODPiHxQCCwBLVzlUyONkMFcWtjYsd9ze-hnv2Fc5vRyNWdv8yMu0OGLfn45ZbohN98xI6_mNZds_v54xJVs8tkz_D8L-ki3/" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>';<br />
summ = summary_img;<br />
}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">div.innerHTML = summary;</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">//]]></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></script></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><em>* Đoạn code trên iTechPlus đã thêm ảnh mặc định cho những bài viết không có ảnh</em></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Bước 4 : Save template and Done.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Chúc các bạn thành công !</div><div><br />
</div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-44100486645182054592011-07-30T10:02:00.000-07:002011-07-30T10:02:01.418-07:00Tiện ích “Thông tin cần biết” cho Blogger<div class="post-body entry-content" id="post-body-7864856014099202519" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div class="wlWriterEditableSmartContent" id="scid:51CF81A4-8F44-4a2c-8837-198C090B9994:8f1836e3-84cb-44d8-b91e-2a7fa5e70910" style="display: block; float: none; margin-left: auto; margin-right: auto; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; width: 308px;"><a atomicselection="true" href="http://lh4.ggpht.com/_PAuO_he0N0k/TXCn-NzXgCI/AAAAAAAAD2g/EM3q6B4jcjI/s400/ttcb1.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><img height="186" src="http://lh4.ggpht.com/_PAuO_he0N0k/TXCn-NzXgCI/AAAAAAAAD2g/EM3q6B4jcjI/s288/ttcb1.jpg" style="border-bottom-color: initial; border-bottom-style: initial; border-bottom-width: 2px; border-color: initial; border-left-color: initial; border-left-style: initial; border-left-width: 2px; border-right-color: initial; border-right-style: initial; border-right-width: 2px; border-top-color: initial; border-top-style: initial; border-top-width: 2px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" width="288" /></a></div>“Thông tin cần biết” là tiện ích được sử dụng rất phổ biến trên các trang Web tin tức ở VN, như báo <a href="http://vnexpress.net/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">VNExpress</a>, <a href="http://vietnamnet.vn/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Vietnamnet</a>,…dưới nhiều dạng thức khác nhau. Tuy nhiên, tựu trung lại cũng chỉ chứa các thông tin như giá vàng, thời tiết, giá chứng khoán,…vv…<br />
<div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:97dd3bd9-a553-42e5-adbd-e270257bf7bc" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div>Cho dù nội dung trên Blog của bạn không liên quan gì đến các lĩnh vực đó, nhưng theo iTechPlus bạn cũng nên trang bị cho Blog của mình bởi đó là những “thông tin cần biết”, không lúc này thì lúc khác.<br />
Và trong bài viết bên dưới, iTechPlus sẽ hướng dẫn các bạn tạo một bảng nội dung như hình dưới chỉ với 3 bước đơn giản :<br />
<div align="center"><img alt="Tiện ích "Thông tin cần biết" giống iTechPlus.info" src="https://lh4.googleusercontent.com/_PAuO_he0N0k/TXCn-p-d1tI/AAAAAAAAD2k/ge-Jt2p6hKo/ttcb.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Tiện ích "Thông tin cần biết" giống iTechPlus.info" /></div><div align="center"><a href="http://demoitechplus.blogspot.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">DEMO</a></div><strong><span style="color: blue;">Thực hiện :</span></strong><br />
<strong>Bước 1</strong> : Vào Thiết kế > Chỉnh sửa HTML<br />
<strong>Bước 2</strong> : Chèn đoạn code bên dưới vào trước thẻ đóng </b:skin><br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">.thongtin img{width:24px;height:18px;margin:5px 5px -5px 0}<br />
.thongtin li{margin:10px 0 20px}</div></blockquote><strong>Bước 3</strong> : Tạo một widget HTML\JavaScript và chèn vào đoạn code sau :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script language="JavaScript"><br />
function popUp(URL) {<br />
day = new Date();<br />
id = day.getTime();<br />
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=500,height=350,left = 380,top = 180');");<br />
}<br />
</script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><table border="0" width="100%" align="left" cellspacing="0" cellpadding="0" class="thongtin" style="border-bottom:1px solid #ddd"> <br />
<tr><td align="left" valign="top" width="50%"><br />
<ul><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik9JdU9xcXy0mKLDw0HuMfJKjLlAlBeq28qzlxo2q6Guye_ALCi8vtN51zX5NDNgoNsexCnyc71w8PQsFWbqfoyFrxYGT_DqaF1Rq5UOefvOjkzmwUwvpYUR_G5YexxzqQh6NN_dFRdRw/"/><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=exchangerates')">Tỉ giá ngoại tệ</a></li><br />
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOOqqnSTEmOEb4Kcqq8RnJ3TcGETR_p5stdChyphenhyphenoKyRRryPmbjOpVZHZBYWEjuvVarN9gX2IQGe2e0jDTgG5UxQCXxDFosNOEYUMDAcQkKnBTYxK-XsHAEL5Q3kYruOBT_s0EYuKMN-JMA/"/><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=goldrates')">Bảng giá vàng</a></li><br />
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXC4u6eJte0X5ry89NNBWCBqt1vNJgvLUNus8QqK7-ezZcWHMUFsgQgSQZfHjGRE57Ilfs_-4oKF_VSIGzgNtPRFsHMY2MlCXTLUrnIQQU_A_NH1BSxIG_lfH-EvA5HysnSMgHdRoLDFM/"/><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=oilrates')">Bảng giá dầu</a></li><br />
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurlcXA2l6LKPbqvhWnXe2KnuTkqnVkqnn74QJRoq0oBAcCwZX0zGE8nZ20b_GDrKUJY-2vhrl3oy57iuRH2a3cEm2b4qgANPNQIg_5lvcLA1B5ii7obMJdVGWB61NkcXHIRh1YFZ6TnI/"/><a href="javascript:popUp('http://chungkhoan.24h.com.vn/chungkhoan.php')">Giá chứng khoán</a></li><br />
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9os3WzNCEYirFyKRNQFvAgPYGQu6szsCoA603gUjSBp3JtjYec4ffzAOxsstKsjIT7yywL2nw2WtnsNZ7BXSUQJgBgWdU_juZf2owU9bgyMkBZ50BAI2Mhtwds5cbg7oPzdq11CTkIbU/"/><a href="javascript:popUp('http://www.chieuphimquocgia.com.vn/lichphim/Default.aspx?MenuId=14')">Lịch chiếu phim</a></li><br />
</ul></td></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><td align="left" valign="top" width="50%"><br />
<ul><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiALjYA0U9OV2elG-aBpsaeZ8k_tCoPlRmcfAfR-vQtEoNfGhK2khp5gZXmNoX_LPWNaQi1PBerokr_rD_Jkm_yqCAYbEsN_ywRhJ01qwKirLaxdgFMayVlgQ_yyswGbqr7o4A-dlDOlpo/"/><a href="javascript:popUp('http://vovnews.vn/Services/Infopage.aspx?svc=lotteryresults')">Kết quả xổ số</a></li><br />
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguxaErZocOTyEXIp45Ow1SlPwH9KIsOSHlKEhOVe6KDyztGd_wzYRe2hMQnm2DvhGmoUNigA_BgeQdZ99PrQlOVp2CnHTRUa05XtRRFL0cwPwOXmH5F0NeAZiG5skGCtH82WQK96KHAbM/"/><a href="javascript:popUp('http://baobongda.com.vn/lich-thi-dau/league/')">Lịch bóng đá</a></li><br />
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzBVSuOW1WfnFyDo2nb9sCpjxu8rTSYhYwft_1KoJMurn-7CT89vZnsNo5l_RFrzCgBaqLNU6_DqAmTFSP9ABXlGo_lOJTf4CVgsXgs2dtH35FXwfQBmZEWtfjVfbXfxraoMJVIuyXfBA/"/><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=tvschedules')">Lịch truyền hình</a></li><br />
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBEdvvoKcl6rDQxeEBlV1AaFktvuUbKGfEqEtmbv8S84IydiDnaqnMcQTPIlB8UgUJfcpeSr0-bGgBODRXUn-xs5Yp-dgoK25hYfJRz4WQQvH6OpiCSe3YlfINBP9NXO3_P5Rr7jvYBQ/"/><a href="javascript:popUp('http://vovnews.vn/Services/Infopage.aspx?svc=weathers')">Dự báo thời tiết</a></li><br />
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuDGHqfFpsgsdtWEsnxUfGZAty0in-7Dx8L9IhoW9D61cxqkBbd9gonelnWDfhD94-iJZh-mPCKW-k9zTD_FmtWDn58M4ppyb9NFL1l6monC8w4Bj1h_Tzacs2YberSpu9hvIU5Dsyl1M/"/><a href="javascript:popUp('http://service.thesaigontimes.vn/atm/tracuuatm.aspx')">Điểm đặt ATM</a></li><br />
</ul></td></tr></table></div></blockquote><br />
<br />
<br />
<br />
Lưu lại là bạn đã có tiện ích “Thông tin cần biết” giống iTechPlus rồi đó !<br />
<em><strong><span style="color: teal;">* Lưu ý</span></strong> : Các bạn nên download các file ảnh về và upload lên host riêng để sử dụng</em><br />
Chúc các bạn thành công !<br />
<div align="right">iTechPlus</div></div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-35096711378547044862011-07-30T10:00:00.000-07:002011-07-30T10:00:45.869-07:00Tạo “Friend Connect” widget cho Blogger - Update<div class="post-body entry-content" id="post-body-7363519015126209944" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img height="136" src="http://lh3.ggpht.com/_PAuO_he0N0k/TYMvOoOtEMI/AAAAAAAAEsQ/oE_zCAetRO4/s200/iTechPlusConnectingPeople.jpg" width="200" />Chắc hẳn bạn đã từng thấy tiện ích Friend Connect – Kết nối bạn bè trên một blog nào đó. Đây là một khung chứa liên kết đến các trang blog cá nhân của những người bạn của chủ Blog.</div><div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:a9afcc5c-a200-47b5-879d-353bf396ec34" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div>Tiện ích này không những có thể giúp chủ blog liên kết dễ dàng đến các Blog khác, mà đây còn là một hình thức để quảng bá lẫn nhau giúp tăng Pageview cho những blog được liên kết.<br />
Dĩ nhiên Google cũng đã cung cấp cho các Blogger một tiện ích tương tự là Google Friend Connect hay Followers, nhưng tiện ích này có một vài nhược điểm như :<br />
<ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>Phải sử dụng 1 file JavaScript để thực thi. Điều này xem ra không ổn vì sẽ ảnh hưởng đôi chút đến tốc độ tải trang của Blog, cho nên nó thường được các Blogger đặt ở Footer ( bên ngoài content-wrapper ).</li>
<li>Đoạn code để tạo nên tiện ích không hợp chuẩn W3C Validator - Điều này sẽ ảnh hưởng đến nhiều thứ khác. Chi tiết bạn có thể xem <a href="http://www.itechplus.info/2011/02/huong-dan-thiet-ke-blog-theo-tieu-chuan.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">tại đây</a>.</li>
</ul>Chính vì lý do đó, và cũng theo yêu cầu của bạn <a href="http://www.itechplus.info/p/question.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Trung</a>, hôm nay iTechPlus sẽ giới thiệu đến các bạn từng bước để tạo tiện ích này một cách dễ nhất.<br />
<div align="center"><em><img alt="Tạo “Friend Connect” widget cho Blogger" src="https://lh5.googleusercontent.com/_PAuO_he0N0k/TX3VnAbPpOI/AAAAAAAAEWY/ExKqIPuoang/iTechPlusConnectPeople.png" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Tạo “Friend Connect” widget cho Blogger" /><br />
<br />
Hình minh họa</em></div><strong><span style="color: blue;">1. Chuẩn bị</span></strong><br />
- Favicon của Blog bạn muốn liên kết<br />
- Link đến Blog bạn muốn liên kết<br />
<strong><span style="color: blue;">2. Thực hiện</span></strong><br />
- Vào Thiết kế > Phần tử trang<br />
- Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới ( không cần tạo tiêu đề cho widget )<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><style type="text/css"></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">#itechconnect{margin:0; padding: 0; height:238px; overflow: auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0KPw_-_btQqjVqEub0IstRj_y73VsenzsLeu-eCTkja7tEP1pxOTC9D4Gs2Tz9jyizcZ3_SP04PRdRkMkjOIdi3HQGqaa0Mq0uf-xajwD31r3oLScMROymTe9AUpTzDKvnVhHZurRixc/) no-repeat bottom right; font-weight:bold}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">#itechconnect p {margin:0; padding:2px 10px}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">.favicon {width:16px; height:16px; margin-right:5px}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">.connect {width:48px; height:48px; margin:5px 10px -15px 0}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></style></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><div id="itechconnect"></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><center style="margin-bottom:15px"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4d3ZkDoLLCdQIACEMa65cfYojNH9TqoVcWM5gbh9aAgId1XYGZCjvLl2kk-vydzZXq7nfkUgWbNIB3AP6fSWrdyrR8M9v8piVb7PVD86QKiyofRREVe10ccbgyW9U3Pzh9XNuQDh25rU/" class="connect"/><a href="<strong>http://www.itechplus.info/"</strong>>KẾT NỐI BẠN BÈ</a></center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><p> <img src="<strong>YOUR FAVICON</strong>" class="favicon" /> <a href="<br />
<strong>http://www.itechplus.info/"</strong> target="_blank">iTechPlus.info</a></p></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><p> <img src="<strong>YOUR FAVICON</strong><a href="http://sites.google.com/site/thanphong07/home/vnpctech-1/favicon.ico%22" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">"</a> class="favicon" /> <a href="<br />
<strong>http://www.itechplus.info/"</strong> target="_blank">VNPCTech</a></p></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><!—tương tự cho các liên kết khác --></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></div></div></blockquote>Thay đoạn code được in đậm cho phù hợp.<br />
<strong><span style="color: red;">* Update : </span></strong>do có bạn yêu cầu làm cho danh sách liên kết chuyển động từ dưới lên ( hoặc từ trên xuống ) để làm cho Blog trông đỡ “tĩnh lặng” hơn. Để làm điều đó, các bạn chỉ việc thay đoạn code bên trên bằng đoạn code sau :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><style type="text/css"><br />
#itechconnect{margin:0; padding: 0; border:double #ccc; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0KPw_-_btQqjVqEub0IstRj_y73VsenzsLeu-eCTkja7tEP1pxOTC9D4Gs2Tz9jyizcZ3_SP04PRdRkMkjOIdi3HQGqaa0Mq0uf-xajwD31r3oLScMROymTe9AUpTzDKvnVhHZurRixc/) no-repeat bottom right; font-weight:bold}<br />
#itechconnect p {margin:0; padding:2px 10px}<br />
.favicon {width:16px; height:16px; margin-right:5px}<br />
.connect {width:48px; height:48px; margin:5px 10px 0 0}<br />
</style><br />
<div id="itechconnect"><br />
<center style="margin-bottom:25px"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4d3ZkDoLLCdQIACEMa65cfYojNH9TqoVcWM5gbh9aAgId1XYGZCjvLl2kk-vydzZXq7nfkUgWbNIB3AP6fSWrdyrR8M9v8piVb7PVD86QKiyofRREVe10ccbgyW9U3Pzh9XNuQDh25rU/" class="connect"/><a href="<strong>http://www.itechplus.info/</strong>">KẾT NỐI BẠN BÈ</a></center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><marquee align='left' direction='<strong><span style="color: blue;">up</span></strong>' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' height='165' width='100%'><br />
<p> <img src="<strong>YOUR FAVICON</strong>" class="favicon" /> <a href="<br />
<strong>http://www.itechplus.info/</strong>" target="_blank">iTechPlus.info</a></p><br />
<p> <img src="YOUR FAVICON" class="favicon" /> <a href="<br />
<strong>http://www.itechplus.info/</strong>" target="_blank">VNPCTech</a></p><br />
<!--tương tự cho các liên kết khác--><br />
</marquee><br />
</div></div></blockquote><div align="center"><a href="http://demoitechplus.blogspot.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Xem DEMO</a></div>Như vậy là bạn đã có tiện ích “Liên kết bạn bè” đơn giản mà đẹp mắt rồi đó.<br />
Chúc các bạn thành công !<br />
<br />
<br />
<br />
<div align="right">iTechPlus</div></div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-1724093920781431002011-07-30T09:59:00.000-07:002011-07-30T09:59:09.256-07:00Tiện ích Multi Tabbed Widget For Blogger<div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="clear: left; color: black; float: left; font-family: 'Times New Roman'; font-size: small; line-height: normal; margin-bottom: 1em; margin-right: 1em;"><img alt="Tiện ích Multi Tabbed Widget For Blogger" height="200" src="https://lh5.googleusercontent.com/_PAuO_he0N0k/TbwxQU2HiLI/AAAAAAAAIHo/Pc5VyTQYIO8/Multi%20Tabbed%20Widget%20for%20Blogger.jpg" width="200" /></span>Multi Tabbed Widget là tiện ích được sử dụng khi trên Blog bạn có chứa khá nhiều widget. Một giải pháp thường được các Blogger áp dụng là <a href="http://www.itechplus.info/2011/03/chia-footer-blogger-thanh-nhieu-cot.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">chia footer-wrapper làm nhiều cột</a> để chứa các widget này.</div><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:89f397ae-18a8-41a5-b8e8-747ec1b7a34e" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div></span><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Tuy nhiên, điều này không phải ai cũng thích, nhất là các blog được thiết kế mang phong cách báo chí (như iTechPlus.info chẳng hạn). Từ đó mới xuất hiện tiện ích gọi là Multi Tabbed Widget.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Tiện ích này xuất hiện từ khá lâu, mà bắt nguồn từ các Blog sử dụng nền tảng Wordpress, sau đó được các Pro Blogger “bào chế” để áp dụng cho Blogspot.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Sử dụng Multi Tabbed Widget không những 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, mà còn có thể 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.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Và trong bài viết dưới đây, iTechPlus sẽ giới thiệu đến các bạn 2 Style của tiện ích này.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">1. Style 1 : <a href="http://www.mybloggertricks.com/2009/06/multi-tab-widget-for-bloggerblogspot.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Simple Multi Tabbed Widget for Blogger</a></span></strong></div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><img alt="Simple Multi Tabbed Widget for Blogger" src="https://lh4.googleusercontent.com/_PAuO_he0N0k/TbwxQ11kt7I/AAAAAAAAIHs/1rcDGorU5lQ/Multi%20Tabbed%20Widget%20for%20Blogger(1).jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Simple Multi Tabbed Widget for Blogger" /> </div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Đây là tiện ích đơn giản nhất, có thể chèn vào nó các widget HTML\JavaScript.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: teal;">Thực hiện :</span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">A. Vào Thiết kế > Chỉnh sửa HTML</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">B. Chèn đoạn code bên dưới vào trước thẻ đóng </head></div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><script type='text/javascript'><br />
//<![CDATA[<br />
function tabtampil_oom(TPID, id)<br />
{<br />
var Tabtampil = document.getElementById(TPID);<br />
var TTs = Tabtampil.firstChild;<br />
while (TTs.className != "TTs" ) TTs = TTs.nextSibling;<br />
var TT = TTs.firstChild;<br />
var i = 0;<br />
do<br />
{<br />
if (TT.tagName == "A")<br />
{<br />
i++;<br />
TT.href = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";<br />
TT.className = (i == id) ? "Active" : "";<br />
TT.blur();<br />
}<br />
}<br />
while (TT = TT.nextSibling);<br />
var Halamans = Tabtampil.firstChild;<br />
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;<br />
var Halaman = Halamans.firstChild;<br />
var i = 0;<br />
do<br />
{<br />
if (Halaman.className == 'Halaman')<br />
{<br />
i++;<br />
if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";<br />
Halaman.style.overflow = "auto";<br />
Halaman.style.display = (i == id) ? 'block' : 'none';<br />
}<br />
}<br />
while (Halaman = Halaman.nextSibling);<br />
}<br />
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);<br />
}<br />
function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1);<br />
document.write('');}<br />
//]]><br />
</script></blockquote><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">C. Tạo một widget HTML\JavaScript và chèn vào đoạn code sau :</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><style type="text/css"><br />
div.TabTampil div.TTs<br />
{height: 24px; overflow: hidden; }<br />
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active<br />
{ background-color: #<span style="color: teal;"><strong>eee</strong></span>; }<br />
div.TabTampil div.Halamans<br />
{ clear: both; border: 1px solid #<strong><span style="color: teal;">fff</span></strong>; overflow: hidden; background-color:#<strong><span style="color: teal;">ffffff</span></strong>;}<br />
div.TabTampil div.Halamans div.Halaman<br />
{ height: 100%; padding: 0px; overflow: hidden; }<br />
div.TabTampil div.Halamans div.Halaman div.Alas<br />
{ padding: 3px 5px; }<br />
div.TabTampil div.TTs a<br />
{ border-left:1px solid #<strong><span style="color: blue;">eee</span></strong>; border-right:1px solid #<strong><span style="color: blue;">eee</span></strong>; border-top:1px solid #<strong><span style="color: blue;">eee</span></strong>; border-bottom:0px solid #<strong><span style="color: blue;">eee</span></strong>; float: left;<br />
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;<br />
font-size: 11px; font-weight: 900; color: #<strong><span style="color: teal;">000000</span></strong>}<br />
</style><br />
<form action="tabtampil.html" method="get"><br />
<div id="TabTampil" class="TabTampil"><br />
<div style="width: 300px;" class="TTs"> <a><strong>Tiêu đề Widget 1</strong></a> <a><strong>Tiêu đề Widget 2</strong></a> <a><strong>Tiêu đề Widget 3</strong></a></div><br />
<div style="width: 300px; height: 300px;" class="Halamans"><br />
<div class="Halaman"><br />
<div class="Alas"><br />
<br/><br />
<strong>Nội dung Widget 1</strong><br />
</div><br />
</div><br />
<div class="Halaman"><br />
<div class="Alas"><br />
<br/><br />
<strong>Nội dung Widget 2</strong><br />
</div><br />
</div><br />
<div class="Halaman"><br />
<div class="Alas"><br />
<br/><br />
<strong>Nội dung Widget 3</strong><br />
</div><br />
</div><br />
</div><br />
</div><br />
</div></form><br />
<script type="text/javascript">tabtampil_inisial('TabTampil');</script></blockquote><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Trong đoạn code trên :</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><ul style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>#<span style="color: teal;"><strong>eee</strong></span> : là màu nền của Tabs, mặc định là màu xám</li>
<li>#<strong><span style="color: teal;">fff</span></strong> : là màu đường viền của tiện ích</li>
<li>#<strong><span style="color: teal;">ffffff</span></strong> : là màu nền của thân widget</li>
<li>#<strong><span style="color: blue;">eee</span></strong> : là màu đường viền bao quanh Tabs</li>
<li>#<strong><span style="color: teal;">000000</span></strong> : là màu tiêu đề Tabs</li>
</ul><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><span style="color: black;">Để thay đổi thành màu khác, các bạn có thể sử dụng bảng mã màu <a href="http://www.itechplus.info/2011/01/bang-ma-mau-danh-cho-blogger.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">tại đây</a>.</span></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">2. Style 2 :</span> </strong><a href="http://www.mybloggertricks.com/2009/12/advanced-multi-tabbed-widget-for.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><strong>Advanced Multi Tabbed Widget For Blogger – Fully Widgetized!</strong></a></div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> <img alt="Advanced Multi Tabbed Widget For Blogger – Fully Widgetized!" src="https://lh5.googleusercontent.com/_PAuO_he0N0k/TYbn56ojWTI/AAAAAAAAE4A/2o3BBFDBAYc/multi-tabbed-widget[13].jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Advanced Multi Tabbed Widget For Blogger – Fully Widgetized!" /></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Đây là tiện ích cao cấp hơn. Với nó, bạn có thể chèn vào nó bất kỳ widget nào nếu muốn ( archives, labels, author,… )</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: teal;">Thực hiện :</span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">A. Vào Thiết kế > Chỉnh sửa HTML</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">B. Chèn đoạn code sau vào trong trường <strong>Variable definitions</strong>, khi đó trông sẽ giống như sau :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;">/* Variable definitions<br />
====================<br />
………………………………………………………<br />
<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#<span style="color: teal;"><strong>f8f8f8</strong></span>"><br />
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#<span style="color: teal;"><strong>dcdcdc</strong></span>"><br />
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#<span style="color: teal;"><strong>ffffff</strong></span>"><br />
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#<span style="color: teal;"><strong>5588aa</strong></span>"><br />
*/</blockquote><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Đoạn code trên nhằm xác định màu sắc cho các thành phần của widget như sau :</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><ul style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>#<span style="color: teal;"><strong>f8f8f8 : </strong></span>màu nền của tiện ích</li>
<li>#<span style="color: teal;"><strong>dcdcdc : </strong></span>màu đường viền của tiện ích và Tabs</li>
<li>#<span style="color: teal;"><strong>ffffff : </strong></span>màu nền của thân tiện ích và cũng là màu khi rê chuột vào tiêu đề Tabs</li>
<li>#<span style="color: teal;"><strong>5588aa : </strong></span>màu nền của tiêu đề Tabs</li>
</ul><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><span style="color: black;">Để thay đổi thành màu khác, các bạn có thể sử dụng bảng mã màu <a href="http://www.itechplus.info/2011/01/bang-ma-mau-danh-cho-blogger.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">tại đây</a>.</span></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">C. Chèn đoạn code sau vào trước thẻ đóng </b:skin></div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;">.tabberlive{<br />
margin:0;<br />
padding:5px;<br />
clear:both;<br />
background:$tbbxbgcolor;<br />
border:1px solid $tbbxbrcolor;<br />
}<br />
.tabbernav {<br />
margin:0;<br />
padding: 3px 0;<br />
border-bottom: 1px solid $tbbxbrcolor;<br />
font-family:Arial,Helvetica,sans-serif;<br />
font-size:12px;<br />
font-weight:bold;<br />
}<br />
.tabbernav li {<br />
list-style:none;<br />
margin:0;<br />
display:inline;<br />
}<br />
.tabbernav li a {<br />
padding:3px 0.5em;<br />
margin-right:1px;<br />
border:1px solid $tbbxbrcolor;<br />
border-bottom:none;<br />
background:$tbbxcolor2;<br />
text-decoration:none;<br />
color:$tbbxcolor1;<br />
}<br />
.tabbernav li a:hover {<br />
color:$tbbxcolor2;<br />
background:$tbbxcolor1;<br />
border-color:$tbbxbrcolor;<br />
text-decoration:none;<br />
}<br />
.tabbernav li.tabberactive a,<br />
.tabbernav li.tabberactive a:hover {<br />
background:$tbbxcolor1;<br />
color:$tbbxcolor2;<br />
border-bottom: 1px solid $tbbxcolor1;<br />
}<br />
.tabberlive .tabbertab {<br />
padding:5px;<br />
border:1px solid $tbbxbrcolor;<br />
border-top:0;<br />
background:$tbbxcolor1;<br />
}<br />
.tabberlive .tabbertab h2,<br />
.tabberlive .tabbertabhide {<br />
display:none;<br />
}<br />
.tabbertab .widget-content ul{<br />
list-style:none;<br />
margin:0 0 10px 0;<br />
padding:0;<br />
}<br />
.tabbertab .widget-content li {<br />
border-bottom:1px solid $tbbxbrcolor;<br />
margin:0 5px;<br />
padding:2px 0 5px 0;<br />
}</blockquote><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">D. Tiếp tục, chèn đoạn code bên dưới vào trước thẻ đóng </head></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><script type='text/javascript'><br />
//<![CDATA[<br />
document.write('<style type="text/css">.tabber{display:none;}<\/style>');<br />
function tabberObj(argsObj)<br />
{<br />
var arg;<br />
this.div = null;<br />
this.classMain = "tabber";<br />
this.classMainLive = "tabberlive";<br />
this.classTab = "tabbertab";<br />
this.classTabDefault = "tabbertabdefault";<br />
this.classNav = "tabbernav";<br />
this.classTabHide = "tabbertabhide";<br />
this.classNavActive = "tabberactive";<br />
this.titleElements = ['h2','h3','h4','h5','h6'];<br />
this.titleElementsStripHTML = true;<br />
this.removeTitle = true;<br />
this.addLinkId = false;<br />
this.linkIdFormat = '<tabberid>nav<tabnumberone>';<br />
for (arg in argsObj) { this[arg] = argsObj[arg]; }<br />
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');<br />
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');<br />
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');<br />
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');<br />
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');<br />
this.tabs = new Array();<br />
if (this.div) {<br />
this.init(this.div);<br />
this.div = null;<br />
}<br />
}<br />
tabberObj.prototype.init = function(e)<br />
{<br />
var<br />
childNodes,<br />
i, i2,<br />
t,<br />
defaultTab=0,<br />
DOM_ul,<br />
DOM_li,<br />
DOM_a,<br />
aId,<br />
headingElement;<br />
if (!document.getElementsByTagName) { return false; }<br />
if (e.id) {<br />
this.id = e.id;<br />
}<br />
this.tabs.length = 0;<br />
childNodes = e.childNodes;<br />
for(i=0; i < childNodes.length; i++) {<br />
if(childNodes[i].className &&<br />
childNodes[i].className.match(this.REclassTab)) {<br />
t = new Object();<br />
t.div = childNodes[i];<br />
this.tabs[this.tabs.length] = t;<br />
if (childNodes[i].className.match(this.REclassTabDefault)) {<br />
defaultTab = this.tabs.length-1;<br />
}<br />
}<br />
}<br />
DOM_ul = document.createElement("ul");<br />
DOM_ul.className = this.classNav;<br />
for (i=0; i < this.tabs.length; i++) {<br />
t = this.tabs[i];<br />
t.headingText = t.div.title;<br />
if (this.removeTitle) { t.div.title = ''; }<br />
if (!t.headingText) {<br />
for (i2=0; i2<this.titleElements.length; i2++) {<br />
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];<br />
if (headingElement) {<br />
t.headingText = headingElement.innerHTML;<br />
if (this.titleElementsStripHTML) {<br />
t.headingText.replace(/<br>/gi," ");<br />
t.headingText = t.headingText.replace(/<[^>]+>/g,"");<br />
}<br />
break;<br />
}<br />
}<br />
}<br />
if (!t.headingText) {<br />
t.headingText = i + 1;<br />
}<br />
DOM_li = document.createElement("li");<br />
t.li = DOM_li;<br />
DOM_a = document.createElement("a");<br />
DOM_a.appendChild(document.createTextNode(t.headingText));<br />
DOM_a.href = "javascript:void(null);";<br />
DOM_a.title = t.headingText;<br />
DOM_a.onclick = this.navClick;<br />
DOM_a.tabber = this;<br />
DOM_a.tabberIndex = i;<br />
if (this.addLinkId && this.linkIdFormat) {<br />
aId = this.linkIdFormat;<br />
aId = aId.replace(/<tabberid>/gi, this.id);<br />
aId = aId.replace(/<tabnumberzero>/gi, i);<br />
aId = aId.replace(/<tabnumberone>/gi, i+1);<br />
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));<br />
DOM_a.id = aId;<br />
}<br />
DOM_li.appendChild(DOM_a);<br />
DOM_ul.appendChild(DOM_li);<br />
}<br />
e.insertBefore(DOM_ul, e.firstChild);<br />
e.className = e.className.replace(this.REclassMain, this.classMainLive);<br />
this.tabShow(defaultTab);<br />
if (typeof this.onLoad == 'function') {<br />
this.onLoad({tabber:this});<br />
}<br />
return this;<br />
};<br />
tabberObj.prototype.navClick = function(event)<br />
{<br />
var<br />
rVal,<br />
a,<br />
self,<br />
tabberIndex,<br />
onClickArgs;<br />
a = this;<br />
if (!a.tabber) { return false; }<br />
self = a.tabber;<br />
tabberIndex = a.tabberIndex;<br />
a.blur();<br />
if (typeof self.onClick == 'function') {<br />
onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};<br />
/* IE uses a different way to access the event object */<br />
if (!event) { onClickArgs.event = window.event; }<br />
rVal = self.onClick(onClickArgs);<br />
if (rVal === false) { return false; }<br />
}<br />
self.tabShow(tabberIndex);<br />
return false;<br />
};<br />
tabberObj.prototype.tabHideAll = function()<br />
{<br />
var i;<br />
for (i = 0; i < this.tabs.length; i++) {<br />
this.tabHide(i);<br />
}<br />
};<br />
tabberObj.prototype.tabHide = function(tabberIndex)<br />
{<br />
var div;<br />
if (!this.tabs[tabberIndex]) { return false; }<br />
div = this.tabs[tabberIndex].div;<br />
if (!div.className.match(this.REclassTabHide)) {<br />
div.className += ' ' + this.classTabHide;<br />
}<br />
this.navClearActive(tabberIndex);<br />
return this;<br />
};<br />
tabberObj.prototype.tabShow = function(tabberIndex)<br />
{<br />
var div;<br />
if (!this.tabs[tabberIndex]) { return false; }<br />
this.tabHideAll();<br />
div = this.tabs[tabberIndex].div;<br />
div.className = div.className.replace(this.REclassTabHide, '');<br />
this.navSetActive(tabberIndex);<br />
if (typeof this.onTabDisplay == 'function') {<br />
this.onTabDisplay({'tabber':this, 'index':tabberIndex});<br />
}<br />
return this;<br />
};<br />
tabberObj.prototype.navSetActive = function(tabberIndex)<br />
{<br />
this.tabs[tabberIndex].li.className = this.classNavActive;<br />
return this;<br />
};<br />
tabberObj.prototype.navClearActive = function(tabberIndex)<br />
{<br />
this.tabs[tabberIndex].li.className = '';<br />
return this;<br />
};<br />
function tabberAutomatic(tabberArgs)<br />
{<br />
var<br />
tempObj,<br />
divs,<br />
i;<br />
if (!tabberArgs) { tabberArgs = {}; }<br />
tempObj = new tabberObj(tabberArgs);<br />
divs = document.getElementsByTagName("div");<br />
for (i=0; i < divs.length; i++) {<br />
if (divs[i].className &&<br />
divs[i].className.match(tempObj.REclassMain)) {<br />
tabberArgs.div = divs[i];<br />
divs[i].tabber = new tabberObj(tabberArgs);<br />
}<br />
}<br />
return this;<br />
}<br />
function tabberAutomaticOnLoad(tabberArgs)<br />
{<br />
var oldOnLoad;<br />
if (!tabberArgs) { tabberArgs = {}; }<br />
oldOnLoad = window.onload;<br />
if (typeof window.onload != 'function') {<br />
window.onload = function() {<br />
tabberAutomatic(tabberArgs);<br />
};<br />
} else {<br />
window.onload = function() {<br />
oldOnLoad();<br />
tabberAutomatic(tabberArgs);<br />
};<br />
}<br />
}<br />
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */<br />
if (typeof tabberOptions == 'undefined') {<br />
tabberAutomaticOnLoad();<br />
} else {<br />
if (!tabberOptions['manualStartup']) {<br />
tabberAutomaticOnLoad(tabberOptions);<br />
}<br />
}<br />
//]]><br />
</script></blockquote><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">E. Cuối cùng, tìm trong template dòng</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><div id='sidebar-wrapper'></strong></span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">và chèn đoạn code sau vào trên\dưới hoặc trước thẻ đóng </div> của nó :</span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style='clear:both;'/><br />
<div class='tabber'><br />
<b:section class='tabbertab' id='tab1' maxwidgets='1'/><br />
<b:section class='tabbertab' id='tab2' maxwidgets='1'/><br />
<b:section class='tabbertab' id='tab3' maxwidgets='1'/><br />
<b:section class='tabbertab' id='tab4' maxwidgets='1'/><br />
</div></blockquote><div align="left" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Khi đó sẽ trông giống như hình dưới ( trường hợp chèn bên trong <strong><div id='sidebar-wrapper'></strong>)</div><div align="left" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"> </div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><img alt="Tìm trong template dòng <div id='sidebar-wrapper'> và chèn đoạn code sau vào trên\dưới hoặc trước thẻ đóng </div> của nó" src="https://lh3.googleusercontent.com/_PAuO_he0N0k/TYbn7YNT6xI/AAAAAAAAE4M/X8SBO6corZQ/Shiftpositionoftabber11.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; display: block; float: none; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Tìm trong template dòng <div id='sidebar-wrapper'> và chèn đoạn code sau vào trên\dưới hoặc trước thẻ đóng </div> của nó" /></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">F. Lúc này, bạn chỉ việc quay trở lại Phần tử trang và thêm bất kỳ widget nào vào trong nó<br />
<img alt="Quay trở lại Phần tử trang và thêm bất kỳ widget nào vào trong nó" src="https://lh4.googleusercontent.com/_PAuO_he0N0k/TYbn6SnMbhI/AAAAAAAAE4E/BwoCvsKft_s/MULTI-TABBED-WIDGET[5].jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; display: block; float: none; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Quay trở lại Phần tử trang và thêm bất kỳ widget nào vào trong nó" /></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Trên đây iTechPlus đã giới thiệu đến các bạn 2 Style của tiện ích Multi Tabbed Widget do<a href="http://www.mybloggertricks.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Mohammad Mustafa Ahmedzai</a> phát triển. Nếu các bạn biết thêm các Style nào khác độc đáo và chất lượng hơn nữa, xin vui lòng để lại phản hồi bên dưới.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">iTechPlus.info rất hoan nghênh sự đóng góp của các bạn !</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Chúc các bạn thành công !</div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-10903646283470552142011-07-30T09:57:00.001-07:002011-07-30T09:57:03.246-07:00Tạo Banner quảng cáo hiển thị ngẫu nhiên<div class="post-body entry-content" id="post-body-577995946914856609" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><img alt="Tạo Banner quảng cáo hiển thị ngẫu nhiên" height="179" src="http://lh6.ggpht.com/_7wsQzULWIwo/SwBO8zYi_uI/AAAAAAAACL0/hI2Hp-t-dPo/turning%20over%20pages[4].gif?imgmax=800" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; display: block; float: none; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Tạo Banner quảng cáo hiển thị ngẫu nhiên" width="264" /><br />
Đôi khi bạn ghé thăm một website nào đó, có thể bạn sẽ thấy một mẫu quảng cáo sẽ bị thay thế bởi một quảng cáo khác ở cùng một vị trí khi refresh trang, hoặc khi bạn xem một trang mới. Hay nói cách khác, các mẫu quảng cáo đã hiển thị một cách ngẫu nhiên.<br />
<div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:4b1f6d91-49ab-432c-ad74-3449ae5e4e1c" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://www.blogger.com/post-create.g?blogID=2903201273877748681" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div>Xin lưu ý rằng đây không phải là một mẫu quảng cáo dạng Flash hoặc ảnh động, mà có thể tự động thay đổi do lập trình sẵn.<br />
Vậy họ đã làm điều đó như thế nào ? Bài viết hôm nay iTechPlus sẽ hướng dẫn bạn một thủ thuật nho nhỏ, đó là sử dụng vài dòng JavaScript đơn giản để khiến cho các hình ảnh quảng cáo đơn lẻ của bạn hiển thị một cách ngẫu nhiên khi refresh hoặc chuyển trang.<br />
<div align="center"><img alt="Tạo Banner quảng cáo hiển thị ngẫu nhiên" src="https://lh6.googleusercontent.com/_PAuO_he0N0k/TZmCDv6a2gI/AAAAAAAAGCc/kCvBFCmVGJs/RandomAdBannerWidget.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Tạo Banner quảng cáo hiển thị ngẫu nhiên" /> </div><div align="center"><span style="border-bottom-color: rgb(72, 161, 250); border-bottom-style: solid; border-bottom-width: 10px; border-left-color: rgb(72, 161, 250); border-left-style: solid; border-left-width: 10px; border-right-color: rgb(72, 161, 250); border-right-style: solid; border-right-width: 10px; border-top-color: rgb(72, 161, 250); border-top-style: solid; border-top-width: 10px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; padding-top: 6px;"><a href="http://demoitechplus.blogspot.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Live Demo</a></span></div><div align="center"><em><br />
Lưu ý : Refresh trang ( nhấn F5 ) để thấy hiệu ứng </em></div><strong><span style="color: blue;">Thực hiện :</span></strong><br />
1. Vào Thiết kế > Phần tử trang<br />
2. Tạo một widget HTML\JavaScripts và dán vào đoạn code bên dưới<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><div align="center"><br />
<table border="0" cellpadding="2" cellspacing="6" <strong><span style="color: teal;">width="265"</span> </strong>bgcolor="#ffffff"><br />
<tbody><tr><br />
<td><center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong><!-- BANNER#1 --></strong></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script language="JavaScript"><br />
images = new Array(2);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[0] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-1</span></strong>' border='0'<strong><span style="color: black;">height='125' width='125'</span></strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[1] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-2</span></strong>' border='0'<strong><span style="color: black;">height='125' width='125'</span></strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">index = Math.floor(Math.random() * images.length);<br />
document.write(images[index]);<br />
</script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></center></td></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><td><center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong><!-- BANNER#2 --></strong></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script language="JavaScript"><br />
images = new Array(2);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[0] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-1</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[1] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-2</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">index = Math.floor(Math.random() * images.length);<br />
document.write(images[index]);<br />
</script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></center></td><br />
</tr><br />
<tr></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><td><center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong><!-- BANNER#3 --></strong></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script language="JavaScript"><br />
images = new Array(2);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[0] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-1</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[1] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-2</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">index = Math.floor(Math.random() * images.length);<br />
document.write(images[index]);<br />
</script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></center></td></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><td><center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong><!-- BANNER#4 --></strong></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script language="JavaScript"><br />
images = new Array(2);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[0] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-1</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[1] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-2</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">index = Math.floor(Math.random() * images.length);<br />
document.write(images[index]);<br />
</script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></td></center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></tr></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></tbody></table></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"><br />
<tbody><br />
<tr><br />
<td><center><a href="<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI48MdhRYLWy5KWr1ueIhKVBumreJvkKhO83k_fZte9yWIqCo8apzpg_52KE4Rfrwf7eXCzmDEd_fcfDc9T4K66Z5ZtD_cdcAt8FXpgxmzSnUVE2zSAOHh9-cb6FXnkfC3r8WIiINffCD9/s1600/ADVERTISE-HERE.gif" /></a></center></td><br />
</tr></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> </tbody></table></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></div></div></blockquote>Trong đoạn code trên :<br />
<ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li><strong><span style="color: teal;">width="265"</span> </strong>: chiều rộng khung chứa hình ảnh quảng cáo ( sử dụng để tăng\giảm khoảng cách giữa các hình ảnh quảng cáo )</li>
<li><strong><span style="color: black;">height='125' width='125'</span></strong> : chiều rộng và chiều cao của hình ảnh quảng cáo</li>
<li><strong><span style="color: teal;">URL OF ADVERTISER</span></strong> : liên kết đến website nhà quảng cáo</li>
<li><strong><span style="color: teal;">URL OF BANNER’S IMAGE-1</span></strong> và <strong><span style="color: teal;">URL OF BANNER’S IMAGE-2</span> : </strong>liên kết đến hình ảnh quảng cáo</li>
<li><strong><span style="color: teal;">AD DESCRIPTION :</span> </strong>thông tin quảng cáo ( sẽ hiển thị khi rê chuột vào )</li>
</ul>Nếu Blog bạn chưa có ai mua quảng cáo, bạn có thể download một số ảnh động bên dưới để mời hoặc cho người khác biết bạn đang muốn bán quảng cáo tại vị trí đó :<br />
<table align="center" border="0" cellpadding="2" cellspacing="0" style="width: 200px;"><tbody>
<tr><td valign="top" width="198"><img align="left" src="https://lh4.googleusercontent.com/_PAuO_he0N0k/TUAhEsIpHJI/AAAAAAAACWc/3gWAp4FoupM/down.gif" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; display: inline; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" /><a href="http://www.mediafire.com/?fb9p1er2yp8gtj1" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Download Now</a></td></tr>
</tbody></table>Hy vọng bạn sẽ thích tiện ích này. Chúc các bạn thành công !<br />
<div align="right">iTechPlus ( Theo <a href="http://www.mybloggertricks.com/2009/08/releasing-125-by-125-animated-ad.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">MyBloggerTricks</a> )</div></div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-32025058411456487772011-07-30T09:55:00.001-07:002011-07-30T09:55:54.515-07:00Tạo Banner quảng cáo hiển thị ngẫu nhiên<div class="post-body entry-content" id="post-body-577995946914856609" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><img alt="Tạo Banner quảng cáo hiển thị ngẫu nhiên" height="179" src="http://lh6.ggpht.com/_7wsQzULWIwo/SwBO8zYi_uI/AAAAAAAACL0/hI2Hp-t-dPo/turning%20over%20pages[4].gif?imgmax=800" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; display: block; float: none; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Tạo Banner quảng cáo hiển thị ngẫu nhiên" width="264" /><br />
Đôi khi bạn ghé thăm một website nào đó, có thể bạn sẽ thấy một mẫu quảng cáo sẽ bị thay thế bởi một quảng cáo khác ở cùng một vị trí khi refresh trang, hoặc khi bạn xem một trang mới. Hay nói cách khác, các mẫu quảng cáo đã hiển thị một cách ngẫu nhiên.<br />
<div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:4b1f6d91-49ab-432c-ad74-3449ae5e4e1c" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div>Xin lưu ý rằng đây không phải là một mẫu quảng cáo dạng Flash hoặc ảnh động, mà có thể tự động thay đổi do lập trình sẵn.<br />
Vậy họ đã làm điều đó như thế nào ? Bài viết hôm nay iTechPlus sẽ hướng dẫn bạn một thủ thuật nho nhỏ, đó là sử dụng vài dòng JavaScript đơn giản để khiến cho các hình ảnh quảng cáo đơn lẻ của bạn hiển thị một cách ngẫu nhiên khi refresh hoặc chuyển trang.<br />
<div align="center"><img alt="Tạo Banner quảng cáo hiển thị ngẫu nhiên" src="https://lh6.googleusercontent.com/_PAuO_he0N0k/TZmCDv6a2gI/AAAAAAAAGCc/kCvBFCmVGJs/RandomAdBannerWidget.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Tạo Banner quảng cáo hiển thị ngẫu nhiên" /> </div><div align="center"><span style="border-bottom-color: rgb(72, 161, 250); border-bottom-style: solid; border-bottom-width: 10px; border-left-color: rgb(72, 161, 250); border-left-style: solid; border-left-width: 10px; border-right-color: rgb(72, 161, 250); border-right-style: solid; border-right-width: 10px; border-top-color: rgb(72, 161, 250); border-top-style: solid; border-top-width: 10px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; padding-top: 6px;"><a href="http://demoitechplus.blogspot.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Live Demo</a></span></div><div align="center"><em><br />
Lưu ý : Refresh trang ( nhấn F5 ) để thấy hiệu ứng </em></div><strong><span style="color: blue;">Thực hiện :</span></strong><br />
1. Vào Thiết kế > Phần tử trang<br />
2. Tạo một widget HTML\JavaScripts và dán vào đoạn code bên dưới<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><div align="center"><br />
<table border="0" cellpadding="2" cellspacing="6" <strong><span style="color: teal;">width="265"</span> </strong>bgcolor="#ffffff"><br />
<tbody><tr><br />
<td><center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong><!-- BANNER#1 --></strong></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script language="JavaScript"><br />
images = new Array(2);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[0] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-1</span></strong>' border='0'<strong><span style="color: black;">height='125' width='125'</span></strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[1] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-2</span></strong>' border='0'<strong><span style="color: black;">height='125' width='125'</span></strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">index = Math.floor(Math.random() * images.length);<br />
document.write(images[index]);<br />
</script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></center></td></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><td><center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong><!-- BANNER#2 --></strong></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script language="JavaScript"><br />
images = new Array(2);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[0] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-1</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[1] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-2</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">index = Math.floor(Math.random() * images.length);<br />
document.write(images[index]);<br />
</script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></center></td><br />
</tr><br />
<tr></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><td><center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong><!-- BANNER#3 --></strong></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script language="JavaScript"><br />
images = new Array(2);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[0] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-1</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[1] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-2</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">index = Math.floor(Math.random() * images.length);<br />
document.write(images[index]);<br />
</script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></center></td></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><td><center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><strong><!-- BANNER#4 --></strong></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script language="JavaScript"><br />
images = new Array(2);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[0] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-1</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">images[1] = "<a href = '<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>' rel='nofollow' ><img src='<strong><span style="color: teal;">URL OF BANNER’S IMAGE-2</span></strong>' border='0'<strong>height='125' width='125'</strong> alt='<strong><span style="color: teal;">AD DESCRIPTION</span></strong>'></a>";</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">index = Math.floor(Math.random() * images.length);<br />
document.write(images[index]);<br />
</script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></td></center></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></tr></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></tbody></table></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"><br />
<tbody><br />
<tr><br />
<td><center><a href="<strong><span style="color: teal;">URL OF ADVERTISER</span></strong>" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI48MdhRYLWy5KWr1ueIhKVBumreJvkKhO83k_fZte9yWIqCo8apzpg_52KE4Rfrwf7eXCzmDEd_fcfDc9T4K66Z5ZtD_cdcAt8FXpgxmzSnUVE2zSAOHh9-cb6FXnkfC3r8WIiINffCD9/s1600/ADVERTISE-HERE.gif" /></a></center></td><br />
</tr></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"> </tbody></table></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></div></div></blockquote>Trong đoạn code trên :<br />
<ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li><strong><span style="color: teal;">width="265"</span> </strong>: chiều rộng khung chứa hình ảnh quảng cáo ( sử dụng để tăng\giảm khoảng cách giữa các hình ảnh quảng cáo )</li>
<li><strong><span style="color: black;">height='125' width='125'</span></strong> : chiều rộng và chiều cao của hình ảnh quảng cáo</li>
<li><strong><span style="color: teal;">URL OF ADVERTISER</span></strong> : liên kết đến website nhà quảng cáo</li>
<li><strong><span style="color: teal;">URL OF BANNER’S IMAGE-1</span></strong> và <strong><span style="color: teal;">URL OF BANNER’S IMAGE-2</span> : </strong>liên kết đến hình ảnh quảng cáo</li>
<li><strong><span style="color: teal;">AD DESCRIPTION :</span> </strong>thông tin quảng cáo ( sẽ hiển thị khi rê chuột vào )</li>
</ul>Nếu Blog bạn chưa có ai mua quảng cáo, bạn có thể download một số ảnh động bên dưới để mời hoặc cho người khác biết bạn đang muốn bán quảng cáo tại vị trí đó :<br />
<table align="center" border="0" cellpadding="2" cellspacing="0" style="width: 200px;"><tbody>
<tr><td valign="top" width="198"><img align="left" src="https://lh4.googleusercontent.com/_PAuO_he0N0k/TUAhEsIpHJI/AAAAAAAACWc/3gWAp4FoupM/down.gif" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; display: inline; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" /><a href="http://www.mediafire.com/?fb9p1er2yp8gtj1" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Download Now</a></td></tr>
</tbody></table>Hy vọng bạn sẽ thích tiện ích này. Chúc các bạn thành công !<br />
<div align="right">iTechPlus ( Theo <a href="http://www.mybloggertricks.com/2009/08/releasing-125-by-125-animated-ad.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">MyBloggerTricks</a> )</div></div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-57438545690549329622011-07-30T09:54:00.001-07:002011-07-30T09:54:51.069-07:00Tạo banner quảng cáo dạng Popup<div class="post-body entry-content" id="post-body-2972590774997910375" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><img alt="Tạo banner quảng cáo dạng Popup" src="https://lh6.googleusercontent.com/_PAuO_he0N0k/TZFii9H1WVI/AAAAAAAAFhA/urnaXFlB6TM/lap-dat-ADSL-fpt-telecom.gif" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; display: block; float: none; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Tạo banner quảng cáo dạng Popup" /> <br />
Ở các bài viết trước, iTechPlus đã giới thiệu đến các bạn 2 thủ thuật tạo <a href="http://www.itechplus.info/2011/03/banner-quang-cao-truot-doc.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">banner quảng cáo trượt dọc</a> và <a href="http://www.itechplus.info/2011/03/banner-hien-thi-ngau-nhien-khi-refresh.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">banner quảng cáo hiển thị ngẫu nhiên</a> cho Blogspot.<br />
<div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:05a0289f-585d-4f04-a3fa-6510b3ea53c0" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div>Tiếp tục chủ đề trên, hôm nay iTechPlus xin giới thiệu tiếp một style khác, đó là tạo banner quảng cáo hiển thị dạng popup – nghĩa là mẫu quảng cáo sẽ bật lên khi người đọc ghé thăm website của bạn.<br />
<div align="center"><img alt="Tạo banner quảng cáo dạng Popup" src="https://lh5.googleusercontent.com/_PAuO_he0N0k/TZFhz8MsA1I/AAAAAAAAFg8/SqSxhZkZPo4/popup-advertise-banner-itechplus.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Tạo banner quảng cáo dạng Popup" /><br />
Hình minh họa</div><div align="center"><span style="border-bottom-color: rgb(72, 161, 250); border-bottom-style: solid; border-bottom-width: 10px; border-left-color: rgb(72, 161, 250); border-left-style: solid; border-left-width: 10px; border-right-color: rgb(72, 161, 250); border-right-style: solid; border-right-width: 10px; border-top-color: rgb(72, 161, 250); border-top-style: solid; border-top-width: 10px; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; padding-top: 6px;"><a href="http://demoitechplus.blogspot.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Live Demo</a></span></div><strong><span style="color: blue;">Cách thực hiện :</span></strong><br />
1. Vào Thiết kế > Phần tử trang<br />
2. Tạo một widget HTML\JavaScripts và chèn vào code bên dưới :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><style type="text/css"><br />
* html div#fl813691 {position: absolute; overflow:hidden;<br />
top:expression(eval(document.compatMode &&<br />
document.compatMode=='CSS1Compat') ?<br />
documentElement.scrollTop<br />
+(documentElement.clientHeight-this.clientHeight)<br />
: document.body.scrollTop<br />
+(document.body.clientHeight-this.clientHeight));}<br />
#fl813691{font: 12px Arial, Helvetica, sans-serif; color:#666; position:fixed; _position: absolute; right:0; bottom:0; height:150px; }<br />
#eb951855{ width:279px; padding-right:7px; background:url(<a href="http://img98.imageshack.us/img98/9400/rightp.gif)" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">http://img98.imageshack.us/img98/9400/rightp.gif)</a> no-repeat right top;}<br />
#cob263512{background:url(<a href="http://img205.imageshack.us/img205/2176/fulld.gif)" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">http://img205.imageshack.us/img205/2176/fulld.gif)</a> no-repeat left top; height:150px; padding-left:7px;}<br />
#coh963846{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:277px;}<br />
#coh963846 a{color:#690;text-decoration:none;}<br />
#coc67178{float:right; padding:0; margin:0; list-style:none; overflow:hidden; height:15px;}<br />
#coc67178 li{display:inline;}<br />
#coc67178 li a{background-image:url(<a href="http://img205.imageshack.us/img205/9837/closebutton.gif);" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">http://img205.imageshack.us/img205/9837/closebutton.gif);</a>background-repeat:no-repeat; width:30px; height:0; padding-top:15px; overflow:hidden; float:left;}<br />
#coc67178 li a.close{background-position: 0 0;}<br />
#coc67178 li a.close:hover{background-position: 0 -15px;}<br />
#coc67178 li a.min{background-position: -30px 0;}<br />
#coc67178 li a.min:hover{background-position: -30px -15px;}<br />
#coc67178 li a.max{background-position: -60px 0;}<br />
#coc67178 li a.max:hover{background-position: -60px -15px;}<br />
#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;}<br />
</style><br />
<div id="fl813691" style="height: 152px;"><br />
<div id="eb951855"><br />
<div id="cob263512"><br />
<div id="coh963846"><br />
<ul id="coc67178"><br />
<li id="pf204652hide"><a class="min" href="javascript:pf204652clickhide();" title="&#7848;n &#273;i">&#7848;n</a></li><br />
<li id="pf204652show" style="display: none;"><a class="max" href="javascript:pf204652clickshow();" title="Hi&#7879;n l&#7841;i">Xem </a></li><br />
</ul><br />
&nbsp;C&#225;oV&#224;ng.Com - Tin n&#243;ng h&#224;ng ng&#224;y<br />
</div><br />
<div id="co453569"> <br />
<!-- code ads --><br />
<a target="_blank" href="<strong>http://www.itechplus.info</strong>" rel="nofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="<strong><span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_YIZLLg9WIMf33Y5VuHm8T5_X4tMXB2dBiAkQPz6oOscRLZmN6otkEuVVloB0ITcoTQApFu01MxPzMCuVqU5GXorEahLc-pnmW7DmzKsmtUo-Az933HVhsNo5t1Oa7JwwRj1hNOKhKK4/</span></strong>" height="115" title="iTechPlus.info | Kiến thức - Thủ thuật - Giải pháp công nghệ"/></a><br />
<!-- code ads --><br />
</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></div><br />
</div></div></div><br />
<script><br />
pf204652bottomLayer = document.getElementById('fl813691');<br />
var pf204652IntervalId = 0;<br />
var pf204652maxHeight = 150;//Chieu cao khung quang cao<br />
var pf204652minHeight = 20;<br />
var pf204652curHeight = 0;<br />
function pf204652show( ){<br />
pf204652curHeight += 2;<br />
if (pf204652curHeight > pf204652maxHeight){<br />
clearInterval ( pf204652IntervalId );<br />
}<br />
pf204652bottomLayer.style.height = pf204652curHeight+'px';<br />
}<br />
function pf204652hide( ){<br />
pf204652curHeight -= 3;<br />
if (pf204652curHeight < pf204652minHeight){<br />
clearInterval ( pf204652IntervalId );<br />
}<br />
pf204652bottomLayer.style.height = pf204652curHeight+'px';<br />
}<br />
pf204652IntervalId = setInterval ( 'pf204652show()', 5 );<br />
function pf204652clickhide(){<br />
document.getElementById('pf204652hide').style.display='none';<br />
document.getElementById('pf204652show').style.display='inline';<br />
pf204652IntervalId = setInterval ( 'pf204652hide()', 5 );<br />
}<br />
function pf204652clickshow(){<br />
document.getElementById('pf204652hide').style.display='inline';<br />
document.getElementById('pf204652show').style.display='none';<br />
pf204652IntervalId = setInterval ( 'pf204652show()', 5 );<br />
}<br />
function pf204652clickclose(){<br />
document.body.style.marginBottom = '0px';<br />
pf204652bottomLayer.style.display = 'none';<br />
}<br />
</script></div></blockquote>Trong đoạn code trên :<br />
<ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>iTechPlus.info - Giải pháp CNTT : tiêu đề khung quảng cáo</li>
<li>http://www.itechplus.info : liên kết đến website nhà quảng cáo</li>
<li>https://…lap-dat-ADSL-fpt-telecom.gif : hình ảnh quảng cáo</li>
</ul>3. Save and Done.<br />
Chúc các bạn thành công !<br />
<div align="right">iTechPlus.info</div></div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-62930673459400646322011-07-30T09:52:00.000-07:002011-07-30T09:52:28.060-07:00Tiện ích “Bài viết liên quan” cho Blogger<div class="post-body entry-content" id="post-body-9186047859090129144" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div align="center"><img alt="Tiện ích “Bài viết liên quan” cho Blogger" src="https://lh4.googleusercontent.com/_PAuO_he0N0k/TYQbmU9aqJI/AAAAAAAAEvQ/yy0gnJlwtC4/related-posts.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Tiện ích “Bài viết liên quan” cho Blogger" /></div>Một phương pháp tương đối dễ dàng để tăng số lượng Page Views trên blog của bạn là thêm một danh sách các bài liên quan bên dưới mỗi bài viết. Điều này cung cấp cho độc giả nhiều thông tin liên quan hơn đến chủ đề mà họ đang theo dõi.<br />
<div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:9108ae54-83e9-436e-851d-48166a1ee891" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://www.blogger.com/post-edit.g?blogID=2903201273877748681&postID=6293067345940064632" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div>Đây là một tiện ích được sử dụng rất phổ biến, và nó cũng có rất nhiều “biến thể”. Hôm nay iTechPlus sẽ giới thiệu đến các bạn một số style được sử dụng phổ biến nhất trên các trang Web/Blog trong cũng như ngoài nước, nhằm cung cấp cho các bạn có nhiều lựa chọn hơn trong việc áp dụng vào Blog của mình.<br />
<span style="color: blue;"><strong>A. Style 1 : Related Posts Widget for Blogger v1 </strong></span>( <a href="http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">BloggerPlugins</a> )<br />
<div align="center"><img alt="Related Posts Widget for Blogger v1 " height="150" src="https://lh4.googleusercontent.com/_PAuO_he0N0k/TTEPxEfyIMI/AAAAAAAABWA/-Sm6p8Tg3n8/style1.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Related Posts Widget for Blogger v1 " width="333" /></div>1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích<br />
2. Chèn đoạn code bên dưới vào phía trên thẻ đóng </head><br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<style type="text/css"><br />
#related-posts {<br />
float:center;<br />
text-transform:none;<br />
height:100%;<br />
min-height:100%;<br />
padding-top:5px;<br />
padding-left:5px;<br />
}<br />
#related-posts .widget{<br />
padding-left:6px;<br />
margin-bottom:10px;<br />
}<br />
#related-posts .widget h2, #related-posts h2{<br />
font-size: 1.6em;<br />
font-weight: bold;<br />
color: black;<br />
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;<br />
margin-bottom: 0.75em;<br />
margin-top: 0em;<br />
padding-top: 0em;<br />
}<br />
#related-posts a{<br />
color:blue;<br />
}<br />
#related-posts a:hover{<br />
color:blue;<br />
}<br />
#related-posts ul{<br />
list-style-type:none;<br />
margin:0 0 0px 0;<br />
padding:0px;<br />
text-decoration:bold;<br />
font-size:15px;<br />
text-color:#000000<br />
}<br />
#related-posts ul li{<br />
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BcDFsHMgOOLnVvwT5J77AjPSwM1Xd3INxDO4oRIWWVJnFSDwlBpMB-ESa0qxl3VsgDLnKRz0marCqPCBO5D124L1SkJ0hzWPNV3oElLRx2NWCcSANDQJfpKARLMdnmCKwKNTolw5z_U/s200/greentickbullet.png) no-repeat ;<br />
display:block;<br />
list-style-type:none;<br />
margin-bottom: 13px;<br />
padding-left: 30px;<br />
padding-top:0px;}<br />
</style><br />
<script type='text/javascript'><br />
var relatedpoststitle="<strong><span style="color: blue;">Related Posts</span></strong>";<br />
</script><br />
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/><br />
</b:if></blockquote>3. Tìm trong Template của bạn đoạn code tương tự như bên dưới :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div class='post-footer-line post-footer-line-1'></blockquote>hoặc<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><p class='post-footer-line post-footer-line-1'></blockquote>và ngay lập tức bên dưới nó chèn đoạn code sau :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div id='related-posts'><br />
<b:loop values='data:post.labels' var='label'><br />
<b:if cond='data:label.isLast != &quot;true&quot;'><br />
</b:if><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.itechplus.info/2011/01/related-posts-bai-viet-lien-quan-cho.html<a href="http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">'</a>><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><br />
<script type='text/javascript'><br />
<span style="color: blue;"><strong>var maxresults=5; </strong></span>removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);<br />
</script><br />
</div><br />
</b:if></blockquote>với <strong>var maxresults=5;</strong> là số bài viết sẽ hiển thị trong widget ( mặc định là 5 )<br />
<strong><span style="color: blue;">B. Style 2 : Related Posts Widget for Blogger with Thumbnails</span></strong> <span style="color: blue;"><strong></strong></span>( <a href="http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">BloggerPlugins</a> )<br />
<div align="center"><img alt="Related Posts Widget for Blogger with Thumbnails " height="153" src="https://lh6.googleusercontent.com/_PAuO_he0N0k/TTEPxa7_eEI/AAAAAAAABWE/Nm6ecZkGXpA/style2.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Related Posts Widget for Blogger with Thumbnails " width="399" /></div>1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích<br />
2. Chèn đoạn code bên dưới vào phía trên thẻ đóng </head><br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<style type="text/css"><br />
#related-posts {<br />
float:center;<br />
text-transform:none;<br />
height:100%;<br />
min-height:100%;<br />
padding-top:5px;<br />
padding-left:5px;<br />
}<br />
#related-posts h2{<br />
font-size: 1.6em;<br />
font-weight: bold;<br />
color: black;<br />
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;<br />
margin-bottom: 0.75em;<br />
margin-top: 0em;<br />
padding-top: 0em;<br />
}<br />
#related-posts a{<br />
color:black;<br />
}<br />
#related-posts a:hover{<br />
color:black;<br />
}<br />
#related-posts a:hover {<br />
background-color:#d4eaf2;<br />
}<br />
</style><br />
<script type='text/javascript'><br />
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8HrPSg3MJfLYrSef4hv-9G-T8W7lxRenQcU6SJjWLWGCkTZCqv__lju1kLaaggUYNfhbYTl_1WNiTrJySvZsg06fpt1wkAt0ARHj_Qtw1YbmteRv0GD9kvySP_NdsBIPzC-ZBq5eW_ac/s400/noimage.png";<br />
var maxresults=<strong><span style="color: red;">5</span></strong>;<br />
var splittercolor="#d4eaf2";<br />
var relatedpoststitle="<strong><span style="color: red;">Related Posts</span></strong>";<br />
</script><br />
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/><br />
</b:if></blockquote>3. Tìm trong Template của bạn đoạn code tương tự như bên dưới :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div class='post-footer-line post-footer-line-1'></blockquote>hoặc<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><p class='post-footer-line post-footer-line-1'></blockquote>và ngay lập tức bên dưới nó chèn đoạn code sau :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div id='related-posts'><br />
<b:loop values='data:post.labels' var='label'><br />
<b:if cond='data:label.isLast != &quot;true&quot;'><br />
</b:if><br />
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop><br />
<script type='text/javascript'><br />
removeRelatedDuplicates_thumbs();<br />
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);<br />
</script><br />
</div><div style='clear:both'/><br />
</b:if><br />
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br />
<a href='<a href="http://www.itechplus.info/2011/01/related-posts-bai-viet-lien-quan-cho.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">http://www.itechplus.info/2011/01/related-posts-bai-viet-lien-quan-cho.html</a><a href="http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">'</a>><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='<a href="http://www.itechplus.info/2011/01/related-posts-bai-viet-lien-quan-cho.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" title="http://www.itechplus.info/2011/01/related-posts-bai-viet-lien-quan-cho.html">http://www.itechplus.info/</a><a href="http://bloggertemplates.bloggerplugins.org/'" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">'</a> ><img style="border: 0" alt="Kiến thức – Thủ thuật – Giải pháp công nghệ" src="http://image.bloggerplugins.org/blogger-templates.png" /></a><br />
</b:if></b:if></blockquote>4. Thay thế code màu đỏ theo ý bạn<br />
5. Save Template.<br />
<strong><span style="color: blue;">C. Style 3 : Related Posts by Categories</span></strong> ( <a href="http://www.jackbook.com/blogger-hack-blogspot-hack-blogger-templates-customizing/related-posts-entries-on-blogger-blogspot" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Jackbook</a> )<br />
<div align="center"><img alt="Related Posts by Categories " height="201" src="https://lh5.googleusercontent.com/_PAuO_he0N0k/TTEdOcEiLOI/AAAAAAAABWM/aJL2ljkwrfA/Related-Posts-by-Categories.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Related Posts by Categories " width="328" /></div>1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích<br />
2. Tìm trong Template của bạn đoạn code sau :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><data:post.body/></blockquote>hoặc<br />
<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><p><data:post.body/></p></blockquote>và ngay sau nó chèn đoạn code bên dưới :<br />
<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><b:if cond='data:blog.pageType == "item"'><br />
<div class='similiar'><br />
<div class='widget-content'><br />
<h3><strong><span style="color: red;">Related Posts by Categories</span></strong></h3><br />
<div id='data2007'/><br/><br/><br />
<script type='text/javascript'><br />
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;<br />
var maxNumberOfPostsPerLabel = 4;<br />
var maxNumberOfLabels = 10;<br />
maxNumberOfPostsPerLabel = <strong><span style="color: red;">10</span></strong>;<br />
maxNumberOfLabels =<strong><span style="color: red;"> 3</span></strong>;<br />
function listEntries10(json) {<br />
var ul = document.createElement(&#39;ul&#39;);<br />
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?<br />
json.feed.entry.length : maxNumberOfPostsPerLabel;<br />
for (var i = 0; i &lt; maxPosts; i++) {<br />
var entry = json.feed.entry[i];<br />
var alturl;<br />
for (var k = 0; k &lt; entry.link.length; k++) {<br />
if (entry.link[k].rel == &#39;alternate&#39;) {<br />
alturl = entry.link[k].href;<br />
break;<br />
}<br />
}<br />
var li = document.createElement(&#39;li&#39;);<br />
var a = document.createElement(&#39;a&#39;);<br />
a.href = alturl;<br />
if(a.href!=location.href) {<br />
var txt = document.createTextNode(entry.title.$t); <br />
a.appendChild(txt);<br />
li.appendChild(a);<br />
ul.appendChild(li); <br />
}<br />
}<br />
for (var l = 0; l &lt; json.feed.link.length; l++) {<br />
if (json.feed.link[l].rel == &#39;alternate&#39;) {<br />
var raw = json.feed.link[l].href;<br />
var label = raw.substr(homeUrl3.length+13);<br />
var k;<br />
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);<br />
var txt = document.createTextNode(label);<br />
var h = document.createElement(&#39;b&#39;);<br />
h.appendChild(txt);<br />
var div1 = document.createElement(&#39;div&#39;);<br />
div1.appendChild(h);<br />
div1.appendChild(ul);<br />
document.getElementById(&#39;data2007&#39;).appendChild(div1);<br />
}<br />
}<br />
}<br />
function search10(query, label) {<br />
var script = document.createElement(&#39;script&#39;);<br />
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;<br />
+ label +<br />
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);<br />
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);<br />
document.documentElement.firstChild.appendChild(script);<br />
}<br />
var labelArray = new Array();<br />
var numLabel = 0;<br />
<b:loop values='data:posts' var='post'><br />
<b:loop values='data:post.labels' var='label'><br />
textLabel = &quot;<data:label.name/>&quot;;<br />
var test = 0;<br />
for (var i = 0; i &lt; labelArray.length; i++)<br />
if (labelArray[i] == textLabel) test = 1;<br />
if (test == 0) {<br />
labelArray.push(textLabel);<br />
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?<br />
labelArray.length : maxNumberOfLabels;<br />
if (numLabel &lt; maxLabels) {<br />
search10(homeUrl3, textLabel);<br />
numLabel++;<br />
}<br />
}<br />
</b:loop><br />
</b:loop><br />
</script><br />
</div><br />
</div><br />
</b:if></blockquote>3. Thay đổi code màu đỏ theo ý bạn, trong đó :<br />
<ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>maxNumberOfPostsPerLabel : số bài viết tối đa được hiển thị theo mỗi Label</li>
<li>maxNumberOfLabels : số Label được hiển thị</li>
</ul><strong><span style="color: blue;">D. Style 4 : Related Posts v2.0 by Anhvo</span></strong><br />
<strong><span style="color: blue;"></span></strong><strong><span style="color: blue;"><img alt="Related Posts v2.0 by Anhvo" height="265" src="https://lh5.googleusercontent.com/_PAuO_he0N0k/TYQXKgS-_UI/AAAAAAAAEuY/ZpcJ-M64AJc/RelatedPost2.0(1).jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; display: block; float: none; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Related Posts v2.0 by Anhvo" width="258" /></span></strong><br />
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích<br />
2. Tìm trong Template đoạn code tương tự như sau :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div class='post-footer-line post-footer-line-3'/></blockquote>hoặc<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div class='post-footer-line post-footer-line-2'/></blockquote>hoặc<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div class='post-footer-line post-footer-line-1'/></blockquote><div align="left">và chèn bên dưới nó đoạn code này :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></div><br />
<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div><br />
<style type='text/css'><br />
#related-posts-block {<br />
margin:10px 5px 0 -20px;<br />
font-size:12px;<br />
color:#999999;<br />
text-transform:none;<br />
}<br />
#related-posts-block #related-posts-loading-text{<br />
font-size:18px;<br />
color:#FF0033;<br />
text-align:center;<br />
}<br />
#related-posts-block #related-newest-href {<br />
margin:10px 5px;<br />
}<br />
#related-posts-block #related-newest-href ul{<br />
list-style-image:url(https://lh4.googleusercontent.com/_PAuO_he0N0k/TYQYg4JsTdI/AAAAAAAAEu4/qKWg2IDbuxo/arrow.gif<a href="http://i773.photobucket.com/albums/yy17/lethuan_ua/arrow.gif);" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">);</a><br />
}<br />
#related-posts-block #related-newest-href #related-newest-title {<br />
font-size:16px;<br />
margin:10px 5px<br />
}<br />
#related-posts-block #related-newest-href a{<br />
font-size:12px;<br />
font-family:Arial, Helvetica, sans-serif;<br />
color:#000000;<br />
}<br />
#related-posts-block #related-older-href {<br />
margin:10px 5px;<br />
}<br />
#related-posts-block #related-older-href ul{<br />
list-style-image:url(https://lh4.googleusercontent.com/_PAuO_he0N0k/TYQYg4JsTdI/AAAAAAAAEu4/qKWg2IDbuxo/arrow.gif<a href="http://i773.photobucket.com/albums/yy17/lethuan_ua/arrow.gif);" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">);</a><br />
}<br />
#related-posts-block #related-older-href #related-older-title {<br />
font-size:16px;<br />
margin:10px 5px<br />
}<br />
#related-posts-block #related-older-href a{<br />
font-size:12px;<br />
font-family:Arial, Helvetica, sans-serif;<br />
color:#000000;<br />
}<br />
</style><br />
<div id='related-posts-block'><br />
<div id='related-posts-loading-text'>Loading related posts... <img align='absmiddle' src='https://lh5.googleusercontent.com/_PAuO_he0N0k/TYQYgqqO3gI/AAAAAAAAEu0/mhdfPX_a784/25.gif<a href="http://i773.photobucket.com/albums/yy17/lethuan_ua/25.gif'/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">'/</a>></div><br />
<div id='related-newest-href'><div id='related-newest-title'/></div><br />
<div id='related-older-href'><div id='related-older-title'/></div><br />
</div><br />
</b:if></blockquote><div align="left">3. Chèn đoạn code bên dưới lên trước thẻ đóng </body></div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
var showdate = <strong><span style="color: blue;">false</span></strong>;<br />
var max_post = <strong><span style="color: blue;">12</span></strong>;<br />
//]]><br />
</script><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
// Related posts script for Blogger<br />
// version 2.0<br />
// (C) Anhvo<br />
// Homepage: vietwebguide.com<br />
// Please dont remove this copyright when using or redistributing this code<br />
function format(ptime){<br />
return ptime.substr(0,19);<br />
}<br />
function formatdate(d){<br />
var month = [1,2,3,4,5,6,7,8,9,10,11,12];<br />
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];<br />
var m = parseInt(d.substring(5,7),10);<br />
for(var j=0; j<month.length;j++){<br />
if(m==month[j]){<br />
m = month2[j]; break;<br />
}<br />
}<br />
return d.substring(8,10) + "-" + m + "-" + d.substring(0,4);<br />
}<br />
function getRelatedNewestLinks(json){<br />
var entry = json.feed.entry;<br />
if(entry){<br />
for(var k=0;k<entry.length;k++){<br />
var li = document.createElement("li");<br />
if(showdate){<br />
li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + ' - <i>' + formatdate(entry[k].published.$t) +'</i>';<br />
}<br />
else {<br />
li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";<br />
}<br />
if(!checkRelaxLinks("related-newest-href",entry[k].link[4].href)){<br />
document.getElementById("related-newest-href-ul1").appendChild(li);<br />
document.getElementById("related-newest-title").innerHTML = "<img src='https://lh4.googleusercontent.com/_PAuO_he0N0k/TYQYgvMFFLI/AAAAAAAAEuw/I2qzJMD2tHA/1.jpg<a href="http://i773.photobucket.com/albums/yy17/lethuan_ua/1.jpg'" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">'</a>width='347' height='21'>"<br />
}<br />
}<br />
} else {<br />
document.getElementById("related-older-title").innerHTML = "Không có bài nào mới hơn cùng chủ đề";<br />
}<br />
}<br />
function getRelatedOlderLinks(json){<br />
var entry = json.feed.entry;<br />
if(entry){<br />
for(var k=0;k<entry.length;k++){<br />
var li = document.createElement("li");<br />
if(showdate){<br />
li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + ' - <i>' + formatdate(entry[k].published.$t) + '</i>';<br />
}<br />
else {<br />
li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";<br />
}<br />
if(!checkRelaxLinks("related-older-href",entry[k].link[4].href)){<br />
document.getElementById("related-older-href-ul2").appendChild(li);<br />
document.getElementById("related-older-title").innerHTML = "<img src='https://lh5.googleusercontent.com/_PAuO_he0N0k/TYQYgkneo2I/AAAAAAAAEus/ji_rqUm2S7E/2-1.jpg<a href="http://i773.photobucket.com/albums/yy17/lethuan_ua/2-1.jpg'" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">'</a>width='347' height='21'>"<br />
}<br />
}<br />
} else {<br />
document.getElementById("related-older-title").innerHTML = "Không có bài nào cũ hơn cùng chủ đề";<br />
}<br />
document.getElementById("related-posts-loading-text").style.display = "none";<br />
}<br />
function createRelatedJson(min_or_max,cRJ_label,fcn_callback,cRJ_max){<br />
var script = document.createElement("script");<br />
script.src = "/feeds/posts/summary/-/"+escape(cRJ_label)+"?orderby=published&max-results="+cRJ_max+"&published-"+min_or_max+"="+escape(format(document.getElementById("post-timestamp-for-related").innerHTML))+"&alt=json-in-script&callback="+fcn_callback;<br />
script.type = "text/javascript";<br />
document.getElementsByTagName("head")[0].appendChild(script);<br />
}<br />
function checkRelaxLinks(cid,clink){<br />
var check = false;<br />
var u = document.getElementById(cid);<br />
var a = u.getElementsByTagName("a");<br />
for(var i=0;i<a.length;i++){<br />
if(a[i].href==clink){<br />
check = true;<br />
break;<br />
}<br />
}<br />
var url = location.href.split(".html")[0]+".html";<br />
if(clink==url) check = true;<br />
return check;<br />
}<br />
function createRP(){<br />
var postLabel = document.getElementById("post-labels-for-related").innerHTML.split(',');<br />
var max_ = Math.round(max_post/postLabel.length);<br />
var ul1 = document.createElement('ul');<br />
ul1.id = 'related-newest-href-ul1';<br />
document.getElementById('related-newest-href').appendChild(ul1);<br />
for(var i=0; i<postLabel.length;i++){<br />
createRelatedJson("min",postLabel[i],"getRelatedNewestLinks",max_);<br />
}<br />
var ul2 = document.createElement('ul');<br />
ul2.id = 'related-older-href-ul2';<br />
document.getElementById('related-older-href').appendChild(ul2);<br />
for(var j=0; j<postLabel.length;j++){<br />
createRelatedJson("max",postLabel[j],"getRelatedOlderLinks",max_);<br />
}<br />
}<br />
createRP();<br />
//]]><br />
</script><br />
</b:if></blockquote><div align="left">Trong đoạn code trên :</div><ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li><div align="left">var showdate = <strong><span style="color: blue;">false</span></strong>; : nếu muốn hiện thị ngày đăng thì thay <strong><span style="color: blue;">false</span></strong> thành <strong><span style="color: blue;">true</span></strong></div></li>
<li><div align="left">var max_post = <strong><span style="color: blue;">12</span></strong>;<strong><span style="color: blue;"> </span></strong>: số bài viết tối đa hiển thị là 12 bài.</div></li>
</ul><div align="left"><strong><span style="color: red;">* Update : </span></strong>giới thiệu đến các bạn một style khác do Fandung bên phandung.blogspot.com phát triển với hiệu ứng hiển thị mô tả khi rê chuột.</div><strong><span style="color: blue;">E. Style 5 : Related Posts with Description Effect</span></strong><br />
<div align="center"><strong><span style="color: blue;"><img alt="Related Posts with Description Effect" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZGvSr0nGaysfIZPgBb19utwamU842wHfg352hyphenhyphenI_E8rSxgfEt9arX-PXAB1lZKYu_pYBoaCWK7rqiFlS5F8VHO9M5yhuqoOUlq0nV3fOrD0sq8gT9s39MefAS-6Ofu09i1GczHpdHbg/" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Related Posts with Description Effect" width="328" /></span></strong></div>1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích<br />
2. Chèn đoạn code bên dưới vào trước thẻ đóng </head><br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><style type='text/css'><br />
.mota-desc{<br />
position: relative;<br />
z-index: 0;<br />
text-decoration:none;<br />
}<br />
.mota-desc:hover{<br />
background-color: transparent;<br />
z-index: 50;<br />
}<br />
.mota-desc span{<br />
position: absolute;<br />
background-color: #ffffff;<br />
padding: 5px;<br />
left: -1000px;<br />
border: 1px solid #666;<br />
visibility: hidden;<br />
color: black;<br />
text-decoration: none;<br />
}<br />
.mota-desc span img{<br />
border-width: 0;<br />
padding: 2px;<br />
}<br />
.mota-desc:hover span{<br />
padding:5px;<br />
visibility: visible;<br />
top: 20px;<br />
left:70px;<br />
width:250px;<br />
background:#ddd;<br />
text-align: justify;<br />
}<br />
#related-posts {<br />
padding-top:40px;<br />
}<br />
#related-posts a {<br />
text-decoration : none;<br />
}<br />
#related-posts a:hover {<br />
text-decoration : none;<br />
}<br />
</style><br />
<script language='JavaScript'><br />
imgr = new Array();<br />
imgr[0] = &quot;http://farm4.static.flickr.com/3635/3638008086_87c5d93e22_o.gif&quot;;<br />
showRandomImg = true;<br />
<strong>imgwidth</strong> = 60;<br />
<strong>imgheight</strong> = 60;<br />
<strong>fntsize</strong> = 12;<br />
<strong>acolor</strong> = &quot;#555&quot;;<br />
aBold = true;<br />
<strong>motacolor</strong> = &quot;#f00&quot;;<br />
text = &quot;Nhận xét&quot;;<br />
showPostDate = true;<br />
<strong>summaryPost</strong> = 150;<br />
<strong>summaryFontsize</strong> = 12;<br />
<strong>summaryColor</strong> = &quot;#000&quot;;<br />
icon2 = &quot; &#187; &quot;;<br />
<strong>numposts</strong> = 5;<br />
<strong>home_page</strong> = &quot;<strong><span style="color: teal;">http://itechplus.info/</span></strong>&quot;;<br />
</script><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
function removeHtmlTag(strx,chop){<br />
var s = strx.split("<");<br />
for(var i=0;i<s.length;i++){<br />
if(s[i].indexOf(">")!=-1){<br />
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br />
}<br />
}<br />
s = s.join("");<br />
s = s.substring(0,chop-1);<br />
return s;<br />
}<br />
function showrelatedposts(json) {<br />
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;<br />
img = new Array();<br />
for (var i = 0; i < numposts; i++) {<br />
var entry = json.feed.entry[i];<br />
var posttitle = entry.title.$t;<br />
var pcm;<br />
var posturl;<br />
if (i == json.feed.entry.length) break;<br />
for (var k = 0; k < entry.link.length; k++) {<br />
if (entry.link[k].rel == 'alternate') {<br />
posturl = entry.link[k].href;<br />
break;<br />
}<br />
}<br />
for (var k = 0; k < entry.link.length; k++) {<br />
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {<br />
pcm = entry.link[k].title.split(" ")[0];<br />
break;<br />
}<br />
}<br />
if ("content" in entry) {<br />
var postcontent = entry.content.$t;}<br />
else<br />
if ("summary" in entry) {<br />
var postcontent = entry.summary.$t;}<br />
else var postcontent = "";<br />
postdate = entry.published.$t;<br />
if(j>imgr.length-1) j=0;<br />
img[i] = imgr[j];<br />
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);<br />
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;<br />
cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';<br />
var month = [1,2,3,4,5,6,7,8,9,10,11,12];<br />
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];<br />
var day = postdate.split("-")[2].substring(0,2);<br />
var m = postdate.split("-")[1];<br />
var y = postdate.split("-")[0];<br />
for(var u2=0;u2<month.length;u2++){<br />
if(parseInt(m)==month[u2]) {<br />
m = month2[u2] ; break;<br />
}<br />
}<br />
var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";<br />
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;<br />
var trtd = '<img src="http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif"/> <a class="mota-desc" href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'<span><div style="color:'+motacolor+';">'+posttitle+' </div>'+cmtext+ ' ' + daystr + ' <br/><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px; margin-right:4px;" width="'+imgwidth+'" height="'+imgheight+'"/>'+icon2+removeHtmlTag(postcontent,summaryPost)+'...</span></a> <br/>';<br />
document.write(trtd);<br />
j++;<br />
}<br />
}<br />
//]]><br />
</script></blockquote><div align="left">Trong đoạn code trên :</div><ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li><div align="left">imgwidth = 60; , imgheight = 60; : kích thước ảnh thumbnail sẽ hiển thị trong phần mô tả</div></li>
<li>fntsize = 12; : size chữ của tiêu đề bài viết</li>
<li>acolor = "#555"; : màu của tiêu đề bài viết</li>
<li>motacolor = "#f00"; : màu của tiêu đề bài viết trong phần mô tả</li>
<li>summaryPost = 150; : số kí tự hiển thị trong phần mô tả bài viết</li>
<li>summaryFontsize = 12; : size chữ của phần mô tả</li>
<li>summaryColor = "#000"; : màu chữ của phần mô tả</li>
<li>numposts = 5; : số bài viết sẽ hiển thị trong list các bài liên quan của mỗi nhãn. Chú ý: giá trị này phải chỉnh bằng với giá trị max-results=5 ở bước 3.</li>
<li>home_page = "http://itechplus.info/"; : thay bằng địa chỉ URL của blog bạn</li>
</ul><div align="left">3. Tìm trong template dòng code sau :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div align="left"><data:post.body/></div></blockquote><div align="left">và ngay sau nó chèn đoạn code bên dưới :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div id='related-posts'><br />
<font face='Arial' size='3'><b><strong>Bài viết liên quan :</strong> </b></font><br/><br />
<b:loop values='data:post.labels' var='label'><b><strong>Nhãn :</strong> </b><font color='#FF0000'><data:label.name/></font><br/><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?<strong>max-results=5</strong>&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrelatedposts&quot;' type='text/javascript'/><br />
</b:if><br />
</b:loop><br />
</div><br />
</b:if></blockquote><div align="left">Chúc các bạn thành công !</div><div align="right">iTechPlus ( tổng hợp )</div></div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-17926024558370593682011-07-30T09:48:00.001-07:002011-07-30T09:48:24.548-07:00Tiện ích Recent Posts with 3 columns for Blogger<div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><img alt="Recent Posts with 3 columns for Blogger" src="https://lh5.googleusercontent.com/_PAuO_he0N0k/TbzFpnRiSBI/AAAAAAAAIJI/0iVODAw_o7M/itechplus-rc3(1).jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Recent Posts with 3 columns for Blogger" /></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Chắc các bạn cũng thấy trên site iTechPlus.info ở sidebar có một trương mục là <a href="http://www.itechplus.info/search/label/License?&max-results=8" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Bản quyền phần mềm</a>, với bố cục là logo và tên của phần mềm được chia làm 3 cột hiển thị khá gọn gàng và đẹp mắt.</div><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:560e4dda-acdb-4f09-863b-cc30e6a7bfdc" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div></span><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Tiện ích này rất thích hợp cho các trang giới thiệu phần mềm, ebook, quảng cáo sản phẩm,…kết hợp sử dụng tiện ích <a href="http://www.itechplus.info/2011/03/tien-ich-multi-tabbed-cho-blogger.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Multi Tabbed Widget For Blogger</a> sẽ càng làm cho Blog của bạn trông ngăn nắp và chuyên nghiệp hơn.</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><img alt="Recent Posts with 3 columns + Multi Tabbed Widget " src="https://lh4.googleusercontent.com/_PAuO_he0N0k/TbwxQ11kt7I/AAAAAAAAIHs/1rcDGorU5lQ/Multi%20Tabbed%20Widget%20for%20Blogger(1).jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Recent Posts with 3 columns + Multi Tabbed Widget " /><br />
Hình minh họa | <a href="http://demoitech02.blogspot.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Demo</a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Thể theo yêu cầu của bạn <a href="http://ghostvietnam.blogspot.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Mobile</a>, cũng như muốn chia sẻ với các bạn tiện ích hữu ích này, bài viết bên dưới iTechPlus sẽ hướng dẫn các bạn cách tạo widget Recent Posts with 3 columns for Blogger qua 2 bước đơn giản.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">Thực hiện :</span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">1. Vào Thiết kế > Phần tử trang</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">2. Tạo một widget HTML/JavaScript và dán code bên dưới vào :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><style type="text/css"><br />
#itechplus-rc-3cot {width:<strong>320px</strong>;}<br />
table#itechplus-rc-3cot {border:1px solid #ccc;}<br />
#rc-3cot {padding:0 8px;width:30%;}<br />
#rc-3cot p{padding:0;margin:0 0 5px 0;}<br />
#rc-3cot img {margin:8px 0 2px; height:<strong>60px</strong>; width:<strong>50px</strong>; border:1px solid #ccc; padding:1px;}<br />
#rc-3cot a:link {font:normal 12px arial;}<br />
#itechplus-rc-3cot h2 {<br />
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisvQRtpiovKaZbFKMns6OLheoqFn0tim7Zo5qhmrKkJfdRY2BiOrWN6NWFQnf3u4jWghGWF5VYB3bre2RzUaWtye2u_sYCT8tSOZDY8XWWXAXPtYg6oyGQdgDXSJ2FRp8Z6wxzrHA9kGc/) no-repeat top left;<br />
padding:5px 0 14px 15px;<br />
font:bold 13px Verdana;<br />
margin:0px;<br />
color:#fff;<br />
}<br />
</style><br />
<script type="text/javascript"><br />
home_page = "<a href="http://itechplus.info/%22;" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank"><strong>http://itechplus.info/</strong>";</a><br />
label = "<strong>License</strong>";<br />
numposts = <strong>9</strong>;<br />
sumTitle = <strong>24</strong>;<br />
colortitle = <strong>"#333</strong>";<br />
imgr = new Array();<br />
<strong>imgr[0]</strong> = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iGsuV6-tmN6KvetDhUWLPca5gV__BZWLlE5lSb-Ejgih1UtAuNuDsV-xt2e7UuAInAdh80Qo68HTBXCtkGdOgJet6WhiN3F59FaVnw7zNKg0m4UpAw2n_tIuRwSz9MHD5ANKDy9Y1FA/";<br />
showRandomImg = true;<br />
</script><br />
<div id="itechplus-rc-3cot"><br />
<h2>Recent Posts 3 column</h2> <br />
<script src="<a href="https://sites.google.com/site/itechroot/javascripts/itechplus-rc-3cot.txt%22" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">https://sites.google.com/site/itechroot/javascripts/itechplus-rc-3cot.txt"</a> type="text/javascript"></script><br />
<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="<a href="http://www.itechplus.info/search/label/License?&max-results=8%22" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">http://www.itechplus.info/search/label/License?&max-results=8"</a>> Phần mềm bản quyền &#187;</a></p><br />
</div></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Trong đoạn code trên :</div><ul style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>width:<strong>320px</strong>; : chiều rộng của widget</li>
<li>height:<strong>60px</strong>; width:<strong>50px</strong>; : chiều rộng và chiều cao của ảnh đại diện</li>
<li>home_page = "<a href="http://itechplus.info/%22;" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><strong>http://itechplus.info/</strong>";</a> : địa chỉ blog của bạn</li>
<li style="color: black; list-style-type: disc;">label = "<strong>License</strong>"; : tên trương mục muốn hiển thị</li>
<li>numposts = <strong>9</strong>; : số bài viết sẽ hiển thị</li>
<li>sumTitle = <strong>24</strong>; : số ký tự dòng tiêu đề bài đăng</li>
<li>colortitle = <strong>"#333</strong>"; : màu tiêu đề bài đăng</li>
<li><strong>imgr[0] = “…”;</strong> : hình đại diện cho bài viết không có ảnh</li>
</ul><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Các bạn thay đổi cho phù hợp. Hy vọng các bạn sẽ thích tiện ích này.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Chúc các bạn thành công !</div><div><br />
</div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-42778406829891665122011-07-30T09:46:00.001-07:002011-07-30T09:46:38.551-07:00Nhúng Google Custom Search vào Web/Blog<div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><img alt="Nhúng Google Custom Search vào Web/Blog" height="207" src="https://lh6.googleusercontent.com/-z0bs4qdzHX4/TeW8fqSG7MI/AAAAAAAAJvc/UPVb5pAe7PY/google-search.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; display: block; float: none; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" width="276" /></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Search Engine (SE) là một tiện ích rất quan trọng và không thể thiếu đối với bất kỳ một Web/Blog nào, giúp người đọc dễ dàng tìm kiếm nội dung trên đó một cách nhanh chóng.</div><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:358c3e8c-e1d4-4ad0-9e15-fdf74a0d4058" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div></span><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Mặc dù Google đã cung cấp ô tìm kiếm (Search Box) như một tiện ích bổ sung cho Blogspot, nhưng có những hạn chế như khó tùy biến (giao diện, vị trí hiển thị kết quả), dòng quảng cáo “<em>được cung cấp bởi Google</em>” nhìn rất “chướng mắt”.<img alt="he...he..." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXREX2mp7WUPFidVGb52iVfbqR-KvdQTpGBpB1b0-L_9LoT1eklf2cbRIJiVvuAfWkzyjOwfPDbdKt6RLUkvwMAzOGcc9PdWJoE_CMdD9ehN4UKvdjb2CIhElX2Uw5ghy-HklzfAH85xo/" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="he...he..." /></div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJC-IDhLwLFYS8WML-osrfiBIJewhQzpTlx1vVRxJ2q_JxAocKH-gKTulnkJ3GhryYj173qTwlzCBhXMNSQ39jM-QX6La82-MNm9_pBM7cvfXwHAe1VoGdUTiaDb4OvF2LM-SJOVkL08c/" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Trong khi các SE được tích hợp trong các template miễn phí thì dường như hoạt động không mấy hiệu quả, gây nhiều khó khăn cho người sử dụng.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Vậy làm thế nào để tạo một SE có thể khắc phục được tất cả những hạn chế trên ?</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Trong bài viết dưới đây, iTechPlus sẽ từng bước hướng dẫn các bạn nhúng bộ máy tìm kiếm đầy mạnh mẽ của Google vào Web/Blog, sử dụng Google Custom Search Engine.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">1. Tạo và cấu hình Google Custom Search Engine</span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: teal;">Bước 1 : Chọn cách thức tìm kiếm</span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">- Đầu tiên, các bạn truy cập vào địa chỉ sau : <a href="http://www.google.com/cse/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">http://www.google.com/cse/</a> và nhấn vào Creat a Custom Search Engine.</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-chxO3v8s9tscwke-Y6PJRJRsWID2fxn3idlL_MSfoY7LW1KVHRXr-qW2HpH1zEalkDg-8BcH2v5j2VDEOTVeXrBm4hjQ7ocb3CTiwxQpVWcTwvd142DD-PmbpPY_p-9JN-HJE5JnVu4/" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">- Điền vào thông tin yêu cầu như hình dưới</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjToS2FKp8gnPhnB8XboQh1yOQooM0z3eJoNvSHvoeAZSda-BUH-8IW6ofrFkoxNf1EnkdaMw1Vi63fT1aHoHWCPrWNnUlVV-ENNp2dJTLjSoPWJnq6wVvN2IfcLwY0ssri3OCLSNuFP5w/s0/Google%252520Custom%252520Search%252520%2525286%252529.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjToS2FKp8gnPhnB8XboQh1yOQooM0z3eJoNvSHvoeAZSda-BUH-8IW6ofrFkoxNf1EnkdaMw1Vi63fT1aHoHWCPrWNnUlVV-ENNp2dJTLjSoPWJnq6wVvN2IfcLwY0ssri3OCLSNuFP5w/s512/Google%252520Custom%252520Search%252520%2525286%252529.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Trong đó, tại mục Define your search engine các bạn cần lưu ý các tùy chọn :</div><ul style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>Individual pages (trang cá nhân): chỉ tìm kiếm trên một trang cụ thể, nhập vào liên kết có dạng : <em>www.mysite.com/mypage.html</em></li>
<li>Entire sites: tìm kiếm toàn bộ Web/Blog, nhập vào liên kết có dạng: <em>www.mysite.com/*</em></li>
<li>Parts of sites: tìm kiếm chỉ một số phần của trang web, nhập vào liên kết có dạng :<em>www.mysite.com/*keyword*</em></li>
<li>Entire domains: tìm kiếm toàn bộ miền (domain), nhập vào liên kết có dạng : *.mydomain.com</li>
</ul><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">- Tiếp theo, đánh dấu (check) vào dòng I have read and agree to the <a href="http://www.google.com/cse/docs/tos.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Terms of Service</a> và nhấn Next.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: teal;">Bước 2 : Chọn Style và tùy biến việc hiển thị các kết quả tìm kiếm</span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Tại bước này bạn có thể tùy biến giao diện khung tìm kiếm, cũng như màu sắc, font chữ,… của các kết quả hiển thị bằng cách chọn Style và nhấn vào nút Customize để thay đổi.</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGm7PjZrl21TXIbWZeor47lZKvxfoNhIifHRHJ8BBrOU4I-e942WTSzQuDAn4OJTK5zz73-ZLYk8BPNNBRpSkiwsYkHoRiLabgoiWCkHLdTqOvYMZ0f_R6ZVqdeohU4oNrLrCcAadZx60/s0/Google%252520Custom%252520Search%252520%2525287%252529.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGm7PjZrl21TXIbWZeor47lZKvxfoNhIifHRHJ8BBrOU4I-e942WTSzQuDAn4OJTK5zz73-ZLYk8BPNNBRpSkiwsYkHoRiLabgoiWCkHLdTqOvYMZ0f_R6ZVqdeohU4oNrLrCcAadZx60/s912/Google%252520Custom%252520Search%252520%2525287%252529.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></a></div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGsPdeF6Plu_DNJ2gx5VjQ4UkvOWumGomaGUzypLCV1uLwuFCOJd5-sSkFVkRbyaxJG-LaJ-95LjyMIwZgRbxGra-duRagbI1DDClsG4lB5fMK-CRmbTkzE8EfVd3IfYYAIDCa7tLMPSI/s0/Google%252520Custom%252520Search%252520%2525288%252529.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGsPdeF6Plu_DNJ2gx5VjQ4UkvOWumGomaGUzypLCV1uLwuFCOJd5-sSkFVkRbyaxJG-LaJ-95LjyMIwZgRbxGra-duRagbI1DDClsG4lB5fMK-CRmbTkzE8EfVd3IfYYAIDCa7tLMPSI/s800/Google%252520Custom%252520Search%252520%2525288%252529.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Sau khi hoàn tất, nhấn Next để sang bước 3.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: teal;">Bước 3 : Get Code</span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Tại bước này, Google cung cấp cho bạn một đoạn code để nhúng vào bất cứ đâu trên Web/Blog của bạn, bằng cách tạo một widget HTML/JavaScripts và dán vào đoạn code đó.</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFJ6iIZxkiwXvf4_PRANMNin9yB-DAYZrWGSWxkMohpQWX-4ZCKyWYADOcQZm2SNbTOnbKKkrUGXqCXsJqQUXoRW35cyDqSQNzF9CXZDdcl9pTzYyuWgZJdwkwDW4fEFtGLE0mLvBa38/s0/Google%252520Custom%252520Search%252520%2525289%252529.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFJ6iIZxkiwXvf4_PRANMNin9yB-DAYZrWGSWxkMohpQWX-4ZCKyWYADOcQZm2SNbTOnbKKkrUGXqCXsJqQUXoRW35cyDqSQNzF9CXZDdcl9pTzYyuWgZJdwkwDW4fEFtGLE0mLvBa38/s800/Google%252520Custom%252520Search%252520%2525289%252529.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><em>* Lưu ý rằng vị trí chèn code cũng chính là vị trí hiển thị các kết quả tìm kiếm.</em></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">2. Tối ưu Google Custom Search Engine</span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Sau khi hoàn tất các bước trên, bạn đã có thể sử dụng Google Custom Search Engine với tất cả sức mạnh của tiện ích này thông qua một widget HTML/JavaScript.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Tuy nhiên, nếu bạn muốn tối ưu hơn nữa vị trí hiển thị các kết quả tìm kiếm, chọn giao thức website, nhúng <a href="http://www.google.com/support/analytics/bin/answer.py?answer=75817" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Google Analytics Site Search</a>,…thì thủ thuật bên dưới sẽ giúp bạn dễ dàng làm điều đó:</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">- Tại Bước 3 (Get Code), bạn nhấn vào liên kết Look and Feel để đến trang Control panel - Look and feel, hoặc truy cập vào địa chỉ <a href="http://www.google.com/cse/manage/all" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">http://www.google.com/cse/manage/all</a> > Nhấn Control panel > Look and feel</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD7f4mo4eJjM0SF8j1WR75rDGvlunHhb0ztdq02-0qVfskzEOJpLCt6thGS6ywv-ce_XAYQ8YKILItHSLdICuhY0xVoKxNWt_uiaKzobpelO_RT3TbAXN6Lktynsw_BXndXsWFhPogCkg/" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">- Mục Choose a hosting option có 3 tùy chọn :</div><ul style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px; list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>Search element : cung cấp hầu hết các thiết lập để tùy chỉnh CSE</li>
<li>Iframe: cung cấp giới hạn các thiết lập và yêu cầu một trang riêng biệt trên Web/Blog để hiển thị kết quả tìm kiếm.</li>
<li>Google-hosted page: hiển thị kết quả tìm kiếm trên host của Google.</li>
</ul><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbQV_1Jh5Z8iesTzSafIAAyaHzo3enPThIgRO_2IBAhjh92ATTausvt0J3JAHi43JGD3FZ8f6HG4UKk6esYhUI3xCcroPE60qqFNuqsKRxJDO2_a7lZXd5WZUAabsY6Zqt_EDYXlOMMH0/s0/Google%252520Custom%252520Search%252520%2525284%252529.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbQV_1Jh5Z8iesTzSafIAAyaHzo3enPThIgRO_2IBAhjh92ATTausvt0J3JAHi43JGD3FZ8f6HG4UKk6esYhUI3xCcroPE60qqFNuqsKRxJDO2_a7lZXd5WZUAabsY6Zqt_EDYXlOMMH0/s720/Google%252520Custom%252520Search%252520%2525284%252529.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Ở đây chúng ta sẽ xét đến tùy chọn thứ 3 nhằm tạo một trang riêng biệt trên Web/Blog chứa các kết quả tìm kiếm. Đây là một tùy chọn rất hữu ích vì tất cả các thao tác của người đọc đều diễn ra bên trong website của bạn.</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">- Chọn Iframe và nhấn Save & Get Code…</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxGukYwkooqLVCsDS-QhGLsENrN-L_wKV7LT_CZm5Yoh8KVEURzz82lPieK07tZroUAMmwlvr54a-R9NLLQiuq_2AY-6Nb7j6JFIJQk__QRzuCbaMQErpYTmEtc8bNUV4Ym1Ev8du7B10/s0/Google%252520Custom%252520Search%252520%2525285%252529.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxGukYwkooqLVCsDS-QhGLsENrN-L_wKV7LT_CZm5Yoh8KVEURzz82lPieK07tZroUAMmwlvr54a-R9NLLQiuq_2AY-6Nb7j6JFIJQk__QRzuCbaMQErpYTmEtc8bNUV4Ym1Ev8du7B10/s912/Google%252520Custom%252520Search%252520%2525285%252529.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Một trang mới hiện ra, bạn làm theo hướng dẫn như hình dưới</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiQ3MdBLZASe33TLzcWNyIGtGzEwhGi71MaeISoFygZ7Qf6m_AIQJMYZmgx8ib9A_qxNyxYKbDbC0R_d7SRmVnF1QunAZxUvXAXPSswKpxs6anNMI18rImvzLoUrSrRSLjMpP2RWaDCM/s0/Google%252520Custom%252520Search%252520%2525281%252529.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiQ3MdBLZASe33TLzcWNyIGtGzEwhGi71MaeISoFygZ7Qf6m_AIQJMYZmgx8ib9A_qxNyxYKbDbC0R_d7SRmVnF1QunAZxUvXAXPSswKpxs6anNMI18rImvzLoUrSrRSLjMpP2RWaDCM/s512/Google%252520Custom%252520Search%252520%2525281%252529.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><em>* Lưu ý : bạn phải tạo một trang Statics Page trước đó để get link đến trang này</em></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Sau khi hoàn tất các bước trên, Search box của bạn sẽ có dạng như sau:</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT0NZqgopMrIN0FvURGFEu3mFu4V58eqbKHSIrNqbwrVmVek3FqLCcZuCKWeYNN7BqnG1EnSlEwAGX478Gjr8aorUrD-rso39mnRKhLquJDOUoTFHIwlZFhekpc3uzgrWfO4tBz36VAYY/" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">còn đây là kết quả tìm kiếm được hiển thị trên trang Statics Page</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5mxuyXFli1gLcWj722EvZiCcD34K3WmLmQWFSA4xDcFThC4_BGV-RjyIzbqnX-QwszyqfgzApstTBtl4nXs81Anr1jTf_EDDBlhVhNv-oOU_hs6U3TGd3zcWlnTCXlRiKDH7g8UfSW8c/s0/Google%252520Custom%252520Search%252520%2525282%252529.jpg" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5mxuyXFli1gLcWj722EvZiCcD34K3WmLmQWFSA4xDcFThC4_BGV-RjyIzbqnX-QwszyqfgzApstTBtl4nXs81Anr1jTf_EDDBlhVhNv-oOU_hs6U3TGd3zcWlnTCXlRiKDH7g8UfSW8c/s512/Google%252520Custom%252520Search%252520%2525282%252529.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></a></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">3. Tùy chỉnh giao diện Search Box và Search Iframe</span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Để tùy chỉnh giao diện Search Box và Search Iframe, các bạn làm như sau :</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">- Chèn đoạn code CSS bên dưới vào trước thẻ đóng </b:skin></div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">#cse-search-results iframe {<br />
width:<strong><span style="color: teal;">600</span></strong>px;<br />
}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">#cse-search-box{<br />
background:#069;<br />
display:inline;<br />
float:right;<br />
overflow:hidden;<br />
padding:8px;<br />
}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">#cse-search-box input.box {<br />
display:inline;<br />
font-size:11px;<br />
height:<strong>16</strong>px;<br />
width:<strong>200</strong>px;<br />
float:left;<br />
margin:0;<br />
padding-left:10px;<br />
}</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">#cse-search-box input.btn {<br />
line-height:1.8em;<br />
display:inline;<br />
float:right;<br />
font-size:11px;<br />
margin:0 0 0 8px;<br />
border:none;<br />
cursor:pointer;<br />
color:#fff;<br />
background:#d00;<br />
}</div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">- Tiếp tục, thay 2 dòng code trong widget HTML/JavaScript có dạng :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><input type="text" name="q" size="31" /></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><input type="submit" name="sa" value="Search" /></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">thành</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; color: #333333; display: block; font-family: Verdana, Geneva, sans-serif; font-size: 13px; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><input type="text" name="q" size="31" class="box"/></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><input type="submit" name="sa" value="Search" class="btn"/></div></blockquote><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Và đây là kết quả :</div><div align="center" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><img alt="Nhúng Google Custom Search vào Web/Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOgPz4exuumPN24SyCA486v2bEC9vgJ14Ew4Mk6dEnAQ2X-20FrGSq-0Bzm-jgVfLwKTMGpjtkk2STsx7_3ozflH43KCoAdNyh1rJOKxffGyRTfGOohjTg93makSi2wBjCpHQ5Axs_J54/" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Nhúng Google Custom Search vào Web/Blog" /></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Chúc các bạn thành công !</div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-38734246974303982062011-07-30T09:32:00.000-07:002011-07-30T09:32:43.819-07:00Style mới cho tiện ích VNE Recent Posts<div class="post hentry" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; margin-bottom: 0.5em; margin-left: 0px; margin-right: 0px; margin-top: 0.5em; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><div class="post-body entry-content" id="post-body-3777866397569947013" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;">Ở bài viết trước, iTechPlus đã giới thiệu đến bạn đọc tiện ích <a href="http://www.itechplus.info/2011/04/magazine-recent-posts-cho-blogger.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Recent Posts mang phong cách VNExpress</a>, nằm trong bộ sưu tập những Style Recent Posts mang phong cách báo chí.<br />
<div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:571d28a2-678a-4df5-9bcd-47df34093e79" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div>Nhận thấy đây là một style rất hay và chính iTechPlus cũng từng sử dụng nó cho một Blog cá nhân của mình với một số tùy chỉnh. Và cũng theo yêu cầu của một số bạn là làm sao cho tiện ích trông bắt mắt hơn, thân thiện hơn với các SE, nên hôm nay iTechPlus sẽ chia sẻ đến các bạn một “biến thể” của style này.<br />
<strong><span style="color: blue;">Những nét mới :</span></strong><br />
<ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>Giao diện : bắt hơn so với <a href="http://www.itechplus.info/2011/04/magazine-recent-posts-cho-blogger.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">style cũ</a> <img alt="Yêu quá đi...." src="https://lh3.googleusercontent.com/_PAuO_he0N0k/TY3orfUQQTI/AAAAAAAAFPI/mBtdIHG1Utg/35.gif" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Yêu quá đi...." /></li>
<li>Khả năng SEO : thân thiện hơn với các SE do chèn thêm thuộc tính Alternate cho Images</li>
<li>Cài đặt đơn giản hơn</li>
<li>Thêm liên kết “xem thêm” kèm hình ảnh nhỏ xinh <img alt="He...he...he..." src="https://lh6.googleusercontent.com/_PAuO_he0N0k/TY3ooWsPGAI/AAAAAAAAFN4/SS8CBA2EPOo/14.gif" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="He...he...he..." /></li>
</ul><strong><span style="color: teal;">Hình minh họa :</span></strong><br />
<div align="center"><strong><span style="color: teal;"><img alt="Style cũ của tiện ích VNE Recent Posts" src="https://lh5.googleusercontent.com/_PAuO_he0N0k/TZlp9c0e5UI/AAAAAAAAGBE/oAtxjXYXekA/rc-vnexpress.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Style cũ của tiện ích VNE Recent Posts" /> </span></strong>Style cũ</div><br />
<div align="center"><img alt="Style mới của tiện ích VNE Recent Posts" src="https://lh4.googleusercontent.com/_PAuO_he0N0k/TarC9c0oYeI/AAAAAAAAHOY/wl4c5VQ474I/VNE-Recent-Posts-New-Style.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Style mới của tiện ích VNE Recent Posts" /><br />
Style mới</div><div align="left"><strong><span style="color: blue;">Thực hiện :</span></strong></div>Rất đơn giản, bạn chỉ cần tạo một widget HTML\JavaScript và chèn vào đó đoạn code bên dưới :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><style type="text/css"><br />
.fl{float:left}<br />
.fr{float:right}<br />
.folder{width:516px; margin-bottom:8px; overflow:hidden; line-height:1.5em;font:normal 12px arial;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}<br />
.folder-title{height:26px; border-bottom:1px solid #eee; overflow:hidden; background:url(<a href="http://goo.gl/CyQBL)" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">http://goo.gl/CyQBL)</a>repeat-x}<br />
.folder-active{height:24px; padding:4px 10px; background:url(<a href="http://goo.gl/EgxmY)" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">http://goo.gl/EgxmY)</a> repeat-x; font-weight:bold}<br />
.link-folder:link, .link-folder:visited{color:#fff}<br />
.subfolder{height:24px; padding:5px 5px 0 15px; background:url(<a href="http://goo.gl/Z29yN)" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">http://goo.gl/Z29yN)</a> no-repeat}<br />
.folder-content{width:500px; background:#fff url(<a href="http://goo.gl/qy9iZ)" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">http://goo.gl/qy9iZ)</a> repeat-x left bottom; padding:10px 6px 2px 10px; overflow:hidden}<br />
.folder-content p{margin:0}<br />
.folder-content ul{list-style:none; margin:0; padding:0}<br />
.folder-content li{padding:0 0 4px 6px; background:url(<a href="http://goo.gl/4OvNo)" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">http://goo.gl/4OvNo)</a> no-repeat 0 8px}<br />
.folder-topnews{width:312px; padding-right:10px}<br />
.folder-othernews{width:168px}<br />
.other-folder{margin:0}<br />
.img-subject{height:85px; width:110px; border:1px solid #a5a5a5; margin-right:8px}<br />
.img-other{width:60px; height:50px; border:1px solid #a5a5a5; margin:0 5px 4px 0}<br />
.xemthem{float:right; display:block; margin:0; padding:5px}<br />
</style></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><div class="folder"><div class="folder-title"><div class="folder-active fl"><br />
<a class="link-folder" href="<strong>http://itechplus.info/search/label/<em>OSystem</em></strong>?&max-results=8"><strong><span style="color: blue;">Hệ điều hành</span></strong></a></div><br />
<div class="subfolder fl"><br />
<a class="link-subfolder" href="<strong>http://itechplus.info/search/label/<em>OSystemK</em></strong>?&max-results=8"><strong><span style="color: blue;">Kiến thức</span></strong></a> | <a class="link-subfolder" href="<strong>http://itechplus.info/search/label/<em>OSystemT</em></strong>?&max-results=8"><strong><span style="color: blue;">Thủ thuật</span></strong></a> | <a class="link-subfolder" href="<strong>http://www.itechplus.info/search/label/Download</strong>?&max-results=8"><strong><span style="color: blue;">Công cụ</span></strong></a> | <a class="link-subfolder" href="<strong>http://www.itechplus.info/p/question.html</strong>"><strong><span style="color: blue;">Hỏi - Đáp</span></strong></a></div></div><div class="folder-content" id="tdHomeFolder2"></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script language='javascript'><br />
imgr = new Array();<br />
showRandomImg = true;<br />
summaryPost = 230;<br />
numposts2 = 5;<br />
homepage = "<a href="http://itechplus.info/%22;" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><strong>http://itechplus.info/</strong>";</a><br />
label = "<strong><span style="color: teal;">OSystem</span></strong>";<br />
</script></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><script src="<a href="https://sites.google.com/site/itechroot/javascripts/VnE-rc-newstyle.txt%22" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">https://sites.google.com/site/itechroot/javascripts/VnE-rc-newstyle.txt"</a> type="text/javascript"></script><br />
</div></div></div></blockquote>Thay các dòng code in đậm cho phù hợp với Blog của bạn. Chi tiết bố cục và ý nghĩa các thông số các bạn xem lại bài viết cũ <a href="http://www.itechplus.info/2011/04/magazine-recent-posts-cho-blogger.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">tại đây</a>.<br />
Chúc các bạn thành công !<br />
<div align="right"><br />
</div></div></div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-43783371552722531482011-07-30T09:29:00.000-07:002011-07-30T09:29:07.077-07:00Tien ich Recent Posts giống iTechPlus.info<div class="post-body entry-content" id="post-body-2562621573878896666" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;">Recent Posts là tiện ích giúp hiển thị những bài viết mới nhất theo từng trương mục hoặc cho toàn bộ Blog.<br />
<div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:6b2cee2d-ff7d-43e5-907c-48e0ecf8c2d3" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div>Đây là tiện ích được sử dụng rất phổ biến trên các WebBlog nhằm “hô biến” giao diện đơn giản thuần túy của Blogspot thành giao diện mang phong cách báo chí ( Magazine Template ), giúp Blog bạn trở nên “Pro” hơn trong mắt độc giả.<br />
Tuy nhiên, việc ứng dụng nó cũng gây ra một số “tác dụng phụ” như : ảnh hưởng đến tốc độ load Blog, không tốt cho SEO,…do phải sử dụng JavaScript để lấy dữ liệu từ nguồn cấp Feed. Vì vậy, bạn hãy suy nghĩ thật kỹ trước khi áp dụng nó cho Blog của mình.<br />
Và bắt đầu từ bài viết này, iTechPlus sẽ giới thiệu đến các bạn một số Style để các bạn lựa chọn, bắt đầu với tiện ích Recent Posts giống iTechPlus.info.<br />
<br />
<div align="center"><img alt="Tiện ích Recent Posts giống iTechPlus.info" src="https://lh6.googleusercontent.com/_PAuO_he0N0k/TYoFhUNmoeI/AAAAAAAAFBA/p3y-47WEzYo/itechplus-rc.jpg" style="border-bottom-style: none; border-color: initial; border-left-style: none; border-right-style: none; border-top-style: none; border-width: initial; display: block; float: none; margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Tiện ích Recent Posts giống iTechPlus.info" /><br />
Hình minh họa</div><strong><span style="color: blue;">* Cách thực hiện :</span></strong><br />
1. Vào Thiết kế > Phần tử trang<br />
2. Tạo một widget HTML\JavaScript và dán vào đoạn code bên dưới :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><style type="text/css"><br />
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}<br />
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}<br />
.itechplus-rc ul{list-style:none;margin:0;padding:0}<br />
.itechplus-rc li{text-indent:0;background:url(<em><span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLMkB4PsiUXFQrvv7Ue95dO2NZU-5YstZdqWbn9n1yFZQQxK8gr0_dIxvtVXHHWoo3l-Du7SM9V8L18pHOOaRCVHEvRpE0f4c2NJZAkGwBX3LmwjErz3MsjQ9ZHq80o86CO6buio7_6Pwx/</span></em>) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}<br />
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff}<br />
</style><br />
<div id="itechplus-rc" class="itechplus-rc"><br />
<h2><a href="<strong><span style="color: teal;">http://www.itechplus.info/search/label/Office?&amp;max-results=8</span></strong>"><strong>Tin học văn phòng</strong></a></h2><br />
<script type='text/javascript'><br />
<strong><span style="color: teal;">numposts = 5; list1 = 1; sumPosts = 168;</span></strong><br />
</script><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
function removeHtmlTag(a, b) {<br />
var s = a.split("<");<br />
for (var i = 0; i < s.length; i++) {<br />
if (s[i].indexOf(">") != -1) {<br />
s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length)<br />
}<br />
}<br />
s = s.join("");<br />
s = s.substring(0, b - 1);<br />
return s<br />
}<br />
function showrecentposts(e) {<br />
img = new Array();<br />
for (var i = 0; i < numposts; i++) {<br />
var f = e.feed.entry[i];<br />
var g = f.title.$t;<br />
var h;<br />
if (i == e.feed.entry.length) break;<br />
for (var k = 0; k < f.link.length; k++) {<br />
if (f.link[k].rel == 'alternate') {<br />
h = f.link[k].href;<br />
break<br />
}<br />
}<br />
if ("content" in f) {<br />
var j = f.content.$t<br />
} else if ("summary" in f) {<br />
var j = f.summary.$t<br />
} else<br />
var j = "";<br />
s = j;<br />
a = s.indexOf("<img");<br />
b = s.indexOf("src=\"", a);<br />
c = s.indexOf("\"", b + 5);<br />
d = s.substr(b + 5, c - b - 5);<br />
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) img[i] = d;<br />
var l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g + '</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';<br />
var m = '<li><a href="' + h + '">' + g + '</a></li>';<br />
if ((i >= 0) && (i < list1)) {<br />
var n = l<br />
}<br />
if (i == list1) {<br />
var n = '<div class="itechplus-rc"><ul>' + m<br />
}<br />
if ((i > list1) && (i < numposts - 1)) {<br />
var n = m<br />
}<br />
if (i == numposts - 1) {<br />
var n = m + '</ul></div>'<br />
}<br />
document.write(n)<br />
}<br />
}<br />
document.write("<script src=\"<strong><span style="color: teal;">http://www.itechplus.info/feeds/posts/default/-/Office</span></strong>?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");<br />
//]]><br />
</script><br />
</div></blockquote>* Trong đoạn code trên :<br />
<ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>numposts = 5; : tổng số bài viết được hiển thị</li>
<li>list1 = 1; : số bài viết hiển thị kèm ảnh thumbnail</li>
<li>sumPosts = 168; : số ký tự mô tả ( summary )</li>
</ul>* Nếu bạn muốn hiển thị bài viết mới nhất cho cả Blog thì thay thế đoạn code sau :<br />
<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;">document.write("<script src=\"http://www.itechplus.info/feeds/posts/default/-/Office?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</blockquote><br />
thành<br />
<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;">document.write("<script src=\"http://www.itechplus.info/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</blockquote><br />
3. Save and Done.<br />
<b><span style="color: red;">* Update :</span></b> một số bạn yêu cầu chèn thêm ảnh đại diện khi bài viết không có ảnh và tùy chọn để thay đổi màu chữ tiêu đề. Để làm điều này, bạn cần thay đoạn code chính của thủ thuật bằng đoạn code bên dưới :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><style type="text/css"> <br />
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff} <br />
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-size:12px;font-weight:bold} <br />
.itechplus-rc ul{list-style:none;margin:0;padding:0} <br />
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLMkB4PsiUXFQrvv7Ue95dO2NZU-5YstZdqWbn9n1yFZQQxK8gr0_dIxvtVXHHWoo3l-Du7SM9V8L18pHOOaRCVHEvRpE0f4c2NJZAkGwBX3LmwjErz3MsjQ9ZHq80o86CO6buio7_6Pwx/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px} <br />
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff} <br />
</style><br />
<div id="itechplus-rc" class="itechplus-rc"> <br />
<h2><a href="http://www.itechplus.info/search/label/Office?&amp;max-results=8">Tin học văn phòng</a></h2><br />
<script type='text/javascript'> <br />
numposts = 5; <br />
list1 = 1; <br />
sumPosts = 168; <br />
<b>maintitle = "#f0c"; </b><b>subtitle = "#39c"; </b></script> <br />
<script type='text/javascript'> <br />
//<![CDATA[ <br />
function removeHtmlTag(a, b) { <br />
var s = a.split("<"); <br />
for (var i = 0; i < s.length; i++) { <br />
if (s[i].indexOf(">") != -1) { <br />
s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length) <br />
} <br />
} <br />
s = s.join(""); <br />
s = s.substring(0, b - 1); <br />
return s <br />
} <br />
function showrecentposts(e) { <br />
img = new Array(); <br />
for (var i = 0; i < numposts; i++) { <br />
var f = e.feed.entry[i]; <br />
var g = f.title.$t; <br />
var h; <br />
if (i == e.feed.entry.length) break; <br />
for (var k = 0; k < f.link.length; k++) { <br />
if (f.link[k].rel == 'alternate') { <br />
h = f.link[k].href; <br />
break <br />
} <br />
} <br />
if ("content" in f) { <br />
var j = f.content.$t <br />
} else if ("summary" in f) { <br />
var j = f.summary.$t <br />
} else <br />
var j = ""; <br />
s = j; <br />
a = s.indexOf("<img"); <br />
b = s.indexOf("src=\"", a); <br />
c = s.indexOf("\"", b + 5); <br />
d = s.substr(b + 5, c - b - 5); <br />
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {img[i] = d;} else {img[i]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iGsuV6-tmN6KvetDhUWLPca5gV__BZWLlE5lSb-Ejgih1UtAuNuDsV-xt2e7UuAInAdh80Qo68HTBXCtkGdOgJet6WhiN3F59FaVnw7zNKg0m4UpAw2n_tIuRwSz9MHD5ANKDy9Y1FA/";} <br />
var l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '" style="color:'+maintitle+'"><b>' + g + '</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>'; <br />
var m = '<li><a href="' + h + '" style="color:'+subtitle+'">' + g + '</a></li>'; <br />
if ((i >= 0) && (i < list1)) { <br />
var n = l <br />
} <br />
if (i == list1) { <br />
var n = '<div class="itechplus-rc"><ul>' + m <br />
} <br />
if ((i > list1) && (i < numposts - 1)) { <br />
var n = m <br />
} <br />
if (i == numposts - 1) { <br />
var n = m + '</ul></div>' <br />
} <br />
document.write(n) <br />
} <br />
} <br />
document.write("<script src=\"http://www.itechplus.info/feeds/posts/default/-/Office?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); <br />
//]]> <br />
</script> <br />
</div></blockquote>Trong đó :<br />
<ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li><b>maintitle = "#f0c";</b> : màu tiêu đề bài viết đầu tiên ( có ảnh và trích dẫn )</li>
<li><b>subtitle = "#39c"; </b>: màu tiêu đề các bài viết tiếp theo</li>
</ul>Các bạn có thể xem lại bài viết <a href="http://www.itechplus.info/2011/01/bang-ma-mau-danh-cho-blogger.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Bảng mã màu dành cho Blogger</a> để chọn màu phù hợp. Ngoài ra, iTechPlus cũng đã có bài viết hướng dẫn rút gọn tiêu đề đối với những bài viết có tiêu đề quá dài, cũng như hiển thị đầy đủ mỗi khi rê chuột vào, các bạn có thể xem lại <a href="http://www.itechplus.info/2011/03/rut-ngan-tieu-e-tien-ich-recent-posts.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">tại đây.</a><br />
<em>* Lưu ý : đoạn code trên có sử dụng một số hình ảnh mà iTechPlus.info sử dụng. Vì vậy, để tránh ảnh hưởng đến site này và blog bạn, vui lòng download về và upload lên host riêng để sử dụng.</em><br />
Rất đơn giản phải không các bạn !<br />
Chúc các bạn thành công !<br />
<div align="right"><br />
</div></div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-46498009822571806352011-07-30T08:39:00.000-07:002011-07-30T08:39:05.752-07:00Tien ich Magazine Recent Posts cho Blogger<div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Tiếp tục chủ đề tạo tiện ích Recent Posts cho Blogger, bài viết này iTechPlus sẽ tổng hợp những style Recent Posts đẹp mắt mang phong cách báo chí, được phát triển bởi <a href="http://fandung.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Fandung</a> – một blogger trẻ tiềm năng trong giới Blogger Việt Nam.</div><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><div class="wlWriterEditableSmartContent" id="scid:0a7b020c-2e51-4379-b078-a5387e1e26be:c75532ca-c7e2-4498-96b2-0eceaacec226" style="display: inline; float: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="" name="more" style="outline-color: initial; outline-style: none; outline-width: initial;"></a></div></span><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">Do Fandung phát triển nhiều Style cho tiện ích Magazine Recent Post, nên iTechPlus sẽ giới thiệu từng Style một, update thường xuyên ( cho đến hết ), và nếu các bạn biết thêm một style nào khác ( của tác giả khác ) vui lòng để lại comment bên dưới để chúng ta cùng trao đổi và học hỏi nhé !</div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><span style="color: blue;">Style 1 : <a href="http://www.fandung.com/2009/07/style-moi-cho-tien-ich-recent-post-theo.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Recent Post theo Label ở Homepage</a></span></strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><br />
</strong></div><div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><br />
</strong></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDM80weyY3C7fEG5-rTPEw6emPYKHLSeUhVbR6Xzi1OLHA8XgM5cYh9ozSGzbZ8PYfrC4g_4xvQwyMqmaeKr2Gw96MtBOZsLjq_u1K1lis_sO7o9bHgOoCP7yNXLBW2KlWd8yJqhr_630u/s1600/vne-recentpost-layout.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDM80weyY3C7fEG5-rTPEw6emPYKHLSeUhVbR6Xzi1OLHA8XgM5cYh9ozSGzbZ8PYfrC4g_4xvQwyMqmaeKr2Gw96MtBOZsLjq_u1K1lis_sO7o9bHgOoCP7yNXLBW2KlWd8yJqhr_630u/s320/vne-recentpost-layout.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvvh4BoxdzwSjgqM7LdWF88R_dfDHD6h2aacayUv98iiRxTMqH_HrFuRd3HaQ0Qv0KIT5xUHZyl2vRfuPmGxgDcgxnboTOQMDZ7Q0SboepL3Bmm9b_RYEMp__FD7me1_z5dPY-FUYVXm3/s1600/vne-recentpost.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvvh4BoxdzwSjgqM7LdWF88R_dfDHD6h2aacayUv98iiRxTMqH_HrFuRd3HaQ0Qv0KIT5xUHZyl2vRfuPmGxgDcgxnboTOQMDZ7Q0SboepL3Bmm9b_RYEMp__FD7me1_z5dPY-FUYVXm3/s320/vne-recentpost.jpg" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"></span></div><div align="center">Hình minh họa | Xem <a href="http://demoitech02.blogspot.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">DEMO</a></div><div align="left"><strong><span style="color: teal;"></span></strong></div><div align="left"><strong><span style="color: teal;">Thực hiện :</span></strong></div><div align="left">1. Vào Thiết kế > Phần tử trang</div><div align="left">2. Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><style type="text/css"><br />
<strong><span style="color: teal;">#cotent-news</span></strong> {<br />
border:#999 solid 1px;<br />
<strong>width: 650px; </strong>}<br />
<strong><span style="color: teal;">#top-news</span></strong> {<br />
<strong>width: 440px;<br />
height:166px; </strong>padding:5px;<br />
border:#bbb solid 1px;<br />
background:#eee;<br />
font-size:12px;<br />
}<br />
<strong><span style="color: teal;">#bottom-news</span></strong> {<br />
<strong>width: 444px; </strong>padding:5px;<br />
}<br />
<strong><span style="color: teal;">#bottom-news-item</span></strong> {<br />
<strong>width: 106px;</strong><br />
margin-right:5px;<br />
float:left;<br />
}<br />
<strong><span style="color: teal;">#left-news</span></strong> {<br />
padding:5px;<br />
border-left:2px dotted #ccc;<br />
}<br />
</style><br />
<script language="JavaScript"><br />
imgr = new Array();<br />
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";<br />
imgico= "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif";<br />
showRandomImg = true;<br />
<strong>topwidth = 160;<br />
topheight = 160; </strong><br />
<strong>botheight = 100;<br />
botwidth = 100;</strong><br />
fntsize = 12;<br />
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"<br />
acolor = "#555";<br />
cmcolor = "#555";<br />
topcolor = "#f00";<br />
aBold = true;<br />
text = "comments";<br />
showPostDate = true;<br />
summaryPost = <strong>250</strong>;<br />
summaryFontsize = 12;<br />
summaryColor = "#000";<br />
<strong>botnum = 4;</strong><br />
<strong>numposts = 14;</strong><br />
<strong>label = "Hardware"; </strong>home_page = "<a href="http://www.itechplus.info/%22;" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><strong>http://www.itechplus.info/</strong>";</a><br />
</script><br />
<script src="https://sites.google.com/site/itechroot/javascripts/vne-recent-adv.txt" type="text/javascript"></script></blockquote>* Trong đoạn code trên :<br />
<ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li><strong>width: 650px; : </strong>chiều rộng của widget</li>
<li style="color: black; list-style-type: disc;"><strong>botnum = 4; : </strong>số bài viết hiển thị ở class <em>bottom-news</em></li>
<li><strong>numposts = 14; : </strong>số bài viết hiển thị ở class <em>left-news</em></li>
<li><strong>label = "Hardware"; :</strong> nhãn/ trương mục ( Label ) sẽ được hiển thị</li>
</ul>Các bạn có thể xem hình minh họa bên dưới để hiểu rõ layout của widget :<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8cQizJNieYNTsLJJo4Uya-MpwOP-yjzLbR-2q_xhwdhKVDdrx1UI3ALvxvBkBGn-wKP12bG9ao7_qoDvmS2x2x97kYaiVWbtrElWT6JtMm4-SQAJdvHPjmIAgNLstTFhQgaP-9t73GG4P/s1600/rc-vnexpress+%25281%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8cQizJNieYNTsLJJo4Uya-MpwOP-yjzLbR-2q_xhwdhKVDdrx1UI3ALvxvBkBGn-wKP12bG9ao7_qoDvmS2x2x97kYaiVWbtrElWT6JtMm4-SQAJdvHPjmIAgNLstTFhQgaP-9t73GG4P/s320/rc-vnexpress+%25281%2529.jpg" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24nZHTdViCxj3-2tWr0MNkaDDP2VMwBDniyL18rRvf8EEMYM6BcPSE-91nzEZZdh6Nhj4bl1zmULOINj5UK3GPAfRxxPEKDQmkfAXAIdPzEAN_j_0En8ywB4wzV7Vo-eLLQ97uDtSqVON/s1600/rc-vnexpress.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24nZHTdViCxj3-2tWr0MNkaDDP2VMwBDniyL18rRvf8EEMYM6BcPSE-91nzEZZdh6Nhj4bl1zmULOINj5UK3GPAfRxxPEKDQmkfAXAIdPzEAN_j_0En8ywB4wzV7Vo-eLLQ97uDtSqVON/s320/rc-vnexpress.jpg" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><span class="Apple-style-span" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;">* Cách tính chiều rộng : </span></div><ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li><strong>bottom-news</strong> = 4x(<strong>botwidth</strong> + 2px + 4px) + 4x5px = 444px</li>
<li><strong>bottom-news-item</strong> =<strong> botwidth</strong> + 2px + 4px = 106px</li>
</ul><em><strong><span style="color: teal;">* Nếu bạn muốn widget hiển thị những bài mới nhất trên blog </span></strong></em>thì thay code<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;">https://sites.google.com/site/itechroot/javascripts/vne-recent-adv.txt</blockquote>thành<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><a href="https://sites.google.com/site/itechroot/javascripts/vne-recent-adv-all-posts.txt" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">https://sites.google.com/site/itechroot/javascripts/vne-recent-adv-all-posts.txt</a></blockquote><strong><span style="color: blue;">Style 2 : <a href="http://www.fandung.com/2009/08/pro-tabnews-mang-phong-cach-cua.html" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">Recent Post mang phong cách VNExpress</a></span></strong><br />
<div align="center"><img alt="Recent Post mang phong cách VNExpress" height="188" src="https://lh5.googleusercontent.com/_PAuO_he0N0k/TZlp9c0e5UI/AAAAAAAAGBE/oAtxjXYXekA/rc-vnexpress.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Recent Post mang phong cách VNExpress" width="424" /></div><div align="center">Hình minh họa | Xem <a href="http://demoitech02.blogspot.com/" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;" target="_blank">DEMO</a></div><div align="left"><strong><span style="color: teal;">Thực hiện :</span></strong></div><div align="left">1. Vào Thiết kế > Chình sửa HTML</div><div align="left">2. Chèn đoạn code bên dưới vào trước thẻ đóng </head></div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><style type='text/css'><br />
.fl {float:left;}<br />
.fr {float:right;}<br />
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}<br />
.folder-content {background-color:#ffffff;}<br />
.other-folder {width:100%;}<br />
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}<br />
.folder, .folder-title, .folder-bottom {<strong>width:500px;</strong>}<br />
.folder-bottom {background:#f5f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_vne.gif&#39;) repeat-x 0px -73px;}<br />
.folder {margin-bottom:5px;}<br />
.folder-title {height: 21px;}<br />
.folder-active, .subfolder {height: 17px;}<br />
.folder-title {font:11px arial; color:#868d9d; background:#f5f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_repeat.gif&#39;) repeat-x scroll 0px 0px;}<br />
.folder-active {padding: 2px 9px; background:#f5f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_repeat.gif&#39;) repeat-x 0px -23px;}<br />
.folder-content {<strong>width:478px;</strong> padding:5px 10px 5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}<br />
.folder-bottom {height:5px;}<br />
.folder-topnews {<strong>width:298px;</strong> padding-right:20px;}<br />
.folder-othernews {<strong>width:160px;</strong>}<br />
.folder-news {<strong>width:478px;</strong> padding:0px 11px; margin-bottom:10px;}<br />
.folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}<br />
.subfolder {padding: 3px 5px 1px;}<br />
.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}<br />
.link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}<br />
.link-title {font:bold 13px arial; text-decoration:none; color:#000000;}<br />
.link-title:visited {color:#004080;}<br />
.link-othernews {text-decoration:none; color:#000000;font:12px arial;}<br />
.link-othernews:visited {color:#004080;}<br />
.link-othernews:hover {text-decoration:underline;}<br />
.folder-content p{margin-top:0px;margin-bottom:4px;}<br />
.folder-content ul {list-style:none;margin:0;padding:0;}<br />
.folder-content li {<br />
padding-left:6px;<br />
background-image:url(&#39;http://vnexpress.net/Images/Background/black-square.gif&#39;); background-repeat:no-repeat;<br />
background-position: 0 7px;<br />
}<br />
.other-folder {margin-bottom:5px;}<br />
.img-subject {<strong>height:100px;</strong> border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}<br />
.img-other {<strong>width:53px; height:53px;</strong> border:1px solid #a5a5a5; margin-right:5px;}<br />
.folder-activeleft{width:2px; height:21px; background:#f4f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_corner.gif&#39;) no-repeat -5px -0px;}<br />
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_corner.gif&#39;) no-repeat -5px -23px;}<br />
.Lead1 { font-family: &#39;Arial&#39;; font-size: 11px; color: #919090; font-weight: bold }<br />
</style><br />
&lt;script type=&#39;text/javascript&#39;&gt;<br />
rdlabels = new Array(3);<br />
//Nhãn thứ 1 : Kiến thức căn bản<br />
rdlabels[<strong>0</strong>] = &quot;\&lt;script\&gt;label = &#39;<strong>OSystemK</strong>&#39;\;\&lt;/script\&gt;&quot;;<br />
//Nhãn thứ 2 : Thủ thuật<br />
rdlabels[<strong>1</strong>] = &quot;\&lt;script\&gt;label = &#39;<strong>OSystemT</strong>&#39;\;\&lt;/script\&gt;&quot;;<br />
//Nhãn thứ 3 : Phần mềm<br />
rdlabels[<strong>2</strong>] = &quot;\&lt;script\&gt;label = &#39;<strong>Download</strong>&#39;\;\&lt;/script\&gt;&quot;;<br />
//Nhãn thứ 4 : Phần mềm bản quyền<br />
rdlabels[<strong>3</strong>] = &quot;\&lt;script\&gt;label = &#39;<strong>License</strong>&#39;\;\&lt;/script\&gt;&quot;;<br />
index = Math.floor(Math.random() * rdlabels.length);<br />
&lt;/script&gt;</blockquote><div align="left">3. Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới :</div><blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div class="folder"><br />
<div class="folder-title"><br />
<div class="folder-activeleft fl"></div><br />
<div class="folder-active fl"><a class="link-folder" href="<strong>http://www.itechplus.info/search/label/OSystem</strong>?max-results=10"><strong><span style="color: teal;">Windows</span></strong></a></div><br />
<div class="folder-activeright fl"></div><br />
<div class="subfolder fl"><br />
<a class="link-subfolder" href="<strong>http://www.itechplus.info/search/label/OSystemK</strong>?max-results=10"><strong>Kiến thức</strong></a> | <a class="link-subfolder" href="<strong>http://www.itechplus.info/search/label/OSystemT</strong>?max-results=10"><strong>Thủ thuật</strong></a> | <a class="link-subfolder" href="<strong>http://www.itechplus.info/search/label/Download</strong>?max-results=10"><strong>Phần mềm</strong></a> | <a class="link-subfolder" href="<strong>http://www.itechplus.info/search/label/License</strong>?max-results=10"><strong>Free License</strong></a><br />
</div><br />
<div class="folder-titleright fr"></div><br />
</div><br />
<div class="folder-content" id="tdHomeFolder2"><br />
<script type="text/javascript"><br />
document.write(rdlabels[<strong>index</strong>]);<br />
</script><br />
<script language="JavaScript"><br />
imgr = new Array();<br />
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";<br />
showRandomImg = true;<br />
aBold = false;<br />
summaryPost = <strong>247</strong>;<br />
sumPost = <strong>147</strong>;<br />
numposts = <strong>6</strong>;<br />
home_page = "<strong><span style="color: teal;">http://www.itechplus.info/</span></strong>";<br />
</script><br />
<script src="https://sites.google.com/site/itechroot/javascripts/VnE-recent.txt" type="text/javascript"></script><br />
</div><br />
<div class="folder-bottom"></div><br />
</div></blockquote>Trong 2 đoạn code trên :<br />
<ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li><strong>width:500px;</strong> : chiều rộng của cả widget</li>
<li><strong>width:478px;</strong> : chiều rộng phần nội dung widget</li>
<li><strong>width:298px;</strong> : chiều rộng phần nội dung bên trái</li>
<li><strong>width:160px; </strong>: chiều rộng phần nội dung bên phải</li>
<li><strong>height:100px;</strong> : chiều rộng ảnh bài viết mới nhất</li>
<li><strong>width:53px; height:53px;</strong> : chiều rộng & chiều cao ảnh bài viết đầu tiên bên phải</li>
<li><strong>rdlabels[x]</strong> : tên của mảng tương ứng với Label. Nếu bạn không gán cụ thể, nội dung của tiện ích sẽ hiển thị một cách ngẫu nhiên theo nhãn.</li>
<li><b>summaryPost = 247;</b> : số ký tự đoạn mô tả bài viết chính</li>
<li><b>sumPost = 147; </b>: số ký tự tiêu đề bài viết</li>
<li><strong>numposts = 6; </strong>: tổng số bài viết được hiển thị trên mỗi widget</li>
</ul>Để hiểu rõ hơn bố cục của Widget, các bạn có thể xem hình dưới :<br />
<div align="center"><img alt="Recent Post mang phong cách VNExpress Layout" height="248" src="https://lh4.googleusercontent.com/_PAuO_he0N0k/TZl47UEFSqI/AAAAAAAAGBM/n8oR5OFc-00/rc-vnexpress-layout.jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Recent Post mang phong cách VNExpress Layout" width="432" /></div><strong><span style="color: blue;">Style 3 : Recent Post mang phong cách Quantrimang</span></strong><br />
<div align="center"><span style="color: teal;"><img alt="Recent Post mang phong cách Quantrimang.com - Style 1" height="210" src="https://lh4.googleusercontent.com/_PAuO_he0N0k/Ta2kspSknGI/AAAAAAAAHWM/Hu5X42RHy-4/qtm-recent-post(1).jpg" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: none; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: none; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: none; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: none; border-top-width: 1px; border-width: initial; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: 500px; max-width: 568px; padding-bottom: 5px; padding-left: 5px; padding-right: 10px; padding-top: 5px;" title="Recent Post mang phong cách Quantrimang.com - Style 1" width="413" /><br />
<strong>Minh họa cho list1=1</strong></span></div><strong><span style="color: blue;">Thực hiện :</span></strong><br />
1. Tạo 1 widget HTML\JavaScript và dán code bên dưới vào :<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; display: block; font: normal normal normal 12px/normal arial; line-height: 1.6em; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 10px; max-height: 160px; max-width: 624px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px;"><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><style type="text/css"><br />
.wbox {background-color:#ffffff;width:auto;height:auto;}<br />
.wbox.Cat {<strong>width:500px</strong>;height:auto;margin-bottom:5px;}<br />
.wbox .tl {<br />
background:url(http://quantrimang.com.vn/App_Themes/default/images/left_wbox_03.jpg) no-repeat left top;<br />
padding-left:3px;<br />
}<br />
.wbox .tr {<br />
background:url(http://quantrimang.com.vn/App_Themes/default/images/right_wbox_03.jpg) no-repeat right top;<br />
padding-right:3px;<br />
}<br />
.wbox .tc {<br />
background:url(http://quantrimang.com.vn/App_Themes/default/images/mid_wbox_03.jpg) repeat-x left top;<br />
height:23px;<br />
color:#246296;<br />
font-size:12px;<br />
text-transform:uppercase;<br />
font-weight:bold;<br />
padding-top:5px;<br />
padding-left:7px;<br />
}<br />
.wbox .tc a {text-decoration:none;color:#246296;}<br />
.wbox .ml {<br />
background:url(http://quantrimang.com.vn/App_Themes/default/images/left_contannerbox.jpg) repeat-y left top;<br />
padding-left:3px;<br />
}<br />
.wbox .mr<br />
{<br />
background:url(http://quantrimang.com.vn/App_Themes/default/images/right_contannerbox.jpg) repeat-y right top;<br />
padding-right:3px;<br />
}<br />
.wbox .mc {background-color:#FFFFFF;}<br />
.wbox .bl<br />
{<br />
background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomLeft_wbox.jpg) no-repeat left top;<br />
padding-left:3px;<br />
height:5px;<br />
}<br />
.wbox .br<br />
{<br />
background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomright_wbox.jpg) no-repeat right top;<br />
height:5px;<br />
padding-right:3px;<br />
}<br />
.wbox .bc<br />
{<br />
background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomMiddle_wbox.jpg) repeat-x left top;<br />
height:5px;<br />
font-size:0;<br />
line-height:5px;<br />
}<br />
.Tin_lienquan ul,.Tin_lienquan li {list-style:none}<br />
.Title_article {<br />
color:#246296;<br />
font-size:12px;<br />
font-weight:bold;<br />
padding-top:10px;<br />
padding-bottom:10px;<br />
padding-left:5px;<br />
}<br />
.Title_article {text-decoration:none;color:#246296;}<br />
.Title_article a {text-decoration:none;color:#303030;}<br />
.Title_article a:hover {color:#990000; text-decoration:none;}<br />
.imgModule {padding-left:5px;}<br />
.imgModule img {width:120px; margin-right:5px;}<br />
.imgModule a {text-decoration:none;}<br />
.Tin_lienquan {<br />
color:#797979;<br />
font-size:11px;<br />
padding-top:15px;<br />
font-family:Tahoma;<br />
padding-left:5px;<br />
}<br />
.Tin_lienquan a {text-decoration:none; color:#004784;}<br />
.Tin_lienquan a:hover {text-decoration:none;color:#CC3300;}<br />
</style><br />
<script type="text/javascript"><br />
home_page = "<a href="http://itechplus.info/%22;" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;"><strong>http://itechplus.info/</strong>";</a><br />
label = "<strong>Office</strong>";<br />
numposts = <strong>6</strong>;<br />
<strong><span style="color: red;">list1</span></strong> = <strong>1</strong>;<br />
sumPosts = <strong>268</strong>;<br />
<strong><span style="color: red;">mode</span></strong> = "<strong>label</strong>";<br />
</script><br />
<div class="wbox Cat"><br />
<!-- Header widget --><br />
<div class="tl"><div class="tr"><div class="tc"><a href="<a href="http://itechplus.info/search/label/Office%22" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">http://itechplus.info/search/label/Office"</a>>Tin học văn phòng</a></div></div></div><br />
<!-- END Header widget --><br />
<div class="ml"><br />
<div class="mr"><br />
<div class="mc"><br />
<!-- noi dung cua tien ich --><br />
<script type="text/javascript" src="<a href="https://sites.google.com/site/itechroot/javascripts/rc-post-qmt.txt%22" style="color: #336699; outline-color: initial; outline-style: none; outline-width: initial; text-decoration: none;">https://sites.google.com/site/itechroot/javascripts/rc-post-qmt.txt"</a>></script><br />
<!-- END noi dung cua tien ich --><br />
</div><br />
</div><br />
</div><br />
<!-- Footer widget --><br />
<div class="bl"><div class="br"><div class="bc"></div></div></div><br />
<!-- END footer widget --><br />
</div></div></blockquote>Thay đoạn code in đậm cho phù hợp với Blog bạn, cần lưu ý :<br />
<strong>- list1</strong> : số bài viết có hiện ảnh thumbnail kèm trích dẫn<br />
<strong>- mode </strong>:<br />
<ul style="list-style-type: circle; margin-bottom: 4px; margin-left: 30px; margin-right: 0px; margin-top: 4px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li>mode=”label” : áp dụng cho Label</li>
<li>mode=”blog” : áp dụng cho cả Blog</li>
</ul>Chúc các bạn thành công !<br />
( còn tiếp… )<br />
<div><br />
</div><br />
<div style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 20px;"><strong><br />
</strong></div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-62641409061884716802011-07-19T05:36:00.000-07:002011-07-19T05:36:50.177-07:00Hiển thị bài viết giống trang tin247.com<div class="date-header" style="color: #000033; font-family: arial; font-size: 11px; line-height: 1.5em; margin-bottom: 0px; margin-left: 15px; margin-right: 0px; margin-top: -14px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br />
</div><div class="post-body entry-content" style="font-family: Helvetica, Arial, Verdana, 'Trebuchet MS', sans-serif; font-size: small;"><div id="post_body"><div id="VietAd"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_OdnnDQAOyljQG4q0m_TfTepU7bnWB0qa337UMQpPzJOiygaBUVUzZAQNY_lJbPwAZvAfG0JMJHhP3TnD3FVXRwoSqC5TSuUgGYhB4q7E8g2K5FgsclJEo38Jl_pTYAezj1JSeXiEuJL/s1600/247.png" rel="lightbox" style="color: #ff0033; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5478450988708377810" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_OdnnDQAOyljQG4q0m_TfTepU7bnWB0qa337UMQpPzJOiygaBUVUzZAQNY_lJbPwAZvAfG0JMJHhP3TnD3FVXRwoSqC5TSuUgGYhB4q7E8g2K5FgsclJEo38Jl_pTYAezj1JSeXiEuJL/s200/247.png" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; cursor: pointer; float: left; height: 80px; margin-bottom: 10px; margin-left: 0px; margin-right: 10px; margin-top: 0px; width: 100px;" /></a><span style="font-weight: bold;">(Traidatmui.com) – Đối với những bạn lướt web nhiều chắc hẳn bạn đã từng vào trang <span style="color: #660000; font-style: italic;">tin247.com</span> đọc tin và cũng đã thấy cách hiển thị bài viết trên trang đó. Trang web đó hiển thị bài đăng cho từng nhãn riêng và mỗi nhãn sẽ hiển thị một bài (dạng tóm tắt) và có thêm tiện ích bài viết liên quan trong cùng nhãn đó. Việc hiển thị bài viết như vậy chúng ta có thể ứng dụng nó vào trong blogspot. Mình xin chia sẽ cách để thực hiện thủ thuật này.</span><br />
<center><div class="demodiv" style="margin-top: 5px; padding-top: 22px;"><a class="demo" href="http://www.traidatmuitips.everywebspace.com/demo/demo_retin247_post.html" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(https://lh4.googleusercontent.com/-pSVNvJ8sWD4/TfS-bhHdd0I/AAAAAAAAIdQ/_gi6Ez7KK7E/demo.png); background-origin: initial; background-position: initial initial; background-repeat: no-repeat no-repeat; color: #ff0033; height: 35px; margin-top: 40px; padding-left: 88px; padding-top: 22px; text-decoration: none;" target="_blank"></a></div></center><br />
<div style="text-align: center;"><span style="color: #660000;">Hình ảnh bài viết trên trang tin247.com</span></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij5OwLBVEr0siabUVVKyxvmkuJQTKXFPl-SZkpCdkOivfu77XY5F07IPzKowB67U8pPPGUAPVEWFe8BFObj9xQXHQ62sauM_m75oQRhcEeFH8Lj3VNbrmb3zTkLFVXId-NhYasuXkf4IrZ/s1600/247.png" rel="lightbox" style="color: #ff0033; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5478449863332686818" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij5OwLBVEr0siabUVVKyxvmkuJQTKXFPl-SZkpCdkOivfu77XY5F07IPzKowB67U8pPPGUAPVEWFe8BFObj9xQXHQ62sauM_m75oQRhcEeFH8Lj3VNbrmb3zTkLFVXId-NhYasuXkf4IrZ/s400/247.png" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; cursor: pointer; display: block; height: 181px; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; width: 400px;" /></a><br />
<span style="color: #cc0000; font-weight: bold;">☼ Cách thực hiện thủ thuật</span><br />
<br />
1. Đầu tiên hãy đăng nhập vào tài khoản <span style="font-weight: bold;">Blogger</span><br />
2. Vào bố cục và thêm phần tử <span style="font-weight: bold;">HTML/Javascript</span><br />
3. Chèn đoạn mã bên dưới vào phần tử tiện ích trên<br />
<div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><style><br />
<span style="color: #339999;">.mota{</span><br />
<span style="color: #339999;">position: relative;</span><br />
<span style="color: #339999;">z-index: 0;</span><br />
<span style="color: #339999;">text-decoration:none;</span><br />
<span style="color: #339999;">}</span><br />
<br />
<span style="color: #339999;">.mota a {</span><br />
<span style="color: #339999;">color:#ff0000;</span><br />
<span style="color: #339999;">}</span><br />
<span style="color: #339999;">.mota:hover{</span><br />
<span style="color: #339999;">color:#ff0000;</span><br />
<span style="color: #339999;">background-color: transparent;</span><br />
<span style="color: #339999;">z-index: 50;</span><br />
<span style="color: #339999;">}</span><br />
<br />
<span style="color: #339999;">.mota span{</span><br />
<span style="color: #339999;">position: absolute;</span><br />
<span style="color: #339999;">background: #33ccff;</span><br />
<span style="color: #339999;">padding: 5px;</span><br />
<span style="color: #339999;">left: -1000px;</span><br />
<span style="color: #339999;">border: 1px solid #ff9933;</span><br />
<span style="color: #339999;">visibility: hidden;</span><br />
<span style="color: #339999;">color:#000066;</span><br />
<span style="color: #339999;">text-decoration: none;</span><br />
<span style="color: #339999;">}</span><br />
<br />
<span style="color: #339999;">.mota span img{</span><br />
<span style="color: #339999;">border-width: 0;</span><br />
<span style="color: #339999;">padding: 2px;</span><br />
<span style="color: #339999;">}</span><br />
<br />
<span style="color: #339999;">.mota:hover span{</span><br />
<span style="color: #339999;">padding:5px;</span><br />
<span style="color: #339999;">visibility: visible;</span><br />
<span style="color: #339999;">top: 20px;</span><br />
<span style="color: #339999;">left:100px;</span><br />
<span style="color: #339999;">width:250px;</span><br />
<span style="color: #339999;">background:#ccc;</span><br />
<span style="color: #339999;">text-align: justify;</span><br />
<span style="color: #339999;">}</span><br />
<br />
<span style="color: #663333;">.summerypost a {</span><br />
<span style="color: #663333;">color:#ff0000;</span><br />
<span style="color: #663333;">font-weight:bold;</span><br />
<span style="color: #663333;">}</span><br />
<span style="color: #663333;">.summerypost a:hover {</span><br />
<span style="color: #663333;">color:#000066;}</span><br />
<br />
<span style="color: #663333;">.summerypost {</span><br />
<span style="color: #663333;">color:#000;</span><br />
<span style="color: #663333;">font-family:arial;}</span><br />
<br />
.readm a{<br />
color:#ff0000;}<br />
.readm a:hover{<br />
color:#006633;}<br />
<br />
<span style="color: #cc0000;">.repost{</span><br />
<span style="color: #cc0000;">color:#3366ff;<br />
font-family:arial;}</span><br />
<br />
<span style="color: #cc0000;">.repost a{</span><br />
<span style="color: #cc0000;">color:#0066cc;}</span><br />
<span style="color: #cc0000;">.repost a:hover{</span><br />
<span style="color: #cc0000;">color:#ff0000;}</span><br />
<br />
</style><br />
<script language="JavaScript"><br />
imgr = new Array();<br />
<br />
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";<br />
<br />
<br />
showRandomImg = true;<br />
tablewidth = 245;<br />
cellspacing = 1;<br />
borderColor = "#ff0000";<br />
bgTD = "";<br />
<br />
<br />
imgw = 130; <span style="color: #003300;">// độ rộng của ảnh thumb</span><br />
imgh = 100;<span style="color: #003300;"> // chiều cao của ảnh thumb</span><br />
<br />
imgwidth = 60;<br />
imgheight = 60;<br />
<br />
fntsize = 12; <span style="color: #003300;">//Cỡ chữ của các link bài viết liên quan trong cùng nhãn đó</span><br />
fontsize = 14; <span style="color: #003300;">// Cỡ chữ của tiêu đề bài viết hiển thị dạng tóm tắt</span><br />
fontsizecm = 11; <span style="color: #003300;">// Cỡ chữ của ngày đăng bài</span><br />
<br />
acolor = "";<br />
titlecolor = "";<br />
aBold = false;<br />
icon = "";<br />
<br />
text = "Nhận xét";<br />
<br />
showPostDate = true; <span style="color: #003300;">//Nếu không muốn hiển thị ngày đăng bài bạn thay<span style="font-weight: bold;"> TRUE</span> thành <span style="font-weight: bold;">FALSE</span></span><br />
poston = "Ngày đăng :";<br />
<br />
minisummaryPost= 200; <span style="color: #003300;">// số kí tự bạn muốn hiển thị cho phần tóm tắt bài viết</span><br />
summaryPost = 350; <span style="color: #003300;">// số kí tự hiển thị ở phần mô tả</span><br />
summaryFontsize = 12; <span style="color: #003300;">//Cỡ chữ bài viết tóm tắt</span><br />
summaryColor = "#000";<br />
icon2 = "";<br />
<br />
<br />
numposts = 8; <span style="color: #003300;">//số bài viết hiển thị trong phần bài viết liên quan</span><br />
label = "<span style="color: red; font-weight: bold;">Advanced blogger</span>"; <span style="color: #003300;">// Thay thành tên nhãn bài bạn muốn hiển thị</span><br />
home_page = "<span style="color: red; font-weight: bold;">http://www.traidatmui.com/</span>"; <span style="color: #003300;">//Thay thành địa chỉ blog của bạn</span><br />
<br />
</script><br />
<br />
<script src="<span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/tin247_post.js</span>" type="text/javascript"></script><br />
<script src="<span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/tin247_related_post.js</span>" type="text/javascript"></script></div><br />
<br />
<span style="color: #cc0000; font-weight: bold;">- Tùy chỉnh:</span><br />
+ Code <span style="color: #339999;">màu xanh</span> dùng để chỉnh sửa phần mô tả cho các bài viết liên quan khi rê chuột vào link<br />
+ Code <span style="color: #663333;">màu xám</span> dùng để chỉnh sửa màu của text của bài viết tóm tắt<br />
+ Code <span style="color: #cc0000;">màu đỏ </span>dùng để chỉnh sửa màu chữ phần bài viết liên quan<br />
<br />
Bạn hãy dựa vào những chú thích trong code để chỉnh sữa màu chữ, màu nền, kích cỡ... cho phù hợp rồi save lại.<br />
<span style="color: #000099; font-weight: bold;">Chúc bạn thành công</span></div></div></div><span class="Apple-style-span" style="font-family: Helvetica, Arial, Verdana, 'Trebuchet MS', sans-serif; font-size: x-small;"><span><br />
<br />
Địa chỉ bài viết: <a href="http://www.traidatmui.com/2010/03/hien-thi-bai-viet-giong-trang-tin247com.html#ixzz1SYQ4TaYf" style="color: #003399; text-decoration: none;">http://www.traidatmui.com/2010/03/hien-thi-bai-viet-giong-trang-tin247com.html#ixzz1SYQ4TaYf</a><br />
<b>Nguồn: TRAIDATMUI.com</b></span></span>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-21588526545669961112011-07-18T20:12:00.000-07:002011-07-19T06:16:04.477-07:00Chiêm nghiệm tình yêu<div class="textbox-content"><span style="clear: left; float: left; font-size: large; margin-bottom: 1em; margin-right: 1em;"><img ??="" alt="Auto readmore 2.0 for bo-blog by Minit" border="0" height="96" onerror="this.src='plugin/readmore/images/default.jpg';" onload="if(this.width>128) {this.resized=true; this.width=128;}" resized="true" src="http://xedapdoi.vn/xddms/upload/news/6/la_la_love_by_lovelyensweet.jpg" title="Click chuột vào để xem tiếp" width="128" /></span></div><div class="textbox-content"><span style="font-size: large;">Có người nói, cuộc sống là một quá trình tìm kiếm tình yêu, mỗi một người đều phải tìm thấy 3 người. Người thứ nhất là người mình yêu nhất, người thứ hai là người yêu mình nhất và người thứ ba là bạn đồng hành trong suốt cuộc đời .<br />
<br />
Trước tiên mình sẽ gặp được người mình yêu nhất, sau đó hiểu được cảm giác yêu. Chỉ có hiểu được cảm giác bị yêu, mới có thể phát hiện ra người yêu mình nhất. Khi đã trải qua cảm giác yêu và bị yêu, mới có thể biết được mình cần điều gì, và cũng sẽ tìm thấy người thích hợp nhất trong suốt cuộc đời còn lại.<br />
<br />
Thật đáng tiếc, trong cuộc sống thực tế hiện tại, cả ba người này thường không cùng một người, người bạn yêu nhất không chọn bạn, người yêu bạn nhất lại không phải người bạn yêu nhất, và người và người thích hợp không phải là người bạn yêu nhất, cũng không phải là người yêu bạn nhất, chỉ là người xuất hiện vào lúc thích hợp nhất.<br />
<br />
Anh sẽ là người thứ mấy trong cuộc sống của tôi? Không ai muốn thay đổi tình yêu của mình. Khi anh ta yêu bạn, đó là lúc anh ta thật sự yêu bạn. Nhưng khi anh ta không yêu bạn thì cũng thật sự là không yêu bạn, anh ta không thể giả vờ không yêu khi anh ta đang yêu bạn, cũng như anh ta không thể giả vờ yêu khi không yêu bạn.<br />
<br />
Khi một người không còn yêu mình muốn rời xa mình, mình cần hỏi lại bản thân có còn yêu anh ta nữa không. Nếu bạn không còn yêu người ấy nữa thì xin đừng bao giờ vì lòng tự trọng mà không chịu rời xa người ấy. Nếu như bạn vẫn còn yêu người ấy, lẽ đương nhiên bạn sẽ hy vọng người ấy có được một cuộc sống hạnh phúc, vui vẻ, hy vọng người ấy được ở cùng người mình yêu, đừng bao giờ ngăn cản. Nếu bạn ngăn cản người ấy có được hạnh phúc thật sự của mình nghĩa là bạn không còn yêu anh ta nữa, và nếu như bạn không còn yêu thì bạn lấy tư cách gì chỉ trích anh ta bạc tình.<br />
<br />
Yêu không phải là chiếm hữu. Bạn thích mặt trăng, không thể đem mặt trăng cất vào trong hộp, nhưng ánh sáng của mặt trăng lại có thể chiếu sáng vào tận trong phòng bạn. Cũng như bạn yêu một người, bạn vẫn có thể có được người ấy mà không cần chiếm hữu và khiến người yêu trở thành một hồi ức vĩnh hằng trong cuộc sống. <br />
<br />
Nếu bạn thật sự yêu một người, phải yêu con người thực của anh ta, yêu mặt tốt cùng yêu cả mặt xấu, yêu cái ưu điểm lẫn khuyết điểm, tuyệt đối không nên vì yêu anh ta mà hy vọng anh ta trở thành con người mình mong muốn, nếu anh ta không được như ý bạn thì mình không còn yêu anh ta nữa.<br />
<br />
Yêu một người nào đó thật sự không nói ra được nguyên nhân vì sao yêu, bạn chỉ biết rằng, bất cứ lúc nào, tâm trạng tốt hay xấu thì bạn cũng đều mong muốn người ấy ở bên cạnh bạn, không một yêu cầu... Xa cách cũng là một thử nghiệm tình yêu. Tình yêu chân chính sẽ chẳng bao giờ trở thành tình yêu oán hận.<br />
<br />
Hai người yêu nhau, thích nhất là bắt bạn mình phải thề, phải hứa. Tại sao chúng ta lại bắt đối phương làm như vậy? Tất cả chỉ vì chúng ta không tin đối phương... Làm gì có chuyện biển cạn đá mòn, trời hoang đất lở, nếu có thì cũng không ai sống được đến ngày ấy...<br />
<br />
Trong tình yêu, nói là một lẽ, làm là một lẽ. Người nói không dám tin điều mình nói và người nghe thì không tin điều mình nghe....<br />
<br />
Bạn đã tìm được người thứ mấy cho cuộc đời của bạn?</span><br />
<div class="tags" style="display: none;"></div></div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-58721950112837437042011-07-18T06:44:00.000-07:002011-07-18T06:45:44.242-07:00Chèn Box Google Search vào blog<div class="post-body entry-content" style="color: #29303b; font-family: Arial, sans-serif; font-size: 13px;"><div style="text-align: center;"><span style="color: red; font-size: 17px;"><span style="font-weight: bold;">PUT GOOGLE SEARCH BOX IN BLOG</span></span></div><div style="text-align: justify;"><a href="http://tbn0.google.com/images?q=tbn:etjk-nk4j8dp3M:http://www1.istockphoto.com/file_thumbview_approve/2694063/2/istockphoto_2694063_internet_search_symbol_detailed_icon_of_blue_magnifying_glass.jpg" style="color: #6f3c1b; text-decoration: none;"><img alt="" border="0" src="http://tbn0.google.com/images?q=tbn:etjk-nk4j8dp3M:http://www1.istockphoto.com/file_thumbview_approve/2694063/2/istockphoto_2694063_internet_search_symbol_detailed_icon_of_blue_magnifying_glass.jpg" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; cursor: pointer; float: left; height: 92px; margin-bottom: 10px; margin-left: 0pt; margin-right: 10px; margin-top: 0pt; width: 96px;" /></a><span style="font-weight: bold;"><span style="color: #ff6600;">[FD's BlOg]</span> - Thủ thuật này hơi cũ, nhưng hôm nay mình cũng xin giới thiệu lại. Với thủ thuật này, bạn có thể áp dụng cho nhiều trang web search khác nhau, chỉ cần thay đổi code 1 chút là có thể làm được. Ở đây mình chỉ giới thiệu với Google.</span></div><span class="fullpost" style="display: inline;"><br />
Đầu tiên, chọn nơi muốn hiển thị Box search, rồi tạo 1 widget HTML/Java rồi dán code vào. Ở đây mình sẽ giới thiệu Google Search và Google BlogSearch.<br />
<br />
<span style="font-weight: bold;">1. Google search:</span><br />
</span><br />
<div style="text-align: center;"><span class="fullpost" style="display: inline;">Hình minh họa:</span><br />
<span class="fullpost" style="display: inline;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ__Vdx1YTV1TfbVCwQfYrG8nYVYTSU42XGgORorgX_CJbomOpte_eJNFbb7GKN6jUkZMrcKI24lJBT1rzfKAGFYjLYpatMkAj5M4uyLaeV_54A-ksw36IIsxzMtIQHI1alm-0PWPUMTNZ/s1600-h/2.bmp" style="color: #6f3c1b; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5325333357085437202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ__Vdx1YTV1TfbVCwQfYrG8nYVYTSU42XGgORorgX_CJbomOpte_eJNFbb7GKN6jUkZMrcKI24lJBT1rzfKAGFYjLYpatMkAj5M4uyLaeV_54A-ksw36IIsxzMtIQHI1alm-0PWPUMTNZ/s320/2.bmp" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; cursor: pointer; height: 100px; margin-bottom: 10px; margin-left: 0pt; margin-right: 10px; margin-top: 0pt; width: 200px;" /></a></span></div><span class="fullpost" style="display: inline;"><b>Code:</b><br />
<div class="codeview" style="-webkit-box-shadow: rgba(0, 0, 0, 0.496094) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://data.fandung.com/img/codeview/codeview-ico.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; clear: both; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 20px; margin-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><br />
<form action="http://www.google.com/search" method="get"<span style="color: red;">target="_blank"</span>><div style="<span style="color: red;">border: 0px</span> solid <span style="color: red;">#ccc</span>; padding: <span style="color: red;">4px</span>; width: 20em;"><br />
<table border="0" cellpadding="0"><br />
<tbody><tr><td><br />
<input style="<span style="color: red;">width: 120px</span>;"maxlength="255" value="" name="q" size="25" type="text"/><br />
<input value="Tìm Kiếm" type="submit"/></td></tr><br />
<tr><td align="left"><br />
<input checked="checked" value="<span style="color: red;">YourBlog</span>.blogspot.com" name="sitesearch" type="checkbox"/> Chỉ tìm kiếm ở Blog này</td></tr></tbody></table></div></form></div><br />
Có thể thay đổi các dòng code màu đỏ để trang trí box search theo ý bạn.<br />
<br />
<span style="color: #009900; font-weight: bold;">2. Google Blogsearch:</span><br />
<div style="text-align: center;">Hình minh họa:</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiW_-2Hx_X9PHX3GW8E0ah_JJpCb3RU2_llyEBTSAmqvo1nUIbfKXJS7v4otZJ2AsW0-1mBN1OFLvqBuR6u2NkitXpnIjyN9JIlcvNcOlDR7MK6VWR0YtDD6wR_JYCNavt8wRKSmTM3G6/s1600-h/3.bmp" style="color: #6f3c1b; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5325334070352249762" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiW_-2Hx_X9PHX3GW8E0ah_JJpCb3RU2_llyEBTSAmqvo1nUIbfKXJS7v4otZJ2AsW0-1mBN1OFLvqBuR6u2NkitXpnIjyN9JIlcvNcOlDR7MK6VWR0YtDD6wR_JYCNavt8wRKSmTM3G6/s320/3.bmp" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; cursor: pointer; display: block; height: 93px; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; width: 291px;" /></a><br />
<b>Code:</b><br />
<div class="codeview" style="-webkit-box-shadow: rgba(0, 0, 0, 0.496094) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://data.fandung.com/img/codeview/codeview-ico.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; clear: both; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 20px; margin-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><br />
<FORM METHOD="GET" ACTION="http://blogsearch.google.com/"><br />
<INPUT TYPE="hidden" name="num" value="10" /><br />
<INPUT TYPE="hidden" name="hl" value="en" /><br />
<input name="as_sitesearch" value="<span style="color: red;">YOURBLOG_URL</span>" type="hidden"><br />
<INPUT TYPE="text" NAME="as_q" style="width: 100px;" /><br />
<INPUT TYPE="submit" value="Google Blog Search" /><br />
</FORM></div></span><br />
<div style="clear: both;"></div></div><img src="http://data.fandung.com/img/sign-fd.png" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #29303b; float: right; font-family: Arial, sans-serif; font-size: 13px;" /><br />
<div><br />
nếu muốn mở tab mới<br />
<br />
<br />
<br />
<form action="http://blogsearch.google.com/" target="_blank" method="get" style="margin: 0px; padding: 0px;"><br />
<input type="text" maxlength="255" style="width: 200px;" value="" name="q" size="25" /><input type="submit" value="Tìm Kiếm" /><br />
<input type="hidden" checked value="hzing.blogspot.com" name="sitesearch" /><br />
</form><br />
<br />
<br />
nguồn: http://fandung.com<br />
<br />
<br />
</div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-15263966809461079382011-07-18T06:28:00.000-07:002011-07-18T06:28:07.647-07:00Chèn tiện ích download video từ YouTube vào blog<div class="post-body entry-content" style="color: #29303b; font-family: Arial, sans-serif; font-size: 13px;"><div style="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5azZCAQfW0gK-6EnSjWoDJhdOPvBhiJBcytEYK-QI1DWJkrZVIcWQ54qsVLSMJ2h5cfFVG35PW56KEeUGtrJTbJV1hvndUWERHl2IVh7kMpYRlacPgS4uaDtfvrlUO-elf-8oj9_Z26VZ/s1600-h/rep.gif" style="color: #6f3c1b; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5341290614670251058" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5azZCAQfW0gK-6EnSjWoDJhdOPvBhiJBcytEYK-QI1DWJkrZVIcWQ54qsVLSMJ2h5cfFVG35PW56KEeUGtrJTbJV1hvndUWERHl2IVh7kMpYRlacPgS4uaDtfvrlUO-elf-8oj9_Z26VZ/s200/rep.gif" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; cursor: pointer; float: left; height: 113px; margin-bottom: 10px; margin-left: 0pt; margin-right: 10px; margin-top: 0pt; width: 127px;" /></a><span style="font-weight: bold;"><span style="color: #ff6600;">[FD's BlOg]</span> - YouTube mà một mạng chia sẻ video trực tuyến lớn nhất hiện nay. Bạn có thể upload lên rất dễ dàng. Nhưng download video về thì sao. Bài viết này sẽ cung cấp cho blog của các bạn 1 <span style="color: #3333ff;">widget</span>cho phép download video từ <span style="color: red;">Youtube</span>.</span></div><br />
<span class="fullpost" style="display: inline;"><br />
Để chèn tiện ích này vào, rất đơn giản, bạn chỉ việc tạo 1 widget <span style="font-weight: bold;">HTML/Javascript</span> rồi dán code của nó vào là xong.<br />
<br />
<span style="color: #3333ff; font-weight: bold;">Sau đây mình sẽ giới thiệu kích thước :</span><br />
<span style="font-weight: bold;">1. 400 pixel large Widget</span><br />
<div style="border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-style: solid; border-left-width: 1px; border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; width: 400px;"><span style="font-family: Arial; font-size: x-small;">Download <b>Youtube Video</b> ! Enter your Video link</span><div style="line-height: 1.5em; margin-bottom: 0.6em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></div><form name="myForm1"><input name="vidurl1" size="40" style="background-color: #ccff66; border-bottom-color: rgb(147, 172, 29); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(147, 172, 29); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(147, 172, 29); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(147, 172, 29); border-top-style: solid; border-top-width: 1px; padding-bottom: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px;" type="text" /><input name="getlink1" type="button" value="Download !" /></form><div id="download1"></div><div><div align="right" style="line-height: 1.5em; margin-bottom: 0.6em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://www.fandung.com/2009/04/chen-tien-ich-download-video-tu-youtube.html" style="color: #6f3c1b; text-decoration: none;" target="_blank"><img alt="Download Youtube video" border="0" height="20" src="http://downloadutube.googlepages.com/download_youtube.gif" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px;" width="230" /></a></div></div></div><br />
<span style="font-weight: bold;">Code:</span><br />
<div class="codeview" style="-webkit-box-shadow: rgba(0, 0, 0, 0.496094) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://data.fandung.com/img/codeview/codeview-ico.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; clear: both; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 20px; margin-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><script src="<span style="color: #3333ff; font-weight: bold;">http://data.fandung.com/js/you-tube_maxdl.js</span>" type="text/javascript"><br />
</script></div><br />
<span style="font-weight: bold;">2. 200 pixel Mini Widget</span><br />
<div style="border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-style: solid; border-left-width: 1px; border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; text-align: center; width: 200px;"><span style="font-family: Arial; font-size: x-small;">Download <b>Youtube Video</b> !<div style="line-height: 1.5em; margin-bottom: 0.6em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Enter your Video link</div></span><div style="line-height: 1.5em; margin-bottom: 0.6em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></div><form name="myForm"><input name="vidurl" size="20" style="background-color: #ccff66; border-bottom-color: rgb(147, 172, 29); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(147, 172, 29); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(147, 172, 29); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(147, 172, 29); border-top-style: solid; border-top-width: 1px; padding-bottom: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px;" type="text" /><input name="getlink" type="submit" value="Download Now" /></form><div id="download"></div><div><div align="right" style="line-height: 1.5em; margin-bottom: 0.6em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://www.fandung.com/2009/04/chen-tien-ich-download-video-tu-youtube.html" style="color: #6f3c1b; text-decoration: none;" target="_blank"><img alt="Get Download Links" border="0" height="14" src="http://downloadutube.googlepages.com/download_youtube_.gif" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px;" width="128" /></a></div></div></div><br />
<span style="font-weight: bold;">code:</span><br />
<div class="codeview" style="-webkit-box-shadow: rgba(0, 0, 0, 0.496094) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://data.fandung.com/img/codeview/codeview-ico.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; clear: both; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 20px; margin-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><script src="<span style="color: #3333ff; font-weight: bold;">http://data.fandung.com/js/you-tube_minidl.js</span>" type="text/javascript"><br />
</script></div><br />
<span style="color: red; font-size: 17px; font-weight: bold;">Chúc các bạn thành công.</span></span><div style="clear: both;"></div></div><img src="http://data.fandung.com/img/sign-fd.png" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #29303b; float: right; font-family: Arial, sans-serif; font-size: 13px;" /><span class="Apple-style-span" style="color: #29303b; font-family: Arial, sans-serif; font-size: 13px;"><br />
</span><span class="Apple-style-span" style="color: #29303b; font-family: Arial, sans-serif; font-size: 13px;">nguồn: http://fandung.com</span>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-14212078553300851072011-07-18T06:16:00.000-07:002011-07-18T06:18:53.885-07:00Tạo các Tab nội dung<div class="post-body entry-content" style="color: #29303b; font-family: Arial, sans-serif; font-size: 13px;"><div style="text-align: justify;"><b><span style="color: #ff6600;">FD's BlOg]</span> - Đây là một Tab đa tập lệnh cho phép bạn tổ chức thường xuyên nội dung blog (WEB) vào một thẻ giao diện, với nội dung mong muốn xuất hiện khi nhấn vào tab đó, với việc này bạn có thể tiết kiệm không gian của blog(web) của bạn. Code sử dụng CSS và Javascript, và code còn hỗ trợ tính năng thẻ tab được chọn mặc định, tự động chuyển sang thẻ khác với thời gian được chọn sẵn.</b></div><br />
<span class="fullpost" style="display: inline;"><br />
Ở đây mình giới thiệu 3 lọai tab:<br />
<b>A. Lọai 1:</b><br />
Hình minh họa:<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihoZBdLLm6i-GGbFM04lYiIxmqTtTqbiBwHWqqSnDp19H11_4MJMO-2GBmg5u3iT88kQRNvLIvYFbEvWqX5c7csIEdjy8lTxRsDcmURF8A7n8vgv-MGNSBgs9jslenOZAm-QxXlAmZO1j-/s1600-h/tab1.bmp" style="color: #6f3c1b; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5324118594134781410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihoZBdLLm6i-GGbFM04lYiIxmqTtTqbiBwHWqqSnDp19H11_4MJMO-2GBmg5u3iT88kQRNvLIvYFbEvWqX5c7csIEdjy8lTxRsDcmURF8A7n8vgv-MGNSBgs9jslenOZAm-QxXlAmZO1j-/s400/tab1.bmp" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; cursor: pointer; display: block; height: 76px; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; width: 400px;" /></a><br />
<br />
<span style="font-weight: bold;">Code:</span><br />
</span><br />
<div class="codeview" style="-webkit-box-shadow: rgba(0, 0, 0, 0.496094) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://data.fandung.com/img/codeview/codeview-ico.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; clear: both; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 20px; margin-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"><style type="text/css"></span><br />
<span class="fullpost" style="display: inline;">.shadetabs{</span><br />
<span class="fullpost" style="display: inline;">padding: 3px 0;</span><br />
<span class="fullpost" style="display: inline;">margin-left: 0;</span><br />
<span class="fullpost" style="display: inline;">margin-top: 1px;</span><br />
<span class="fullpost" style="display: inline;">margin-bottom: 0;</span><br />
<span class="fullpost" style="display: inline;">font: bold 12px Verdana;</span><br />
<span class="fullpost" style="display: inline;">list-style-type: none;</span><br />
<span class="fullpost" style="display: inline;">text-align: left; /*set to left, center, or right to align the menu as desired*/</span><br />
<span class="fullpost" style="display: inline;">}</span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;">.shadetabs li{</span><br />
<span class="fullpost" style="display: inline;">display: inline;</span><br />
<span class="fullpost" style="display: inline;">margin: 0;</span><br />
<span class="fullpost" style="display: inline;">}</span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;">.shadetabs li a{</span><br />
<span class="fullpost" style="display: inline;">text-decoration: none;</span><br />
<span class="fullpost" style="display: inline;">position: relative;</span><br />
<span class="fullpost" style="display: inline;">z-index: 1;</span><br />
<span class="fullpost" style="display: inline;">padding: 3px 7px;</span><br />
<span class="fullpost" style="display: inline;">margin-right: 3px;</span><br />
<span class="fullpost" style="display: inline;">border: 1px solid #778;</span><br />
<span class="fullpost" style="display: inline;">color: #2d2b2b;</span><br />
<span class="fullpost" style="display: inline;">background: white url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/shade.gif) top left repeat-x;</span><br />
<span class="fullpost" style="display: inline;">}</span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;">.shadetabs li a:visited{</span><br />
<span class="fullpost" style="display: inline;">color: #2d2b2b;</span><br />
<span class="fullpost" style="display: inline;">}</span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;">.shadetabs li a:hover{</span><br />
<span class="fullpost" style="display: inline;">text-decoration: underline;</span><br />
<span class="fullpost" style="display: inline;">color: #2d2b2b;</span><br />
<span class="fullpost" style="display: inline;">}</span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;">.shadetabs li a.selected{</span><br />
<span class="fullpost" style="display: inline;">position: relative;</span><br />
<span class="fullpost" style="display: inline;">top: 1px;</span><br />
<span class="fullpost" style="display: inline;">}</span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;">.shadetabs li a.selected{</span><br />
<span class="fullpost" style="display: inline;">background-image: url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/shadeactive.gif);</span><br />
<span class="fullpost" style="display: inline;">border-bottom-color: white;</span><br />
<span class="fullpost" style="display: inline;">}</span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;">.shadetabs li a.selected:hover{</span><br />
<span class="fullpost" style="display: inline;">text-decoration: none;</span><br />
<span class="fullpost" style="display: inline;">}</span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;">.tabcontent{</span><br />
<span class="fullpost" style="display: inline;">display:none;</span><br />
<span class="fullpost" style="display: inline;">}</span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;">@media print {</span><br />
<span class="fullpost" style="display: inline;">.tabcontent {</span><br />
<span class="fullpost" style="display: inline;">display:block !important;</span><br />
<span class="fullpost" style="display: inline;">}</span><br />
<span class="fullpost" style="display: inline;">}</span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"></style></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"><script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js"></span><br />
<span class="fullpost" style="display: inline;"></script></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"><ul id="countrytabs" class="shadetabs"></span><br />
<span class="fullpost" style="display: inline;"><li><a href="#" rel="country1" <span style="color: red;">class="selected"</span>>Tab 1</a></li> <span style="color: #006600;">// lệnh</span><b style="color: #006600;">class="selected"</b><span style="color: #006600;"> để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.</span></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"><li><a href="#" rel="country2">Tab 2</a></li></span><br />
<span class="fullpost" style="display: inline;"><li><a href="#" rel="country3">Tab 3</a></li></span><br />
<span class="fullpost" style="display: inline;"><li><a href="#" rel="country4">Tab 4</a></li></span><br />
<span class="fullpost" style="display: inline;"></ul></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"><div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px"></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"><div id="country1" class="tabcontent"></span><br />
<span class="fullpost" style="display: inline;">Tab content 1 here</span><br />
<span class="fullpost" style="display: inline;"></div></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"><div id="country2" class="tabcontent"></span><br />
<span class="fullpost" style="display: inline;">Tab content 2 here</span><br />
<span class="fullpost" style="display: inline;"></div></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"><div id="country3" class="tabcontent"></span><br />
<span class="fullpost" style="display: inline;">Tab content 3 here</span><br />
<span class="fullpost" style="display: inline;"></div></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"><div id="country4" class="tabcontent"></span><br />
<span class="fullpost" style="display: inline;">Tab content 4 here</span><br />
<span class="fullpost" style="display: inline;"></div></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"></div></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"><script type="text/javascript"></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;">var countries=new ddtabcontent("countrytabs")</span><br />
<span class="fullpost" style="display: inline;">countries.setpersist(true)</span><br />
<span class="fullpost" style="display: inline;">countries.setselectedClassTarget("link")</span><br />
<span class="fullpost" style="display: inline;">countries.init(<span style="color: red;">2000</span>) <span style="color: #009900;">// định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống</span></span><br />
<span class="fullpost" style="display: inline;"><br />
</span><br />
<span class="fullpost" style="display: inline;"></script></span></div><span class="fullpost" style="display: inline;"><br />
<br />
<span style="font-weight: bold;">B. Lọai 2:</span><br />
Hình minh họa:<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju2AGQNGUvVNPUl0QE5Jfs-ek9ULf1SxDGiF7mGlNRhKjJrEcKnm-gVj33s3j7VuI-XVK-RD-TZpP2fIeGC08s_Ra6CQjHsUDvWRWxmCnc7OpOGnFNOtCqq4KBtWH_NDKu1V3Qbf9k5fRz/s1600-h/tab2.bmp" style="color: #6f3c1b; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5324124997306320962" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju2AGQNGUvVNPUl0QE5Jfs-ek9ULf1SxDGiF7mGlNRhKjJrEcKnm-gVj33s3j7VuI-XVK-RD-TZpP2fIeGC08s_Ra6CQjHsUDvWRWxmCnc7OpOGnFNOtCqq4KBtWH_NDKu1V3Qbf9k5fRz/s400/tab2.bmp" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; cursor: pointer; display: block; height: 201px; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; width: 387px;" /></a><br />
<br />
<span style="font-weight: bold;">Code:</span><br />
<div class="codeview" style="-webkit-box-shadow: rgba(0, 0, 0, 0.496094) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://data.fandung.com/img/codeview/codeview-ico.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; clear: both; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 20px; margin-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><br />
.modernbricksmenu2{<br />
padding: 0;<br />
width: 362px;<br />
border-top: 5px solid #D25A0B; /*Brown color theme*/<br />
background: transparent;<br />
voice-family: "\"}\"";<br />
voice-family: inherit;<br />
}<br />
<br />
.modernbricksmenu2 ul{<br />
margin:0;<br />
margin-left: 10px; /*margin between first menu item and left browser edge*/<br />
padding: 0;<br />
list-style: none;<br />
}<br />
<br />
.modernbricksmenu2 li{<br />
display: inline;<br />
margin: 0 2px 0 0;<br />
padding: 0;<br />
text-transform:uppercase;<br />
}<br />
<br />
.modernbricksmenu2 a{<br />
float: left;<br />
display: block;<br />
font: bold 11px Arial;<br />
color: white;<br />
text-decoration: none;<br />
margin: 0 1px 0 0; /*Margin between each menu item*/<br />
padding: 5px 10px;<br />
background-color: black; /*Brown color theme*/<br />
border-top: 1px solid white;<br />
}<br />
<br />
.modernbricksmenu2 a:hover{<br />
background-color: #D25A0B; /*Brown color theme*/<br />
color: white;<br />
}<br />
<br />
.modernbricksmenu2 a.selected{ /*currently selected tab*/<br />
background-color: #D25A0B; /*Brown color theme*/<br />
color: white;<br />
border-color: #D25A0B; /*Brown color theme*/<br />
}<br />
<br />
.tabcontent{<br />
display:none;<br />
}<br />
<br />
@media print {<br />
.tabcontent {<br />
display:block !important;<br />
}<br />
}<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js"><br />
</script><br />
<br />
<ul div id="flowertabs" class="modernbricksmenu2"><br />
<li><a href="#" rel="country1" <span style="color: red;">class="selected"</span>>Tab 1</a></li> <span style="color: #006600;">// lệnh</span><b style="color: #006600;">class="selected"</b><span style="color: #006600;"> để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.</span><br />
<br />
<li><a href="#" rel="country2">Tab 2</a></li><br />
<li><a href="#" rel="country3">Tab 3</a></li><br />
<li><a href="#" rel="country4">Tab 4</a></li><br />
</ul><br />
<br />
<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px"><br />
<br />
<div id="country1" class="tabcontent"><br />
Tab content 1 here<br />
</div><br />
<br />
<div id="country2" class="tabcontent"><br />
Tab content 2 here<br />
</div><br />
<br />
<div id="country3" class="tabcontent"><br />
Tab content 3 here<br />
</div><br />
<br />
<div id="country4" class="tabcontent"><br />
Tab content 4 here<br />
</div><br />
<br />
</div><br />
<br />
<script type="text/javascript"><br />
<br />
var countries=new ddtabcontent("flowertabs")<br />
countries.setpersist(true)<br />
countries.setselectedClassTarget("link")<br />
countries.init(<span style="color: red;">2000</span>) <span style="color: #009900;">// định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống</span><br />
<br />
</script></div><br />
<br />
<span style="font-weight: bold;">C. Loại 3:</span><br />
Hình minh họa:<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1a1ci63SE5FUWb65Fut5Zmxb9IawG70sdldx9txb3j9alYx-lEAvOsxiHdao89tFDpWAYUns3Hjo0OHNQ1SkM7-iJj1KJ52Z_vodWXNFwKD5umKGDEdtakWpYLWr8j_op72OMAvCQT-t/s1600-h/tab3.bmp" style="color: #6f3c1b; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5324125298418177250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1a1ci63SE5FUWb65Fut5Zmxb9IawG70sdldx9txb3j9alYx-lEAvOsxiHdao89tFDpWAYUns3Hjo0OHNQ1SkM7-iJj1KJ52Z_vodWXNFwKD5umKGDEdtakWpYLWr8j_op72OMAvCQT-t/s400/tab3.bmp" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; cursor: pointer; display: block; height: 141px; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; width: 400px;" /></a><br />
<br />
<span style="font-weight: bold;">Code:</span><br />
<div class="codeview" style="-webkit-box-shadow: rgba(0, 0, 0, 0.496094) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://data.fandung.com/img/codeview/codeview-ico.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; clear: both; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 20px; margin-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><br />
<style type="text/css"><br />
.indentmenu{<br />
font: bold 13px Arial;<br />
width: 100%; /*leave this value as is in most cases*/<br />
}<br />
<br />
.indentmenu ul{<br />
margin: 0;<br />
padding: 0;<br />
float: left;<br />
/* width: 80%; width of menu*/<br />
border-top: 1px solid navy; /*navy border*/<br />
background: black url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/indentbg.gif) center center repeat-x;<br />
}<br />
<br />
.indentmenu ul li{<br />
display: inline;<br />
}<br />
<br />
.indentmenu ul li a{<br />
float: left;<br />
color: white; /*text color*/<br />
padding: 5px 11px;<br />
text-decoration: none;<br />
border-right: 1px solid navy; /*navy divider between menu items*/<br />
}<br />
<br />
.indentmenu ul li a:visited{<br />
color: white;<br />
}<br />
<br />
.indentmenu ul li a.selected{<br />
color: white !important;<br />
padding-top: 6px; /*shift text down 1px*/<br />
padding-bottom: 4px;<br />
background: black url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/indentbg2.gif) center center repeat-x;<br />
}<br />
<br />
<br />
.tabcontentstyle{ /*style of tab content oontainer*/<br />
border: 1px solid gray;<br />
width: 450px;<br />
margin-bottom: 1em;<br />
padding: 10px;<br />
}<br />
<br />
.tabcontent{<br />
display:none;<br />
}<br />
<br />
@media print {<br />
.tabcontent {<br />
display:block !important;<br />
}<br />
}<br />
</style><br />
<br />
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js"><br />
</script><br />
<br />
<div id="pettabs" class="indentmenu"><br />
<li><a href="#" rel="country1" <span style="color: red;">class="selected"</span>>Tab 1</a></li> <span style="color: #006600;">// lệnh</span><b style="color: #006600;">class="selected"</b><span style="color: #006600;"> để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.</span><br />
<br />
<li><a href="#" rel="country2">Tab 2</a></li><br />
<li><a href="#" rel="country3">Tab 3</a></li><br />
<li><a href="#" rel="country4">Tab 4</a></li><br />
</div><br />
<br />
<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em"><br />
<br />
<div id="country1" class="tabcontent"><br />
Tab content 1 here<br />
</div><br />
<br />
<div id="country2" class="tabcontent"><br />
Tab content 2 here<br />
</div><br />
<br />
<div id="country3" class="tabcontent"><br />
Tab content 3 here<br />
</div><br />
<br />
<div id="country4" class="tabcontent"><br />
Tab content 4 here<br />
</div><br />
<br />
</div><br />
<br />
<script type="text/javascript"><br />
<br />
var countries=new ddtabcontent("pettabs")<br />
countries.setpersist(true)<br />
countries.setselectedClassTarget("link")<br />
countries.init(<span style="color: red;">2000</span>) <span style="color: #009900;">// định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống</span><br />
<br />
</script></div><br />
<br />
<span style="color: red; font-weight: bold;">Chúc các bạn thành công.</span></span><br />
<div style="clear: both;"></div></div><div class="post-body entry-content" style="font-family: Arial, sans-serif; font-size: 13px;"><span class="Apple-style-span" style="color: red;"><b><br />
</b></span></div><img src="http://data.fandung.com/img/sign-fd.png" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #29303b; float: right; font-family: Arial, sans-serif; font-size: 13px;" /><br />
<div>nguồn : http://fandung.com</div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-77346324110638453522011-07-16T09:56:00.001-07:002011-07-19T18:40:18.032-07:00anh blog<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyfD-H3UHwOjIRI69VDwF-TmWebPzrCwOspoZOg6S2nuYizFNMIo1DczrtCl4QFXzOGghr6LGHo9lIn-0Bq2r-2xDkb6ETXhtLzsXVPaXXURylKnV_4xl7CWuaAGEKn_dADmcLhHJaS0V/s1600/2h35svl.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyfD-H3UHwOjIRI69VDwF-TmWebPzrCwOspoZOg6S2nuYizFNMIo1DczrtCl4QFXzOGghr6LGHo9lIn-0Bq2r-2xDkb6ETXhtLzsXVPaXXURylKnV_4xl7CWuaAGEKn_dADmcLhHJaS0V/s320/2h35svl.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJb6KaqjC6aO6hcFsRBF2m3ppJ0vEzOfyUFCIhSGE8VqFMbAMErENJIQ8fOWG0rnrmAJ4W7khLRFzSELp1nQh51HlzdsqXJsWizACSK7yhk3UrZBjDq8vMHYrb0s6IXTmLUEH-W0KHcDI/s1600/2h35svl1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJb6KaqjC6aO6hcFsRBF2m3ppJ0vEzOfyUFCIhSGE8VqFMbAMErENJIQ8fOWG0rnrmAJ4W7khLRFzSELp1nQh51HlzdsqXJsWizACSK7yhk3UrZBjDq8vMHYrb0s6IXTmLUEH-W0KHcDI/s320/2h35svl1.PNG" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZB_2ielY3NBxibTazbVCLKLlOia0WvvT0FjBz9_BEGZDaO2zQOZ1mI4d65nuyzAFfCrdgBbU7vvL_OVf9IITkjOPwKqPdCRoyH80TSvUwbuPMoqD3fhsqbgPE4ICcXjrnLNJwr5nir2d/s1600/sim-so-dep.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZB_2ielY3NBxibTazbVCLKLlOia0WvvT0FjBz9_BEGZDaO2zQOZ1mI4d65nuyzAFfCrdgBbU7vvL_OVf9IITkjOPwKqPdCRoyH80TSvUwbuPMoqD3fhsqbgPE4ICcXjrnLNJwr5nir2d/s320/sim-so-dep.gif" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0o-rIS4_SB3R4dQsuDcdCGi6dTq95zFPjm-66wu6A4zjsDCiTTEUX-p8V2-7W2-b_gd86gpMbPxGIZ80zynHVdoggecvZkikPaexB88yfaPtMgF9O7FkMfI98BYUeesGE7Dmz_9U1nUea/s1600/vn88.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0o-rIS4_SB3R4dQsuDcdCGi6dTq95zFPjm-66wu6A4zjsDCiTTEUX-p8V2-7W2-b_gd86gpMbPxGIZ80zynHVdoggecvZkikPaexB88yfaPtMgF9O7FkMfI98BYUeesGE7Dmz_9U1nUea/s1600/vn88.gif" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><br />
</div>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-46910119732697340802011-06-05T21:02:00.000-07:002011-07-16T02:06:34.205-07:00Tạo dòng text xoay tròn quanh chuột<div class="date-header" style="color: #000033; font-family: arial; font-size: 11px; line-height: 1.5em; margin-bottom: 0px; margin-left: 15px; margin-right: 0px; margin-top: -14px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /></div><div class="post-body entry-content" style="font-family: Helvetica, Arial, Verdana, 'Trebuchet MS', sans-serif; font-size: small;"><div id="post_body"><div id="VietAd"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeKf4j-XziOgRXnhKU5mX1cNiTrSQTuy1r0HkbzaYQ6QwsMR6trii3WoUBhWtBcQfgwyUGOEjkdhBxKvb1aL7KAvduN_vvmbuhLcvnZZoTbHUSJTnvtrK84pPZODCWQBhC7kvBPypDPBpy/s1600/gfg.png" rel="lightbox" style="color: #ff0033; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5483313900949134306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeKf4j-XziOgRXnhKU5mX1cNiTrSQTuy1r0HkbzaYQ6QwsMR6trii3WoUBhWtBcQfgwyUGOEjkdhBxKvb1aL7KAvduN_vvmbuhLcvnZZoTbHUSJTnvtrK84pPZODCWQBhC7kvBPypDPBpy/s200/gfg.png" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; cursor: pointer; float: left; height: 90px; margin-bottom: 10px; margin-left: 0pt; margin-right: 10px; margin-top: 0pt; width: 100px;" /></a><span style="font-weight: bold;">(Traidatmui.com) – Bạn có muốn chú chuột nhỏ bé trên blog mình trở nên xinh xắn thu hút hơn không? Một thủ thuật mà mình muốn giới thiệu cùng các bạn đó là tạo phong cách riêng cho chuột trên blog. Thủ thuật này sẽ làm cho chú chuột của bạn mang phong cách riêng biệt, nó sẽ mang theo dòng chữ mà bạn muốn hiển thị trên blog mình. Dòng text sẽ chạy xung quanh chú chuột vừa tạo cảm giác thú vị, vừa thể hiện được phong cách riêng cho blog. Ở đây mình xin hướng dẫn cách tạo dòng text chạy vòng quanh chú chuột trên Blogger, dưới đây là thủ thuật.</span><br /><center><div class="demodiv" style="padding-top: 23px;"><a class="demo" href="http://www.traidatmuitips.everywebspace.com/demo/demo_circle_text.html" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.traidatmui.everywebspace.com/image/demo1.png); background-origin: initial; background-position: initial initial; background-repeat: no-repeat no-repeat; color: #ff0033; height: 40px; margin-top: 40px; padding-left: 92px; padding-top: 22px; text-decoration: none;" target="_blank"></a></div></center><br /><span style="color: #000099; font-weight: bold;">☼ Bất đầu thủ thuật</span><br /><br />1. Đầu tiên hãy đăng nhập tài khoản của blog bạn<br />2. Vào bố cục chọn chỉnh sửa <span style="font-weight: bold;">HTML</span><br />3. Chèn code bên dưới vào trước thẻ <span style="color: #cc0000;">]]></b:skin></span><br /><div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><br />#outerCircleText {<br />font-style: italic;<br />font-weight: bold; <span style="color: #006600;">/*Nếu không muốn in đậm cho text bạn có thể bỏ dòng này*/</span><br />font-family: times; <span style="color: #006600;">/*chọn font chữ*/</span><br />color: #0033ff; <span style="color: #006600;">/*màu của dòng text hiển thị*/</span><br />position: absolute;<br />top: 0;<br />left: 0;<br />z-index: 1000;<br />cursor: default; <span style="color: #006600;">/*hình dạng của chuột*/</span><br />}<br /><br />#outerCircleText div {<br />position: relative;}<br /><br />#outerCircleText div div {<br />position: absolute;<br />top: 0;<br />left: 0;<br />text-align: center;}</div><br /><span style="color: #cc0000; font-weight: bold;">Chỉnh code:</span> Bạn chỉ việc dựa vào chú thích trong code để chỉnh sửa code cho hợp lý, nhớ xóa bỏ các dòng text khi chỉnh sửa xong nhe.<br /><br />4. Save template lại<br />5. Trở về phần tử trang thêm 1 <span style="font-weight: bold;">HTML/Javascript</span><br />6. Thêm code sau vào phần tử vừa tạo<br /><div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><script type="text/javascript"><br />var msg = "<span style="color: #000099; font-weight: bold;">Chào bạn đến với TRAIDATMUI.COM</span>";<span style="color: #006600;"> // thay thành text của bạn</span><br />var size = 24; <span style="color: #006600;">// cỡ chữ, bạn có thể chọn cỡ chữ khác</span><br />var circleY = 0.75; <span style="color: #006600;">// độ rộng vòng tròn text theo chiều đứng</span><br />var circleX = 2; <span style="color: #006600;">// độ rộng vòng tròn text theo chiều ngang</span><br />var letter_spacing = 8; <span style="color: #006600;">// khoảng trắng giữa các chữ cái</span><br />var diameter = 10;<br />var rotation = 0.2;<br />var speed = 0.3; <span style="color: #006600;">// tốc độ chạy của text</span><br /></script><br /><script type="text/javascript" src="<span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/circle_text.js</span>"><br /></script></div><br />Bạn hãy điều chỉnh theo hướng dẫn cho phù hợp với ý thích của bạn.<br />7. Save lại là xong<br /><br /><span style="color: #000099; font-weight: bold;">Chúc bạn thành công</span></div></div></div><span class="Apple-style-span" style="font-family: Helvetica, Arial, Verdana, 'Trebuchet MS', sans-serif; font-size: x-small;"><span><br /><br /><br /><b>Nguồn: <a href="http://www.traidatmui.com/" style="color: blue; text-decoration: none;">TRAIDATMUI.com</a></b></span></span>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-48525094938352068212011-06-05T20:43:00.000-07:002011-07-16T02:06:34.205-07:00Tiện ích bài mới nhất (recent post) giống vn.yahoo.com<div class="date-header" style="color: #000033; font-family: arial; font-size: 11px; line-height: 1.5em; margin-bottom: 0px; margin-left: 15px; margin-right: 0px; margin-top: -14px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /></div><div class="post-body entry-content" style="font-family: Helvetica, Arial, Verdana, 'Trebuchet MS', sans-serif; font-size: small;"><div id="post_body"><div id="VietAd"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8VPdz_MxJuWpZrDOX1GNNIz5cUiv-Qn5n6YHMppA3HpGKdq2VxcdoQRgebttW_3XG6noHik2VAGI5yhaE7PHuyXIOD2Er70nI0jnl8iP7kN_-eu4Q0zgFqrFncmJBimkOGrtxsQpU-xU/s1600/2.png" style="color: #ff0033; text-decoration: none;"><img alt="" id="BLOGGER_PHOTO_ID_5540696119408343762" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8VPdz_MxJuWpZrDOX1GNNIz5cUiv-Qn5n6YHMppA3HpGKdq2VxcdoQRgebttW_3XG6noHik2VAGI5yhaE7PHuyXIOD2Er70nI0jnl8iP7kN_-eu4Q0zgFqrFncmJBimkOGrtxsQpU-xU/s200/2.png" style="border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 1px; cursor: pointer; float: left; height: 90px; margin-bottom: 10px; margin-left: 0pt; margin-right: 10px; margin-top: 0pt; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; width: 100px;" /></a><span style="font-weight: bold;">(Traidatmui.com) – Theo yêu cầu của <span style="font-weight: bold;">FRIENDS-PC</span>, bạn yêu cầu làm recent post giống như trang vn.yahoo.com nhưng thời gian qua bận nhiều việc nên chưa đáp ứng yêu cầu của bạn được. Hôm nay mình đã test thành công và xin chia sẽ các bạn việc thực hiện thủ thuật này. Thủ thuật này sẽ giúp cho các bài viết của bạn tự động trình diễn trông khá bắt mắt. Mình sẽ hướng dẫn các bạn từng bước để đưa tiện ích này vào blog của mình. Thủ thuật này sử dụng hơi khá nhiều file script do đó nếu bạn không rành về script thì nên giữ nguyên chúng để tránh bị lỗi, tiện ích sẽ không hoạt động như ý muốn. Bạn có thể xem demo để thấy rõ hiệu ứng của recent post này.</span><br /><center><div class="demodiv" style="padding-top: 23px;"><a class="demo" href="http://www.traidatmuitips.everywebspace.com/demo/demo_ya_post.htm" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.traidatmui.everywebspace.com/image/demo1.png); background-origin: initial; background-position: initial initial; background-repeat: no-repeat no-repeat; color: #ff0033; height: 40px; margin-top: 40px; padding-left: 92px; padding-top: 22px; text-decoration: none;" target="_blank"></a></div></center><br /><div style="color: #330000; text-align: center;">Hình ảnh minh họa</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpJWU088Kcea5eJwo9aDYAK3sK-nBOjscUFFeWzzRd9I_Q-lx2-dXUZzNftgTAulZWcJOOmp-Jo9rLGDfGbMVu_Mc4WbpLET_YFtT1lf_-YB3fhwKQr0G3g4zJ3YwJAQqqKSUFkXRirj0/s1600/1.png" rel="lightbox" style="color: #ff0033; text-decoration: none;"><img alt="" id="BLOGGER_PHOTO_ID_5540696249761682914" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpJWU088Kcea5eJwo9aDYAK3sK-nBOjscUFFeWzzRd9I_Q-lx2-dXUZzNftgTAulZWcJOOmp-Jo9rLGDfGbMVu_Mc4WbpLET_YFtT1lf_-YB3fhwKQr0G3g4zJ3YwJAQqqKSUFkXRirj0/s400/1.png" style="border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 1px; cursor: pointer; display: block; height: 243px; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; text-align: center; width: 400px;" /></a>1. Đầu tiên đăng nhập <span style="font-weight: bold;">Blogspot</span><br />2. Vào bố cục chọn chỉnh sửa <span style="font-weight: bold;">HTML</span><br />3. Chèn code css sau vào trước thẻ <span style="color: red;">]]></b:skin></span><br /><div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;">.mod{<br />background:#eee; <span style="color: #006600;">/*màu nền của tiện ích*/</span><br />border:3px solid #6D7B8D; <span style="color: #006600;">/*đường viền của tiện ích*/</span><br />margin-bottom:0px;<br />width:550px; <span style="color: #006600;">/*độ rộng của tiện ích*/</span><br />padding:0px;}<br />.glv{height:330px; <span style="color: #006600;">/*chiều cao của tiện ích*/</span><br />overflow:hidden;}<br />.bd{position:relative;padding:4px 4px 4px 6px;}<br />.gl2-ct .ct{margin-left:0px;position:relative;}<br /><br />.vpv{padding:0px;width:316px; <span style="color: #006600;">/*độ rộng cảu phần bên trái của tiện ích*/</span><br />display:none;<br />position:absolute;<br />color:#000;<br />border-right:1px solid #5C5858;<br />}<br />.gl-title a {color:#0000ff; <span style="color: #006600;">/*màu text của tiêu đề bài viết bên trái*/</span><br />font-size:13px;<br />font-weight:bold;}<br />.gl-title a:hover {color:#ff0033;}<br />.glv .on{display:block;}<br />.vimg{width:305px; <span style="color: #006600;">/*độ rộng của ảnh bên trái*/</span><br />height:200px; <span style="color: #006600;">/*chiều cao của ảnh bên trái*/</span><br />border:1px solid #fff;padding:2px;}<br />.glv ul.vpv-ft li{<br />list-style-type:none;}<br />.vpv-ft{<br />width:40%; <span style="color: #006600;">/*độ rộng phần bên phải*/</span><br />position:absolute;<br />top:0px;<br />right:0px;<br />margin-top:5px;<br />text-align:left;}<br />.vpv-ft a{<br />color:#000099; <span style="color: #006600;">/*màu tiêu đề bên phải*/</span><br />font-size:11px;<br />font-family:arial;<br />text-decoration: none;}<br />.vpv-ft a:hover{color:#ff0033;}<br />.vpv-ft li{<br />list-style-type:none;<br />min-height:40px;<br />cursor:pointer;<br />border-bottom:1px solid #5C5858;<br />position:relative;<br />text-align:left;}<br /><br />.vpv-ft li.last{<br />border-bottom:0;<br />padding-bottom:5px;}<br />.vpv-ft li.first{<br />border-top:1px solid #5C5858;<br />padding-bottom:5px;}<br />.vpv-ft li.on{<br />background:#AFC7C7;<br />}<br /><br />.vpv-ft img{<br />float:left;<br />width:34px; <span style="color: #006600;">/*độ rộng của ảnh bên phải*/</span><br />height:30px; <span style="color: #006600;">/*chiều cao của ảnh bên phải*/</span><br />margin:3px 4px 0px 2px;<br />padding:0px;}<br />.vpv-ft a{font-family:verdana;}<br />.glv .vpv-ft .on .imgpointer{display:block;}<br />.glv .vpv-ft .imgpointer{<br />display:none;<br />height:14px;<br />width:6px;<br />position:absolute;<br />left:-10px;<br />top:7px;}</div><br />4. Save template lại và trở về phần tử trang<br />5. Thêm tiện ích <span style="font-weight: bold;">HTML/Javascript</span> và chèn vào nó code bên dưới<br /><div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><script language="JavaScript"><br />imgr = new Array();<br />imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";<br /><br />showRandomImg = false;<br /><br />fntsize = 12;<br />acolor = "";<br />aBold = false;<br /><br /><br />text = "comments";<br />showPostDate = true;<br /><br />summaryPost = 150; <span style="color: #006600;">//số ký tự hiển thị của bài viết tóm tắt bên trái</span><br />summaryFontsize = 12;<br />summaryColor = "";<br /><br />numposts =6;<br />label = "<span style="color: #cc0000; font-weight: bold;">Advanced blogger</span>"; <span style="color: #006600;">/*nhãn bài viết*/</span><br />home_page = "<span style="color: red; font-weight: bold;">http://www.traidatmui.com/</span>"; <span style="color: #006600;">/*thay thành địa chỉ blog của bạn*/</span><br /><br /></script><br /><div id="gl2" class="mod glv"><div class="bd"><div id="gl2-vd"></div><div class="gl2-ct"><div id="gl2-ct1" class="ct on"><br /><script type="text/javascript" src="<span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/ya_glv_post.js</span>"></script><br /></div><br /><script type="text/javascript" src="<span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/ya_ct_post.js</span>"></script><br /></div></div></div><br /><br /><script type="text/javascript" src="<span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/ya_jquery_03.js</span>"></script><br /><script type="text/javascript" src="<span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/ya_jquery.min.js</span>"></script><br /><script type="text/javascript" src="<span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/ya_jquery_02.js</span>"></script><br /><script type="text/javascript" src="<span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/ya_jquery_01.js</span>"></script><br /><script type="text/javascript"><br />(function() { new YAHOO.sea.fp.TodayVSet('gl2-ct1', true); })();<br />(function(){YAHOO.util.Event.addListener(window,'load',function(){window.setTimeout(function(){<br />},500);});})();<br /></script></div><br />6. Sau khi chỉnh sửa xong bạn save tiện ích lại<br /><br />Ở trên là mình cho tiện ích hiển thị cho toàn bộ bài viết trên blog nếu muốn hiển thị theo từng nhãn bạn có thể thay đổi như bên dưới<br /><div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;">Thay <span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/ya_glv_post.js</span><br />Thành <span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/ya_glv_label.js</span><br /><br />Và tiếp theo thay <span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/ya_ct_post.js</span><br /><br />Thành <span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/ya_ct_label.js</span></div><br /><br /><span style="color: #000099; font-weight: bold;">Chúc bạn thành công</span></div></div></div><span class="Apple-style-span" style="font-family: Helvetica, Arial, Verdana, 'Trebuchet MS', sans-serif; font-size: x-small;"><span><br /><br /><br /><b>Nguồn: <a href="http://www.traidatmui.com/" style="color: blue; text-decoration: none;">TRAIDATMUI.com</a></b></span></span>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0tag:blogger.com,1999:blog-2903201273877748681.post-57923015212016644442011-06-05T20:21:00.000-07:002011-07-16T02:06:34.205-07:00Tạo meu giống trang Số Hóa cho Blogspot<div class="date-header" style="color: #000033; font-family: arial; font-size: 11px; line-height: 1.5em; margin-bottom: 0px; margin-left: 15px; margin-right: 0px; margin-top: -14px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><br /></div><div class="post-body entry-content" style="font-family: Helvetica, Arial, Verdana, 'Trebuchet MS', sans-serif; font-size: small;"><div id="post_body"><div id="VietAd"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvHDClP-UMcC7Y8As9aUPEHMA_IyCBGikFJgApVWauHcl4TrqJaMSjTwsHTxrSODeywtgKfsMJgWt_P0sFXoKhFZFiBbhMbvR5seKDTlQknoU8stHc6j4WMzkh72Nl34xugO6aCOPZfZlB/s1600/rep.gif" style="color: #ff0033; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5566480170010684914" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvHDClP-UMcC7Y8As9aUPEHMA_IyCBGikFJgApVWauHcl4TrqJaMSjTwsHTxrSODeywtgKfsMJgWt_P0sFXoKhFZFiBbhMbvR5seKDTlQknoU8stHc6j4WMzkh72Nl34xugO6aCOPZfZlB/s200/rep.gif" style="border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 1px; cursor: pointer; float: left; height: 90px; margin-bottom: 0px; margin-left: 0px; margin-right: 5px; margin-top: 0px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; width: 100px;" /></a><span style="font-weight: bold;">(Traidatmui.com) - Chắc hẳn các bạn Blogger đã từng đọc và thực hiện theo thủ thuật tạo menu như trang sohoa.vnexpress.net mà Fandung đã giới thiệu. Có bạn thực hiện được, có bạn không do ở thủ thuật đó Fandung hướng dẫn bạn tự tạo ảnh cho phần menu chính nên nếu bạn không rành về phần tạo ảnh thì khó mà thực hiện được. Hơn nữa ở phần Submenu Fandung đã cho chúng vào một file JS nên việc chỉnh sửa các menu con này cũng khiến nhiều bạn phải từ bỏ việc tạo menu này. Để khắc phục những khó khăn đó, mình sẽ giúp các bạn tạo menu Số Hóa không cần phải tạo ảnh cho menu chính và việc chỉnh sửa các Submenu cũng đơn giản hơn. Thủ thuật rất phức tạp đòi hỏi bạn phải kiên trì và cẩn thận khi thực hiện các bước.</span><br /><center><div class="demodiv" style="padding-top: 23px;"><a class="demo" href="http://www.traidatmuitips.everywebspace.com/demo/demo_menu_sohoa.htm" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://www.traidatmui.everywebspace.com/image/demo1.png); background-origin: initial; background-position: initial initial; background-repeat: no-repeat no-repeat; color: #ff0033; height: 40px; margin-top: 40px; padding-left: 92px; padding-top: 22px; text-decoration: none;" target="_blank"></a></div></center><br /><div style="color: #330000; text-align: center;">Hình ảnh minh họa</div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5InDGrVbOeD62S9RD4CgPNMw_8H3z5V9hr-PtPf-N4IH1_w1k4YVSYS60Bh7Bfu7_RgMsc0Cy7PcDevzf3cNKLUTTM4114isqiUDs36CqIPWfPjxs0_zCsKTxPX-Z-vDIm8WaSz3MJV7/s1600/sohoa.png" rel="lightbox" style="color: #ff0033; text-decoration: none;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5566479613864820850" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5InDGrVbOeD62S9RD4CgPNMw_8H3z5V9hr-PtPf-N4IH1_w1k4YVSYS60Bh7Bfu7_RgMsc0Cy7PcDevzf3cNKLUTTM4114isqiUDs36CqIPWfPjxs0_zCsKTxPX-Z-vDIm8WaSz3MJV7/" style="border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 1px; cursor: pointer; display: block; margin-bottom: 10px; margin-left: auto; margin-right: auto; margin-top: 0px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; text-align: center; width: 500px;" /></a><span style="color: #000099; font-weight: bold;">» Bắt đầu thủ thuật</span><br /><br />1. Đăng nhập vào tài khoản <span style="font-weight: bold;">Blogger</span><br />2. Vào phần <span style="font-weight: bold;">thiết kế </span>(hay bố cục)<br />3. Chọn chỉnh sửa <span style="font-weight: bold;">HTML</span><br />4. Chèn code bên dưới vào sau thẻ <span style="color: red;"><head></span><br /><div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><script type="text/javascript" language="javascript" src="<span style="color: #000099; font-weight: bold;">http://traidatmui-tips.googlecode.com/files/menu_sohoa.js</span>"></script></div><br />5. Chèn tiếp code CSS bên dưới vào trước thẻ <span style="color: red;">]]></b:skin></span><br /><div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;">#linksubMenu{ font-family:tahoma;}<br />#linksubMenu a{ font-family:tahoma;text-decoration:none;color:#000;}<br />#linksubMenu a:hover{color:#0000ff;}<br />#Menu a{ text-decoration:none;color:#fff;}<br />.Menu{<br />font-size:12px;<br />width:962px;<br />float:left;<br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM6RdI0veRRimbJoU8kBCBYjJ6FdQlR42muljoNtUez4ZeZjSFn5DnkvtB24kEacDgwOEj5IZOs2NHhvoXleQAevc_Abys-rpxcL8nBBWrVd8eROy3LSb0p5l_yka9EKYG71poYohGvOcU/);<br />height:35px;<br />background-repeat:no-repeat;<br />position:relative;<br />}<br />.MarrginTop{<br />width:100%;<br />height:10px;<br />overflow:hidden;<br />}<br />.PaddingLeft{<br />width:63px;<br />float:left;<br />height:5px<br />}<br />.menuDefault102 {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibBRe-Y8eX5wLUabvw_LWofcVnw6CdvFTKLEp7KOXJNV6LSAnC9lCUHcbOHIRuQ_zogrUFTQdb8Yn1yzRI9zyOLOo5wTH4AJ5nh-VQc51ihBHrX-aQKPXO__iJZzQOSybM7xz2P_rh-nyn/) repeat-x;<br />width: 2px;<br />height: 23px;<br />float:left;<br />}<br /><br />.bgSubMenu {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_mrYrda3ka06YsIf4HPNi1YLNWdRUaDBnLPD8QBkS1luHBb7-KID4TLUiBeUM4BqfvX69E6BZpU3VwckgVn6CIhEaqJmQQVGOBPAG5o1zl14aVQ3cdNTsbXb3WEe7MO4RSLAjqk2s5Qhj/);<br />height:23px;<br />background-repeat:no-repeat;<br />float:left;<br />width:962px;<br />overflow:hidden;<br />}<br />.MenuTime{<br />width:270px;<br />height:23px;<br />color:#848484;<br />font-family:Arial;<br />font-size:11px;<br />font-weight:bold;<br />float:left;<br />line-height:23px;<br />text-align:left;<br />margin-left:10px<br />}<br />.subMenu{<br />float:left;<br />font-family:tahoma;<br />font-size:11px;<br />height:16px;<br />margin-top:6px<br />}<br />.TextSearch{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghRcZ57Dar-flv1vylG9dvd1whukkLXlgKWsjM0wK0w1wAdNmTYB4tJM3hHsryiGen5Q7WfPaqLI0fXaLvMj30ernjffZTuFw7BGbIQKfaewoVNYdkBE4SdYCMqDjRzGgQn0tMjxxFdG55/) no-repeat left;<br />width:166px;<br />height:23px;<br />float:right;<br />padding-left:7px;<br />margin-right:10px;<br />}<br />.seach-button {float:right;<br />width: 30px;<br />height:22px;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjUlcCOhVLf6-D_QNYiNT3uPZWgE0i5u4fAxYcfXbY9cmJ_tdp7FZ7RNzs-QIyNKan9s9cVejC4VPUupD5cXfduDVz_PgJTmn7IEVGQvOE13fxq8J4TD8HQzqHJNjTxJ_cNZq30wn_hqll/) no-repeat bottom;<br />}<br />.seach-button:hover {float:right;<br />width: 30px;<br />height:22px;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvgOac679t36OAYPCa1NYEYgDhlTiJ5Zyll3HybkGLawOPqEyIYts5BGue64EwEXoS61xQTM0b2YkxTxXCkCb1rQhDAj3KUc1MscRWchr-x6ZjikROeLmD9dkfHVIuo82DPSkcpzd6Qm7/) no-repeat bottom;<br />}<br /><span style="color: #003300;">/*Home*/</span><br />.menuDefault1 {<br />cursor: Pointer;<br />width: 76px;<br />height: 23px;<br />padding-top:4px;<br />text-align:center;<br />float:left;<br />margin-left:0px;<br />}<br />.menuActive1_1 {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_UsRCdTPLvnTZhGFFbvRn2vohnUzTqpXu1uHlErcU0pTP7gd81H9ex3T2M9uq5kTC7fF1PbtZGd6ZwWJNJ2lJOJsBkERTHERi9OJBpTQy9IlJBnqcRzHu3gV-APxFhXQb2ZBnQNsQfzK/) repeat-x;<br />cursor: Pointer;<br />padding-top:4px;<br />text-align:center;<br />color:#000;<br />font-weight:bold;<br />width: 76px;<br />height: 23px;<br />float:left;<br />}<br /><span style="color: #003300;">/*End Home*/</span><br /><br /><span style="color: #003300;">/*Menu 1*/</span><br />.menuDefault2 {<br />height: 25px;<br />padding:5px 3px 0px 3px;<br />text-align:center;<br />float:left;<br />margin-left:40px;<br />}<br />.menuActive2_2 {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_UsRCdTPLvnTZhGFFbvRn2vohnUzTqpXu1uHlErcU0pTP7gd81H9ex3T2M9uq5kTC7fF1PbtZGd6ZwWJNJ2lJOJsBkERTHERi9OJBpTQy9IlJBnqcRzHu3gV-APxFhXQb2ZBnQNsQfzK/) repeat-x;<br />padding:5px 3px 0px 3px;<br />height: 25px;<br />cursor: Pointer;<br />text-align:center;<br />color:#000;<br />float:left;<br />margin-left:40px;<br />}<br /><span style="color: #003300;">/*End menu 1*/</span><span style="color: #003300;">/*Menu 2*/</span><br />.menuDefault3 {<br />height: 25px;<br />padding:5px 3px 0px 3px;<br />text-align:center;<br />float:left;<br />}<br />.menuActive3_3 {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_UsRCdTPLvnTZhGFFbvRn2vohnUzTqpXu1uHlErcU0pTP7gd81H9ex3T2M9uq5kTC7fF1PbtZGd6ZwWJNJ2lJOJsBkERTHERi9OJBpTQy9IlJBnqcRzHu3gV-APxFhXQb2ZBnQNsQfzK/) repeat-x;<br />padding:5px 3px 0px 3px;<br />height: 25px;<br />cursor: Pointer;<br />text-align:center;<br />color:#000;<br />float:left;<br />}<br /><span style="color: #003300;">/*End menu 2*/</span><span style="color: #003300;">/*Menu 3*/</span><br />.menuDefault4 {<br />height: 25px;<br />padding:5px 3px 0px 3px;<br />text-align:center;<br />float:left;}<br />.menuActive4_4 {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_UsRCdTPLvnTZhGFFbvRn2vohnUzTqpXu1uHlErcU0pTP7gd81H9ex3T2M9uq5kTC7fF1PbtZGd6ZwWJNJ2lJOJsBkERTHERi9OJBpTQy9IlJBnqcRzHu3gV-APxFhXQb2ZBnQNsQfzK/) repeat-x;<br />padding:5px 3px 0px 3px;<br />height: 25px;<br />cursor: Pointer;<br />text-align:center;<br />color:#000;<br />float:left;<br />}<br /><span style="color: #003300;">/*End menu 3*/</span><span style="color: #003300;">/*Menu 4*/</span><br />.menuDefault5 {<br />height: 25px;<br />padding:5px 3px 0px 3px;<br />text-align:center;<br />float:left;<br />}<br />.menuActive5_5 {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_UsRCdTPLvnTZhGFFbvRn2vohnUzTqpXu1uHlErcU0pTP7gd81H9ex3T2M9uq5kTC7fF1PbtZGd6ZwWJNJ2lJOJsBkERTHERi9OJBpTQy9IlJBnqcRzHu3gV-APxFhXQb2ZBnQNsQfzK/) repeat-x;<br />padding:5px 3px 0px 3px;<br />height: 25px;<br />cursor: Pointer;<br />text-align:center;<br />color:#000;<br />float:left;<br />}<br /><span style="color: #003300;">/*END Menu 4*/</span><br /><span style="color: #003300;">/*Menu 5*/</span><br />.menuDefault6 {<br />height: 25px;<br />padding:5px 3px 0px 3px;<br />text-align:center;<br />float:left;<br />}<br />.menuActive6_6 {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_UsRCdTPLvnTZhGFFbvRn2vohnUzTqpXu1uHlErcU0pTP7gd81H9ex3T2M9uq5kTC7fF1PbtZGd6ZwWJNJ2lJOJsBkERTHERi9OJBpTQy9IlJBnqcRzHu3gV-APxFhXQb2ZBnQNsQfzK/) repeat-x;<br />padding:5px 3px 0px 3px;<br />height: 25px;<br />cursor: Pointer;<br />text-align:center;<br />color:#000;<br />float:left;<br />}<br /><span style="color: #003300;">/*END Menu 5*/</span></div><br />6. Save template lại và trở về phần tử trang<br />7. Thêm 1 <span style="font-weight: bold;">HTML/Javascript</span> và dán vào nó code bên dưới<br /><div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><div class="linksubMenu" id="linksubMenu"><br /><div class="Menu" id="Menu"><br /><div class="MarrginTop"></div><br /><div class="PaddingLeft"></div><br /><br /><a href="<span style="color: #000099; font-weight: bold;">http://www.traidatmui.com</span>"><div id="<span style="color: red; font-weight: bold;">1</span>" class="<span style="color: #cc0000; font-weight: bold;">menuActive1_1</span>" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"><span style="color: #330033; font-weight: bold;">Home</span></div></a><br /><div class="menu1"></div><br /><br /><a href="#"><div id="<span style="color: red; font-weight: bold;">2</span>" class="<span style="color: #cc0000; font-weight: bold;">menuDefault2</span>" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"><span style="color: #330033; font-weight: bold;">Menu 1</span></div></a><br /><div class="menuDefault102"></div><br /><br /><a href="#"><div id="<span style="color: red; font-weight: bold;">3</span>" class="<span style="color: #cc0000; font-weight: bold;">menuDefault3</span>" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"><span style="color: #330033; font-weight: bold;">Menu 2</span></div></a><br /><div class="menuDefault102"></div><br /><br /><a href="#"><div id="<span style="color: red; font-weight: bold;">4</span>" class="<span style="color: #cc0000; font-weight: bold;">menuDefault4</span>" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"><span style="color: #330033; font-weight: bold;">Menu 3</span></div></a><br /><div class="menuDefault102"></div><br /><br /><a href="#"><div id="<span style="color: red; font-weight: bold;">5</span>" class="<span style="color: #cc0000; font-weight: bold;">menuDefault5</span>" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"><span style="color: #330033; font-weight: bold;">Menu 4</span></div></a><br /><div class="menuDefault102"></div><br /><br /><a href="#"><div id="<span style="color: red; font-weight: bold;">6</span>" class="<span style="color: #cc0000; font-weight: bold;">menuDefault6</span>" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"><span style="color: #330033; font-weight: bold;">Menu 5</span></div></a><br /><br /><div class="TextSearch"><form action="http://www.google.com/search" target="_blank" method="get"><input maxlength="255" style="font-size:11px; width: 130px; border:1px solid #fff; height:10px;float:left; margin-top:1px; padding: 4px 0px 4px 2px; background:#e6e6e6;align:middle;" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" value="Nhập từ khóa" name="q" type="text" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/><input checked="checked" value="<span style="color: #000099; font-weight: bold;">traidatmui.com</span>" name="sitesearch" type="hidden"/><br /><input class="seach-button" value="" type="submit"/><br /><br /></form><br /></div><br /></div><br /><div class="bgSubMenu" onmouseover="clearTimeout(t);clearTimeout(t1);" onmouseout="reChangeStyle(DelayId);"><br /><div class="MenuTime" id="MN1"><span style="color: #000099; font-weight: bold;">TRAIDATMUI.com</span> | Hôm nay: <script language="" type="text/javascript"><br />var monthNames = new Array("01","02","03","04","05","06","07","08","09","10","11","12");<br />var dayNames = new Array("Chủ nhật,","Thứ Hai,","Thứ Ba,","Thứ tư,","Thứ Năm,","Thứ Sáu,","Thứ Bảy,")<br />var now = new Date();<br /><br />thisYear = now.getYear();<br /><br />thisDay = dayNames[now.getDay()];<br /><br />if(thisYear < 1900) {thisYear += 1900};<br />document.write("" + thisDay +" "+" "+" "+ now.getDate() + "/" + monthNames[now.getMonth()] + "/" + thisYear);<br /></script></div><br /><div style="margin-left: 360px;" class="subMenu" id="subMenu"></div><br /><br /><script type="text/javascript" language="javascript"><br /><br /><span style="color: #003300;">// Phần thiết lập các Submenu</span><br />function setFolderDefault() {<br />if (FolderId == 10000) {<br />FolderId = 1;<br />flagOtherFolder = false;<br /><br />} else if (<span style="color: #003333; font-weight: bold;">FolderId != 2 && FolderId != 3 && FolderId != 4 && FolderId != 5 && FolderId != 6</span>) {<br />FolderId = 1;<br />flagOtherFolder = false;<br />}<br />document.getElementById(FolderId).className = 'menuActive' + FolderId + '_' + FolderId;<br />writeSubmenu(FolderId);<br />}<br />function writeSubmenu(id) {<br />//alert(id);<br />if (id == <span style="color: red; font-weight: bold;">1</span>) {<br /><span style="color: #ff6600; font-style: italic;">//home</span><br />document.getElementById("subMenu").innerHTML = "<div style='font-style:Arial;margin-top:-1px;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYTp85q2Y6f2yXBO5EY5rygOCn3Ddot3doJOQfoRkUJFv4k_ej_jbT1P7DhRriwoJ2notd-75I-L9mjb1Kb6gVEB5IsOw1GifrxV-VDE4HrATAUJzJhm5Gyxtmi4Xlmgb3-PnFreEtGS1D/' align=absmiddle' style='margin'/><a href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">Liên hệ</span>&nbsp;</a> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBu-tVLmmp0EBSx0zz4svl7HIFa8QPCxBBGsyws1xdfLVCAkfTUKBkI4_R7YjIrPQ9AnRnXD7YohlIJpwniVmIjJd4XgOucvu0nbdEiBhMTnKMnj726rsBzUBrWUCEGnsOWTGXrt3O42F/' align='top' style='margin' style='margin-top:-2px' /> <a href='<span style="color: red; font-weight: bold;">#</span>'><span style="color: #3333ff;">RSS Posts</span> &nbsp;</a> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBu-tVLmmp0EBSx0zz4svl7HIFa8QPCxBBGsyws1xdfLVCAkfTUKBkI4_R7YjIrPQ9AnRnXD7YohlIJpwniVmIjJd4XgOucvu0nbdEiBhMTnKMnj726rsBzUBrWUCEGnsOWTGXrt3O42F/' align='top' style='margin' style='margin-top:-2px' /> <a href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">RSS Comments</span></a></div>";<br /><br />document.getElementById("subMenu").style.marginLeft = "0px";<br />DelayId = id;<br />}<br /><br />else if (id == <span style="color: red; font-weight: bold;">2</span>) {<br /><span style="color: #ff6600; font-style: italic;">//menu1</span><br />document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">SubMenu 1.1</span> </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp;<a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">SubMenu 1.2</span> </a>&nbsp; <img src='" + strLinkImg + "' /> &nbsp;<a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">SubMenu 1.3</span> </a>";<br />document.getElementById("subMenu").style.marginLeft = "-5px";<br />DelayId = id;<br />}<br /><br />else if (id == <span style="color: red; font-weight: bold;">3</span>) {<br /><span style="color: #ff6600; font-style: italic;">// menu2</span><br />document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">SubMenu 2.1</span> </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">SubMenu 2.2</span> </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">SubMenu 2.3</span> </a>";<br />document.getElementById("subMenu").style.marginLeft = "20px";<br />DelayId = id;<br />}<br /><br />else if (id == <span style="color: red; font-weight: bold;">4</span>) {<br /><span style="color: #ff6600; font-style: italic;">//menu3</span><br />document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">SubMenu 3.1</span> </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">SubMenu 3.2</span> </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">SubMenu 3.3</span> </a>";<br />document.getElementById("subMenu").style.marginLeft = "22px";<br />DelayId = id;<br />}<br />else if (id == <span style="color: red; font-weight: bold;">5</span>) {<br /><span style="color: #ff6600; font-style: italic;">//menu4</span><br />document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">Submenu 4.1</span> </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">Submenu 4.2 </span></a>";<br />document.getElementById("subMenu").style.marginLeft = "130px";<br />DelayId = id;<br />}<br />else if (id ==<span style="color: red; font-weight: bold;"> 6</span>) {<br /><span style="color: #ff6600; font-style: italic;">//menu5</span><br />document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">Submenu 5.1</span> </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">Submenu 5.2</span> </a>";<br />document.getElementById("subMenu").style.marginLeft = "190px";<br />DelayId = id;<br />}<br /><br />else {<br />setFolderDefault();<br />}}<br /></script><br /></div></div></div><br /><span style="color: #cc0000; font-weight: bold;">» Chỉnh code:</span><br />- Bạn hãy thay phần (<span style="color: #000099; font-weight: bold;">traidatmui.com</span>) thành địa chỉ blog của bạn<br />- Các phần <span style="color: #330033; font-weight: bold;">màu tím</span> ở trên là tên hiển thị trong các menu chính, bạn chỉnh sửa lại cho phù hợp<br />- Bạn hãy chỉnh sửa tên các menu con (dòng <span style="color: #3333ff;">màu xanh</span>) và các link tương ứng (<span style="color: red; font-weight: bold;">#</span>) cho phù hợp với blog của bạn.<br /><br />8. Sau khi chỉnh sửa xong bạn save tiện ích lại<br /><br /><span style="color: red; font-weight: bold;">☼ Cách thêm menu</span><br /><br />Ở trên mình chỉ có <span style="font-weight: bold;">5 menu chính</span>, nếu bạn muốn tạo thêm các menu chính thì chỉ việc thêm code bên dưới vào sau dòng dòng code của phần <span style="color: #cc0000; font-weight: bold;">menuDefault6</span><br /><div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><div class="menuDefault102"></div><br /><a href="#"><div id="<span style="color: red; font-weight: bold;">7</span>" class="<span style="color: #cc0000; font-weight: bold;">menuDefault7</span>" onmouseover="changeStyle(this.id)" onmouseout="reChangeStyle(this.id);"><span style="color: #330033; font-weight: bold;">Menu 6</span></div></a></div><br />Đồng thời thêm phần CSS bên dưới vào template của bạn (sau dòng <span style="color: #003300;">/*END Menu 6*/</span>), đồng thời chỉnh sửa số (<span style="color: red; font-weight: bold;">7</span>)lại cho phù hợp.<br /><div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><span style="color: #003300;">/*Menu 6*/</span><br />.menuDefault<span style="color: red; font-weight: bold;">7</span><span style="color: red;"> </span>{<br />height: 25px;<br />padding:5px 3px 0px 3px;<br />text-align:center;<br />float:left;<br />}<br />.menuActive<span style="color: red; font-weight: bold;">7_7</span> {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_UsRCdTPLvnTZhGFFbvRn2vohnUzTqpXu1uHlErcU0pTP7gd81H9ex3T2M9uq5kTC7fF1PbtZGd6ZwWJNJ2lJOJsBkERTHERi9OJBpTQy9IlJBnqcRzHu3gV-APxFhXQb2ZBnQNsQfzK/) repeat-x;<br />padding:5px 3px 0px 3px;<br />height: 25px;<br />cursor: Pointer;<br />text-align:center;<br />color:#000;<br />float:left;<br />}<br /><span style="color: #003300;">/*END Menu 6*/</span></div><br />Để thêm menu con cho phần menu mới trên bạn thêm code bên dưới vào sau <span style="color: #ff6600; font-style: italic;">//menu5</span> trong phần Submenu và chỉnh sửa các số lại cho phù hợp (<span style="color: red; font-weight: bold;">7</span>).<br /><div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(255, 0, 0); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(251, 185, 23); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(248, 114, 23); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(128, 5, 23); border-top-style: solid; border-top-width: 2px; clear: both; list-style-type: none; margin-bottom: 2px; margin-left: 20px; margin-right: 18px; margin-top: 2px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;">else if (id ==<span style="color: red; font-weight: bold;"> 7</span>) {<br /><span style="color: #ff6600; font-style: italic;">//menu6</span><br />document.getElementById("subMenu").innerHTML = "<a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">Submenu 7.1</span> </a> &nbsp; <img src='" + strLinkImg + "' /> &nbsp; <a class='aSubMenu' href='<span style="color: red; font-weight: bold;">#</span>'> <span style="color: #3333ff;">Submenu 7.2</span> </a>";<br />document.getElementById("subMenu").style.marginLeft = "190px";<br />DelayId = id;<br />}</div><br />Việc cuối cùng là thêm <span style="color: #003333; font-weight: bold;">&& FolderId != 7</span> trong phần màu xanh trong code Submenu ở trên.</div></div></div><span class="Apple-style-span" style="font-family: Helvetica, Arial, Verdana, 'Trebuchet MS', sans-serif; font-size: x-small;"><span><br /><br /><b>nguồn: <a href="http://www.traidatmui.com/" style="color: blue; text-decoration: none;">TRAIDATMUI.com</a></b></span></span>Hptithttp://www.blogger.com/profile/16403370078423049110noreply@blogger.com0