Hiển thị các bài đăng có nhãn Blogspot Tips. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogspot Tips. Hiển thị tất cả bài đăng

Thứ Năm, 15 tháng 10, 2015

Các điều kiện ẩn hiện trong blogspot Thứ Năm, 15 tháng 10, 2015

điền kiện ẩn hiện trong blogspot
điền kiện ẩn hiện trong blogspot
Cú pháp chung cho điều kiện để ẩn hiện trong blogspot, bài viết này được mình trình bày theo cách dễ hiểu và dễ nhớ cho các bạn đã có kinh nghiệm về code.
Do đó, nếu các bạn nào muốn tìm hiểu cách ẩn hiện theo điều kiện blogspot mà có phần nào chưa hiểu có thể để lại comment bên dưới.


Điều kiện chung để ẩn hiện trong blogspot

<b:if cond='Điều kiện'>
</b:if>

Khi đó Điều kiện ta có thể gán ghép như sau: 

<b:if cond='Điều kiện'>
Thay bằng:


Trang chủ:
<b:if cond='data:blog.url != data:blog.homepageUrl'>

Bài viết:
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Trang tĩnh hay gọi là trang: 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Nội dung hiển thị cho Trang (Page) và bài viết (post)
<b:if cond='data:blog.url == data:post.url'>

Trang index sẽ bao gồm: Trang chủ, trang hiển thị nhãn, và trang archive - lưu trữ
<b:if cond='data:blog.pageType == &quot;index&quot;'>

Trang nhãn: 
<b:if cond='data:blog.searchLabel'>

Chỉ hiện thị trên một nhãn nào đó
<b:if cond='data:blog.url == "http://DOMAIN/search/label/Tennhan"'>

[Nâng cao] Trang có Url bất kì: 
<b:if cond='data:blog.url == "ĐỊA CHỈ URL"'>

Trang lỗi 404: 
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

Trang lưu trữ: 
<b:if cond='data:blog.pageType == &quot;archive&quot;'>

Trang trên di động: 
<b:if cond='data:blog.pageType == "data:blog.isMobile"'>

Trang bài viết đầu tiên: 
<b:if cond='data:post.isFirstPost'>

Áp dụng điều kiện xuất hiện hoặc không xuất hiện
== Có ý nghĩa là chỉ xuất hiện trên trang này .....
!= Có ý nghĩa là xuất hiện trên tất cả các trang trừ trang này ra......

1. Điều kiện ở một trang nào đó trong blogspot ví dụ dưới đây là trang chủ

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Nội dung tùy chỉnh
</b:if>

Có nghĩa là "nội dung tùy chỉnh" này chỉ xuất hiện trên trang chủ

2. Điều kiện xuất hiện ở một trang mà có chứa CSS

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left; margin:10px;'>
Mã quảng cáo đặt ở đây
</div>
</b:if>

3. Kết hợp của 2 điều kiện (xuất hiện khi thỏa mãn cả 2 điều kiện)

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>.post-body {color: yellow;}</style><b:else/>
<b:if cond='data:blog.searchLabel'><style type='text/css'>.post-body {color: blue;}</style><b:else/>
<style type='text/css'>.post-body {color: red;}</style></b:if>
</b:if>
</b:if>

Với đoạn code này thì có ý nghĩa xuất ở trang chủ <b:if cond='data:blog.url == data:blog.homepageUrl'> thì .post-body có chữ màu yellow, nếu là trang nhãn sẽ có màu là blue, ngược lại thì các trang khác có màu red.

Chủ Nhật, 13 tháng 9, 2015

Thẻ Meta chuẩn SEO cho blogger Chủ Nhật, 13 tháng 9, 2015

Thẻ Meta chuẩn SEO cho blogger

Bộ thẻ Meta chuẩn SEO cho blogger là gì

Các thẻ meta thường được nằm bên trong cặp thẻ <meta> ... </meta>, có rất nhiều thẻ meta khác nhau thẻ meta sẽ khai báo cho google hiểu hơn về blog, website của bạn như khai báo ngôn ngữ, vị trí địa lí, tác giả, khai báo từ khóa, khai báo mô tả blog, khai báo để tối ưu blog hiểu thị trên các mạng xã hội..vv

Do đó những thẻ Meta CHUẨN SEO cực kì quan trong trong việc SEO

Dưới đây là bộ thẻ meta blogger chuẩn SEO được mình chọn lọc trong thời gian qua. Để sử dụng bộ thẻ Meta chuẩn SEO này bạn copy và chèn giữa <head>.......nơi bạn sẽ chèn đoạn bộ thẻ meta bên dưới.....<b:skin>

Bạn cần thêm vào sau thẻ lang='vi' sau thẻ <html có dạng như thế này:
<html lang='vi'............>

Thẻ Meta chuẩn SEO cho blogger

Bạn nhấn Ctrl + A để thấy rõ nội dung, hoặc Copy only text sang word để sửa
<meta charset='utf-8'/>
<meta content='publisher-name' name='DC.Publisher'/>
<meta content='uaJPi95ua-Gq8fhf8PYmJVfehY' name='alexaVerifyID'/>
<meta content='bqCvQd96fKEsDINdw8IsohwclFYFVWsaiGO7zZ1Zfcg' name='google-site-verification'/>
<meta content='de2d42a190998ae52a42b8fcd7f05c12' name='p:domain_verify'/>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<!-- seo title begin-->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<meta content='Thống kê diện tích dân số, mật độ  các tỉnh thành Việt Nam, Kinh nghiệm SEO blogspot, học anh văn, thiết kế CV, chia sẻ tài liệu marketing' name='Description'/>
<meta content='Thống kê diện tích dân số, mật độ  các tỉnh thành Việt Nam, Kinh nghiệm SEO blogspot, học anh văn, thiết kế CV, chia sẻ tài liệu marketing' name='Keywords'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
  <title><data:blog.title/> | Blog's Tôi Là Quản Trị</title>
<meta content='Thống kê diện tích dân số, mật độ  các tỉnh thành Việt Nam, Kinh nghiệm SEO blogspot, học anh văn, thiết kế CV, chia sẻ tài liệu marketing' name='Description'/>
<meta content='Thống kê diện tích dân số, mật độ  các tỉnh thành Việt Nam, Kinh nghiệm SEO blogspot, học anh văn, thiết kế CV, chia sẻ tài liệu marketing' name='Keywords'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta expr:content='data:blog.metaDescription' name='Description'/>
<meta expr:content='data:blog.pageTitle' name='Keywords'/>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
</b:if>
</b:if>
<!-- seo title end -->
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<meta content='1610653149174737' property='fb:app_id'/>
<meta content='100005806178307' property='fb:admins'/>

<meta content='https://www.facebook.com/toilaquantriblog' property='article:publisher'/>
<meta content='Tên của bạn' name='author'/>
<meta content='toilaquantri.com' name='copyright'/>
<meta content='Thống kê diện tích dân số, mật độ  các tỉnh thành Việt Nam, Kinh nghiệm SEO blogspot, học anh văn, thiết kế CV, chia sẻ tài liệu marketing' name='abstract'/>
  <meta content='1200,url=/' http-equiv='refresh'/>
<meta content='https://www.facebook.com/phung.huynh.93.1102' property='article:author'/>
<meta content='id' name='geo.country'/>
<meta content='1 days' name='revisit'/>
<meta content='1 days' name='revisit-after'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url' expr:title='data:blog.pageName' rel='openid.delegate'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if></b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='LINK ẢNH' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
<b:else/> <b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
</b:if></b:if>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<meta expr:content='data:blog.pageName' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<!-- All In One SEO Pack 2015 Blogspot Plugin -->
<!-- Metadata Twitter -->
<meta name='twitter:card' value='summary'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@publisher_handle' name='twitter:site'/>
<meta content='@author_handle' name='twitter:creator'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/></b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<!-- All In One SEO Pack 2015 Blogspot Plugin -->
<!-- Ngôn ngữ và địa lý -->
<meta content='VN-SG' name='geo.region'/>
<meta content='14.058324;108.277199' name='geo.position'/>
<meta content='14.058324, 108.277199' name='ICBM'/>
<meta content='Vietnam' name='geo.placename'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_VN' property='og:locale:alternate'/>
<meta content='vi_VN' property='og:locale:alternate'/>
<meta content='all' name='audience'/>
<meta content='all' name='robots'/>
<meta content='vi-VN' name='language'/>
<meta content='US' name='country'/>
<meta content='VN' name='language'/>
<meta content='Ho Chi Minh' name='city'/>
<meta content='Viet Nam' name='country'/>
<meta content='Ho Chi Minh' name='geo.placename'/>
<meta content='Viet Nam' name='geo.region'/>
<!-- All In One SEO Pack 2015 Blogspot Plugin-->
<!-- Schema.org markup for Google+ -->
<meta expr:content='data:blog.pageTitle' itemprop='name'/>


Trong đây có rất nhiều thành phần cần phải sửa đổi, nếu không rõ thành phần nào bạn có thể commetn bên dưới để mình hướng dẫn sửa lại cho phù hợp với blog của bạn

Thứ Bảy, 24 tháng 1, 2015

Tiêu Chuẩn Của Một Website Chuẩn Mà Tôi Là Quản Trị BLOG đạt được Thứ Bảy, 24 tháng 1, 2015

Gần đây trào lưu thiết kế web Flat - Giao diện phẳng trở nên phổ biến. Song song quá trình thiết kế các nhà thiết kế web cũng đang cố gắng làm sao cho website của mình trở nên thân thiện với đọc giả - Visiter bằng cách tối ưu SEO, Tối ưu tốc độ load trangthiết kế đơn giản nhưng tiện dụng.
Với sự phát triển của ngành di động, tablet ngày nay thì xu thế thiết kế web chuẩn Full Reponsive - Tự động co giản để phù hợp với các kích cõ màn hình khác nhau ngày càng trở nên phổ biến và thường có ở hầu hết các website hiện nay và Tôi Là Quản Trị BLOG cũng đang áp dụng. Cho phép người dùng lướt web trên trang bằng di động smartphone một các mượt mà trơn tru để load trang nhanh nhất.

Tôi Là Quản Trị BLOG tương thích mọi trình duyệt
Tôi Là Quản Trị BLOG tương thích mọi trình duyệt

Dưới đây là một số chỉ số mà Tôi Là Quản Trị BLOG đạt được

1. TÔI LÀ QUẢN TRỊ BLOG Chuẩn HTML5

W3C
Check >>

HTML5 là một công nghệ mới cho phép các nhà phát triển xây dựng rất nhiều ứng dụng dựa trên tài nguyên phong phú của nền tảng web. Bên cạnh đó, HTML5 có thể chạy trên bất kỳ một thiết bị di động nào thông qua một trình duyệt web tiêu chuẩn.

2. TÔI LÀ QUẢN TRỊ BLOG Chuẩn CSS W3C

Valid CSS!
Check >>

W3C là một trong số các chuẩn cho thiết kế web hiện nay, nó không phải là chuẩn quyết định mọi việc diễn ra trên môi trường Internet. Nhưng W3C giúp bạn định hướng khi xây dựng website.

Việc tuân thủ chuẩn W3C giúp cho website của bạn:
1) Google sẽ đánh chỉ mục website tốt hơn và website của bạn sẽ thân thiện hơn với các công cụ tìm kiếm như google, yahoo...
2) Website sẽ được chạy tốt và được hỗ trợ tốt trên mọi trình duyệt web hiện nay
3) Load trang sẽ nhanh hơn.
4) Website sẽ dễ dàng sửa chữa, nâng cấp.
5) Code website sẽ gọn hơn

3. TÔI LÀ QUẢN TRỊ BLOG Chuẩn cấu trúc dữ liệu

Check >>

4. TÔI LÀ QUẢN TRỊ BLOG Chuẩn SEO

Chuẩn SEO 100% SEO Reports for toilaquantri.com
Check >>
SEO là gì - SEO là một quá trình tối ưu để website trở lên thân thiện với các công cụ tìm kiếm. Bằng cách đánh dấu những nội dung theo cấu trúc của Google mà khi nhìn vào Google sẽ hiểu website của bạn đang đề cập đến nội dung gì và sẽ truy xuất kết tìm kiếm khi người dùng tìm kiếm từ khóa liên quan đến nó


5. TÔI LÀ QUẢN TRỊ BLOG Hiện Thị Chuẩn Trên Tất Cả Các Kích Thước Màn Hình

Check >>
Check >>


Ngày càng nhiều các thiết bị có kích thước màn hình khác nhau tham gia vào quá trình truy cập mạng. Do đó cần có một website thể hiện tốt trên tất cả các loại màn hình khác nhau, tự động vừa khích với các kích thước màn hình. Do đó thiết kế web ngày ngay chú trong đến điều này
Tôi là quản trị blog chuẩn hiển thị trên các thiết bị

Nếu bạn thay đổi kích thước trình duyệt mình khi đang duyệt web trên Tôi Là Quản Trị BLOG thì giao diện sẽ thay đổi sao cho phù hợp với kích thức cửa số

6. TÔI LÀ QUẢN TRỊ BLOG Thân Thiện Với Di Động

Check >>

Cho phép bạn thao tác trên di động mượt, các điểm chạm vừa phải trên kích thước di động màn hình nhỏ. Ngay cả nhỏ đến mức 240px vẫn hiện thị tốt

7. TÔI LÀ QUẢN TRỊ BLOG Dung Lượng Load trên Trang Chủ 1.1 MB - Tốc Độ Tải Khá Nhanh

Check >>

8. Google Insight

Với điểm số trên 80 với Desktop và trên 70 với mobile tuy chưa thật ấn tượng những cũng chấp nhận được.

Check>>

tôi là quản trị blog chuẩn trên Google Insight

Trước đây Tốc độ tải trang Tôi Là Quản Trị BLOG chưa đến 1s nhưng qua quá trình cài đặt chỉnh sửa thì tốc độ cũng đã giảm đáng kể. Nhưng xét cho cùng tốt độ website của Tôi Là Quản Trị BLOG cũng khá nhanh.

NguồnTôi Là Quản Trị BLOG 

Hướng dẫn tạo trang Thử Mã HTML/Javacript cho Blogspot

Tạo trang thử mã HTML, Thử Mã HTML/Javacript cho blogspot, thử mã HTML hướng dẫn bạn tạo 1 trang thử mã HTML ngay trên trang của mình.
Demo trang trang Thử Mã HTML/Javacript
http://www.toilaquantri.com/p/tra-ma-html-javacript.html
Hướng dẫn tạo trang Thử Mã HTML/Javacript cho Blogspot
Hướng dẫn tạo trang Thử Mã HTML/Javacript cho Blogspot

Hiện nay một số bạn blogger có chia sẻ code để tạo trang thử mã HTML xong thường không có nút xem toàn màn hình. Nay mình sẽ chia sẻ cho các bạn đoạn mã này. Sau khi sử dụng mã chỉ yêu cầu các bạn đừng xóa đoạn link http://toilaquantri.com bên dưới thôi!


Cách thực hiện trang Thử Mã HTML/Javacript

  1. Đầu tiên bạn cần vào Blogger và tạo một trang mới.
  2. Chuyển qua phần bài viết bằng HTML copy và dán đoạn code bên dưới vào
  3. Tiến hành Lưu tại và xem kết quả
Một vài bước khá đơn giản để tạo đúng không? Chúc các bạn thành công!

<script>
<!--
document.write(unescape("%3C%21DOCTYPE%20html%20PUBLIC%20%22-//W3C//DTD%20XHTML%201.0%20Transitional//EN%22%20%22http%3A//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22%3E%0A%3Chtml%20xmlns%3D%22http%3A//www.w3.org/1999/xhtml%22%3E%0A%3Chead%3E%0A%3Cmeta%20http-equiv%3D%22Content-Type%22%20content%3D%22text/html%3B%20charset%3Dutf-8%22%20/%3E%0A%0A%3C%21--Scrip%20xem%20tr%u01B0%u1EDBc%20code%20trong%20c%u1EEDa%20s%u1ED5%20m%u1EDBi%20%28Scrip%201%29--%3E%0A%3CSCRIPT%20language%3D%22JavaScript%22%3E%0A%3C%21--%20%0Awindow.onerror%20%3D%20null%3B%0A%0A//%20Test%20to%20see%20if%20Browser%20is%20Netscape%203%0A%0Afunction%20DoHTML%28%29%0A%7B%0Aresultwindow%3Dwindow.open%28%22%22%2C%22resultwindow%22%2C%27toolbar%3Dno%2Cscrollbars%3D1%2Cheight%3D500%2Cstatus%3D0%2Cmenubar%3D0%27%29%3B%0Aresultwindow.focus%28%29%3B%0Aresultwindow.document.write%28document.form1.code.value%20+%20%27%3CP%3E%27%29%0A%7D%0A%0A%7B%0A%0A%7D%0A//%20--%3E%0A%3C/SCRIPT%3E%0A%0A%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%20TYPE%3D%22text/javascript%22%3E%3C%21--%0A%20%20%20%20%20%20%20document.write%28%22%3CSCRIPT%20LANGUAGE%3D%27JavaScript%27%20SRC%3D%27buttonsnav.js%27%3E%3C%5C/SCRIPT%3E%22%29%3B%0A%20//--%3E%0A%3C/SCRIPT%3E%0A%3C%21--End%20Scrip%20xem%20tr%u01B0%u1EDBc%20code%20trong%20c%u1EEDa%20s%u1ED5%20m%u1EDBi--%3E%0A%0A%3C/head%3E%0A%3Cbody%3E%0A%0A%3Ccenter%3E%0A%0A%3C%21--Scrip%20g%F5%20v%E0%20xem%20code%20trong%20c%F9ng%20trang%20c%F3%20hai%20khung%20%28Scrip%202%29--%3E%0A%3Ctd%20valign%3D%22top%22%20style%3D%22padding%3A10px%22%20background%3D%22%23eee%22%3E%0A%3Cspan%20style%3D%22color%3A%20%233366ff%3B%20font:30px Segoe UI%3B%22%3EKhung%20nh%u1EADp%20m%E3%20c%u1EA7n%20th%u1EED%3C/span%3E%0A%3Cform%20name%3D%22form1%22%20method%3D%22post%22%3E%0A%3Ctextarea%20name%3D%22code%22%20wrap%3D%22soft%22%20onclick%3D%22focus%28this.code%29%22%20style%3D%0A%22border%3Asolid%201px%20%23b9b8b6%3Bpadding%3A5px%3Bwidth%3A100%%3Bheight%3A200px%3Bscroll%3Aauto%3B%22%3E%0A_H%u01AF%u1EDANG%20D%u1EAAN%20%3Cbr/%3E%0A+%20%u0110%E2y%20l%E0%20JAVA%20sao%20r%u01A1i%20tr%EAn%20n%u1EC1n%20blog%2C%20m%ECnh%20l%u1EA5y%20l%E0m%20v%ED%20d%u1EE5%20cho%20b%u1EA1n%21%20%3Cbr/%3E%0A+%20B%u1EA1n%20h%E3y%20click%20n%FAt%20%22Xem%20tr%u01B0%u1EDBc%20nhanh%22%20%u0111%u1EC3%20xem%20nh%E9%21%20%3Cbr/%3E%0A+%20B%u1EA5m%20n%FAt%20%22X%F3a%20m%E3%22%20%u0111%u1EC3%20x%F3a%20m%E3%20n%E0y%20%u0111i%20v%E0%20nh%u1EADp%20m%E3%20b%u1EA1n%20mu%u1ED1n%20test%20v%E0o%21%20%3Cbr/%3E%0A%0A%3Cbr/%3E%0A%28%20%5C__/%29%20%20%20%20%20%3Cbr/%3E%0A%28%20%3D%5E.%5E%29%20%20%20%20%20%20%3Cbr/%3E%0A%28%u201C%29_%20_%28%u201C%29%20%20%20%20%20%3Cbr/%3E%0A+++++++++++++++++++++++++++++%3E%0A%0A%3C%21--%20Hi%u1EC7u%20%u1EE9ng%20sao%20r%u01A1i%20cho%20blog%20--%3E%0A%3Cscript%20type%3D%27text/javascript%27%3E%0A//%3C%21%5BCDATA%5B%0A%20%20var%20snowsrc%3D%22https%3A//lh5.googleusercontent.com/-YbezE9QoWhk/TmDDDL3UmHI/AAAAAAAAK84/b6XxOqhe-IM/sao.png%22%20//%20Thay%20Link%20h%ECnh%20c%u1EE7a%20b%u1EA1n%20v%E0o%20%u0111%E2y%0A%20%20var%20no%20%3D%2020%3B%20//%20S%u1ED1%20%u1EA3nh%20r%u01A1i%20tr%EAn%20blog%0A%20%20var%20hidesnowtime%20%3D0%3B%20//%20S%u1ED1%20gi%E2y%20%u1EA3nh%20bi%u1EBFn%20m%u1EA5t%20sau%20khi%20r%u01A1i%0A%20%20var%20snowdistance%20%3D%20%22pageheight%22%3B%20//%20C%F3%20th%u1EC3%20thay%20%u0111%u1ED5i%20gi%E1%20tr%u1ECB%20pageheight%20th%E0nh%20windowheight%20%0A%0A///////////Stop%20Config//////////////////////////////////%0A%0A%20%20var%20ie4up%20%3D%20%28document.all%29%20%3F%201%20%3A%200%3B%0A%20%20var%20ns6up%20%3D%20%28document.getElementById%26%26%21document.all%29%20%3F%201%20%3A%200%3B%0A%0A%20function%20iecompattest%28%29%7B%0A%20return%20%28document.compatMode%20%26%26%20document.compatMode%21%3D%22BackCompat%22%29%3F%20document.documentElement%20%3A%20document.body%0A%20%7D%0A%0A%20%20var%20dx%2C%20xp%2C%20yp%3B%20%20%20%20//%20coordinate%20and%20position%20variables%0A%20%20var%20am%2C%20stx%2C%20sty%3B%20%20//%20amplitude%20and%20step%20variables%0A%20%20var%20i%2C%20doc_width%20%3D%20800%2C%20doc_height%20%3D%20600%3B%20%0A%20%20%0A%20%20if%20%28ns6up%29%20%7B%0A%20%20%20%20doc_width%20%3D%20self.innerWidth%3B%0A%20%20%20%20doc_height%20%3D%20self.innerHeight%3B%0A%20%20%7D%20else%20if%20%28ie4up%29%20%7B%0A%20%20%20%20doc_width%20%3D%20iecompattest%28%29.clientWidth%3B%0A%20%20%20%20doc_height%20%3D%20iecompattest%28%29.clientHeight%3B%0A%20%20%7D%0A%0A%20%20dx%20%3D%20new%20Array%28%29%3B%0A%20%20xp%20%3D%20new%20Array%28%29%3B%0A%20%20yp%20%3D%20new%20Array%28%29%3B%0A%20%20am%20%3D%20new%20Array%28%29%3B%0A%20%20stx%20%3D%20new%20Array%28%29%3B%0A%20%20sty%20%3D%20new%20Array%28%29%3B%0A%20%20snowsrc%3D%28snowsrc.indexOf%28%22dynamicdrive.com%22%29%21%3D-1%29%3F%20%22snow.gif%22%20%3A%20snowsrc%0A%20%20for%20%28i%20%3D%200%3B%20i%20%3C%20no%3B%20++%20i%29%20%7B%20%20%0A%20%20%20%20dx%5Bi%5D%20%3D%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20//%20set%20coordinate%20variables%0A%20%20%20%20xp%5Bi%5D%20%3D%20Math.random%28%29*%28doc_width-50%29%3B%20%20//%20set%20position%20variables%0A%20%20%20%20yp%5Bi%5D%20%3D%20Math.random%28%29*doc_height%3B%0A%20%20%20%20am%5Bi%5D%20%3D%20Math.random%28%29*20%3B%20%20%20%20%20%20%20%20%20//%20set%20amplitude%20variables%0A%20%20%20%20stx%5Bi%5D%20%3D%200.02%20+%20Math.random%28%29/10%3B%20//%20set%20step%20variables%0A%20%20%20%20sty%5Bi%5D%20%3D%200.7%20+%20Math.random%28%29%3B%20%20%20%20%20//%20set%20step%20variables%0A%20%20if%20%28ie4up%7C%7Cns6up%29%20%7B%0A%20%20%20%20%20%20if%20%28i%20%3D%3D%200%29%20%7B%0A%20%20%20%20%20%20%20%20document.write%28%22%3Cdiv%20id%3D%5C%22dot%22+%20i%20+%22%5C%22%20style%3D%5C%22POSITION%3A%20absolute%3B%20Z-INDEX%3A%20%22+%20i%20+%22%3B%20VISIBILITY%3A%20visible%3B%20TOP%3A%2015px%3B%20LEFT%3A%2015px%3B%5C%22%3E%3Ca%20href%3D%5C%22http%3A//dynamicdrive.com%5C%22%3E%3Cimg%20src%3D%27%22+snowsrc+%22%27%20border%3D%5C%220%5C%22%3E%3C%5C/a%3E%3C%5C/div%3E%22%29%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20document.write%28%22%3Cdiv%20id%3D%5C%22dot%22+%20i%20+%22%5C%22%20style%3D%5C%22POSITION%3A%20absolute%3B%20Z-INDEX%3A%20%22+%20i%20+%22%3B%20VISIBILITY%3A%20visible%3B%20TOP%3A%2015px%3B%20LEFT%3A%2015px%3B%5C%22%3E%3Cimg%20src%3D%27%22+snowsrc+%22%27%20border%3D%5C%220%5C%22%3E%3C%5C/div%3E%22%29%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20function%20snowIE_NS6%28%29%20%7B%20%20//%20IE%20and%20NS6%20main%20animation%20function%0A%20%20%20%20doc_width%20%3D%20ns6up%3Fwindow.innerWidth-10%20%3A%20iecompattest%28%29.clientWidth-10%3B%0A%20%20doc_height%3D%28window.innerHeight%20%26%26%20snowdistance%3D%3D%22windowheight%22%29%3F%20window.innerHeight%20%3A%20%28ie4up%20%26%26%20snowdistance%3D%3D%22windowheight%22%29%3F%20%20iecompattest%28%29.clientHeight%20%3A%20%28ie4up%20%26%26%20%21window.opera%20%26%26%20snowdistance%3D%3D%22pageheight%22%29%3F%20iecompattest%28%29.scrollHeight%20%3A%20iecompattest%28%29.offsetHeight%3B%0A%20%20%20%20for%20%28i%20%3D%200%3B%20i%20%3C%20no%3B%20++%20i%29%20%7B%20%20//%20iterate%20for%20every%20dot%0A%20%20%20%20%20%20yp%5Bi%5D%20+%3D%20sty%5Bi%5D%3B%0A%20%20%20%20%20%20if%20%28yp%5Bi%5D%20%3E%20doc_height-50%29%20%7B%0A%20%20%20%20%20%20%20%20xp%5Bi%5D%20%3D%20Math.random%28%29*%28doc_width-am%5Bi%5D-30%29%3B%0A%20%20%20%20%20%20%20%20yp%5Bi%5D%20%3D%200%3B%0A%20%20%20%20%20%20%20%20stx%5Bi%5D%20%3D%200.02%20+%20Math.random%28%29/10%3B%0A%20%20%20%20%20%20%20%20sty%5Bi%5D%20%3D%200.7%20+%20Math.random%28%29%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20dx%5Bi%5D%20+%3D%20stx%5Bi%5D%3B%0A%20%20%20%20%20%20document.getElementById%28%22dot%22+i%29.style.top%3Dyp%5Bi%5D+%22px%22%3B%0A%20%20%20%20%20%20document.getElementById%28%22dot%22+i%29.style.left%3Dxp%5Bi%5D%20+%20am%5Bi%5D*Math.sin%28dx%5Bi%5D%29+%22px%22%3B%20%20%0A%20%20%20%20%7D%0A%20%20%20%20snowtimer%3DsetTimeout%28%22snowIE_NS6%28%29%22%2C%2010%29%3B%0A%20%20%7D%0A%0A%20function%20hidesnow%28%29%7B%0A%20%20if%20%28window.snowtimer%29%20clearTimeout%28snowtimer%29%0A%20%20for%20%28i%3D0%3B%20i%3Cno%3B%20i++%29%20document.getElementById%28%22dot%22+i%29.style.visibility%3D%22hidden%22%0A%20%7D%0A%20%20%0Aif%20%28ie4up%7C%7Cns6up%29%7B%0A%20%20%20%20snowIE_NS6%28%29%3B%0A%20%20if%20%28hidesnowtime%3E0%29%0A%20%20setTimeout%28%22hidesnow%28%29%22%2C%20hidesnowtime*1000%29%0A%20%20%7D%0A//%5D%5D%3E%0A%3C/script%3E%0A%3C%21--End%20hi%u1EC7u%20%u1EE9ng%20sao%20r%u01A1i--%3E%0A%0A%3C/textarea%3E%3C/form%3E%3C/td%3E%0A%0A%3Cbr/%3E%0A%0A%3C%21--Button%20cho%20scrip%202--%3E%0A%3Cbutton%20onclick%3D%0A%22preview.document.write%20%28document.getElementsByTagName%20%28%27TEXTAREA%27%29%5B0%5D.value%29%3B%20preview.document.close%28%29%3B%20preview.focus%28%29%22%3EXem%20tr%u01B0%u1EDBc%20nhanh%3C/button%3E%0A%0A%3C%21--Button%20cho%20scrip%201--%3E%0A%3CINPUT%20TYPE%3D%22button%22%20NAME%3D%22do%22%20VALUE%3D%22 Toàn Màn Hình%22%20%20ONCLICK%3D%22DoHTML%28%29%22%3E%0A%0A%3C%21--Button%20cho%20scrip%202--%3E%0A%3Cbutton%20onclick%3D%0A%22window.document.form1.code.value%3D%27%27%3Bpreview.document.write%20%28document.getElementsByTagName%20%28%27TEXTAREA%27%29%5B0%5D.value%29%3B%20preview.document.close%28%29%3B%20preview.focus%28%29%22%3EXo%E1%20m%E3%3C/button%3E%0A%0A%3C/br%3E%0A%3C/br%3E%0A%0A%3C%21--Scrip%20g%F5%20v%E0%20xem%20code%20trong%20c%F9ng%20trang%20c%F3%20hai%20khung%20%28Scrip%202%29--%3E%0A%3Ctd%20valign%3D%22top%22%20style%3D%22padding%3A%2010px%22%20background%3D%22%23eee%22%3E%0A%3Cspan%20style%3D%22color%3A%20%23339966%3B%20font%3A30px%20Segoe UI%3B%22%3EKhung%20xem%20tr%u01B0%u1EDBc%20k%u1EBFt%20qu%u1EA3%3C/span%3E%0A%3C/br%3E%0A%3Ciframe%20src%3D%22about%3Ablank%22%20name%3D%22preview%22%20style%3D%0A%22height%3A250px%3Bwidth%3A100%%3Bborder%3Asolid%201px%20%23b9b8b6%3Bpadding%3A5px%3Bbackground%3A%23ffffff%22%0Aframeborder%3D%220%22%3E%3C/iframe%3E%3C/td%3E%0A%3C/br%3E%0A%3C/br%3E%0A%3Ca%20href%3D%22http%3A//toilaquantri.com%22%3E%3Cspan%20style%3D%22color%3A%20%233366ff%3B%22%3Ehttp%3A//toilaquantri.com%3C/span%3E%3C/a%3E%0A%3C/center%3E%0A%3C/body%3E%0A%3C/html%3E"));
//-->
</script>

Nguồn Tôi Là Quản Trị BLOG 

Thứ Tư, 21 tháng 1, 2015

Code Thông Dụng Để Viết HTML Thứ Tư, 21 tháng 1, 2015

Code Thông Dụng Để Viết HTML
Code Thông Dụng Để Viết HTML
Code Thông Dụng Để Viết HTML thông dụng để viết blogspot, nền tảng HTML đã quá phổ biến cho nên biết Code Thông Dụng Để Viết HTML này là cần thiết

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


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

2. Chèn flash vào bài viết.


Cách 1
<div style="text-align:center;"><embed wmode=Transparent pluginspage="http://www.macromedia.com/go/getflashplayer" src="LINK_FLASH" width="900" height="300" type="application/x-shockwave-flash" scale="" play="true" loop="true" menu="true"></embed></div>
Cách 2
<embed src="LINK_FLASH" bgcolor="#000000" type="application/x-shockwave-flash" allowscriptaccess="none" width="400" height="400"></embed>

LINK_FLASH là địa chỉ URL của flash mà bạn cần chèn vào bài viết

3. Viền khung nội dung vào bài viết

<div style="border: 1px solid #4F4F4F ; padding: 4px; background:#eee; width:400px;">
NỘI_DUNG
</div>
solid ______________
dashed ----------------
dotted ......................
Kết Quả:

NỘI_DUNG

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


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

Với:

LINK_NHẠC // Phải là link trực tiếp (VD: http://...bài_hát.mp3)

loop='0' // Không lặp lại
loop='1' // Lặp lại một lần
loop='-1' // Lặp lại mãi mãi
autostart="0" // Không tự play
autostart="1" // Play ngay khi web tải xong

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


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

KẾT QUẢ

6. Tạo hiệu ứng khi di chuyển chuột vào link liên kết


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

7. Canh Giữa, Trái, Phải cho nội dung

<div style="text-align:center;">Nội_dung</div>
Với:
Center // Canh Giữa
Right // Canh Phải
Left // Canh Trái

8. In Đậm, In Nghiêng, Gạch Chân, Gạch Ngang:


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


9. Dấu chấm hoặc số đầu dòng:

Dấu chấm vô dòng con
<ul>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ul>

Đánh số đầu dòng
<ol>
<li> Nội_dung 1 </li>
<li> Nội_dung 2 </li>
<li> Nội_dung 3 </li>
</ol>

10. Chèn Ảnh Vào Bài Viết:


Code đầy đủ:
<img src="LINK_ẢNH" title="Ghi_chú" alt="Mô_tả" align="bottom" width="400" height="400"/>

11: Chèn Link vào bài viết:


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


12. Chèn Khung Chứa Code:

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

13. Thay đổi ảnh khác khi rê chuột vào:


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

14. Nhúng 1 trang web khác vào bài viết:

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

15. Cách kiểu định dạng chữ trong lệnh: text-decoration:none


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

16. Đổ bóng bo góc:


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

17. Cách loại list trong lệnh: ul {list-style-type:none;}


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

18. Các lệnh lặp ảnh trong lệnh: background: url(image) repeat


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

19. Các lệnh điều kiện trong HTML


19.1. Điều kiện ở trang chủ
<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
</b:if>
19.2. Điều kiện ở trang bài viết
<b:if cond='data:blog.pageType == "item"'>
...
</b:if>
19.3. Điều kiện ở trang chủ, trang nhãn
<b:if cond='data:blog.pageType == "index"'>
...
</b:if>
19.4. Điều kiện ở các trang lưu trữ
<b:if cond='data:blog.pageType == "archive"'>
...
</b:if>
19.5. Điều kiện ở các trang tĩnh
<b:if cond='data:blog.pageType == "static_page"'>
...
</b:if>
19.6. Điều kiện ở một trang riêng biệt nào đó
<b:if cond='data:blog.url == "URL_của_trang_riêng_biệt"'>
...
</b:if>
Nếu thay == thành != thì kết quả sẽ ngược lại - Nghĩa là sẽ loại trừ trang đặt điều kiện ra và lấy phần ngược lại (các trang còn lại)

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

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

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


<!-- Lời ghi dưới mỗi bài viết -->
<b:if cond='data:blog.pageType == "item"'>
Nội_dung
</b:if>
Nội_dung // Ghi chú nội dung của bạn, có thể dùng hình ảnh, màu chữ, canh lề,v.v..

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

<script src='Link_File_JS' type='text/javascript'/>
30. Script chèn trực tiếp nội dung file .js vào blog
<script type='text/javascript'>
//<![CDATA[
Nội_dung_file_js
//]]>
</script>

30. Chữ nhỏ bên dưới ( dùng để viết công thức toán học )

X<sub>1</sub>
X<sup>1</sup>

Kết quả
X1
X1

Thứ Hai, 19 tháng 1, 2015

Nút Share trượt dọc chuẩn HTML5 Cho Blogspot Thứ Hai, 19 tháng 1, 2015

Nút Share trượt dọc chuẩn HTML5 Cho Blogspot chia sẻ thuật thuật cho blogspot làm nút share trượt dọc đẹp mắt.

Thủ nhật này được mình tùy biến CSS lại cho đẹp mắt với nét viền trắng đứt như viền kẻ chỉ tạo thêm cho nút share thêm đẹp mắt

Nút Share trượt dọc chuẩn HTML5 Cho Blogspot
Hình ảnh nút share trượt dọc cho blogspot

Cách thực hiện Nút Share trượt dọc chuẩn HTML5 Cho Blogspot

1> Vào Mẫu >> Nhấn Ctrl + F và tìm thẻ ]]></b:skin> sau đó dán trên nó đoạn CSS bên dưới

#chiase {position: fixed;bottom: 40%;margin-left: -136px;float: left;background-color: #727F10;z-index: 10;box-shadow: #914500 0 0 0 4px,0px 7px 1px 0px #000;-webkit-box-shadow: #727F10 0 0 0 4px,0px 7px 1px 0px #000;-moz-box-shadow: #914500 0 0 0 4px,0px 7px 1px 0px #000;border: 1px dashed #fff;}/*! Social Likes v3.0.12 by Artem Sapegin - http://sapegin.github.com/social-likes - Licensed MIT */.social-likes,.social-likes__widget{display:inline-block;padding:0;vertical-align:middle!important;word-spacing:0!important;text-indent:0!important;list-style:none!important}.social-likes{opacity:0}.social-likes_visible{opacity:1;-webkit-transition:opacity .1s ease-in;transition:opacity .1s ease-in}.social-likes>*{display:inline-block;visibility:hidden}.social-likes_vertical>*{display:block}.social-likes_visible>*{visibility:inherit}.social-likes__widget{display:inline-block;position:relative;white-space:nowrap}.social-likes__widget:before,.social-likes__widget:after{display:none!important}.social-likes_vertical .social-likes__widget{display:block;float:left;clear:left}.social-likes__button,.social-likes__icon,.social-likes__counter{text-decoration:none;text-rendering:optimizeLegibility}.social-likes__button,.social-likes__counter{display:inline-block;margin:0;outline:0}.social-likes__button{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.social-likes__button:before{content:"";display:inline-block}.social-likes__icon{position:absolute;top:0;left:0}.social-likes__counter{display:none;position:relative}.social-likes_ready .social-likes__counter,.social-likes__counter_single{display:inline-block}.social-likes_ready .social-likes__counter_empty{display:none}.social-likes_vertical .social-likes__widget{display:block}.social-likes_notext .social-likes__button{padding-left:0}.social-likes_single-w{position:relative;display:inline-block}.social-likes_single{position:absolute;text-align:left;z-index:99999;visibility:hidden;opacity:0;-webkit-transition:visibility 0 .11s,opacity .1s ease-in;transition:visibility 0s .11s,opacity .1s ease-in;-webkit-backface-visibility:hidden;backface-visibility:hidden}.social-likes_single.social-likes_opened{visibility:visible;opacity:1;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}.social-likes__button_single{position:relative}.social-likes{min-height:36px;margin:-6px}.social-likes,.social-likes_single-w{line-height:19px}.social-likes__widget{margin:6px;color:#000;background:#fff;border:1px solid #ccc;border-radius:3px;line-height:19px}.social-likes__widget:hover,.social-likes__widget:active,.social-likes__widget:focus{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;cursor:pointer}.social-likes__button,.social-likes__counter{vertical-align:middle;font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;line-height:20px;cursor:inherit}.social-likes__button{padding:1px 6px 1px 20px;font-weight:400;border-right:0}.social-likes__icon{width:20px;height:18px;margin-top:1px;background-repeat:no-repeat;background-position:50% 50%}.social-likes__counter{min-width:12px;padding:1px 4px;font-weight:400;text-align:center;border-left:1px solid #ccc}.social-likes__widget:hover>.social-likes__counter,.social-likes__widget:focus>.social-likes__counter,.social-likes__widget:active>.social-likes__counter,.social-likes__widget_active>.social-likes__counter{position:relative;border-left-color:transparent}.social-likes__widget:hover>.social-likes__counter:before,.social-likes__widget:focus>.social-likes__counter:before,.social-likes__widget:active>.social-likes__counter:before,.social-likes__widget_active>.social-likes__counter:before{content:"";position:absolute;top:0;bottom:0;left:-1px;border-left:1px solid;opacity:.4}.social-likes_vertical{margin:-6px}.social-likes_vertical .social-likes__widget{margin:6px}.social-likes_notext{margin:-3px}.social-likes_notext .social-likes__widget{margin:3px}.social-likes_notext .social-likes__button{width:18px}.social-likes_notext .social-likes__icon{width:100%;background-position:center center}.social-likes__widget_single{margin:0}.social-likes_single{margin:-12px 0 0;padding:4px 0;background:#fff;border:1px solid #ccc;border-radius:3px}.social-likes__single-container{width:100%;display:table}.social-likes_single .social-likes__widget{float:none;display:table-row;margin:0;border:0;border-radius:0;background:0 0}.social-likes_single .social-likes__button{display:block;padding:2px 6px 2px 24px}.social-likes_single .social-likes__icon{margin-left:4px;margin-top:2px}.social-likes_single .social-likes__counter{display:table-cell;padding:2px 8px 2px 4px;border-left:0;text-align:right}.social-likes_single .social-likes__widget:hover>.social-likes__counter:before,.social-likes_single .social-likes__widget:focus>.social-likes__counter:before,.social-likes_single .social-likes__widget:active>.social-likes__counter:before{display:none}.social-likes__icon_single{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAANCAYAAAB7AEQGAAAAaElEQVR42mIxL/zLgATkgXgBECcC8QOYIBOagvVA7ADEa4FYAV0RIxDPAeIUKD8VygeJM7BABf8DsScQ/4HyzwGxB1QcrKgByUpk9h8YnwlJElkBiiYmBiIAbRUx0s46FizhgwEAAgwAkmYQfIjC7tcAAAAASUVORK5CYII=")}.social-likes__widget_single:hover,.social-likes__widget_single:active,.social-likes__widget_single:focus,.social-likes__widget_active{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#3673f4;border-color:#3673f4;color:#fff}.social-likes__widget_single:hover .social-likes__icon_single,.social-likes__widget_single:active .social-likes__icon_single,.social-likes__widget_single:focus .social-likes__icon_single,.social-likes__widget_active .social-likes__icon_single{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAANCAYAAAB7AEQGAAAAYklEQVR42mL4//8/AxKWB+L9QKyALI6u4Nx/CDiLrBCmgBGIdwOxEVQRiN4DFWcAE1DAAsR/gBgkwIjEBzMaGBAAmf0Hzgea1IDm+P9o/AYmBiIAbRUx0s46FizhgwEAAgwAAJd9Vn3NlgwAAAAASUVORK5CYII=")}.social-likes__icon_facebook{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAaklEQVR42mJ0Cp7jycDAMBeIJRnwg+dAnMxEpGIGqJq5THgULwFicSBmBGJbmCYWPCYWAvEbdEF8GmCK/yMLMjGQCLBpsIW6GwaQ/UC6Ddj8cBjJZOr44TkJ6l+ANKSAGEQofgpKGgABBgAWcxAZp2KpkQAAAABJRU5ErkJggg==")}.social-likes__widget_facebook:hover,.social-likes__widget_facebook:active,.social-likes__widget_facebook:focus{background:#425497;border-color:#425497}.social-likes__widget_facebook:hover .social-likes__icon_facebook,.social-likes__widget_facebook:active .social-likes__icon_facebook,.social-likes__widget_facebook:focus .social-likes__icon_facebook{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAaUlEQVR42mL6//+/JxA/+08YgNR4MoIYDAwMkgzEgedMeBQvAWJxIGYEYluomCQLHtMKgfgNuiA+DTDF/5EFmRhIBNg02ELdDQPIfiDdBlCw/sclRzU/PCdB/QuQhhQQgwjFT4E4GSDAAMuiQX7Tr7YFAAAAAElFTkSuQmCC")}.social-likes__icon_twitter{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAA9ElEQVR42mKU3vqak4GB4TcQ/2HABFxAXA3EzkD8DIjbgfg+ECuwAIkwIHYD4gSoAchgORD7IfEDgPgpEGczAQlBII4C4kNAbIikSAqIfdEMYgRiMSD+B7JxJ9SZFkB8Foj3A/FWIP4KVYgO5gHxFpBGNSA+DsS2UIVOUIwLfAYRIKe+gGoiFpyDaTwJxEVA/J0ITd+hXgNrBIETMCcQADOA+D26RpCn/+LRdAuI62EcmMb/0IjOx6H5ATSu4a4ChaoPEMcAsTUQy6Bp+AfEy4C4EIjfIEuANG4B4rvQVKEOTWYfoKG3HYgfoluvPm8jA0CAAQAqvDQ/IXqkWQAAAABJRU5ErkJggg==")}.social-likes__widget_twitter:hover,.social-likes__widget_twitter:active,.social-likes__widget_twitter:focus{background:#00b7ec;border-color:#00b7ec}.social-likes__widget_twitter:hover .social-likes__icon_twitter,.social-likes__widget_twitter:active .social-likes__icon_twitter,.social-likes__widget_twitter:focus .social-likes__icon_twitter{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAQAAAD4iURRAAAAo0lEQVQYGQXBsSoEAACA4Z8YKIO6yXLzjYrkHS5Wm5GyYPMAUgarMikpGZQHsFh4BZPhJi9wJdzn+7JkQZJk2bl3TzYNbGTfvUVJ8gyYmdjJMd6sS9bMAHwbZ+QHMy9OHQDgWtn1CgAALpUtAADAnpITUwAAU6tKtn0BALiSkjkXfgHAhxUpybwjvwA+DSVl7MEEwJ87A0lKRs7cenTj0FCSpH8xHAhkcGt6PAAAAABJRU5ErkJggg==")}.social-likes__icon_plusone{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAYAAAC5tzfZAAABD0lEQVR42nTSsUtCURTH8eszSGgIgkqSoHBQh7QpbAlBcRCJ2staHFoa+hNyzqXBoan+gMDdoWgymkwkBxMiggo3a3Cp76WfcJHXgQ/nvfveue+ewwt08luGmEEdcwgjZP7iFrtmIqaUn5SXkUEDA+wZn/CwgQgetHYjC+JbZCOANWf9VXmobDd+c4vu8YgoalhFFpf4VL8rmMW8vR/3lEQV2yijhUO99KzeQ7p+95wjneAMQcRQ1JfsNA/wrc1T46KaznyMJqZxrcIvdNRf3957Gm8JO0ggjRx+cKpN21h0B7GJDw3EOGPvYuQ3ctvgC+K4w7nOfoQlFP4rsg+usI4Lrff0Z7QnCyqpffMrwAC15jTuOMaeqQAAAABJRU5ErkJggg==")}.social-likes__widget_plusone:hover,.social-likes__widget_plusone:active,.social-likes__widget_plusone:focus{background:#dd4241;border-color:#dd4241}.social-likes__widget_plusone:hover .social-likes__icon_plusone,.social-likes__widget_plusone:active .social-likes__icon_plusone,.social-likes__widget_plusone:focus .social-likes__icon_plusone{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAYAAAC5tzfZAAAA5klEQVR42myRvQrCMBSFUyehmyC4Zte1OPoALi6+gy/j6uobiINbF3Fx6tDFpZtSUFzEPxQxnksPchty4WvSJPeek5vIOWcQMViCFuiApqliDUbGD0kCeyLzAfiAI4i5VkM+CfiChdpIXRU2lNSgYAR6ysCB441jAkrfXs7KM1YXq3PuicUxuIO2/GvZKSh4n4xrcugKniwq88L3O+GmVB0GlKxWElsl2IEt1d4qsctu/ruXskqiFKXtL2WzRiQJ6McJWO8Jc/AA/dDj7niPDb2LpRU4e+q1x7VMkM5cSMZ7mBA/AQYALgmaWsDGGiQAAAAASUVORK5CYII=")}.social-likes__icon_mailru{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAABIElEQVR42mTSzytEURjG8XunISbFxmQ5UYqGIj9KMztLCyTKrMZCs7K1U7NSLBRloWb+AREmFpPF7GUzRBaymGLpV5bi+9RzM+XU595zT+85533PueHTXhC1BFaRx6DHnnGEbbxoIPSEFCp+l3DjCWOYc38FFzEe7Tj3Dlr5AG0OWscA6jhFX5zHmgO1+oy3V0AHirhHGZ36jjnnknfaxzKmMIxdTKMHO0pPE/px6cA7nAV/bQsfXky7fmtCqA5a8Bn8bz/WqlhNaCCDE0xivCk459zfMKq6VPQxCth0wTUfcZdr+UIaWVR1D0k6115lFkNYwLuPeB4beFUm0cVN4NCnoaBb5z3iDFTfIx7Cpl+j23eyiF6Pqb4lXEVBvwIMAGRTP1kwMI3TAAAAAElFTkSuQmCC")}.social-likes__widget_mailru:hover,.social-likes__widget_mailru:active,.social-likes__widget_mailru:focus{background:#255896;border-color:#255896;color:#ffcd00}.social-likes__widget_mailru:hover .social-likes__icon_mailru,.social-likes__widget_mailru:active .social-likes__icon_mailru,.social-likes__widget_mailru:focus .social-likes__icon_mailru{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAABIElEQVR42mTSzytEURjG8Xtn0IyIDc1SFpJQ5EdN1ChLC6PJFCsWsvInKCvFQllYKPaaZpIpC83CntkgsrBSLP1K2Wh8n3pupubU5865p/c9533PnbBWDaLRijWsYMBrLyhiF69aCJ3Qg7J/j3DrhDFkPV/FuRKSTK6RQAbtmMEPCojjxGv9TTw2XIJ2n/PxN2jDFh5wjA69x1yzytBJB1hCGsPYxyxS2FN5SuhDxYH3OAv+xw4+vZlO/VVCqAma8RU0jpq1KFYJz5jCKSYxXhe87NrfMaq+1HQJ69h2w5e+4k738o1BTONC19rNpOpd5jGEHD5wiAVs4k2VRB9uwneectCd6x5xBervCY9h3V+jy99kEb1eU395XEVBfwIMAE0mQy9JLJUSAAAAAElFTkSuQmCC")}.social-likes__icon_vkontakte{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAsElEQVR42mKJLJ3tycDAMBeIJRnwg+dAnMxEpGIGqJq5TGiKGZEwSE4ViDcha2LCYpIREK8C4l4gfgLElciSLDisDgXi/0A8DYi58GkA8Y8AsQkQfwHie0C8BVkBupO4kWyIBWJxIE4D4u/4nKQMxOVQ9jcgbgPii0BsgUvDIyCeBcR/gHgFVI00PhsuA3E61Lkg2xYAsSyyhudIcfGBQOS9AJmSAmIQEdNPQUkDIMAA8iAe2OyimvEAAAAASUVORK5CYII=")}.social-likes__widget_vkontakte:hover,.social-likes__widget_vkontakte:active,.social-likes__widget_vkontakte:focus{background:#526e8f;border-color:#526e8f}.social-likes__widget_vkontakte:hover .social-likes__icon_vkontakte,.social-likes__widget_vkontakte:active .social-likes__icon_vkontakte,.social-likes__widget_vkontakte:focus .social-likes__icon_vkontakte{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAfUlEQVQYGQXBMQ4BUQAFwGej0P1aohJCJBpcwu6N1AqVTqFX6TSu4B4if2+gNGZirwIAqPZRAQBADSAiBmYeQACxcXc2sgICiA4/MzsggKFia6HxBAIolk6Oxia+EEDRgYN4QQDF2tXF1NAbAigiGnM3ICoAAOij1QMA+Gj/aNf4AJYJLVIAAAAASUVORK5CYII=")}.social-likes__icon_odnoklassniki{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAyElEQVR42kzPMQtBcRTG4UvKQmalZFNKDNdm5gsYFCUlCbMyGMwsfACLzRcw2EwsGJTBQAZlUgxsfidvceq5/3vPeTv3Xs99FHMoP3ooOd+aoo+3T40hmnjouYsQWl4uEdRxRkLO6kVsQwB23nDRBruP2swGJ+zgYqKAq97JAi8UMUNFgb16LwvUkEYHcQUOaGNjgTKyaGCrQErn0gJVpQt/g6teObbfPGKAp/Orp3pH25DEHGGsFchghbxXXxvEAjlZqFf8CDAAgr4qyqKlfhgAAAAASUVORK5CYII=");background-position:6px 3px}.social-likes__widget_odnoklassniki:hover,.social-likes__widget_odnoklassniki:active,.social-likes__widget_odnoklassniki:focus{background:#f6903b;border-color:#f6903b}.social-likes__widget_odnoklassniki:hover .social-likes__icon_odnoklassniki,.social-likes__widget_odnoklassniki:active .social-likes__icon_odnoklassniki,.social-likes__widget_odnoklassniki:focus .social-likes__icon_odnoklassniki{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAQAAAD1lzQWAAAAgElEQVQIHQXBoRGCAAAF0N80OoA0AxTHcQMncAaO7J1ndRCbgUDRbPCgMABEjnu+F7FRGwxqG4m4YTLhJrG36BUKvcU+SnQiOpSx9cHDAx/biMoP/FQSZ3cnFxcnd+d4YfX2tuIVB1cjGF0dIgpf8FVIHI1otRgdozF72tl5mjV/486WhTdrOooAAAAASUVORK5CYII=")}.social-likes__icon_pinterest{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAABCUlEQVR42nTRPUvDUBTG8ZtoKYogTsGCoAXtUqFuBR1c/AZddNbRQUqhH0Eo6KKDb0gpXQUHBxF0Kg6KFAWh4qI4KxQRtKXxf+C5OEgP/Ehu8uTclwSN0VmnWsE6shjEF05QwZMFQr04QB3vKOmjGlZxiZxTcE0Pi9jCGD402xnOsYNF67yBGwWP8IaCwhe4xjxmLDyNUySxjGGk3F/5Wcb9Rib04FNLu9LYmk2ih1cbVLXmKXTRwoPCc8jgES/WpYymlhOpSxoxdjXTNn7spo19nYbN1ME9hjTexLE/OqsAC/jGknYf6Yxv/U592LrkcYdn+VehrgmM4ND1r8CHB7CnX96v4l8BBgB54jWa5GM+bAAAAABJRU5ErkJggg==")}.social-likes__widget_pinterest:hover,.social-likes__widget_pinterest:active,.social-likes__widget_pinterest:focus{background:#cc002b;border-color:#cc002b}.social-likes__widget_pinterest:hover .social-likes__icon_pinterest,.social-likes__widget_pinterest:active .social-likes__icon_pinterest,.social-likes__widget_pinterest:focus .social-likes__icon_pinterest{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAQAAADV/FywAAAAvklEQVQYGQXBsUoUAACA4f/i8MBB0TdINCQQhHoDaXRzagkkopYGhRYfwKWhSYLDZ2ixNyiTVp1cXMQgaDpNsa6v70vy3DcTt34ZeyRlaIzPXnvpAy6tK2+wIwuSZ/75Yphz3+XQjS3JVzwOe0Z+463kCBu58dHIT/fW5IEzUys58NeqK6eSJ/44NZM5r2yaurTkoRNsK8kuLlybYt9AycAnd5a98M5TScmsH44lSVIyb2JbkiSDZNF7I0mS9B8IOsS5z/yrNgAAAABJRU5ErkJggg==")}

Bước 2: Có 2 cách dán:
Tạo HTML/Javacript mới cho blogspot
- Tạo 1 HTML/Javacript mới và dán vào đó đoạn code sau:

<div id='chiase'>
<div style="margin:4px;">
<script src="jquery.min.js"></script>
<script src="social-likes.min.js"></script>
<div class="social-likes social-likes_vertical">
<div class="facebook" title="Share link on Facebook">Facebook</div>
<div class="twitter" title="Share link on Twitter">Twitter</div>
<div class="plusone" title="Share link on Google+">Google+</div>
<div class="pinterest" title="Share image on Pinterest" data-media="">Pinterest</div>
</div></div></div>

- Hoặc phương pháp 2 là dán code tên vào trên thẻ </body>

Chúc các bạn thành công!. Chỉnh đoạn CSS mình tô đỏ để căng chỉnh lại vị trí cho phù hợp với blog bạn!

Thứ Tư, 7 tháng 1, 2015

Chèn link từ động cho một vài từ khóa trong blogspot Thứ Tư, 7 tháng 1, 2015

Thủ thuật này sẽ giúp bạn chèn link cho từ khóa tự động có nghĩa là khi bạn chèn link <http://www.toilaquantri.com/2015/01/phan-mem-giai-nen-moi-nhat-winrar-520-beta3.html> cho từ khóa "WinRAR" thì trong bài viết nào có từ WinRAR sẽ tự động chèn link trên mà bạn không cần phải chèn thủ công. VD như từ khóa WinRAR của mình lúc nãy là được chèn tự động đấy!
Xây dựng link trong blog để SEO tốt nhất
Xây dựng link trong blog để SEO tốt nhất

OK! Như vậy các bạn đã hiểu rồi chứ?
Tiếp theo chúng ta tiếng hành thủ thuật.
1. Các bạn Đăng Nhập > rồi vào Mẫu.
2. Chèn đoạn code bên dưới trước </head>
<script type='text/javascript'>
//<![CDATA[
function doHighlight(a,c,f){for(var d="",b=-1,g=c.toLowerCase(),e=a.toLowerCase();0<a.length;)b=e.indexOf(g,b+1),0>b?(d+=a,a=""):a.lastIndexOf(">",b)>=a.lastIndexOf("<",b)&&e.lastIndexOf("/script>",b)>=e.lastIndexOf("<script",b)&&(d+=a.substring(0,b)+'<a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'" target="_blank">'+a.substr(b,c.length)+"</a>",a=a.substr(b+c.length),e=a.toLowerCase(),b=-1);return d} function highlightSearchTerms(a,c,f,d){searchArray=c?[a]:a.split(" ");div=document.getElementById(d);a=div.innerHTML;for(c=0;c<searchArray.length;c++)a=doHighlight(a,searchArray[c],f);div.innerHTML=a;return!0};
//]]>
</script>
Trong đoạn code trên có từ target="_blank" - Có nghĩa là nhấp vào link từ khóa này sẽ tự động mở 1 tab web mới. Bạn có thể xóa để mở trong cửa sổ hiện tại
3. Chèn từ khóa và link từ khóa
<data:post.body/>

Thay thế thành: 

<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
highlightSearchTerms('Từ khóa 1',true,'Link từ khóa 1','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 2',true,'Link từ khóa 2','summary<data:post.id/>');
highlightSearchTerms('Từ khóa N',true,'Link từ khóa N','summary<data:post.id/>');</script>

Lưu ý trong Template của bạn có thể có 3 đến 4 dòng <data:post.body/>. Cho nên để kiểm tra bạn nên tạo 1 bài viết mới có các từ khóa đó, sau đó chèn code từng dòng và load bài viết lại cho đến khi có link tự động thôi nhé!..



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

Thứ Ba, 6 tháng 1, 2015

Thêm Công Cụ Dịch Google Translate trên menu cho blogspot Thứ Ba, 6 tháng 1, 2015

Thủ thuật này giúp bạn tạo trên menu thêm công cụ dịch từ Vietnamese sang English để giúp cho khách truy cập nước ngoài có thể xem bài viết bằng ngôn ngữ phổ biến là tiếng anh
Link website bạn đang xem sẽ được dán vào công cụ transplate trực tuyến mà bạn không cần phải dùng widget để chèn vào vì tốc độ load trang web của bạn sẽ giảm đáng kể
VD:


CÁCH THỰC HIỆN:
Đăng nhập vào Blogger > Mẫu và chèn thêm vào đoạn code bên dưới vào code tạo menu của trang web bạn.
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;langpair=vi_VN%7cen&amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='Post Vietnamese translation into english'>
Translate</a></li>
Rất dễ dàng vào thuận tiện phải không! Bạn có thể xem Demo và click thử vào chữ TRANSLATE ngay trên Tôi Là Quản Trị BLOG.
Bạn cũng có thể thay mã ngôn ngữ mà mình đã đánh dấu đỏ.

Thứ Năm, 1 tháng 1, 2015

Thủ thuật mở link với 1 popup mới cho blogspot Thứ Năm, 1 tháng 1, 2015

Demo click vào đây

Nếu bạn muốn mở một cửa sổ trong 1 tab mới thì quá dễ dàng, còn mở link đó bằng 1 trang mới popup thì phải làm thế nào?


Mình sẽ hướng dấn cho các bạn khá đơn giản bằng một đoạn code nhỏ bên dưới:

Thủ thuật mở link với 1 popup mới cho blogspot bằng text link

<a href="http://www.toilaquantri.com/" onclick="window.open(this.href,'win2','width=800,height=600,menubar=yes,resizable=yes'); return false;" style="text-decoration: none;" title="">Tên Link</a>
demo
Tên Link

Mở link với 1 popup mới với hình ảnh

<div class="separator" style="clear: both; text-align: center;">
<a href="http://toilaquantri.com/" onclick="window.open(this.href,'win2','width=800,height=600,menubar=yes,resizable=yes'); return false;" style="text-decoration: none;" title=""><img height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlP0OsUoIi6OQQ7M2hGEssZfypOM4FAKy49ux9f-feLKXIi82gOzRdqemRjyc7IVu5xUBN91aLH4HYmo-f9SIv_VqmvYzwG2UjVPOfSH57xTrbDDiluvnQNSG9ZUWyGqj2p9QEJQtWfSo/s320/dang-ky-ngay.png" width="320" /></a></div>


  • Trong đó: bạn thay http://www.toilaquantri.com/ thành liên kết muốn mở
  • thay đổi chỉ số 800600 thành độ rộng và độ cao của cửa sổ popup... phần cuối cùng là đặt tên link hiển thị
  • mở link với 1 popup mới


  • Bạn thay link ảnh bằng hình ảnh bạn muốn hiển thị, ở đây tôi chọn hình ảnh là nút đăng kí ngay

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlP0OsUoIi6OQQ7M2hGEssZfypOM4FAKy49ux9f-feLKXIi82gOzRdqemRjyc7IVu5xUBN91aLH4HYmo-f9SIv_VqmvYzwG2UjVPOfSH57xTrbDDiluvnQNSG9ZUWyGqj2p9QEJQtWfSo/s320/dang-ky-ngay.png
Chúc bạn thành công!

Thủ thuật mở link với 1 popup mới cho blogspot

Demo click vào đây

Nếu bạn muốn mở một cửa sổ trong 1 tab mới thì quá dễ dàng, còn mở link đó bằng 1 trang mới popup thì phải làm thế nào?

Mình sẽ hướng dấn cho các bạn khá đơn giản bằng một đoạn code nhỏ bên dưới:
Code
<a href="http://www.toilaquantri.com/" onclick="window.open(this.href,'win2','width=800,height=600,menubar=yes,resizable=yes');
return false;" style="text-decoration: none;" title=""><b>Tên Link</b></a>

Trong đó: bạn thay http://www.toilaquantri.com/ thành liên kết muốn mở
thay đổi chỉ số 800600 thành độ rộng và độ cao của cửa sổ popup... phần cuối cùng là đặt tên link hiển thị

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

Thứ Tư, 24 tháng 12, 2014

Tạo menu xổ dọc của nhãn cho blogspot Thứ Tư, 24 tháng 12, 2014


Đôi khi blog của bạn chứa nhiều chuyên mục, nhãn... bạn lại không thể đưa chúng hết lên menu vì như thế sẽ làm rối mắt. Thủ thuật tạo menu theo nhãn cho phép bạn tạo danh mục nhãn xổ xuống nhằm tiết kiệm không gian blog đồng thời cũng giúp cho người dùng muốn tìm nhãn mình cần theo thứ tự sắp xếp ABC.


Đầu tiên là bạn phải tạo cho mình 1 tiện ích nhãn... Sau đó vào mẫu và di chuyển đến tiện ích nhãn cần làm menu xổ xuống:

Nếu muốn hiển thị một drop down menu thì hãy vào:
1 - Đăng nhập vào Blogger / Blogspot
2 - Mẫu >> Chỉnh Sửa HTML và tìm đoạn code phía dưới :


<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>


Và thay thế tất cả bằng đoạn code sau :


<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%;padding:5px'>
<option>Chọn danh mục muốn xem</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>


Cuối cùng là Lưu Mẫu và ra xem kết quả!

Chủ Nhật, 23 tháng 11, 2014

Hiệu ứng xoay tròn khi rê chuột vào ảnh trong blogspot Chủ Nhật, 23 tháng 11, 2014


Thủ thuật này giúp tạo ra hiệu ứng xoay tròn ảnh 360 độ khi bạn ghê chuột vào hình ảnh giúp làm cho blog được thú vị hơn ngoài ra còn bo tròn hình ảnh lại 50%. Bạn có thể tùy chỉnh lại những dòng chữ mình đã đánh dấu màu đỏ

Hiệu ứng xoay tròn khi rê chuột vào ảnh


Bước 1:

Vào mẫu nhấn Ctrl +F tìm thẻ ]]></b:skin>

Bước 2:
Dán đoạn code bên dưới vào trước nó
.post img {
    overflow: hidden; 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.post img:hover {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}


Thêm thủ thuật mới là phóng to và làm mờ ảnh

Thủ thuật này giúp tạo ra hiệu ứng phóng to ảnh và làm mờ hình ảnh. Bạn có thể tùy chỉnh lại những con số bên dưới

Bước 1:

Vào mẫu nhấn Ctrl +F tìm thẻ ]]></b:skin>

Bước 2:
Dán đoạn code bên dưới vào trước nó

.post img:hover {  -webkit-transform: scale(1.01, 1.01);  -moz-transform: scale(1.01, 1.01);  -ms-transform: scale(1.01, 1.01);  -o-transform: scale(1.01, 1.01);  transform: scale(1.01, 1.01);  opacity: 0.5;}.post img {  -webkit-transition-duration: 1.0s;  /* Webkit: Animation duration; */  -moz-transition-duration: 1.0s;  -o-transition-duration: 1.0s;}

Thủ thuật làm chậm hiệu ứng rê chuột vào các thành phần

Bước 1:

Vào mẫu nhấn Ctrl +F tìm thẻ ]]></b:skin>

Bước 2:
Dán đoạn code bên dưới vào trước nó
:hover{transition: all .5s ease-out;}

Biểu mẫu liên hệ

Tên

Email *

Thông báo *