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

Posted by Testtem Posted on 13:35 with No comments

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ên Test 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

Posted by Testtem Posted on 10:52 with No comments

Đâ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ên Test Html Editor
Link to this page:

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

Posted by Testtem Posted on 13:05 with 8 comments

_Đâ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();"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBq1ILXHVBhuu6odErz2x6ADpI2BqulJZiKnVRgXn3I8LssKaIDuyy1I95Ql9kwcFmA1Sn4pYeSI4EfkTTqsc7oifWgDY7noVxZuzvIOQvEpDIEm_UNwFRoxlbpfnPylWglNrkiop6aSo/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/AVvXsEjH6YlRpyLo3La7aFq7upnHh-A27VbAw2NVmEgFcokRtiEUvciM714tm14u49TNkXpemb1pjKhGmOKOEhnOe5wCayCJ1VgLf3wEBjyOWtYyB-BNGOYrH3Jz0KGYQxK_a2eohAchQugWd-Q/s1600/down.png" width="20px"> <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/AVvXsEgBq1ILXHVBhuu6odErz2x6ADpI2BqulJZiKnVRgXn3I8LssKaIDuyy1I95Ql9kwcFmA1Sn4pYeSI4EfkTTqsc7oifWgDY7noVxZuzvIOQvEpDIEm_UNwFRoxlbpfnPylWglNrkiop6aSo/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/AVvXsEjH6YlRpyLo3La7aFq7upnHh-A27VbAw2NVmEgFcokRtiEUvciM714tm14u49TNkXpemb1pjKhGmOKOEhnOe5wCayCJ1VgLf3wEBjyOWtYyB-BNGOYrH3Jz0KGYQxK_a2eohAchQugWd-Q/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:

Click chọn tất cả trong TextArea và textfield

Posted by Testtem Posted on 08:43 with No comments

Textarea:

Input TextBox:

_ Code chèn trong Textarea:

 
<script type="text/javascript">
function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}
</script>
Textarea:<br>
<textarea rows="3" id="txtarea" onClick="SelectAll('txtarea');" style="width:400px" >
Click here:để chọn tất cả trong Textarea 
</textarea>

_ Code chèn trong Textfield:

<script type="text/javascript">
function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}
</script>

<input id="txtfld" onclick="SelectAll('txtfld');" style="width: 200px;" type="text"
 value="Click here:để chọn tất cả trong TextField" />

Bạn có thể dùng code để thử trong Test Html Code :

Tạo nút ( Button ) Refresh cho blogspot

Posted by Testtem Posted on 21:11 with No comments

Để tạo nút Button Refresh trang ta dùng đoạn code sau:

Code	Result
<a href="javascript:document.location.reload();" onmouseout="window.status='default'" onmouseover="window.status='Refresh'; return true"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5yHFXP8EzSWgvrbBmSZnST2zcAudmGY8mYb9mROD_6hCE1HdW0aF0o_DAHClBEVneBCB_Rs_KFh-q4Sxb_dNRGJqERzlgJM1ip7vVqU__BN3QszGDfPUa6bSUvA5UA0GBu0crFaQuSKU/s1600/refresh-but.png" height="28" width="80" /></a>

Code

Result

Bấm thử vào nút Refresh để xem hiệu quả
Bạn cũng có thể dùng đoạn code dưới đây để Refresh:

<a href="javascript:document.location.reload();" >refresh</a>

Hãy vào trang HTML Editor để thử kết quả

(✽) _Bạn có thể xem thêm:

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

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:

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

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

Click chọn tất cả trong TextArea và textfield

Tạo nút ( Button ) Refresh cho blogspot

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

Label

Popular Post

Live Traffic Feed

YOUR POSITION

Popular

Label