March 2013 - í da

Blogspot cập nhật - SEO hoàn hảo

<h1 class="post-title entry-title" style="background-color: #f0f2f3; font-family: Arial; margin: 0px;">Blogspot cập nhật - SEO hoàn hảo</h1><div class="post-header" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px;"><div class="post-header-line-1"></div></div><div class="post-body entry-content" id="post-body-3225284899786523444" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 1.4em; margin: 0.5em 0px 0.75em; padding-top: 6px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4oazpTfrhLTTKFVTWiEq96CmnZiWEt8M3qnmvPGb4g_auef2_dUAGbhF2x-ggq5KGI-KAxAZy8ErprQhmNFAtgbd53K9LdVA7MqepsYFUhFu23U7E173WNIbg44-eawMDcapz6CcUerWp/s1600/seo-blogspot-mot-cach-hoan-hao-namkna-ngoctra.png" imageanchor="1" style="clear: right; color: #006666; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img alt="Blogspot cập nhật - SEO hoàn hảo" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4oazpTfrhLTTKFVTWiEq96CmnZiWEt8M3qnmvPGb4g_auef2_dUAGbhF2x-ggq5KGI-KAxAZy8ErprQhmNFAtgbd53K9LdVA7MqepsYFUhFu23U7E173WNIbg44-eawMDcapz6CcUerWp/s200/seo-blogspot-mot-cach-hoan-hao-namkna-ngoctra.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Blogspot cập nhật - SEO hoàn hảo" width="200"></a></div><div style="text-align: justify;">Trước đây còn nhiều ý kiến trái chiều về định nghĩa số 1 giữa các ứng cử viên nặng ký là blogspot, wordpress, Joomla, my opera, và yahoo,... Qua năm tháng My Opera, Yahoo 360 pluss, Joomla lần lượt bị bỏ lại do sự hạn chế trong thiết kế và cái giá mà người sử dụng phải bỏ ra quá lớn. Cuộc đua song mã còn lại giữa blogspot và wordpress càng trở nên gay gắt hơn, Sự nhỉnh hơn của wordpress ngày càng được thu hẹp dần sau khi Google lần lượt đưa ra các bản cập nhật cho các blogger. Đến hôm nay namkna có thể khẳng định rằng Blogspot đã qua mặt wordpress hoàn toàn để trở thành blog số 1 hiện nay về các mặt Seo và Tính mở của việc thiết kế. </div></div><a href="http://thuthuatvitinhaz.blogspot.com/2013/03/blogspot-cap-nhat-seo-hoan-hao.html#more">Đọc thêm »</a>

Blogspot cập nhật - SEO hoàn hảo

Blogspot cập nhật - SEO hoàn hảo Trước đây còn nhiều ý kiến trái chiều về định nghĩa số 1 giữa các ứng cử viên nặng ký là blogspot, wordpres...

Tối ưu hóa blogspot từ a dến Z

<div class="post-header" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px;"><div class="post-header-line-1"></div></div><div class="post-body entry-content" id="post-body-4319003877257323938" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 1.4em; margin: 0.5em 0px 0.75em; padding-top: 6px;"><div class="separator" style="clear: both; text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDulQkGMBF366GtzeP06ctqJkO3mmRJkiKKzkTtwL1VoAQ3yg5kxizNPsmsPurhNc6ov_rdRFL3doOwo2fSnGmwMdzhmAbxOgWX6DKAKn4Sponv8nHD7hG5p_TlbuAAeu2u3tiim6O8bs/s1600/seo-toi-uo-hoa-blogspot-tu-a-den-z-namkna-blogspot-com.png" imageanchor="1" style="clear: right; color: #006666; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img alt="Tối ưu hóa blogspot từ a đến Z " border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDulQkGMBF366GtzeP06ctqJkO3mmRJkiKKzkTtwL1VoAQ3yg5kxizNPsmsPurhNc6ov_rdRFL3doOwo2fSnGmwMdzhmAbxOgWX6DKAKn4Sponv8nHD7hG5p_TlbuAAeu2u3tiim6O8bs/s200/seo-toi-uo-hoa-blogspot-tu-a-den-z-namkna-blogspot-com.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Tối ưu hóa blogspot từ a đến Z " width="200" /></a></div><div style="text-align: justify;">Blogspot là một mã nguồn mở miễn phí được cung cấp bởi google được rất nhiều người tin dùng bởi: Dễ sử dụng, tốc độ nhanh, tùy chỉnh được code, đặc biệt từ năm 2012 khi google cập nhật seo giúp <a href="http://namkna.blogspot.com/2012/03/blogspot-cap-nhat-seo-hoan-hao.html" style="color: #006666; text-decoration: none;" target="_blank">khả năng seo của blogger cực tốt</a> … Tuy nhiên còn một số tùy chỉnh chúng ta vẫn phải thực hiện thủ công để đạt hiệu quả cao nhất.</div><a href="http://www.blogger.com/blogger.g?blogID=1679931166315534550" name="more" style="text-align: left;"></a> <blockquote class="tr_bq" style="background-color: #f0fdff; border: 1px solid rgb(150, 215, 226); margin: 0px; padding: 10px; text-align: left;"><div style="text-align: justify;">Sau đây, Namkna sẽ hướng dẫn các bạn cách tối ưu hóa cho Blogspot từ A -> Z, hy vọng rằng sau bài viết này sẽ giúp mọi người thực hiện tối ưu hóa tốt nhất cho blog của bạn..</div>- <a href="http://thuthuatvitinhaz.blogspot.com/2013/03/toi-uu-hoa-blogspot-tu-den-z-blogspot.html" style="color: #006666; text-decoration: none;" target="_blank">Chọn template</a>. - <a href="http://thuthuatvitinhaz.blogspot.com/2013/03/toi-uu-hoa-blogspot-tu-den-z-blogspot.html" style="color: #006666; text-decoration: none;" target="_blank">Chỉnh sửa các thẻ meta và tiêu đề bài viết</a>. - <a href="http://thuthuatvitinhaz.blogspot.com/2013/03/toi-uu-hoa-blogspot-tu-den-z-blogspot.html" style="color: #006666; text-decoration: none;" target="_blank">Chỉnh URL thân thiện</a>. - <a href="http://thuthuatvitinhaz.blogspot.com/2013/03/toi-uu-hoa-blogspot-tu-den-z-blogspot.html" style="color: #006666; text-decoration: none;" target="_blank">Tạo Breadcrumbs cho Blogspot</a>. - <a href="http://namkna.blogspot.com/2012/09/toi-uu-hoa-seo-blogspot-tu-a-den-z.html#tao-tin-lien-quan" style="color: #006666; text-decoration: none;" target="_blank">Tạo tin tức liên quan cho từng bài viết</a>. - <a href="http://namkna.blogspot.com/2012/09/toi-uu-hoa-seo-blogspot-tu-a-den-z.html#tao-emoticon" style="color: #006666; text-decoration: none;" target="_blank">Tạo emoticon khi comment</a>. - <a href="http://thuthuatvitinhaz.blogspot.com/2013/04/tao-sitemap-dang-2-cot-cho-blogspot.html" style="color: #006666; text-decoration: none;" target="_blank">Tạo sitemap cho Blogspot</a>.</blockquote><h2 style="font-size: 14px; margin: 0px; text-align: left;">1. <a href="http://namkna.blogspot.com/2012/09/toi-uu-hoa-seo-blogspot-tu-a-den-z" name="chon-template" style="color: #006666; text-decoration: none;"></a>Chọn template.</h2><div style="text-align: justify;">Template là một trong những yếu tố quan trọng khi sử dụng Blogspot, một template tốt không những đẹp mà còn phải có cấu trúc hợp lý. Như thế sẽ giúp quá trình SEO của các bạn dễ dàng hơn rất nhiều.</div><div style="text-align: justify;"> </div><div style="text-align: justify;">Theo kinh nghiệm cá nhân của SEO Kool, các bạn nên chọn loại template có 2 cột, bên trái là bài viết, bên phải là các widget : bài viết mới, comment mới, … Đây là dạng template thông dụng và thân thiện với người dùng.</div><div style="text-align: justify;"> </div><div style="text-align: justify;">Ngoài ra còn một yếu tố cũng quan trọng không kém, đó là cấu trúc thẻ heading. Đa phần các temp của Blogspot sau khi cài đặt chỉ có một thẻ</div><h2 style="font-size: 14px; margin: 0px; text-align: left;">2. <a href="http://namkna.blogspot.com/2012/09/toi-uu-hoa-seo-blogspot-tu-a-den-z" name="chinh-sua-meta" style="color: #006666; text-decoration: none;"></a>Sửa các thẻ <meta> và Tiêu dề bài viết.</h2>a. Thêm <meta> và <title> - Để chỉnh sửa các thẻ meta keyword và meta description các bạn xem bài viết sau: <a href="http://namkna.blogspot.com/2011/08/toi-uu-title-trong-blogspot-cho-search.html" style="color: #006666; text-align: left; text-decoration: none;" target="_blank">Tối ưu thẻ Title trong Blogspot cho Search Engine </a> b. Thêm mô tả cho link của tiêu đề. <div style="text-align: justify;">Khi đưa chuột vào tiêu đề bài viết, bạn sẽ thấy hiện lên phần mô tả cho đường link đó. Để làm được điều này các bạn làm như sau :</div><div style="text-align: justify;">- Đăng nhập vào blog => Mẫu => Chỉnh sửa HTML => Tiếp tục => Mở rộng tiện ích mẫu:</div><div style="text-align: justify;">- Tìm đến dòng :</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: left; width: auto !important;"><a expr:href='data:post.link'><data:post.title/></a></pre>Và sửa thành : <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: left; width: auto !important;"><a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a></pre>- Tiếp tục tìm đến dòng: <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: left; width: auto !important;"><a expr:href='data:post.url'><data:post.title/></a></pre>và sửa thành: <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: left; width: auto !important;"><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></pre>Lưu template và kiểm tra kết quả. c. Chỉnh tiêu đề bài viết thành <h1> - Đăng nhập vào blog => Mẫu => Chỉnh sửa HTML => Tiếp tục => Mở rộng tiện ích mẫu: - Tìm đoạn code sau <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: left; width: auto !important;"> <b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if></pre>- Và sửa thành: <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: left; width: auto !important;"><b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.title'> <h3 class='post-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if> <b:else/> <h1 class='post-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h1> </b:if> <b:else/> <h1 class='post-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h1> </b:if></pre>Chỉnh sửa CSS cho thẻ <h1>, tìm đến dòng <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: left; width: auto !important;">.post h3 {…} .post h3 a, .post h3 a:visited {…} .post h3 a:hover {…}</pre>và sửa thành <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; text-align: left; width: auto !important;">.post h1, .post h3 {…} .post h1 a, .post h1 a:visited, .post h3 a, .post h3 a:visited {…} .post h1 a:hover, .post h3 a:hover {…}</pre>lưu lại và kiểm tra kết quả : <h2 style="font-size: 14px; margin: 0px; text-align: left;">3. <a href="http://namkna.blogspot.com/2012/09/toi-uu-hoa-seo-blogspot-tu-a-den-z.html" name="url-than-thien" style="color: #006666; text-decoration: none;"></a>Chỉnh URL thân thiện.</h2><div style="text-align: justify;">Mỗi khi bạn viết bài mới trên blogspot, nếu bạn viết tiêu đề có dấu đầy đủ, thì đôi lúc URL sẽ hiển thị như sau :</div><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBh6XCCDjXV72lia1AAjzMJ1xXp8C-VmVOFOaOa_cjk3EYmhr7ZgW41RSVCRTiZj3E_2SC55g-cS9qmxhaXHO-ZupV5-KfD71mcvIkFWyy9psyxe_HyNgyQg3IFyhRThpFOFZDX87xDLU/s1600/seo-toi-uo-hoa-blogspot-tu-a-den-z-namkna-blogspot-com-1.png" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBh6XCCDjXV72lia1AAjzMJ1xXp8C-VmVOFOaOa_cjk3EYmhr7ZgW41RSVCRTiZj3E_2SC55g-cS9qmxhaXHO-ZupV5-KfD71mcvIkFWyy9psyxe_HyNgyQg3IFyhRThpFOFZDX87xDLU/s1600/seo-toi-uo-hoa-blogspot-tu-a-den-z-namkna-blogspot-com-1.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" /></a></div><div style="text-align: justify;">Ở đây SEO Kool thử nghiệm với bài viết có tiêu đề là : "Kí tự đặc biệt tạo nick yahoo cực đẹp !!". Nhìn vào hình ảnh các bạn có thể thấy, so với tiêu đề bài viết gốc thì URL (http://namkna.blogspot.com/2011/05/ki-tu-ac-biet-tao-nick-yahoo-cuc-ep.html) đã bị rút gọn và bị mất một số kí tự (màu vàng). Đó là vì URL mặc định của Blogspot có 2 chức năng :</div><ul style="text-align: justify;"><li>Thứ nhất : lấy luôn tiêu đề của bài viết làm URL cho bài viết đó, tuy nhiên nó không thể hiểu được tiếng Việt nên sinh ra hiện tượng mất một số kí tự.</li><li>Thừ hai : Blogspot sẽ tự động cắt bớt URL nếu như tiêu đề bài viết quá dài.</li></ul><div style="text-align: justify;">Vậy nếu muốn có một URL thân thiện, chuẩn SEO thì ta phaỉ làm sao? Rất đơn giản để giải quyết cho hai trường hợp trên ta có thể dùng hai cách sau :</div><div style="text-align: justify;">- Cách một : Khi viết một bài mới, ban đầu ta để tiêu đề không dấu với số kí tự vừa đủ để không bị rút ngắn URL và mất kí tự, sau đó xuất bản bài viết và quay lại chỉnh sửa tiêu đề trở thành có dấu.</div><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPnu7gNi_hhhrXUup0UMAtSTR6yae5I3Fpw-yTigBLy1mOLyx5UORhAU3k5X1z4e4tinhyphenhyphen7obKu_T0tNtiiFUYcy5FNAggFzMnBS57FeW8fS8R0G5TJE3s0pgYSqFBfjTlim_kVSx_ccw/s1600/seo-toi-uu-hoa-URL-blogspot-tu-a-den-z-namkna-blogspot-com-2.png" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPnu7gNi_hhhrXUup0UMAtSTR6yae5I3Fpw-yTigBLy1mOLyx5UORhAU3k5X1z4e4tinhyphenhyphen7obKu_T0tNtiiFUYcy5FNAggFzMnBS57FeW8fS8R0G5TJE3s0pgYSqFBfjTlim_kVSx_ccw/s1600/seo-toi-uu-hoa-URL-blogspot-tu-a-den-z-namkna-blogspot-com-2.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" /></a></div><div style="text-align: justify;">- Cách hai : Sử dụng tính năng tùy chỉnh URL của Blogspot. Khi đăng bài tại phần cài đăt bài đăng => Liên kết cố định => Liên kết cố định tùy chỉnh => Đánh URL của bạn vào nhớ viết không dấu và cách nhau bởi dấu gạch ngang (-) nha => sau đó bấm Hoàn thành là ok:</div><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcbWQxZAl5P_LEyLdT2SDtCDTI6idi8NQN8q8jept3Q3TllWvASM9r_hU2H58BdnIILOy-TQseECgyZKgDNrIox85E4F6CesitPGTbLNHIoWe_55qsMo9AZbj9jC8j9O5AKF8zHERs7k/s1600/seo-toi-uu-hoa-URL-blogspot-tu-a-den-z-namkna-blogspot-com-3.png" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcbWQxZAl5P_LEyLdT2SDtCDTI6idi8NQN8q8jept3Q3TllWvASM9r_hU2H58BdnIILOy-TQseECgyZKgDNrIox85E4F6CesitPGTbLNHIoWe_55qsMo9AZbj9jC8j9O5AKF8zHERs7k/s320/seo-toi-uu-hoa-URL-blogspot-tu-a-den-z-namkna-blogspot-com-3.png" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" width="292" /></a></div><div style="text-align: justify;">Với tính năng này bạn có thể tự do điều chỉnh URL của mình. Tuy nhiên cần lưu ý là tính năng này chỉ chỉnh được một lần, tức là sau khi xuất bản bài viết bạn không thể sửa lại URL. Vì vậy hãy cẩn thận khi sử dụng.</div><h2 style="font-size: 14px; margin: 0px; text-align: justify;">4. <a href="http://namkna.blogspot.com/2012/09/toi-uu-hoa-seo-blogspot-tu-a-den-z" name="tao-breadcrumb" style="color: #006666; text-decoration: none;"></a>Tạo Breadcrumb cho Blogspot</h2><div style="text-align: justify;">Để tạo <a href="http://namkna.blogspot.com/search/label/Blogspot%20Breadcrums?max-results=5" style="color: #006666; text-decoration: none;" target="_blank">Breadcrumb</a> cho Blogspot, các bạn xem các bài viết sau:</div><ul style="text-align: left;"><li><a href="http://namkna.blogspot.com/2011/07/thanh-trang-thai-breadcrumb-cho.html" style="color: #006666; text-decoration: none;" target="_blank">Thanh trạng thái "breadcrumb" cho Blogspot</a></li><li><a href="http://namkna.blogspot.com/2012/03/breadcrums-for-post-have-2-label.html" style="color: #006666; text-decoration: none;" target="_blank">Thanh điều hướng (Breadcrumb) cho bài viết có 2 nhãn</a></li><li><a href="http://namkna.blogspot.com/2012/07/thanh-ieu-huong-su-dung-css3.html" style="color: #006666; text-decoration: none;" target="_blank">Thanh điều hướng sử dụng CSS3</a></li></ul><h2 style="font-size: 14px; margin: 0px; text-align: left;">5. <a href="http://namkna.blogspot.com/2012/09/toi-uu-hoa-seo-blogspot-tu-a-den-z" name="tao-tin-lien-qua" style="color: #006666; text-decoration: none;"></a>Tạo bài viết liên quan cho Blogspot</h2>- Hãy <a href="http://namkna.blogspot.com/search/label/Blogspot%20Related%20posts" style="color: #006666; text-align: left; text-decoration: none;" target="_blank">vào đây</a> đề chọn một mẫu cho phù hợp với blog bạn nha. <h2 style="font-size: 14px; margin: 0px; text-align: left;">6. <a href="http://namkna.blogspot.com/2012/09/toi-uu-hoa-seo-blogspot-tu-a-den-z" name="tao-emoticon" style="color: #006666; text-decoration: none;"></a>Tạo các emoticon khi comment trên Blogspot</h2><div style="text-align: justify;">Các bạn hãy chọn các mẫu mặt cười sau:</div><ul style="text-align: justify;"><li><a href="http://namkna.blogspot.com/2011/09/chen-bieu-tuong-cam-xuc-vao-nhan-xet.html" style="color: #006666; text-decoration: none;" target="_blank">Chèn biểu tượng cảm xúc vào nhận xét dạng input (Update 20/02/2012)</a></li><li><a href="http://namkna.blogspot.com/2011/07/bieu-tuong-mat-cuoi-cho-phan-comment.html" style="color: #006666; text-decoration: none;" target="_blank">Biểu tượng mặt cười cho phần Comment của Blogspot</a></li><li><a href="http://namkna.blogspot.com/2011/06/cac-bo-emoticons-cho-blog.html" style="color: #006666; text-decoration: none;" target="_blank">Chèn Các bộ emoticons cho blog</a></li></ul><h2 style="font-size: 14px; margin: 0px; text-align: justify;">7. <a href="http://namkna.blogspot.com/2012/09/toi-uu-hoa-seo-blogspot-tu-a-den-z" name="tao-sitemap" style="color: #006666; text-decoration: none;"></a>Tạo Sitemap cho Blogspot</h2><div style="text-align: justify;">Blogspot có 2 dạng Sitemap, thứ nhất là loại sitemap dùng để submit lên Google Webmaster Tools (sitemap dành cho Googlebots), thứ hai là loại sitemap.html dành cho người dùng.</div><div style="text-align: justify;">- Để tạo sitemap cho Googlebots, bạn xem bài: <a href="http://namkna.blogspot.com/2012/04/tao-site-map-ho-tro-seo-va-page-rank.html" style="color: #006666; text-decoration: none;" target="_blank">Tạo site map hỗ trợ SEO và page rank cho blogspot </a></div><div style="text-align: justify;">Đối với người dùng, các bạn chọn một trong các mẫu bên dưới:</div><div style="text-align: justify;">- Lựa chọn một trong các style bên dưới.</div><ul style="text-align: justify;"><li style="text-align: justify;"><a href="http://thuthuatvitinhaz.blogspot.com/2013/04/tao-sitemap-dang-input-cho-blogspot.html" style="color: #006666; text-decoration: none;" target="_blank">Tạo Sitemap đẹp cho blogspot</a></li><li style="text-align: justify;"><a href="http://namkna.blogspot.com/2012/10/tao-sitemap-cho-blogspot-theo-ngay-ang.html" style="color: #006666; text-decoration: none;" target="_blank">Tạo sitemap cho Blogspot theo ngày đăng và nhãn</a></li><li style="text-align: justify;"><a href="http://namkna.blogspot.com/2011/05/tao-accordion-sitemap-toc-cho-blogspot.html" style="color: #006666; text-decoration: none;" target="_blank">Tạo Accordion Sitemap (TOC) cho Blogspot</a></li><li style="text-align: justify;"><a href="http://namkna.blogspot.com/2011/01/site-map-la-gi-va-tai-sao-ban-can-no.html" style="color: #006666; text-decoration: none;" target="_blank">Site map là gì? Và tại sao bạn cần nó?</a></li></ul>Chúc thành công! <div style="text-align: justify;">                                                                                                                          ( Namkna)                                                                                                              Thu thuat vi tinh</div></div>

Tối ưu hóa blogspot từ a dến Z

Blogspot là một mã nguồn mở miễn phí được cung cấp bởi google được rất nhiều người tin dùng bởi: Dễ sử dụng, tốc độ nhanh, tùy chỉnh được co...

Bảng mã màu (style 1)

Đọc thêm »

Những Code Thông Dụng Cho Blogspot

<div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">Nhằm giúp các blogger mới vào nghề hiểu thêm về code nên hôm nay mình chia sẻ lại một số code thông dụng thường gặp trong quá trình viết bài cũng như thiết kế blog. Hy vọng sẽ giúp ích được cho các bạn. <a href="http://www.blogger.com/blogger.g?blogID=1679931166315534550" name="more"></a></div><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;"><a href="http://www.blogger.com/blogger.g?blogID=1284053134771667067" name="more" style="color: #006666; text-decoration: none;"></a></div><div style="background-color: #f0f2f3; color: #274e13; font-family: Arial; font-size: 14px; line-height: 19.59375px;"><h3 style="border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; margin: 0px; padding: 3px; text-align: justify;"></h3></div><a href="http://thuthuatvitinhaz.blogspot.com/2013/03/nhung-code-thong-dung-cho-blogspot.html#more">Đọc thêm »</a>

Những Code Thông Dụng Cho Blogspot

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

10 thủ thuật giúp tăng traffic cho blogspot

<div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">Bài viết này bàn về 10 cách dễ dàng Blogger (Blogspot) blogger có thể tăng lưu lượng truy cập trang web và cải thiện SEO - tối ưu hóa công cụ tìm kiếm. Bằng cách thực hiện các bước sau, bạn sẽ cải thiện khả năng của trang web của bạn xếp hạng cao hơn trong kết quả công cụ tìm kiếm của công cụ tìm kiếm Google, Yahoo và MSN và kết quả là gia tăng số lượng khách truy cập trang web của bạn. </div><a href="http://thuthuatvitinhaz.blogspot.com/2013/03/10-thu-thuat-giup-tang-traffic-cho.html#more">Đọc thêm »</a>

10 thủ thuật giúp tăng traffic cho blogspot

Bài viết này bàn về 10 cách dễ dàng Blogger ( Blogspot ) blogger có thể tăng lưu lượng truy cập trang web và cải th...

Tùy chỉnh Popular Posts đơn giản của blogger/blogspot

<div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"> <a href="http://thuthuatvitinhaz.blogspot.com/p/thu-thuat-blogspot-hay.html" target="_blank"><img alt="Tùy chỉnh Popular Posts đơn giản của blogger/blogspot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4c29T1Any9has0AiNPOXNtZ7Bwh55JpVeP2j8mqFdphOTcqnPEYHf3IKGkpybRRJGbhyphenhyphenReFyUaSyt_SFjQj3fZ0J0horg2Ps0RMa6yf7KZcyCeFFdRQvZxEZd-AVwCTHyy0Qtm3WHuwDB/s1600/customize-bloggers-official-popularposts-blogspot.png"></a></div> Tiện ích bài đăng phổ biến (popular post) để hiển thị các bài viết được xem nhiều nhất cùng với một hình ảnh thu nhỏ dựa trên các số liệu thống kê Analytics của bạn. Nhưng giao diện còn khá đơn giản và thô sơ, mình sẽ ghi đè lên các stylesheet của tiện ích này hoàn toàn với phông chữ tùy chỉnh và màu sắc của <a href="http://www.mybloggertricks.com/2011/11/customize-blogger-official-popular.html" rel="nofollow" style="color: #006666; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify; text-decoration: none;" target="_blank">mybloggertrick</a>. Bạn có thể xem tiện ích phổ biến ngay trên blog demo của  hoặc hình ảnh minh họa bên cạnh để thấy rõ hơn..  <a href="http://thuthuatvitinhaz.blogspot.com/2013/03/tuy-chinh-popular-posts-on-gian-cua.html#more">Đọc thêm »</a>

Tùy chỉnh Popular Posts đơn giản của blogger/blogspot

Tiện ích bài đăng phổ biến (popular post) để hiển thị các bài viết được xem nhiều nhất cùng với một hình ảnh thu nhỏ dựa trên các số liệu ...

Tùy chỉnh Google Custom Search bằng CSS3 cho blogger

<div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">Google Custom Search là một trong những công cụ có danh sách các ưu điểm gần như vô tận. Từ cung cấp các kết quả tìm kiếm siêu liên kết đến lựa chọn chỉ mục cho tất cả Blog và Website. Blogger đã cung cấp khung tìm kiếm nhưng khung tìm kiếm còn khá đơn giản. Trong bài này namkna sẽ chỉ cho bạn làm thế nào để thay đổi phong cách khung Search Box  Google Custom của bạn là hộp tìm kiếm từ CSS3.</div><a href="http://www.blogger.com/blogger.g?blogID=1679931166315534550" name="more" style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px;"></a> <h3 style="background-color: #f0f2f3; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Arial; line-height: 19.59375px; margin: 0px; padding: 3px; text-align: justify;">Phần 1: Thiết lập Google Custom Search Cho Blogger</h3>Namkna giả định rằng bạn đã thiết lập công cụ tìm kiếm tùy chỉnh của Google. Nếu bạn chưa thiết lập hãy xem phần hướng dẫn này. Có nhiều biến thể Google Custom Search, nhưng thông thường mã có chứa một thẻ <script> , và có dạng thế này:  <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><div id="cse" style="width: 100%;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO}); google.setOnLoadCallback(function() { var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY'); customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET); customSearchControl.draw('cse'); }, true); </script></pre>- Ở đoạn code trên bạn có thể không thấy nơi để áp dụng các style.  - Bây giờ namkna sẽ đưa ra các mã sau đây cũng hoạt động theo cách tương tự quy luật trên, chỉ có điều là nó rất dễ dàng để tùy chỉnh: <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><form id="searchbox_XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" action="URL của trang hiển thị kết quả tìm được"> <input value="XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" name="cx" type="hidden"/> <input value="FORID:11" name="cof" type="hidden"/> <input id="q" style="width:150px;" name="q" size="70" type="text" /> <input value="Search" name="sa" type="submit"/> </form> </pre><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">Trong đó có 2 phần cần chú ý đó là "searchbox_XXXXXXXXXXXXXXXXXXXXX: YYYYYYYYYYY",  và XXXXXXXXXXXXXXXXXXXXX: là ID duy nhất mà bạn có thể tìm thấy trên bảng điều khiển của công cụ tìm kiếm của bạn. Nếu không biết cách lấy id hãy xem bài viết hướng dẫn trước đây của namkna: <a href="http://namkna.blogspot.com/2011/02/tao-cong-cu-tim-kiem-cho-blog-hien-ket.html" style="color: #006666; text-decoration: none;" target="_blank">Bấm để xem hướng dẫn</a>.</div>- Nếu bạn đang sử dụng các liên kết quảng cáo Adsense Google Custom Search thì Hộp tìm kiếm của bạn nên như thế này: <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><form action="URL of the page where the Result open id="cse-search-box"> <div> <input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXXXXXXXX:YYYYYYYYYYY" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="21" /> <input type="submit" name="sa" value="Search" /> </div> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script> </pre>- Nếu bạn muốn để loại bỏ style mặc định hãy loại trừ các thẻ script màu vàng ỏ trên và cũng có thể loại bỏ id="cse-search-box" phần màu xanh <h3 style="background-color: #f0f2f3; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Arial; line-height: 19.59375px; margin: 0px; padding: 3px; text-align: justify;">Phần 2: Làm thế nào để cài đặt Google Custom Search cho blogger của ban?</h3><div class="announce2" style="background-color: #feedb9; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(251, 195, 24); color: #7d7d7d; font-family: Arial; font-size: 14px; line-height: 19.59375px; margin: 15px 0px 0px; padding: 5px; text-align: justify; width: 577px;">Cảnh báo: Trước khi bạn bắt đầu áp dụng bất cứ thay đổi mẫu blogger của bạn, Namkna khuyên bạn  sao lưu nó, bằng cách nhấp vào liên kết Mẫu => Sao lưu/Khôi phục => Tải về (Download Template Full Version).</div>☼ Cách tiến hành: <div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">Sau đây Namkna sẽ đưa ra 6 style bạn thích stle nào thì áp dụng style đó nha.</div><h3 style="background-color: #f0f2f3; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Arial; line-height: 19.59375px; margin: 0px; padding: 3px; text-align: justify;">Style 1: Cool usable search box</h3><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a class="button green" href="http://namkna-test.blogspot.com/2012/12/cool-usable-search-box-for-blogger.html" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14))); border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border: 1px solid rgb(83, 131, 18); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: #006666; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; line-height: 14px; margin: 0px 2px; outline: none; padding: 0.5em 2em 0.55em; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; vertical-align: baseline; zoom: 1;" target="_blank">View Demo</a></div><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;">Ảnh minh họa:</div><div class="separator" style="background-color: #f0f2f3; clear: both; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxIucF_GbLN89ZJVSMexnIqXDwwuQDjgSQ5HPf6WT8Ffb0Uk0NxUEXWPOXGkvQr4Wr03DUc7fCI-lXoIDqA25ilWUBltrQzw7JdP8fVtFMKLZ1gdt2K-Bp-4OWX3w7q5jT3yT8_aKBjm4/s1600/customize-google-custom-search-box-for-blogger-blogspot-1.PNG" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxIucF_GbLN89ZJVSMexnIqXDwwuQDjgSQ5HPf6WT8Ffb0Uk0NxUEXWPOXGkvQr4Wr03DUc7fCI-lXoIDqA25ilWUBltrQzw7JdP8fVtFMKLZ1gdt2K-Bp-4OWX3w7q5jT3yT8_aKBjm4/s1600/customize-google-custom-search-box-for-blogger-blogspot-1.PNG" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" /></a></div>- Tiện ích được tạo bới Catalin Rosu bạn có thể xem <a href="http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box" style="background-color: #f0f2f3; color: #006666; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-decoration: none;">tại đây</a> 1- Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Tìm kiếm thẻ  ]]></b:skin>  và dán code bên dưới dán vào trước thẻ  ]]></b:skin>  đó. <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;">#searchbox{ background: #eaf8fc; background-image: -moz-linear-gradient(#fff, #d4e8ec); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff)); -moz-border-radius: 35px; border-radius: 35px; border-width: 1px; border-style: solid; border-color: #c4d9df #a4c3ca #83afb7; width: 250px; height: 35px; padding: 10px; margin: 10px auto 10px; overflow: hidden; } #search, #submit { float: left; } #search { padding: 5px 9px; height: 23px; width: 380px; border: 1px solid #a4c3ca; font: normal 13px 'trebuchet MS', arial, helvetica; background: #f1f1f1; -moz-border-radius: 50px 3px 3px 50px; border-radius: 50px 3px 3px 50px; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); } #submit { background: #6cbb6b; background-image: -moz-linear-gradient(#95d788, #6cbb6b); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788)); -moz-border-radius: 3px 50px 50px 3px; border-radius: 3px 50px 50px 3px; border-width: 1px; border-style: solid; border-color: #7eba7c #578e57 #447d43; -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; height: 35px; margin: 0 0 0 10px; padding: 0; width: 70px; cursor: pointer; font: bold 14px Arial, Helvetica; color: #23441e; text-shadow: 0 1px 0 rgba(255,255,255,0.5); } #submit:hover { background: #95d788; background-image: -moz-linear-gradient(#6cbb6b, #95d788); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b)); } #submit:active{ background: #95d788; outline: none; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; } #submit::-moz-focus-inner{ border: none; } /* ----------------------- */ #search::-webkit-input-placeholder { color: #9c9c9c; font-style: italic; } #search:-moz-placeholder { color: #9c9c9c; font-style: italic; } #search.placeholder { color: #9c9c9c !important; font-style: italic; } #search:focus{ border-color: #8badb4; background: #fff; outline: none; }</pre>2- Tạo một widget HTML/Javarscip và dán đoạn code bên dưới vào. Hãy nhớ thay Id search của bạn vào. => Lưu tiện ích lại  <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><form id="searchbox" action="http://www.google.com/search"> <input value="000704786632954521024:590qlmgqwcs" name="cx" type="hidden" /> <input value="FORID:11" name="cof" type="hidden" /> <input id="search" style="width:150px;" name="q" size="70" placeholder="Nhập vào đây..." type="text" /> <input value="Search" name="sa" id="submit" type="submit" /> </form></pre>Namkna đã thêm một id = "searchbox", để bo góc các cạnh bên ngoài hộp Và id="search" để tạo chữ "Nhập vào đây...." là văn bản xuất hiện nếu hộp tìm kiếm trống.  id = "submit". Để áp dụng các cạnh tròn của chữ Search <h3 style="background-color: #f0f2f3; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Arial; line-height: 19.59375px; margin: 0px; padding: 3px; text-align: justify;">Style 2: Beautiful CSS3 search form</h3><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a class="button green" href="http://namkna-test.blogspot.com/2012/12/beautiful-css3-search-form-for-blogger.html" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14))); border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border: 1px solid rgb(83, 131, 18); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: #006666; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; line-height: 14px; margin: 0px 2px; outline: none; padding: 0.5em 2em 0.55em; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; vertical-align: baseline; zoom: 1;" target="_blank">View Demo</a></div><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;">Ảnh minh họa:</div><div class="separator" style="background-color: #f0f2f3; clear: both; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS7JsYrMBB1b8WYHYyeA08KBez0m93fL2mzWqBGfrbL7Zo8F4vgLIbBNA6tnmkXpuAKtefFfI-OAz8buOyHCI7gUd7OfwSfWe6ZANSFUjgMyAVuxHCsF2mevthG1BgVF4k8ctW1UfEhUg/s1600/customize-google-custom-search-box-for-blogger-blogspot-2.PNG" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS7JsYrMBB1b8WYHYyeA08KBez0m93fL2mzWqBGfrbL7Zo8F4vgLIbBNA6tnmkXpuAKtefFfI-OAz8buOyHCI7gUd7OfwSfWe6ZANSFUjgMyAVuxHCsF2mevthG1BgVF4k8ctW1UfEhUg/s1600/customize-google-custom-search-box-for-blogger-blogspot-2.PNG" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" /></a></div>Kiểu này được phát triển bới <a href="http://webdesignerwall.com/tutorials/beautiful-css3-search-form" style="background-color: #f0f2f3; color: #006666; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-decoration: none;" target="_blank">Nick La</a> <div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">1- Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Tìm kiếm thẻ  ]]></b:skin>  và dán code bên dưới dán vào trước thẻ  ]]></b:skin>  đó.</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;">/* search form -------------------------------------- */ .searchform { display: inline-block; zoom: 1; /* ie7 hack for display:inline-block */ *display: inline; border: solid 1px #d2d2d2; padding: 3px 5px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); background: #f1f1f1; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */ } .searchform input { font: normal 12px/100% Arial, Helvetica, sans-serif; } .searchform .searchfield { background: #fff; padding: 6px 6px 6px 8px; width: 202px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } .searchform .searchbutton { color: #fff; border: solid 1px #494949; font-size: 11px; height: 27px; width: 27px; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background: #5f5f5f; background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); background: -moz-linear-gradient(top, #9e9e9e, #454545); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ }</pre><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">2- Tạo một widget HTML/Javarscip và dán đoạn code bên dưới vào. Hãy nhớ thay Id searchcủa bạn</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><form class="searchform" id="000704786632954521024:590qlmgqwcs" action="http://www.google.com/search"> <input value="000704786632954521024:590qlmgqwcs" name="cx" type="hidden"/> <input value="FORID:11" name="cof" type="hidden"/> <input id="q" style="width:150px;" name="q" size="70" type="text" class="searchfield" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" /> <input name="sa" class="searchbutton" value="&rArr;" type="submit" /> </form></pre><h3 style="background-color: #f0f2f3; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Arial; line-height: 19.59375px; margin: 0px; padding: 3px; text-align: justify;">Style 3: Searck form blue CSS3</h3><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a class="button green" href="http://namkna-test.blogspot.com/2012/12/searck-form-blue-css3.html" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14))); border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border: 1px solid rgb(83, 131, 18); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: #006666; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; line-height: 14px; margin: 0px 2px; outline: none; padding: 0.5em 2em 0.55em; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; vertical-align: baseline; zoom: 1;" target="_blank">View Demo</a></div><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;">Ảnh minh họa:</div><div class="separator" style="background-color: #f0f2f3; clear: both; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKoYqEq_FRHOcWIYkKXCm6PXw5wOVhvn1V6RGZIDZ6hdtcXOc80eCXRk7MHhDLSaffZiwYF9rXC_HFGt6YyJyT02u6HZFU3BRIzzugwcuZk4iNqRZMJwj3_nZe6M4BDObhGOyMki33b4Y/s1600/customize-google-custom-search-box-for-blogger-blogspot-3.PNG" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKoYqEq_FRHOcWIYkKXCm6PXw5wOVhvn1V6RGZIDZ6hdtcXOc80eCXRk7MHhDLSaffZiwYF9rXC_HFGt6YyJyT02u6HZFU3BRIzzugwcuZk4iNqRZMJwj3_nZe6M4BDObhGOyMki33b4Y/s1600/customize-google-custom-search-box-for-blogger-blogspot-3.PNG" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" /></a></div>Được phát triển bởi <a href="http://blog.cameronbaney.com/tutorials/create-a-css3-search-form/" style="background-color: #f0f2f3; color: #006666; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-decoration: none;">Cameron Baney</a> <div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">1- Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Tìm kiếm thẻ  ]]></b:skin>  và dán code bên dưới dán vào trước thẻ  ]]></b:skin>  đó.</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;">#search-form { background: #e1e1e1; /* Fallback color for non-css3 browsers */ width: 365px; /* Gradients */ background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225))); background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%); /* Rounded Corners */ border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px; /* Shadows */ box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); } /*** TEXT BOX ***/ input[type="text"]{ background: #fafafa; /* Fallback color for non-css3 browsers */ /* Gradients */ background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230))); background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%); border: 0; border-bottom: 1px solid #fff; border-right: 1px solid rgba(255,255,255,.8); font-size: 16px; margin: 4px; padding: 5px; width: 250px; /* Rounded Corners */ border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px; /* Shadows */ box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); -moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); } /*** USER IS FOCUSED ON TEXT BOX ***/ input[type="text"]:focus{ outline: none; background: #fff; /* Fallback color for non-css3 browsers */ /* Gradients */ background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235))); background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%); } /*** SEARCH BUTTON ***/ input[type="submit"]{ background: #44921f;/* Fallback color for non-css3 browsers */ /* Gradients */ background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21))); background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%); border: 0; color: #eee; cursor: pointer; float: right; font: 16px Arial, Helvetica, sans-serif; font-weight: bold; height: 30px; margin: 4px 4px 0; text-shadow: 0 -1px 0 rgba(0,0,0,.3); width: 84px; outline: none; /* Rounded Corners */ border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; /* Shadows */ box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); -moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2); -webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); } /*** SEARCH BUTTON HOVER ***/ input[type="submit"]:hover { background: #4ea923; /* Fallback color for non-css3 browsers */ /* Gradients */ background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); } input[type="submit"]:active { background: #4ea923; /* Fallback color for non-css3 browsers */ /* Gradients */ background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); }</pre><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">2- Tạo một widget HTML/Javarscip và dán đoạn code bên dưới vào. Hãy nhớ thay Id searchcủa bạn</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><form id="search-form" id="000704786632954521024:590qlmgqwcs" action="http://www.google.com/search"> <input value="000704786632954521024:590qlmgqwcs" name="cx" type="hidden"/> <input value="FORID:11" name="cof" type="hidden"/> <input id="q" name="q" size="70" type="text" /> <input name="sa" type="submit" value="Search" /> </form></pre><h3 style="background-color: #f0f2f3; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Arial; line-height: 19.59375px; margin: 0px; padding: 3px; text-align: justify;">Style 4: styling input search form css</h3><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a class="button green" href="http://namkna-test.blogspot.com/2012/12/styling-input-search-form-css.html" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14))); border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border: 1px solid rgb(83, 131, 18); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: #006666; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; line-height: 14px; margin: 0px 2px; outline: none; padding: 0.5em 2em 0.55em; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; vertical-align: baseline; zoom: 1;" target="_blank">View Demo</a></div><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;">Ảnh minh họa:</div><div class="separator" style="background-color: #f0f2f3; clear: both; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_FR_ni-x4oo2zfoZL1oLIbnFEaZcg_MkOafBS4ESdTja5y-IErqzjJV_6UvACBGNKkHHrdAPo85pu0HtSED6UYBmzHQgErC0mxReKa1CppjLoaZQT3wGEydwIYkO6W6oGGDhpRBMAfQ/s1600/customize-google-custom-search-box-for-blogger-blogspot-4.PNG" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_FR_ni-x4oo2zfoZL1oLIbnFEaZcg_MkOafBS4ESdTja5y-IErqzjJV_6UvACBGNKkHHrdAPo85pu0HtSED6UYBmzHQgErC0mxReKa1CppjLoaZQT3wGEydwIYkO6W6oGGDhpRBMAfQ/s1600/customize-google-custom-search-box-for-blogger-blogspot-4.PNG" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" /></a></div>Được phát triển bởi <a href="http://www.sohtanaka.com/web-design/styling-input-search-form-css/" style="background-color: #f0f2f3; color: #006666; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-decoration: none;">Soh Tanaka</a> <div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">1- Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Tìm kiếm thẻ  </head>  và dán code bên dưới dán vào trước thẻ  </head>  đó. </div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><style>fieldset.search { border: none; width: 243px; margin: 0 auto; background: #222; } .search input, .search button { border: none; float: left; } .search input.box { color: #fff; font-size: 1.2em; width: 190px; height: 30px; padding: 8px 5px 0; background: #616161 url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrrbVh4NbKD_rH7_9n33su0zyVnO6rxhkfDK8Akfm5QguO_c-mej7tt3Uk001-34epgY7QrCLFC-3Ujr-K2Aim5BLGkxZyDmzXONnbLzTp7vA9jWtOyegH3TdxK4eCBj9ZClKK5p4zycjV/s1600-d/search_bg.gif" style="color: #006666; text-decoration: none;" target="_blank">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ-h3sPETXJ30dmTbGLqaLro5h8fEqp6MP0UmWv0HphlOwsVcQeq2qHp6i-sx37VdyZZZF-ZZby0oImPRqIS_H2Wba7d4XPArxl1FxvHQI2D16npB2FX1kehUO7Xf0gsu8PqrP1px8ssM/s1600/search_bg_namkna-blogspot-com.gif</a>) no-repeat; margin-right: 5px; } .search input.box:focus { background: #616161 url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrrbVh4NbKD_rH7_9n33su0zyVnO6rxhkfDK8Akfm5QguO_c-mej7tt3Uk001-34epgY7QrCLFC-3Ujr-K2Aim5BLGkxZyDmzXONnbLzTp7vA9jWtOyegH3TdxK4eCBj9ZClKK5p4zycjV/s1600-d/search_bg.gif" style="color: #006666; text-decoration: none;" target="_blank">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ-h3sPETXJ30dmTbGLqaLro5h8fEqp6MP0UmWv0HphlOwsVcQeq2qHp6i-sx37VdyZZZF-ZZby0oImPRqIS_H2Wba7d4XPArxl1FxvHQI2D16npB2FX1kehUO7Xf0gsu8PqrP1px8ssM/s1600/search_bg_namkna-blogspot-com.gif</a>) no-repeat left -38px; outline: none; } .search button.btn { width: 38px; height: 38px; cursor: pointer; text-indent: -9999px; background: #fbc900 url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrrbVh4NbKD_rH7_9n33su0zyVnO6rxhkfDK8Akfm5QguO_c-mej7tt3Uk001-34epgY7QrCLFC-3Ujr-K2Aim5BLGkxZyDmzXONnbLzTp7vA9jWtOyegH3TdxK4eCBj9ZClKK5p4zycjV/s1600-d/search_bg.gif" style="color: #006666; text-decoration: none;" target="_blank">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ-h3sPETXJ30dmTbGLqaLro5h8fEqp6MP0UmWv0HphlOwsVcQeq2qHp6i-sx37VdyZZZF-ZZby0oImPRqIS_H2Wba7d4XPArxl1FxvHQI2D16npB2FX1kehUO7Xf0gsu8PqrP1px8ssM/s1600/search_bg_namkna-blogspot-com.gif</a>) no-repeat top right; } .search button.btn:hover { background: #fbc900 url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrrbVh4NbKD_rH7_9n33su0zyVnO6rxhkfDK8Akfm5QguO_c-mej7tt3Uk001-34epgY7QrCLFC-3Ujr-K2Aim5BLGkxZyDmzXONnbLzTp7vA9jWtOyegH3TdxK4eCBj9ZClKK5p4zycjV/s1600-d/search_bg.gif" style="color: #006666; text-decoration: none;" target="_blank">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ-h3sPETXJ30dmTbGLqaLro5h8fEqp6MP0UmWv0HphlOwsVcQeq2qHp6i-sx37VdyZZZF-ZZby0oImPRqIS_H2Wba7d4XPArxl1FxvHQI2D16npB2FX1kehUO7Xf0gsu8PqrP1px8ssM/s1600/search_bg_namkna-blogspot-com.gif</a>) no-repeat bottom right; }</style> </pre>2- Tạo một widget HTML/Javarscip và dán đoạn code bên dưới vào. Hãy nhớ thay Id searchcủa bạn  <pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><form id="searchform" id="000704786632954521024:590qlmgqwcs" action="http://www.google.com/search"> <fieldset class="search"> <input value="000704786632954521024:590qlmgqwcs" name="cx" type="hidden"/> <input value="FORID:11" name="cof" type="hidden"/> <input id="q" name="q" size="70" type="text" class="box" /> <button class="btn" type="submit" title="Submit Search">Search</button> </fieldset> </form></pre><h3 style="background-color: #f0f2f3; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Arial; line-height: 19.59375px; margin: 0px; padding: 3px; text-align: justify;">Style 5: css3 search field</h3><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a class="button green" href="http://namkna-test.blogspot.com/2012/12/css3-search-field.html" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14))); border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border: 1px solid rgb(83, 131, 18); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: #006666; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; line-height: 14px; margin: 0px 2px; outline: none; padding: 0.5em 2em 0.55em; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; vertical-align: baseline; zoom: 1;" target="_blank">View Demo</a></div><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;">Ảnh minh họa:</div><div class="separator" style="background-color: #f0f2f3; clear: both; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJg50Aq9Ts0dxwf7Ct3SjHADE6DHSe2v18oBp2IuifJmmD-tOqaqQnTe6AOs9yScvg7mqRs_BLH0aKOQx4vctI7kVd7-DuLAWvr5Z1albKzfoSkcLbXb0rse_KEgj320MDcsSQ0wQI734/s1600/customize-google-custom-search-box-for-blogger-blogspot-5.PNG" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJg50Aq9Ts0dxwf7Ct3SjHADE6DHSe2v18oBp2IuifJmmD-tOqaqQnTe6AOs9yScvg7mqRs_BLH0aKOQx4vctI7kVd7-DuLAWvr5Z1albKzfoSkcLbXb0rse_KEgj320MDcsSQ0wQI734/s1600/customize-google-custom-search-box-for-blogger-blogspot-5.PNG" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" /></a></div>Được thiết kế bởi <a href="http://www.hongkiat.com/blog/css3-search-field/" style="background-color: #f0f2f3; color: #006666; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-decoration: none;">Bharani M</a> <div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">1- Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Tìm kiếm thẻ  ]]></b:skin>  và dán code bên dưới dán vào trước thẻ  ]]></b:skin>  đó.</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;">#main { width: 400px; height: 50px; background: #f2f2f2; padding: 6px 10px; border: 1px solid #b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; } input[type="text"] { float: left; width: 230px; padding: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; border: 1px solid #999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; } input[type="submit"].solid { float: left; cursor: pointer; width: 130px; padding: 8px 6px; margin-left: 20px; background-color: #f8b838; color: rgba(134, 79, 11, 0.8); text-transform: uppercase; font-weight: bold; border: 1px solid #99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9); -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; -webkit-transition: background 0.2s ease-out; } input[type="submit"].solid:hover, input[type="submit"].solid:focus { background: #ffd842; -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc; } input[type="submit"].solid:active { background: #f6a000; position: relative; top: 5px; border: 1px solid #702d00; -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; }</pre><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">2- Tạo một widget HTML/Javarscip và dán đoạn code bên dưới vào. Hãy nhớ thay Id searchcủa bạn</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><section id="wrapper"> <div id="main"> <form id="000704786632954521024:590qlmgqwcs" action="http://www.google.com/search"> <input value="000704786632954521024:590qlmgqwcs" name="cx" type="hidden"/> <input value="FORID:11" name="cof" type="hidden"/> <input id="q" name="q" size="70" type="text" id="search" /> <input name="sa" type="submit" class="solid" /> </form> </div> </section></pre><h3 style="background-color: #f0f2f3; border-bottom-color: rgb(0, 128, 255); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 128, 255); border-top-style: dotted; border-top-width: 1px; color: #0080ff; font-family: Arial; line-height: 19.59375px; margin: 0px; padding: 3px; text-align: justify;">Style 6: css3 search box inspired Apple</h3><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a class="button green" href="http://namkna-test.blogspot.com/2012/12/css3-search-box-inspired-apple.html" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(125, 183, 47)), to(rgb(78, 125, 14))); border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border: 1px solid rgb(83, 131, 18); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; color: #006666; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; line-height: 14px; margin: 0px 2px; outline: none; padding: 0.5em 2em 0.55em; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px; vertical-align: baseline; zoom: 1;" target="_blank">View Demo</a></div><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;">Ảnh minh họa:</div><div class="separator" style="background-color: #f0f2f3; clear: both; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CqDgPCCFTI86NdMCWFJE7JuQJf3XFcamEIVajGOTIgtgjncG1lLvG2r_n7lWC9v-sv5VcgK7Su1I-wKw5UVLHgd75M8fEP30ph_C8uMk4oZzIPkxq8tmOdxa3YUqRbMq7Cv4g7JtzYw/s1600/customize-google-custom-search-box-for-blogger-blogspot-6.PNG" imageanchor="1" style="color: #006666; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CqDgPCCFTI86NdMCWFJE7JuQJf3XFcamEIVajGOTIgtgjncG1lLvG2r_n7lWC9v-sv5VcgK7Su1I-wKw5UVLHgd75M8fEP30ph_C8uMk4oZzIPkxq8tmOdxa3YUqRbMq7Cv4g7JtzYw/s1600/customize-google-custom-search-box-for-blogger-blogspot-6.PNG" style="border: 0px; clear: both; max-width: 580px; min-width: 1px; padding: 0px;" title="Customize Google Custom Search Box - tùy chỉnh khung tìm kiếm của blog bằng css 3 - http://namkna.blogspot.com/" /></a></div>Phát triển bởi <a href="http://www.bloggermint.com/2011/06/css3-search-box-inspired-by-apple-com/" style="background-color: #f0f2f3; color: #006666; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-decoration: none;">Rethnaraj Rambabu</a> <div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">1- Vào Mẫu (Template) => Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Tìm kiếm thẻ  ]]></b:skin>  và dán code bên dưới dán vào trước thẻ  ]]></b:skin>  đó. </div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;">#search { } #search input[type="text"] { background: url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9XKSLfNHgeD50SWn0vacUItyU7yHaMhitzQtK9DX9xLX1SG_XRIDju1YGcyCtGZ85QToXSCz2MpFPU9hROKrKl-xahcmHeKzcnocGzAdm2XZldYKGGfZhl_zo2vqnsh7IzjIqbPD7-0vA/s1600-d/search-white.png" style="color: #006666; text-decoration: none;" target="_blank">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju_a-JSy_jSrU5-bYBeaXHa2RbvZCcizfpsTKtghMhwmP73CwlyYSH_85mxOzrm34vdzbIlGn7u_Hkv3smLkW_AEwI3nAWTNBj1xGHmiE7v00vEZiWuC9aC-oEsRbZ2Mzzh9NjsNI_GOQ/s1600/search-white-namkna-blogspot-com.png</a>) no-repeat 10px 6px #444; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #d7d7d7; width:150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { background: url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibvAbWU55Y8Qu59m2dCia_H9-hQjPTmT341cuYu3S3z_DOcpQcJRrgaiJGtHfW0uI6xrZQf9gZbAxfwSsqvoMVjNKoXuUgULlzd7ThHRZCwWLJPA7JYxLu5WdcNmModfK-V4zPkeUlgtPW/s1600-d/search-dark.png" style="color: #006666; text-decoration: none;" target="_blank">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9so4b6_cIf5TTlgzEjOWXU9SlpIC94GZNQZTPiYsb26Mrp6qdN_TsBIyGkd-EDJkGx98gTdreZt4qZ4xTfJOUoNZfhREJKEU3zIUDFXnzkR7B21WAAc5CbH1yAsQf6Y5FxN5r8B6QPt4/s1600/search-dark-namkna-blogspot-com.png</a>) no-repeat 10px 6px #fcfcfc; color: #6a6f75; width: 200px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }</pre><div style="background-color: #f0f2f3; font-family: Arial; font-size: 14px; line-height: 19.59375px; text-align: justify;">2- Tạo một widget HTML/Javarscip và dán đoạn code bên dưới vào. Hãy nhớ thay Id searchcủa bạn</div><pre style="background-color: #e9e9e9; border: 3px dotted rgb(153, 204, 102); color: #666666; font-family: 'Courier New', monospace; font-size: 14px; line-height: 19.59375px; margin-bottom: 10px; margin-top: 10px; max-height: 250px; overflow: auto; padding: 7px; width: auto !important;"><form id="search" method="get" id="000704786632954521024:590qlmgqwcs" action="http://www.google.com/search"> <input value="000704786632954521024:590qlmgqwcs" name="cx" type="hidden"/> <input value="FORID:11" name="cof" type="hidden"/> <input id="q" name="q" size="70" type="text" placeholder="Search..." /> </form></pre> Thay FORID:11 thành URL blog của bạn  và nếu chèn vào Template thì thay đoạn: <form id="search" method="get" id="000704786632954521024:590qlmgqwcs" action="http://www.google.com/search"> Thành: <form id="search" method="get" action="http://www.google.com/search"> Để hộp tìm kiếm  ở sát mé bên phải của thanh menu : bạn đặt code của khung search vào trong cặp thẻ sau: <div id='namkna-search'> <form action='http://www.google.com/search' id='search' method='get'> <input name='cx' type='hidden' value='017753565239794615853:0fpz4rh_rba'/> <input name='cof' type='hidden' value='http://ngangianghoa.blogspot.com'/> <input id='q' name='q' placeholder='Nhập nội dung và nhấn Enter...' size='70' type='text'/> </form> </div> Thêm đoạn mã sau và trước ]]></b:skin> #namkna-search{float:right; width:200px; margin:0} Để nội dung tìm kiếm nó bật sang 1 trang khác: Bạn sửa: <form action='http://www.google.com/search' id='search' method='get'> Thành: <form action='http://www.google.com/search' id='search' method='get' target='_blank'>                                                                                ( Theo : Namkna)                                                                                                              Thu thuat vi tinh

Tùy chỉnh Google Custom Search bằng CSS3 cho blogger

Google Custom Search là một trong những công cụ có danh sách các ưu điểm gần như vô tận. Từ cung cấp các kết quả tìm kiếm siêu liên kết đến ...