Khôifoto

Công cụ tạo mã QR Code

2015-08-26T18:48:00.000-07:00

"Mã QR một mã ma trận (hay mã vạch hai chiều) được phát triển bởi công ty Denso Wave (Nhật Bản) vào năm 1994. Chữ "QR" xuất phát từ "Quick Response", trong tiếng Anh có nghĩa là đáp ứng nhanh, vì người tạo ra nó có ý định cho phép mã được giải mã ở tốc độ cao. Các mã QR được sử dụng phổ biến nhất ở Nhật Bản, và hiện là loại mã hai chiều thông dụng nhất ở Nhật Bản.
Mặc dù lúc đầu mã QR được dùng để theo dõi các bộ phận trong sản xuất xe hơi, hiện nay nó được dùng trong quản lý kiểm kê ở nhiều ngành khác nhau. Gần đây hơn, phần mềm đọc mã QR đã được cài vào điện thoại di động có gắn camera (camera phone) ở Nhật. Điều này đưa đến các ứng dụng mới và đa dạng hướng về người tiêu dùng, nhằm làm nhẹ nhàng việc nhập dữ liệu vào điện thoại di động, vốn không hấp dẫn mấy. Mã QR cũng được thêm vào danh thiếp, làm đơn giản đi rất nhiều việc nhập dữ kiện cá nhân của người mới quen vào sổ địa chỉ trên điện thoại di động.
Người dùng có chương trình thu tín hiệu (capture program) và máy tính có giao diện RS-232C có thể dùng máy quét ảnh(scanner) để thu dữ liệu."...
Source: Wiki
Công cụ tạo mã QR Code:

Nhập nội dung cần tạo mã (text hoặc link trang web) hoặc danh thiếp: mã sẽ xuất hiện bên phải.
Nhấp chuột phải vào ảnh →Save image as: để download ảnh về PC.
Copy/Paste mã nhúng bên dưới đưa vào web/blog.

Text( Content )/URL:

Size:

QR Imgage:

Embed Image code:

Bạn dùng Android tải ứng dụng quét mã QR Code.

Bạn có thể test thử trên Test Html Editor
Link to this page:

Công cụ tạo mã nhúng Youtube tùy chỉnh cho web/blog

2015-06-14T23:41:00.000-07:00

Công cụ tạo mã nhúng Youtube tùy chỉnh cho web/blog

Thông thường khi muốn nhúng Youtube vào blog ta có thể vào phần chia sẻ→nhúng của Youtube nhưng khó để tùy biến cho code mã nhúng của YouTube.Mã nhúng của YouTube ẩn hầu hết các khóa lệnh.
Công cụ tạo nhanh mã nhúng có thể giúp bạn tạo nhanh hơn và có thể thêm tùy chỉnh khi bạn chỉ cần xác định ID video trên YouTube.
eg:

https://www.youtube.com/watch?v=3f2jvzjF_qo

Bạn cũng có thể nhúng cả playlist

https://www.youtube.com/watch?v=iNJdPyoqt8U&list=PLc1MQJ9P83uL_XYMd0VXZNMc6s2NwujDK

Và đoạn mã màu đỏ chính là ID mà bạn cần dùng cho công cụ này.
Tùy chỉnh:

_Chiều cao của Video.
_Chiều rộng của video.
_ID của YouTube: paste ID Video bạn cần nhúng vào.
_Auto play:
Bật: tự động phát khi load xong trang;
Tắt: thì phải click vào nút play.
_Lặp lại:
Bật: auto playback;
Tắt: chỉ phát một lần.
_Bắt đầu phát vào giây thứ: n... tùy chỉnh (tính bằng giây).
_Ẩn thanh điều khiển: khi rời chuột đi.

Và muốn ẩn video để làm nhạc nền cho blog các bạn chỉ cần chỉnh: chiều cao, chiều rộng =1 là được.
Generate: lấy mã nhúng chèn vào web/blog.
Ok chỉ có vậy.
Trước đây có sử dụng một js để tạo công cụ như thế này. Có thể paste cả link YouTube không cần phải id ai điếc gì hết nhưng ngõ ra lại thiếu mất một ký tự của ID. Chẳng hiểu ra làm sao nhức đầu quá làm lại cái tool này phục vụ các bạn trước, từ từ fix cái kia sau.
Đang update các giá trị nâng cao cho mã nhúng...

Embeded Youtube Dimensions TTP © 2015
Chiều cao box:	px
Chiều rộng box:	px
Id của Youtube:
Auto play:
Lăp lại:
Bắt đầu phát vào giây thứ:	s (tính bằng giây)
Ẩn thanh điều khiển:
Độ phân giải:	Tùy thuộc vào chất lượng video, cấu hình và nhà mạng.
Nâng cao
Tắt điều khiển trình phát: Ẩn tiêu đề video và tác vụ của trình phát: Kích hoạt chế độ bảo mật nâng cao[?]:
Generated HTML Code

Copy and paste embed code vào thẻ <body>.

Bạn có thể test thử trên Test Html Editor
Link to this page:

Trang trí cho khung kết quả tìm kiếm tùy chỉnh Google (Google Search Custom)

2015-05-29T20:27:00.000-07:00

Mặc định trong kết quả 'tìm kiếm tùy chỉnh' liên kết đến trang mà bạn tạo như:/p/search.htmlthì background mặc định là nền trắng.
Bạn muốn thay đổi và trang trí cho khung kết quả tìm kiếm trong tìm kiếm tùy chỉnh google GCS?

thay đổi khung và background như ảnh trên.
Những bài viết về chèn thêm Công cụ tìm kiếm tùy chỉnh thì có hướng dẫn rất nhiều, nhưng khi chèn code<script>vào trang riêng ví dụ như trang này bạn có thể thêm thẻ<style>bên dưới vào trang mà bạn tạo kết quả tìm kiếm tùy chỉnh để thay đổi phong cách cho bạn

Css

<style>
#___gcse_0 {
    padding: 0;
    text-align: left;
    width: 98%;
    border: 10px outset #666600;
    -webkit-box-shadow: 3px 10px 5px 0 rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 10px 5px 0 rgba(0, 0, 0, 0.75);
    box-shadow: 3px 10px 5px 0 rgba(0, 0, 0, 0.75);
}
.gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #eee;
    background-color: #eeF;
}
.gsc-tabData.gsc-tabdActive {
    display: block;
    background: blanchedalmond;
}
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
    border-color: #FFFFFF;
    background-color: #eee;
}
.gsc-orderby-container {
    text-align: right;
    background: transparent;
    display: none;
}
.gsc-results .gsc-cursor-box {
    margin: 10px 0;
    background: #333;
    height: 20px;
    padding: 10px 20px;
    text-align: center;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    border-color: #FF9900;
    background: #333;
    color: #FFF;
    font: 14px arial;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
    border-color: #E9E9E9;
    background: #333;
    color: #FFF;
    font: 14px arial;
}
.gsc-cursor-box .gsc-cursor-page:hover, .gsc-cursor-box .gsc-cursor-page:focus {
    text-decoration: none !important;
    color: #DD4B39 !important;
    cursor: pointer;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    text-decoration: none;
    color: #F90;
}
</style>

Còn hình ảnh dưới đây là kết quả mặc định của GCS:

Bạn có thể test thử GCS trong site này và tùy biến theo phong cách của riêng bạn.
Hoặc có thể test thử vào khung tìm kiếm ngay bên dưới.
Hy vọng hữu ích.

Bạn có thể test thử trên Test Html Editor
Link to this page:

Công cụ tạo chữ chạy cho blog

2015-05-10T18:53:00.000-07:00

Demo:
Enter your marquee text here, Công cụ hiển thị tốt trên Chrome, Cốc cốc(Chrome+)& Firefox...

Html Code Marquee Generator

Code Marquee Dimensions TTP © 2015
Hướng chữ chạy:
Kiểu chạy:
Tốc độ:
Outer Box
Cao:	(pixels)
Rộng:	Percent Pixels
Kích thước viền:
Kiểu viền:
Màu viền:	# Choose Color
Màu nền:	# Choose Color
Link ảnh nền Marquee Box:	Replace/delete ur image link
Text
Nội dung text cần hiển thị:	Enter your marquee text here, Công cụ hiển thị tốt trên Chrome, Cốc cốc(Chrome+)& Firefox...
Icon(thumbnail) trước dòng text:	Hoặc dùng link ảnh thay thế text (eg: http://icons.iconarchive.com/icons/creativenerds/wooden-social/24/blogger-icon.png)
Font chữ:
Kích thước font:
Màu chữ:	# Choose Color
Padding:
Text Style & Weight:	Nghiêng In Đậm
Scrollstop khi rê chuột vào:
Generated HTML Code
	&
Copy and paste code <css> vào thẻ<style>và code <html>vào thẻ <body>.

Bạn có thể test thử trên Test Html Editor
Link to this page:

Uppercase-Lowercase Converter

2014-12-10T21:41:00.000-08:00

Bạn có thể test thử trên Test Html Editor
Link to this page:

EnCode_DeCode URL

2014-12-09T23:14:00.000-08:00

EnCode_DeCode URL

Bạn có thể test thử trênTest Html Editor
Link to this page:

Công cụ tạo khung chứa code

2014-12-01T21:51:00.000-08:00

1_Công cụ tạo Css cho khung chứa code thêm Gradient Background

Code Frame Dimensions TTP © 2014
Height:	px (pixels) /*khi vượt quá chiều cao sẽ xuất hiện scrollbar/
Width:	Percent Pixels

Styles
Background Color:	# [ More Colors...]
Gradient Background:	Thêm Gradient vào background
Text Size:
Text Style & Weight:	Italic Bold
Text Color:	# [ More Colors...]
Text Alignment:
Font Family:
Padding:
Border Width:
Border Style:
Border Color:	# [ More Colors...]
Border Radius:
Add:Border-Left	solid # [ More Colors...]
Contents Code here( only for Demo):
Text on Code Frame:	/***Code only Demo***/ $(function() { $('a').click(function() { $('body').remove(); // Whaatt??!!!! }); });

Generated code: Copy and paste Css code into'style'tag.
<!-- HTML Codes by Testtem... --> <style type="text/css"> code{ font-family:Consolas; } pre{ background-color:#F2F9FF; height:120px;width:96.5%; font-size:10pt;color:#2682B3; padding:10px;text-align:left; border:1px solid #E3E3E3; border-left:4px solid #E3E3E3; overflow:auto;white-space:pre } </style> <pre><code> /***Code only Demo***/ $(function() { $('a').click(function() { $('body').remove(); // Whaatt??!!!! }); }); </code></pre>

Khi chọn màu trong color_picker các bạn phải click vào để submit

2_Thêm tag cho khung chứa code:

^↑Ảnh Demo

_Nếu muốn thêm tag cho khung chứa code như ảnh trên ta thêm <css> vào thẻ style:

Css

pre[rel] {
    padding-top: 15px;
}
pre[rel]:before {
    content: attr(rel);
    font: normal 12px/22px Arial, Sans-Serif;
    color: white;
    background-color: #369;
    padding: 0 10px;
    margin: 0 8px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
/*Thay đổi màu cho thuộc tính REL**/
pre[rel="HTML"]:before{background-color:#336699}
pre[rel="CSS"]:before{background-color:#9999DD}
pre[rel="Javascript"]:before{background-color:#963}

Và trong thẻ body ta dùng cấu trúc như bên dưới:

Html

<pre rel="Html"><code>
   Nội dung code
Nhập nội dung code đã được mã hóa ở đây
</code></pre>

Html có thể thay thế bằng: Css , Javascript tùy nội dung code.
Hoặc bạn có thể dùng Công cụ mã hóa và thêm "rel" tag

Bạn có thể test thử trên Test Html Editor
Link to this page:

<a href="http://testtemplatekhoi.blogspot.com/2014/12/cong-cu-tao-khung-chua-code.html">Công cụ tạo khung chứa code</a> from testtemplatekhoi.blogspot.com

Công cụ tạo cửa sổ popup( Popup Window creator )

2014-11-21T22:35:00.000-08:00

CREATE POPUP

Công cụ tạo cửa sổ popup( Popup Window creator ) online

Không cần phải chèn thêm javascript.
Thay đổi các thông số: click Generate ! để lấy code.
Demo: Pop-up Window
Công cụ hiển thị tốt trên Chrome, Cốc cốc(Chrome+). Xem thêm: Công cụ tạo chữ chạy cho blog

Popup Window creator

Popup Dimensions TTP © 2014
Contents: Link Popup.
Destination:	Replace your link
Height:	(pixels)
Width:	(pixels)

Styles
Menubar:
Toolbars:
Location:
Scrollbars:
Status:
Resizable:
Text Content:	Hoặc chèn các thẻ sau: <img src="http://icons.iconarchive.com/icons/creativenerds/wooden-social/24/blogger-icon.png"/> <button class="button">Mở cửa sổ</button> <marquee onmouseover="this.stop()" onmouseout="this.start()"> New Popup, ...</marquee> <div style="width:100px;border:1px solid green;background:#333;color:#EEE;padding:5px;font:14px arial"> Pop-up Window</div>
Generated code: Copy and paste the following code into your page.

Bạn có thể test thử trênTest Html Editor
Link to this page:

Công cụ tạo iframe( Iframe generator )

2014-11-19T05:27:00.000-08:00

Công cụ tạo Iframe

Thay đổi các tùy chỉnh theo ý muốn của bạn
Click Genrrate My Iframe!để lấy code

Iframe Dimensions TTP © 2014
Iframe Url:
Iframe name:
Height:	(pixels) chiều cao iframe
Width:	Percent Pixels

Styles
Frame Border:
Scrolling:
Border Width:
Border Style:
Border Color:	Choose Color [More Colors...]
Margin Height:	(pixels)
Margin Width:	(pixels)


Generated code: Copy and paste the following code into your post. <!-- HTML Codes by Testtem... --> <iframe src="http://testtemplatekhoi.blogspot.com" name="Your Name" height="900px" width="100%" style="border:0px none #FFFFFF" frameborder="0" scrolling="no" marginheight="0px" marginwidth="0px"></iframe>

Bạn có thể test thử trên Test Html Editor
Link to this page:

Công cụ tạo chữ ( text ) trên ảnh ( background image )

2014-11-14T01:01:00.000-08:00

Công cụ tạo border và thêm text vào ảnh nền (background image)

Image Dimensions TTP © 2014
Height:	(pixels)
Width:	(pixels) chiều ngang của khung ảnh (nếu có )

Styles
Background Color:	# [More Colors...]
Text Size:
Text Style & Weight:	Italic Bold
Text Color:	# [More Colors...]
Text Alignment:
Text Indent:
Font Family:
Padding:
Border Width:
Border Style:
Border Color:	# [More Colors...]

Contents: Thêm ảnh nền vào background.
Background Image:	Image Url (i.e. http://goo.gl/AN8L8H )
Text on the image:	Enter your text here... Once there's enough text to fill up the image... have a go!


Generated code: Copy and paste the following code into your MyImage profile page. <!-- HTML Codes by Testtem... --> <div style="height:420px;width:600px;background-color:#ffffff;background-image:url(http://goo.gl/AN8L8H );font-family:Garamond;font-size:12pt;color:#FF9900;padding:0;text-align:left;text-indent:0;border:10px groove #333300;"> Enter your text here... Once there's enough text to fill up the image... have a go! </div>

Bạn cũng có thể dùng thẻmarqueethay thế cho Text on the Image.

Demo:

Enter your marquee text here, Công cụ hiển thị tốt trên Chrome, Cốc cốc(Chrome+)& Firefox... Enter your text here... Once there's enough text to fill up the image... have a go! Enter your marquee text here, Công cụ hiển thị tốt trên Chrome, Cốc cốc(Chrome+)& Firefox... Enter your marquee text here, Công cụ hiển thị tốt trên Chrome, Cốc cốc(Chrome+)& Firefox... Enter your marquee text here, Công cụ hiển thị tốt trên Chrome, Cốc cốc(Chrome+)& Firefox... Enter your marquee text here, Enter your marquee text here, Công cụ hiển thị tốt trên Chrome, Cốc cốc(Chrome+)& Firefox...© 2014 Tesstem

Bạn có thể test thử trên Test Html Editor
Link to this page:

<a href="http://testtemplatekhoi.blogspot.com/2014/11/cong-cu-tao-chu-text-tren-anh-nen.html">Công cụ tạo chữ ( text ) trên ảnh nền ( background image )</a> from testtemplatekhoi.blogspot.com

Cách lấy link download trực tiếp từ Google Drive

2014-11-11T22:58:00.000-08:00

_1 Cách lấy link download trực tiếp khi chia sẻ file từ Google Drive

Trước đây, khi chia sẻ file ta thường dùng một số trang lưu trữ và chia sẻ file trực tuyến ví dụ như: mediafire.com , dropbox.com , box.com hoặc fshare.vn ...
Nhưng vấn đề ở đây tôi muốn đề cập tới trong bài này là khi chèn link vào nút download hoặc vào text (click thử) Download thì thông thường sẽ đưa ta đến trang của site mà ta lưu trữ file để download, ví dụ như box.com hoặc fshare.
Để trông có vẻ hay và chuyên nghiệp hơn khi click vào doawnload, trình duyệt tự động tải ( trong google chrome ), hoặc popup bật lên ( trong firefox ) lựa chọn lưu tập tin, thì chỉ có một số trang cho ta link download trực tiếp như dropbox.com, mediafire và giờ đây trong chọn lựa của bạn có thêm link của drive.google.com thông qua trang Google Drive Permalinks hoặc dùng công cụ chuyển đổi link ở phần _2
1_a)_Đầu tiên các bạn vào drive.google.com. Chọn file bạn cần chia sẻ:
Ảnh minh họa

tiếp tục như trong ảnh

1_b)_ Copy link như trong ảnh và tiếp tục vào trang Google Drive Permalinks :
Paste link google drive như ảnh dưới.

click vào button sẽ cho ra kết quả:

_click vào Permalinks để nhận link download
_Show on website: cho phép hiện users trên trang web Google Drive Permalinks :

Lấy link bạn cần dùng và chèn vào web/blog và đã được thu gọn link.
Link này bạn có thể chèn vào Button hoặc text tùy sự chọn lựa của bạn.
Hy vọng hữu ích.

2_Tạo link download trực tiếp

Bạn cũng có thể dùng công cụ này để tạo link download:

_1 Copy & paste link đã được chia sẻ trên google drive vào ô Paste share link here.( thao tác giống như mục 1_ a)
_2 Bấm Generate để lấy link trực tiếp chèn vào web/blog hoặc email/comment.
Demo links:
Link đã được chia sẻ trong google drive: https://drive.google.com/file/d/0B47lv08-i8_5OTJ6Y1A5S1MyMjg/view?usp=sharing ( chỉ có thể xem ).
Link được tạo sau khi dùng công cụ này : https://drive.google.com/uc?export=download&id=0B47lv08-i8_5OTJ6Y1A5S1MyMjg ( click thử)
Warning:
_Với những file lớn hơn googledrive có thể quét virus bạn vẫn phải về trang này để confirm:

_Những file có kích thước lớn nên archive files trước khi upload.
_Những file bạn tạo trong ứng dụng của googledrive ( eg: spreadsheets ) muốn tạo link download, trước tiên phải down về PC rồi upload trở lại googledrive và làm lại bước 1_a.

Xem thêm:

Tạo host chứa file Css, Javascript trong GoogleDrive

Xem thêm:

Chỉnh sửa file Css, Javascript trực tiếp trong Googledrive

Bạn có thể test thử trênTest Html Editor
Link to this page:

Tooltip Thủ thuật khi rê chuột vào ảnh ( thumbnail ) hiện ảnh lớn hơn

2014-10-31T20:52:00.000-07:00

Đây là thủ thuật sử dụng javascript ( Image Trail Tooltip ) khi rê chuột vào ảnh thumbnail sẽ hiện ảnh lớn hơn. Các bạn có thể tùy chỉnh thông số trong đoạn code màu đỏ (width, height) trong thẻ <body> .
Màu xanh : là link ảnh của bạn ( chú ý: mỗi ảnh có 2 link ).
Code của ảnh thứ nhất:

HTML

<img alt="Thumbnail" height="75" onmouseout="hideTrail();" onmouseover="showTrail(310,230, 'https://lh6.googleusercontent.com/-4JUtPRCDtoM/VEa1pd3ZUJI/AAAAAAABkbI/ANIpxQ4M6wA/w720-h480-no/10007518_712204588824702_132144577_n.jpg');" src="https://lh6.googleusercontent.com/-4JUtPRCDtoM/VEa1pd3ZUJI/AAAAAAABkbI/ANIpxQ4M6wA/w720-h480-no/10007518_712204588824702_132144577_n.jpg" width="110" />

Xem code và demo bên dưới:

TTP © 2014

  <style>
/* Image Trail Tooltip CSS */
 .trail-image {
              width:0;
              height:0;
              background-color:#ddd;
              border:1px solid #888;
              position:absolute;
              top:-9999px;
              left:-9999px;
              z-index:9999;
              visibility:hidden;
              -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, .2);
              -moz-box-shadow:0 1px 1px rgba(0, 0, 0, .2);
              box-shadow:0 1px 1px rgba(0, 0, 0, .2);
}
   </style>
  
 <script type ="text/javascript" src ="http://yourjavascript.com/0541171811/img-tooltip.js">
 </script>    
          <h3 style="color: #555555;">     Tooltip: Thủ thuật khi rê chuột vào ảnh hiện ảnh lớn hơn</h3>
        Hover me!!
          <img alt="Thumbnail" height="75" onmouseout="hideTrail();" onmouseover="showTrail
(310,230,'https://lh6.googleusercontent.com/-4JUtPRCDtoM/VEa1pd3ZUJI/AAAAAAABkbI/ANIpxQ4M6wA/w720-h480-no/10007518_712204588824702_132144577_n.jpg');"
 src="https://lh6.googleusercontent.com/-4JUtPRCDtoM/VEa1pd3ZUJI/AAAAAAABkbI/ANIpxQ4M6wA/w720-h480-no/10007518_712204588824702_132144577_n.jpg" width="110" />
          <img alt="Thumbnail" height="75" onmouseout="hideTrail();" onmouseover="showTrail(310,230,'https://lh4.googleusercontent.com/-fNYNRhzRvA8/VEaAC0Mlj9I/AAAAAAAA-SA/bxTkEidIH_g/w1050-h699-no/3.JPG');" src="https://lh4.googleusercontent.com/-fNYNRhzRvA8/VEaAC0Mlj9I/AAAAAAAA-SA/bxTkEidIH_g/w1050-h699-no/3.JPG" width="110" />
        <img alt="Thumbnail" height="75" onmouseout="hideTrail();" onmouseover="showTrail(310,230,'https://lh4.googleusercontent.com/-0TtZZ5M1dyU/VEaTCAgtyvI/AAAAAAAA-U0/mxXso4OKNys/w1118-h646-no/1.JPG');" src="https://lh4.googleusercontent.com/-0TtZZ5M1dyU/VEaTCAgtyvI/AAAAAAAA-U0/mxXso4OKNys/w1118-h646-no/1.JPG" width="110" />   

Bạn có thể test thử trênTest Html Editor
Link to this page:

Công cụ tạo button tùy chỉnh

2014-10-24T19:48:00.000-07:00

TTP ColorScheme

2014-10-12T23:50:00.000-07:00

Bạn có thể test thử trênTest Html Editor
Link to this page:

Instant Character Counter

2014-10-10T18:52:00.000-07:00

Bạn có thể test thử trênTest Html Editor
Link to this page:

Top Menu có nút Ẩn, Hiện

2014-09-24T23:05:00.000-07:00

_Đây là Top Menu được đặt ở đầu blog và có nút ( Button ) Ẩn, Hiện. Các bạn có thể xem Demo
Các bạn bấm Update bên dưới để xem kết quả.

Source Code	Result
<style> .ShowHide { background: none repeat scroll 0 0 #2e2f2e; border-bottom: 2px solid #eee; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-left: 2px solid #eee; border-right: 2px solid #eee; box-shadow: 1px 2px 9px #555; cursor: pointer; display: block; padding: 0 7px; height: 25px; position: absolute; right: 3px; float: right; top: 0; z-index: 999; } #banner { visibility: hidden; display: none; } #banner { background-color: #333; border-bottom: 1px solid #eee; box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.3); height: 48px; left: 0; display: block; margin-bottom: 50px; padding: 5px 15px; position: fixed !important; right: 0; top: 0; z-index: 999; } .nav { margin: 3%; } .nav a { margin-left: -3px; padding: 12px 18px; outline: none; border: 1px solid #121212; border-right: none; background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.34) 100%) repeat scroll 0 0 transparent; box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1); color: #777777; vertical-align: top; text-decoration: none; text-shadow: 0 -1px #0F0F0F; font-size: 13px; line-height: 21px; cursor: pointer; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .nav a:hover { color: #f6f6f6; } .nav a:first-child { border-radius: 6px 0 0 6px; } .nav a:last-child { border-radius: 0 6px 6px 0; } .nav a:active { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1); } .nav a.highlight { background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.44) 100%) repeat scroll 0 0 transparent; color: #f6f6f6; } .nav a:last-child { border-right: 1px solid #121212; } </style> <script type="text/javascript"> var showHeader=false; function ShowHideBanner() { showHeader=!showHeader; var nav=document.getElementById("banner"); if (showHeader) { banner.style.visibility="visible"; banner.style.display="block"; } else { banner.style.visibility="hidden"; banner.style.display="none"; } } </script> <div id="banner"> <script src="http://use.edgefonts.net/open-sans.js"></script> <div class="nav"> <a href="#" class="highlight">Home</a> <a href="javascript:void(0);">About</a> <a href="javascript:void(0);">Tool</a> <a href="javascript:void(0);">Html Edit</a> <a href="javascript:void(0);">Encode</a> <a href="javascript:void(0);">Contact</a> <a href="javascript:document.location.reload();" title="Tải lại trang" id="refresh_output">↺</a> </div> <div class="ShowHide" name="Hide" style="z-index:999;top:58px;height:28px" title="Hide" onclick="ShowHideBanner();"> <a style="visibility:hidden;" ></a> </div> </div> <div class="ShowHide" name="Show"style="position:fixed;z-index:990" title="Show Menu Bar" onclick="ShowHideBanner();"> <a style="visibility:hidden;" > </a></div>

Source Code

Result

Dashboard→ Mẫu→ Chỉnh sửa Html. Sử dụng cặp phím [Control+F] để tìm các thẻ:
_Đầu tiên các bạn đặt code CSS vào trước thẻ đóng ]]</b:skin>
_Copy Javascript đặt trong cặp thẻ <head>...</head>
_Code Html đặt ngay sau thẻ <body>
Save và trở lại trang Web xem kết quả.
Click button: xem code

Code:

<style>
    .ShowHide {
        background: none repeat scroll 0 0 #2e2f2e;
        border-bottom: 2px solid #eee;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-left: 2px solid #eee;
        border-right: 2px solid #eee;
        box-shadow: 1px 2px 9px #555;
        cursor: pointer;
        display: block;
        padding: 0 7px;
        height: 25px;
        position: absolute;
        right: 16px;
        float: right;
        top: 0px;
        z-index: 999;
    }    
    #banner {
        visibility: hidden;
        display: none;
    }  
    #banner {
        background-color: #333;
        border-bottom: 1px solid #eee;
        box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.3);
        height: 48px;
        left: 0;
        display: block;
        margin-bottom: 50px;
        padding: 5px 15px;
        position: fixed !important;
        right: 0;
        top: 0;
        z-index: 999;
    }   
    .nav {
        margin: 1%;
    }   
    .nav a {
        margin-left: -3px;
        padding: 12px 20px;
        outline: none;
        border: 1px solid #121212;
        border-right: none;
        background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.34) 100%) repeat scroll 0 0 transparent;
        box-shadow: 0 2px 3px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        color: #777777;
        vertical-align: top;
        text-decoration: none;
        text-shadow: 0 -1px #0F0F0F;
        font-size: 13px;
        line-height: 21px;
        cursor: pointer;
        -webkit-transition: all .6s ease;
        -moz-transition: all .6s ease;
        -ms-transition: all .6s ease;
        -o-transition: all .6s ease;
        transition: all .6s ease;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }   
    .nav a:hover {
        color: #f6f6f6;
    }    
    .nav a:first-child {
        border-radius: 6px 0 0 6px;
    }   
    .nav a:last-child {
        border-radius: 0 6px 6px 0;
    }    
    .nav a:active {
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
    }    
    .nav a.highlight {
        background: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.44) 100%) repeat scroll 0 0 transparent;
        color: #f6f6f6;
    }    
    .nav a:last-child {
        border-right: 1px solid #121212;
    }
</style>

<script type="text/javascript">
    var showHeader = false;
    function ShowHideBanner() {
        showHeader = !showHeader;
        var nav = document.getElementById("banner");
        if (showHeader) {
            banner.style.visibility = "visible";
            banner.style.display = "block";
        } else {
            banner.style.visibility = "hidden";
            banner.style.display = "none";
        }
    }
</script>

<div id="banner">
    <script src="http://use.edgefonts.net/open-sans.js"></script>
    <div class="nav">
        <a href="/" class="highlight">Home</a>
        <a href="javascript:void(0);">About</a>
        <a href="javascript:void(0);">Tool</a>
        <a href="javascript:void(0);">Html Edit</a>
        <a href="javascript:void(0);">Encode</a>
        <a href="javascript:void(0);">Contact</a>
        <a title="Tải lại trang" id="refresh_output" href="javascript:document.location.reload();">↺</a>
    </div>
    <div class="ShowHide" name="Hide" style="z-index:999;top:58px;height:28px" title="Hide" onclick="ShowHideBanner();">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeA6-KKWRXkxLWla7esIpeRq8rGAisbkDGCnuV6-dTpKhrr2XbRMs9BaYTfRbrsw7w0_GHW4dUZyEdw4bQthE3DG6WTflsKuebUNUyZVRSMlA1JDPoGvI4feu4tfjinJ32VXoadWXiycM/s1600/arrow_up.png" width="20px">
        <a style="visibility:hidden;">
        </a>
    </div>
</div>
<div class="ShowHide" name="Show" style="position:fixed;z-index:990" title="Show Menu Bar" onclick="ShowHideBanner();">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIl0UPGrAjVq9lTMM0gRv6Inm7Wx23v7AIzDrasq1oyXhlGtGIOU7zg-U8SJj1psgUQG_InrsEP58fs7OgtnXXkhOOzge-2AkxyejzaqxLhb2NhCkJMHHBTs-4V_iDSTJqs8LtAVYdmC0/s1600/down.png" width="20px">
    <a style="visibility:hidden;">
    </a>
</div>




  

Bạn có thể test thử trên Test Html Editor
Link to this page:

Play Ground

2014-09-18T17:41:00.000-07:00

Download Button Set

2014-09-14T23:54:00.000-07:00

Download Button Set

Đây là bộ 'Download Button'
Sưu tầm trên trang cssdeck.com: tác giả Kushagra Agarwal; không sử dụng bất cứ link ảnh nào.
Ưu thế về tốc độ load, là bộ sưu tập đẹp,và bạn có thể tùy biến nội dung button.

            TTP © 2014


            

                
<style>
  a.button {
    position: relative;
    height: 15px;
    padding: 12px 20px 15px 68px;
    cursor: pointer;
    text-align: Right;
    font-weight: bold;
    font-size: 18px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    -moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    display: inline-block !important;
    font: 700 15px 'Arial', Helvetica, Clean, sans-serif;
    margin: 0px 0px 20px 10px;
    position: relative;
    text-decoration: none;
    transition: background-position .2s ease, margin .1s ease;
    -webkit-transition: background-position .2s ease, margin .1s ease;
    -moz-transition: background-position .2s ease, margin .1s ease;
    background-repeat: repeat-x;
}
a.button:hover { background-position: 0 10px }
a.button:active {
    -webkit-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    -moz-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    margin: 2px 0 20px 10px;
}
a.button span.bar {
    width: 1px;
    height: 30px;
    position: absolute;
    background: black;
    top: 5px;
    left: 50px;
}
a.button div.arrow {
    position: absolute;
    left: 20px;
    top: 14px;
}
a.button div.arrow span.top {
    position: absolute;
    width: 6px;
    height: 9px;
    background: #000;
    top: 0;
    left: 3px;
}
a.button div.arrow span.bottom,
div.arrow span.bottomShadow {
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid black;
    top: 9px;
    left: -2px;
    z-index: 2;
}
a.button div.arrow span.bottomShadow {
    z-index: 1;
    left: -1px;
}
/* GRAY
   ================================================== */
a.grey {
    background-color: #888;
    background-image: -webkit-linear-gradient(top, #888, #333);
    background-image: -moz-linear-gradient(top, #888, #333);
    background-image: -ms-linear-gradient(top, #888, #333);
    background-image: -o-linear-gradient(top, #888, #333);
    background-image: linear-gradient(top, #888, #333);
    text-shadow: 1px 1px 1px rgba(255,255,255,.2);
    border-top: 1px solid #aaa;
}

a.grey span.bar {
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}
a.grey div.arrow span.top {
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}
a.grey div.arrow span.bottomShadow { border-top: 8px solid rgba(255, 255, 255, 0.2) }
/* BLUE
   ================================================== */
a.blue {
    background-color: #00aeef;
    background-image: -webkit-linear-gradient(top, #00aeef, #00587a);
    background-image: -moz-linear-gradient(top, #00aeef, #00587a);
    background-image: -ms-linear-gradient(top, #00aeef, #00587a);
    background-image: -o-linear-gradient(top, #00aeef, #00587a);
    background-image: linear-gradient(top, #00aeef, #00587a);
    text-shadow: 1px 1px 1px #23aaff;
    border-top: 1px solid #23ccff;
}
a.blue span.bar {
    -webkit-box-shadow: 1px 1px 1px #23aaff;
    -moz-box-shadow: 1px 1px 1px #23aaff;
    box-shadow: 1px 1px 1px #23aaff;
}
a.blue div.arrow span.top {
    -webkit-box-shadow: 1px 1px 1px #23aaff;
    -moz-box-shadow: 1px 1px 1px #23aaff;
    box-shadow: 1px 1px 1px #23aaff;
}
a.blue div.arrow span.bottomShadow { border-top: 8px solid #23aaff }
/* GREEN
   ================================================== */
a.green {
    background-color: #68c800;
    background-image: -webkit-linear-gradient(top, #68c800, #367100);
    background-image: -moz-linear-gradient(top, #68c800, #367100);
    background-image: -ms-linear-gradient(top, #68c800, #367100);
    background-image: -o-linear-gradient(top, #68c800, #367100);
    background-image: linear-gradient(top, #68c800, #367100);
    text-shadow: 1px 1px 1px #67c800;
    border-top: 1px solid #67e800;
}
a.green span.bar {
    -webkit-box-shadow: 1px 1px 1px #67c800;
    -moz-box-shadow: 1px 1px 1px #67c800;
    box-shadow: 1px 1px 1px #67c800;
}
a.green div.arrow span.top {
    -webkit-box-shadow: 1px 1px 1px #67c800;
    -moz-box-shadow: 1px 1px 1px #67c800;
    box-shadow: 1px 1px 1px #67c800;
}
a.green div.arrow span.bottomShadow { border-top: 8px solid #67c800 }
/* RED
   ================================================== */
a.red {
    background-color: #ee5f5b;
    background-image: -webkit-linear-gradient(top, #ee5f5b, #973431);
    background-image: -moz-linear-gradient(top, #ee5f5b, #973431);
    background-image: -ms-linear-gradient(top, #ee5f5b, #973431);
    background-image: -o-linear-gradient(top, #ee5f5b, #973431);
    background-image: linear-gradient(top, #ee5f5b, #973431);
    text-shadow: 1px 1px 1px #ed5d69;
    border-top: 1px solid #ed8d69;
}
a.red span.bar {
    -webkit-box-shadow: 1px 1px 1px #ed5d69;
    -moz-box-shadow: 1px 1px 1px #ed5d69;
    box-shadow: 1px 1px 1px #ed5d69;
}
a.red div.arrow span.top {
    -webkit-box-shadow: 1px 1px 1px #ed5d69;
    -moz-box-shadow: 1px 1px 1px #ed5d69;
    box-shadow: 1px 1px 1px #ed5d69;
}
a.red div.arrow span.bottomShadow { border-top: 8px solid #ed5d69 }
/* ORANGE
   ================================================== */
a.orange {
    background-color: #ff8636;
    background-image: -webkit-linear-gradient(top, #ff8636, #9a3e00);
    background-image: -moz-linear-gradient(top, #ff8636, #9a3e00);
    background-image: -ms-linear-gradient(top, #ff8636, #9a3e00);
    background-image: -o-linear-gradient(top, #ff8636, #9a3e00);
    background-image: linear-gradient(top, #ff8636, #9a3e00);
    text-shadow: 1px 1px 1px #ff7f42;
    border-top: 1px solid #ffa542;
}
a.orange span.bar {
    -webkit-box-shadow: 1px 1px 1px #ff7f42;
    -moz-box-shadow: 1px 1px 1px #ff7f42;
    box-shadow: 1px 1px 1px #ff7f42;
}
a.orange div.arrow span.top {
    -webkit-box-shadow: 1px 1px 1px #ff7f42;
    -moz-box-shadow: 1px 1px 1px #ff7f42;
    box-shadow: 1px 1px 1px #ff7f42;
}
a.orange div.arrow span.bottomShadow { border-top: 8px solid #ff7f42 }
/* YELLOW
   ================================================== */
a.yellow {
    background-color: #fcd116;
    background-image: -webkit-linear-gradient(top, #fcd116, #705b00);
    background-image: -moz-linear-gradient(top, #fcd116, #705b00);
    background-image: -ms-linear-gradient(top, #fcd116, #705b00);
    background-image: -o-linear-gradient(top, #fcd116, #705b00);
    background-image: linear-gradient(top, #fcd116, #705b00);
    text-shadow: 1px 1px 1px #ffc33d;
    border-top: 1px solid #ffff3d;
}
a.yellow span.bar {
    -webkit-box-shadow: 1px 1px 1px #ffc33d;
    -moz-box-shadow: 1px 1px 1px #ffc33d;
    box-shadow: 1px 1px 1px #ffc33d;
}
a.yellow div.arrow span.top {
    -webkit-box-shadow: 1px 1px 1px #ffc33d;
    -moz-box-shadow: 1px 1px 1px #ffc33d;
    box-shadow: 1px 1px 1px #ffc33d;
}
a.yellow div.arrow span.bottomShadow { border-top: 8px solid #ffc33d }
/* FOR DEMO PURPOSE ONLY
   ================================================== */
a.grey {
    position: absolute;
    top: 80px;
    left: 80px;
}
a.blue {
    position: absolute;
    top: 80px;
    left: 260px;
}
a.green {
    position: absolute;
    top: 140px;
    left: 80px;
}
a.red {
    position: absolute;
    top: 140px;
    left: 260px;
}
a.orange {
    position: absolute;
    top: 200px;
    left: 80px;
}
a.yellow {
    position: absolute;
    top: 200px;
    left: 260px;
}
 </style>

                
<div class="container"style="background:#555;height:280px;width:500px;border-radius:10px;text-align:center">
<a class="button grey">
 <div class="arrow">
<span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
<span class="bar"></span>
  Download
</a>
<a class="button blue">
  <div class="arrow">
<span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
<span class="bar"></span>
  Download
</a>
<a class="button green">
  <div class="arrow">
<span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
<span class="bar"></span>
  Download
</a>
<a class="button red">
  <div class="arrow">
<span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
<span class="bar"></span>
  Download
</a>
<a class="button orange">
  <div class="arrow">
<span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
<span class="bar"></span>
  Download
</a>
<!--html cho yellow button-->
<a class="button yellow">
  <div class="arrow">
<span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
<span class="bar"></span>
  Download
</a>
</div>
  

                

Code riêng cho grey button:

Html

<style>
  a.button {
    position: relative;
    height: 15px;
    padding: 12px 20px 15px 68px;
    cursor: pointer;
    text-align: Right;
    font-weight: bold;
    font-size: 18px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    -moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3);
    display: inline-block !important;
    font: 700 15px 'Arial', Helvetica, Clean, sans-serif;
    margin: 0px 0px 20px 10px;
    position: relative;
    text-decoration: none;
    transition: background-position .2s ease, margin .1s ease;
    -webkit-transition: background-position .2s ease, margin .1s ease;
    -moz-transition: background-position .2s ease, margin .1s ease;
    background-repeat: repeat-x;
}
a.button:hover { background-position: 0 10px }
a.button:active {
    -webkit-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    -moz-box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    box-shadow: -1px -1px 2px 0 rgba(0,0,0,.3);
    margin: 2px 0 20px 10px;
}
a.button span.bar {
    width: 1px;
    height: 30px;
    position: absolute;
    background: black;
    top: 5px;
    left: 50px;
}
a.button div.arrow {
    position: absolute;
    left: 20px;
    top: 14px;
}
a.button div.arrow span.top {
    position: absolute;
    width: 6px;
    height: 9px;
    background: #000;
    top: 0;
    left: 3px;
}
a.button div.arrow span.bottom,
div.arrow span.bottomShadow {
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid black;
    top: 9px;
    left: -2px;
    z-index: 2;
}
a.button div.arrow span.bottomShadow {
    z-index: 1;
    left: -1px;
}
/* GRAY
   ================================================== */
a.grey {
    background-color: #888;
    background-image: -webkit-linear-gradient(top, #888, #333);
    background-image: -moz-linear-gradient(top, #888, #333);
    background-image: -ms-linear-gradient(top, #888, #333);
    background-image: -o-linear-gradient(top, #888, #333);
    background-image: linear-gradient(top, #888, #333);
    text-shadow: 1px 1px 1px rgba(255,255,255,.2);
    border-top: 1px solid #aaa;
}
a.grey span.bar {
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}
a.grey div.arrow span.top {
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,.2);
    box-shadow: 1px 1px 1px rgba(255,255,255,.2);
}
a.grey div.arrow span.bottomShadow { border-top: 8px solid rgba(255, 255, 255, 0.2) }
</style>
<br />
<div class="container" >
<a class="button grey" href="Link Download Here">
 <div class="arrow">
<span class="top"></span>
    <span class="bottom"></span>
    <span class="bottomShadow"></span>
  </div>
  <span class="bar"></span>
  Download
</a>

Bạn có thể test thử trên Test Html Editor
Link to this page:

Cắt ảnh bằng Css

2014-09-07T21:13:00.000-07:00

Ảnh được dùng làm demo:
Photographer: # Jarosław Kaczmarek

Ảnh đẹp và lạ dùng Css để cắt ảnh
Try it
Code:

Bạn có thể test thử trênTest Html Editor
Link to this page:

Check color: darker and lighter

2014-08-19T23:45:00.000-07:00

Check color: Darker and Lighter

Đây là công cụ tuy đơn giản nhưng nó giúp ích rất nhiều trong việc thiết kế.
Nếu bạn sử dụng một mã màu, nhưng bạn lại muốn Tone màu thay đổi chút ít sáng hơn hoặc đậm hơn.
_Try it:
Nhập mã màu bạn muốn check: kéo thanh trượt ngang sẽ hiển thị giá trị màu Darker hoặc Lighter, và thể hiện tăng, giảm % so với màu gốc bạn nhập vào.

↑ 0% = #336699

↓ 0% = #336699

Input: # More

Bạn có thể sử dụng mã nhúng công cụ này vào web/blog của bạn:

Html

<iframe src="https://285e8d9e625a44362114b636df4c8be2d7d386ac.googledrive.com/host/0B47lv08-i8_5bnlUOWVyUjVTdlU/" width="100%" height="300">
</iframe>

Source: cssdeck[dot]com

Bạn có thể test thử trênTest Html Editor
Link to this page:

Nén và làm đẹp Css code

2014-08-17T22:12:00.000-07:00

Nén CSS code & Làm đẹp Css Code

Nén và làm đẹp 'CSS Code':

Hiển thị HighLight Code?

.yourtab {
  width:560px;
  background:#ffffff url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnP5UFr5X8rvd_fyu1_56Ux2zv2fb8sieMrUvPPGlGoDakW3FGqF6BVFrcRkrvxu2Mpja_ny8gwafbmv0NZm5mfU6XD7c0AoB9DX-niVjos2_LvNM-49YGAPf0PkHoxfnnp4atxrnQAjs/s1600/-04.jpg) repeat;
  border-collapse:collapse;
  color:white;
}

.yourtab td,
.yourtab th {
  border:2px solid white;
  padding:5px;
}

Bạn có thể test thử trênTest Html Editor
Link to this page:

Table: Html Code with background image

2014-08-12T18:05:00.000-07:00

Source Code	Result
<style type="text/css">.yourtab { width:560px;background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnP5UFr5X8rvd_fyu1_56Ux2zv2fb8sieMrUvPPGlGoDakW3FGqF6BVFrcRkrvxu2Mpja_ny8gwafbmv0NZm5mfU6XD7c0AoB9DX-niVjos2_LvNM-49YGAPf0PkHoxfnnp4atxrnQAjs/s1600/-04.jpg) repeat;border-collapse:collapse;color: white; } .yourtab td, .yourtab th { border:2px solid white;padding:5px; } </style><!-- Đặt Css phía trên vào trong cặp thẻ: <head></head>--><table class="yourtab"><tr><th>Table header</th><th>Table header</th></tr><tr><td>Table cell 1</td><td>Table cell 2</td></tr><tr><td>Table cell 3</td><td>Table cell 4</td></tr><tr><td>Table cell 5</td><td>Table cell 6</td></tr></table>

Source Code

Result

Thay đổi các giá trị, bấm Refresh để xem kết quả.
Code của demo trên:

Html

<style type="text/css">
.yourtab {
    width: 560px;
    background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnP5UFr5X8rvd_fyu1_56Ux2zv2fb8sieMrUvPPGlGoDakW3FGqF6BVFrcRkrvxu2Mpja_ny8gwafbmv0NZm5mfU6XD7c0AoB9DX-niVjos2_LvNM-49YGAPf0PkHoxfnnp4atxrnQAjs/s1600/-04.jpg) repeat;
    border-collapse: collapse;
}
.yourtab td,
.yourtab th {
    border: 2px solid white;
    padding: 5px;
}
</style>
<!-- Đặt Css phía trên vào trong cặp thẻ: <head></head>-->
<table class="yourtab">
    <tr>
        <th>Table header</th>
        <th>Table header</th>
        <!--Thêm cột cho Table-->
    </tr>
    <tr>
        <td>Table cell 1</td>
        <td>Table cell 2</td>
        <!--Thêm dòng cho cột mới-->
    </tr>
    <tr>
        <td>Table cell 3</td>
        <td>Table cell 4</td>
    </tr>
    <tr>
        <td>Table cell 5</td>
        <td>Table cell 6</td>
        <!--Thêm dòng cho Table-->
    </tr>
</table>

Bạn có thể test thử trênTest Html Editor và Choose color..
Link to this page:

Chỉnh sửa file Css, Javascript trực tiếp trong "Googledrive.com/host"

2014-08-01T05:39:00.000-07:00

Hot News cho các Blogger:

Hôm nay, Google có một bước lớn trong việc hỗ trợ các blogger.
Trước đây khi bạn dùng googledrive làm nơi chứa Host cho các file Css và Javascript ( Js ),thì việc muốn thay đổi nội dung code khá là bất tiện vì bạn phải up lại file và phải chèn lại các link mà các bạn đã đưa vào web/blog.
Nay mọi việc đã dễ dàng hơn nhiều Google cho phép bạn chỉnh sửa trực tiếp trong Trình Xem Google Drive. Và cũng có những cảnh báo nếu bạn viết sai code hoặc chưa đúng về vị trí của code ( eg...Drive Notepad )
Hoặc bạn có thể biên tập file mới ( eg... SmartSheet ) trên những ứng dụng ngay trong Googledrive:

Save. Chèn host vào web/blog.
Nhiều ứng dụng khác đang chờ các bạn khám phá.
Cho phép bạn thêm một số ứng dụng được đề xuất bên thứ ba, có cả những ứng dụng cho phép bạn xem trực tiếp trang web ( ứng dụng Html Viewer ) mà bạn sử dụng httttp://Googledrive.com/host/

Đầu tiên mở File trong Google Drive » Trình Xem Google Drive:

Hoặc kết nối thêm những ứng dụng khác.
File của bạn được mở ra trong trình chỉnh sửa:

Lưu file trở lại refresh trang web/blog để xem kết quả
Hãy tận hưởng những cải tiến đáng kể của Google

Xem thêm :

Host Css&Js file trong googledrive

Link to this page:

Tạo Host Css, Javascript trong Google Drive

2014-07-30T22:52:00.000-07:00

Tạo host chứa file Css, Javascript trong GoogleDrive

Blogger Google Drive:
Up Host CSS, HTML hoặc các tập tin JavaScript trong Blogger.
Một số trang web có sẵn mà bạn có thể sử dụng để tải lên các tập tin CSS, HTML hoặc JavaScript. Blogger và webmaster thích thêm toàn bộ code StyleSheet của họ trong file duy nhất để quản lý. Tuy nhiên, blogger không có loại tính năng để lưu trữ các tập tin CSS và JavaScript.
Tin tốt, Google Drive có khả năng lưu trữ CSS, JavaScript và các tập tin HTML hoàn toàn miễn phí..
Trong hướng dẫn này, chúng tôi sẽ cho bạn thấy làm thế nào để lưu tập tin CSS với Host Google Drive trong Blogger?
Ưu điểm của Google Drive là miễn phí, đảm bảo và an toàn.
Quan trọng hơn bạn cũng có thể Chỉnh Sửa File Trực Tiếp Trong Google.drive
Google Drive Cung cấp 15 GB lưu trữ. Với giới hạn băng thông.

Bước 1:

Sao chép CSS Từ Blogger
Tới Blogger Bảng điều khiển »Template» Chỉnh sửa HTML và tìm kiếm thẻ:
<b:skin><! [CDATA [
Sao chép toàn bộ mã Css này đến thẻ đóng
]]></b:skin>
Xem ảnh :

Bước 2:

Dùng notepad tạo một file style.css. Hủy bỏ toàn bộ mã CSS từ mẫu blogger của bạn sau khi copy và paste trong notepad .
Bây giờ lưu và đặt tên cho tập tin có đuôi:' style.css ' (phần mở rộng của tập tin phải ở trong css).
Với file Javascript cũng dùng notepad và lưu tập tin với đuôi : 'yourjavascript.js'

Bước 3:

Up lên Host tập tin CSS của bạn trên Google Drive:
Vào Google Drive và đăng nhập vào tài khoản Gmail của bạn.
Tạo một thư mục mới. Click vào nút "Tạo" và từ danh sách thả xuống chọn "Folder".

Đặt tên cho các thư mục ví dụ như HostingFiles tùy thích. Cuối cùng, nhấn "Create" .
Nhấp chuột vào thư mục mới. Bây giờ, chọn biểu tượng
ở phía bên phải của nút .
Chọn "File".
Trong bước này, chọn tập tin style.css mà vừa tạo. Nhấn nút mở.
Nhấn nút "Chia sẻ".

Tạo tập tin công cộng này.Chọn "công khai trên web".

Bây giờ, nhấp chuột vào nút Save.

Bước 4:

Bây giờ, chúng ta sẽ thay đổi liên kết.
Trong liên kết để chia sẻ phần nào nó sẽ trông như thế này

 https://drive.google.com/file/d/code của tập tin/edit?usp=sharing

Thay thế liên kết thành định dạng :

https://googledrive.com/host/code của tập tin/

Ví dụ, nếu liên kết của tập tin là :

 https://drive.google.com/file/d/0B47lv08-i8_5NEhnaVk3TE1NRmc/edit?usp=sharing

Chú ý đoạn mã màu đỏ, vì vậy ta sẽ thay đổi nó thành:

 https://googledrive.com/host/0B47lv08-i8_5NEhnaVk3TE1NRmc/

Hoặc các bạn có thể dùng công cụ này: (đổi link Google Drive thành Link Host ) và tạo mã nhúng cho file: Css và Javascript, Iframe
Change URL Google Drive Tool và Công cụ tạo mã nhúng Css, Js và IFrame chèn vào web/blog

Bước 5:

Thêm Google Drive Hosted file CSS trong Blogger
Vào Blogger »Template»Chỉnh sửa HTML.
Bây giờ tìm đến thẻ<head> paste đoạn code dưới đây cho link Css :

<link href='https://googledrive.com/host/your-uploaded-file-code/' rel='stylesheet'/>

Và đoạn code này cho link Javascript:

<script type="text/javascript" src='https://googledrive.com/host/your-uploaded-file-code/'></script>

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

Link download trực tiếp khi chia sẻ file từ Google Drive

Chỉnh sửa file Css, Javascript trong Goo.drive

Bạn có thể test thử trênTest Html Editor
Link to this page:

Button Ẩn, Hiện nội dung

2014-07-25T21:35:00.000-07:00

Để tạo Button có nội dung ẩn, hiện bằng nút (button) bấm, xem demo:

Dùng đoạn code bên dưới:

Html

<style>
    .button:hover {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtTB81jErgdWEKHKx57VRmQ_tXjPbG0kR7Vz3lMr-M5SBJO8jQYoI0d56oKOgg_a2_mKE4ODRu-fxFHTnmZn1AAOy1N9VmWmN_cdXs5MUwjgC-wW3v0CYwZuLe1Pc_uNd1ideMnID_BQE/s1600/but-img_in.png) repeat-x scroll 0 0 rgba(0, 0, 0, 0);
        color: #00248E;
        border: 1px solid #777
    }
    
    .button {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1VpYKKeQ9shZB72UB6IagBEyKADV-MEpVfEtseDkz1o5w_FU-oHVKnC9LteRib3aB9qlQJqc1ulfuztbLzFte7gXBOSUfoSgCf1hEImLhEYMMLTyUHxAYwH31qCPY4ZGmTDEaefYBuG8/s1600/but-im_gout.png) repeat-x scroll 0 0 rgba(0, 0, 0, 0);
        border: 1px solid #555;
        color: #fff;
        cursor: pointer;
        font-family: arial, serif;
        font-size: 12px;
        font-weight: bold;
        height: 20px;
        margin: 0 0 10px;
        padding: 3px 10px 0;
    }

</style>
<div class="bigfont" style="margin-bottom: 0px;background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66);border-bottom:none; height: auto; margin: 0px 0px; padding: 10px; text-align: left; width: auto;">
    <input class="button" 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 = 'Hiện'; }"
    style="margin: 0px; padding: 0px; width: 60px;"
    type="button" value="Xem" />
</div>
<div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 0px 0px;border-top:none; padding: 10px ; text-align: left; width: auto;">
    <div style="display: none;">
        noi dung
    </div>
</div>

Demo và nhận code:

Code	Result
<style> .button:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtTB81jErgdWEKHKx57VRmQ_tXjPbG0kR7Vz3lMr-M5SBJO8jQYoI0d56oKOgg_a2_mKE4ODRu-fxFHTnmZn1AAOy1N9VmWmN_cdXs5MUwjgC-wW3v0CYwZuLe1Pc_uNd1ideMnID_BQE/s1600/but-img_in.png) repeat-x scroll 0 0 rgba(0, 0, 0, 0);color: #00248E;border: 1px solid #777 } .button { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1VpYKKeQ9shZB72UB6IagBEyKADV-MEpVfEtseDkz1o5w_FU-oHVKnC9LteRib3aB9qlQJqc1ulfuztbLzFte7gXBOSUfoSgCf1hEImLhEYMMLTyUHxAYwH31qCPY4ZGmTDEaefYBuG8/s1600/but-im_gout.png) repeat-x scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid #555; color: #fff; cursor: pointer; font-family: arial,serif; font-size: 12px; font-weight: bold; height: 20px; margin: 0 0 10px; padding: 3px 10px 0; } </style> <div class="bigfont" style="margin-bottom: 0px;background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66);border-bottom:none; height: auto; margin: 0px 0px; padding: 10px; text-align: left; width: auto;"> <input class="button" 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 = 'Hiện'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Xem" /></div> <div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 0px 0px;border-top:none; padding: 10px ; text-align: left; width: auto;"> <div style="display: none;"> noi dung </div> </div>	noi dung

Code

Result

Nếu các bạn muốn sử dụng Js để mở rộng nội dung text. Xem Demo:

Css

body { margin: 20px; } #displayText { text-decoration: none; margin: 20px; } /* only for demo**********/
Javascript

function expand() { var ele = document.getElementById("expandText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none";//nếu muốn hiện sẵn thì trong id= "expandText" style="display:block" text.innerHTML = "show";//"show"thay đổi text theo ý bạn } else { ele.style.display = "block"; text.innerHTML = "hide";//"hide"thay đổi text theo ý bạn } }
Html

<a id="displayText" href="javascript:expand();">Show</a> <div id="expandText" style="display:none">Hi @every body !<br> My site: testtemplatekhoi.blogspot.com</div>
Result

Click Show
Hi @every body !
My site: testtemplatekhoi.blogspot.com

Và dùng link ảnh mở rộng nội dung:(Source: randomsnippets.com)

Css(none)

Bạn có thể thêm css tùy ý
Javascript

function toggle5(showHideDiv, switchImgTag) { var ele = document.getElementById(showHideDiv); var imageEle = document.getElementById(switchImgTag); if(ele.style.display == "block") { ele.style.display = "none"; imageEle.innerHTML = '<img src="http://icons.iconarchive.com/icons/icons8/ios7/48/Arrows-Down-4-icon.png">'; } else { ele.style.display = "block"; imageEle.innerHTML = '<img src="http://icons.iconarchive.com/icons/icons8/ios7/48/Arrows-Up-4-icon.png">'; } }
Html

<div id="headerDivImg"> <div id="titleTextImg">Let's use images link!</div> </div>  <div id="contentDivImg" style="display: none;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="http://icons.iconarchive.com/icons/icons8/ios7/48/Arrows-Down-4-icon.png"></a>
Result

Let's use images link!click arrow-up

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Bạn có thể test thử trên Test Html Editor
Link to this page:

Khôifoto

Công cụ tạo mã QR Code

Công cụ tạo mã nhúng Youtube tùy chỉnh cho web/blog

Công cụ tạo mã nhúng Youtube tùy chỉnh cho web/blog

Trang trí cho khung kết quả tìm kiếm tùy chỉnh Google (Google Search Custom)

Công cụ tạo chữ chạy cho blog

Html Code Marquee Generator

Uppercase-Lowercase Converter

EnCode_DeCode URL

EnCode_DeCode URL

Công cụ tạo khung chứa code

1_Công cụ tạo Css cho khung chứa code thêm Gradient Background

Generated code:

2_Thêm tag cho khung chứa code:

Công cụ tạo cửa sổ popup( Popup Window creator )

Công cụ tạo cửa sổ popup( Popup Window creator ) online

Popup Window creator

Generated code:

Công cụ tạo iframe( Iframe generator )

Công cụ tạo Iframe

Generated code:

Công cụ tạo chữ ( text ) trên ảnh ( background image )

Công cụ tạo border và thêm text vào ảnh nền (background image)

Generated code:

Demo:

Cách lấy link download trực tiếp từ Google Drive

_1 Cách lấy link download trực tiếp khi chia sẻ file từ Google Drive

2_Tạo link download trực tiếp

Xem thêm:

Xem thêm:

Tooltip Thủ thuật khi rê chuột vào ảnh ( thumbnail ) hiện ảnh lớn hơn

Công cụ tạo button tùy chỉnh

TTP ColorScheme

Instant Character Counter

Top Menu có nút Ẩn, Hiện

Play Ground

Download Button Set

Download Button Set

Cắt ảnh bằng Css

Check color: darker and lighter

Nén và làm đẹp Css code

Nén và làm đẹp 'CSS Code':

Result:

Table: Html Code with background image

Chỉnh sửa file Css, Javascript trực tiếp trong "Googledrive.com/host"

Hot News cho các Blogger:

Xem thêm :

Tạo Host Css, Javascript trong Google Drive

Tạo host chứa file Css, Javascript trong GoogleDrive

Bước 1:

Bước 2:

Bước 3:

Bước 4:

Bước 5:

Button Ẩn, Hiện nội dung