Tự tạo thanh cuộn Web cho riêng mình nhanh chóng bằng CSS3

Thủ thuật Tự tạo thanh cuộn Web cho riêng mình nhanh chóng bằng CSS3, Đoạn CSS3 Webkit này sẽ thay thế các thanh cuộn HTML cổ điển ban đầu, bạn có thể tùy chỉnh lại nó theo ý thích của bạn. Blogger của bạn sẽ trông xinh đẹp, chuyên nghiệp hơn với sự giúp đỡ của CSS3. Tạo cho độc giả có cái nhìn mới hơn về trang web của bạn và cũng nhằm thu hút khác truy cập.

Chèn đoạn code bên dưới trên ]]></b:skin>

/* Webkit override Scrollbar with CSS3 by ThaiAiTi */
::-webkit-scrollbar {
width: 8px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-webkit-scrollbar-thumb {
background: rgba(186,35,35,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(186,35,35,0.4);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }

- Ghi chú: Do đây là mã CSS3 do vậy chỉ hoạt động trên một số trình duyệt hỗ trợ CSS3 như: Google Chroome, Moliza Firefox mới nhất, IE9+ trở lên.

Read More

Tạo Button lên đầu trang Web tự động hiển thị

Thủ thuật Tạo Button lên đầu trang Web tự động hiển thị khi bạn kéo tranh cuộn của trình duyệt Web xuống gần dưới trang Web

- Chèn đoạn Code sau trên </head>

<script type="text/javascript">document.write('\u003c\u0073\u0063\u0072\u0069\u0070\u0074\u0020\u0074\u0079\u0070\u0065\u003d\u0027\u0074\u0065\u0078\u0074\u002f\u006a\u0061\u0076\u0061\u0073\u0063\u0072\u0069\u0070\u0074\u0027\u003e\u000a\u002f\u002f\u003c\u0021\u005b\u0043\u0044\u0041\u0054\u0041\u005b\u000a\u0024\u0028\u0066\u0075\u006e\u0063\u0074\u0069\u006f\u006e\u0028\u0029\u007b\u0024\u002e\u0066\u006e\u002e\u0073\u0063\u0072\u006f\u006c\u006c\u0054\u006f\u0054\u006f\u0070\u003d\u0066\u0075\u006e\u0063\u0074\u0069\u006f\u006e\u0028\u0029\u007b\u0024\u0028\u0074\u0068\u0069\u0073\u0029\u002e\u0068\u0069\u0064\u0065\u0028\u0029\u002e\u0072\u0065\u006d\u006f\u0076\u0065\u0041\u0074\u0074\u0072\u0028\u0022\u0068\u0072\u0065\u0066\u0022\u0029\u003b\u0069\u0066\u0028\u0024\u0028\u0077\u0069\u006e\u0064\u006f\u0077\u0029\u002e\u0073\u0063\u0072\u006f\u006c\u006c\u0054\u006f\u0070\u0028\u0029\u0021\u003d\u0022\u0030\u0022\u0029\u007b\u0024\u0028\u0074\u0068\u0069\u0073\u0029\u002e\u0066\u0061\u0064\u0065\u0049\u006e\u0028\u0022\u0073\u006c\u006f\u0077\u0022\u0029\u007d\u0076\u0061\u0072\u0020\u0073\u0063\u0072\u006f\u006c\u006c\u0044\u0069\u0076\u003d\u0024\u0028\u0074\u0068\u0069\u0073\u0029\u003b\u0024\u0028\u0077\u0069\u006e\u0064\u006f\u0077\u0029\u002e\u0073\u0063\u0072\u006f\u006c\u006c\u0028\u0066\u0075\u006e\u0063\u0074\u0069\u006f\u006e\u0028\u0029\u007b\u0069\u0066\u0028\u0024\u0028\u0077\u0069\u006e\u0064\u006f\u0077\u0029\u002e\u0073\u0063\u0072\u006f\u006c\u006c\u0054\u006f\u0070\u0028\u0029\u003d\u003d\u0022\u0030\u0022\u0029\u007b\u0024\u0028\u0073\u0063\u0072\u006f\u006c\u006c\u0044\u0069\u0076\u0029\u002e\u0066\u0061\u0064\u0065\u004f\u0075\u0074\u0028\u0022\u0073\u006c\u006f\u0077\u0022\u0029\u007d\u0065\u006c\u0073\u0065\u007b\u0024\u0028\u0073\u0063\u0072\u006f\u006c\u006c\u0044\u0069\u0076\u0029\u002e\u0066\u0061\u0064\u0065\u0049\u006e\u0028\u0022\u0073\u006c\u006f\u0077\u0022\u0029\u007d\u007d\u0029\u003b\u0024\u0028\u0074\u0068\u0069\u0073\u0029\u002e\u0063\u006c\u0069\u0063\u006b\u0028\u0066\u0075\u006e\u0063\u0074\u0069\u006f\u006e\u0028\u0029\u007b\u0024\u0028\u0022\u0068\u0074\u006d\u006c\u002c\u0020\u0062\u006f\u0064\u0079\u0022\u0029\u002e\u0061\u006e\u0069\u006d\u0061\u0074\u0065\u0028\u007b\u0073\u0063\u0072\u006f\u006c\u006c\u0054\u006f\u0070\u003a\u0030\u007d\u002c\u0022\u0073\u006c\u006f\u0077\u0022\u0029\u007d\u0029\u007d\u007d\u0029\u003b\u000a\u0024\u0028\u0066\u0075\u006e\u0063\u0074\u0069\u006f\u006e\u0028\u0029\u0020\u007b\u000a\u0024\u0028\u0022\u0023\u0074\u006f\u0070\u0070\u0061\u0067\u0065\u0074\u0068\u0061\u0069\u0061\u0069\u0074\u0069\u0022\u0029\u002e\u0073\u0063\u0072\u006f\u006c\u006c\u0054\u006f\u0054\u006f\u0070\u0028\u0029\u003b\u000a\u007d\u0029\u003b\u000a\u002f\u002f\u005d\u005d\u003e\u000a\u003c\u002f\u0073\u0063\u0072\u0069\u0070\u0074\u003e')</script>

- Chèn đoạn Code sau trên </body>

<a href='#' id='toppagethaiaiti'/>
<style>
#toppagethaiaiti {
width: 40px;
height: 40px;
border: none;
text-align: center;
overflow: hidden;
position: fixed;
bottom: 40px;
right: 10px;
cursor: pointer;
color: #666;
text-decoration: none;
border-radius: 50px;
background:#820250 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnnsbR5X7JEIKh7D7wxNYcNTpY9z71yLwpFiVu7ySxghHQmcPcACgguGZ-_QqvDbCapvqpBiZvXUZZvTHuwJPgs_zsG_eM9vsNjwde2tM6mol8BiROQ-Cd6aYk6gLYP9LziRF2z6X1UTU/s1600/up.png) no-repeat;
background-position: 12px 11px;
}
</style>

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

Read More

Hiển thị thông điệp khi dùng Button Hỗ trợ trực tuyến bằng Chát Yahoo

Chia sẻ thủ thuật tự động hiển thị thông điệp khi dùng Button Hỗ trợ trực tuyến bằng Chát Yahoo

Bạn tùy chỉnh đoạn Code sau:

<a href='ymsgr:sendIM?thaiaiti&amp;m=Xin chào, TháiAiTi ! Mình muốn hỏi về việc...'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7jDfAT0rqJ6fAjtff4Mn1kYW3cTCg_-spemeUm8iijteIHD0ZXmp60VBKjmUj77iB1SKw475vuBjuJ3-KdYI3LMYqEv-pSXgy2zwP0V4TnAA65eExcZ6kKpuyLEieD3el0-jZzCgLFpl/h120/yahoo.PNG' style='float: right;margin-top: -5px;margin-left: -10px;width: 30px;'/></a>

- Màu xanh ở trên chính là nick Yahoo của bạn
- Màu đỏ bạn thay bằng thông điệp bạn muốn hiển thị trong khung chát 

Read More

Popular Posts Blogspot giống ThaiAiTi.com đẹp và phong cách

Thủ thuật Code tạo Popular Posts cho Blogspot. Nhằm thống kê những bài viết trong toàn bộ Web đưọc xem nhiều nhất.

- Popular posts giống ThaiAiTi.com được hiển thị 10 bài, Và có phân rõ 3 bài Top được xem nhiều nhất

Demo: Tại đây

- Tìm trong Template từ khóa  <b:widget id='PopularPosts1'

- Thay thế đoạn Code có sẵn bằng đoạn code sau:

            <b:widget id='PopularPosts1' locked='false' title='Hot in Week' type='PopularPosts'>

              <b:includable id='main'>

<div class='tieudeboxbenphai'><a href='http://www.thaiaiti.com/2013/11/thiet-ke-banner-flash-ong-slideshow-anh.html'>Xem nhiều</a></div>

   <div class='widget-content popular-posts'>

    <ul>

     <b:loop values='data:posts' var='post'>

      <li>

       <b:if cond='data:showThumbnails == &quot;false&quot;'>

        <b:if cond='data:showSnippets == &quot;false&quot;'>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

        <b:else/>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

        </b:if>

       <b:else/>

        <b:if cond='data:showSnippets == &quot;false&quot;'>

         <b:if cond='data:post.thumbnail'>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'> 

  <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:title='data:post.title'/></a>

         <b:else/>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>

  

  <img alt='no image' class='item-thumbnail' expr:alt='data:post.title' expr:title='data:post.title' src='http://bit.ly/hGWr7r'/></a>

         </b:if>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

         <div class='clear'/>

        <b:else/>

         <b:if cond='data:post.thumbnail'>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:title='data:post.title'/></a>

         <b:else/>

           <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' class='item-thumbnail' expr:alt='data:post.title' expr:title='data:post.title' src='http://bit.ly/hGWr7r'/></a>

         </b:if>

         <a expr:alt='data:post.title' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>

         <div class='clear'/>

        </b:if>

       </b:if>

      </li>

     </b:loop>

    </ul>

   </div>

<b:include name='quickedit'/>

  </b:includable>

            </b:widget>

- Chèn đoạn CSS sau trên  ]]></b:skin>

#PopularPosts1 {float: left;margin-bottom: 15px;}
#PopularPosts1 .tieudeboxbenphai a {background:#2882bc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYad_7QR8EDB9Sj7JLttIiVP__lqH7U29668X45wTLGedkqiqLmMv7CRwpxMb-wbey2p36eGr_L3ifZHZAtRabr1K9qiomAolzpMUpRtCKCx-QsdbXq08RMpYEc3Ilp5ZpcZyWqtlMi_f/s23/likeok.PNG) left no-repeat;background-position: 80px 6px;}
#PopularPosts1 ul{list-style-type:none;float: left;width: 100%;padding: 0;margin: 0;}
#PopularPosts1 ul li{position:relative;padding:10px;float: left;height: 25px;overflow: hidden;width: 290px;}
#PopularPosts1 ul li:first-child{background:#fff;padding: 10px 30px;height: 65px;}
#PopularPosts1 ul li:first-child a {float: left;margin-left: 0 !important;padding: 0 !important;width: 110px;color: #B1320D;}
#PopularPosts1 ul li:first-child:after{content:"1";color: #fff !important;border: 1px solid #e74c3c;background:#e74c3c}
#PopularPosts1 ul li:first-child + li {background:#efefef}
#PopularPosts1 ul li:first-child + li:after{content:"2";color: #fff !important;border: 1px solid #2882bc;background:#2882bc}
#PopularPosts1 ul li:first-child + li + li {background:#fff}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";color: #fff !important;border: 1px solid #f39c12;background:#f39c12}
#PopularPosts1 ul li:first-child + li + li + li {background:#efefef}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li {background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li {background:#efefef}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li {background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#efefef}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li {background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li {background:#efefef}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10";color: #333 !important;border: 1px solid #ccc;background:#fff}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after{position:absolute;top:10px;left:0px;border-radius: 100px;width:20px;height:20px;padding:5px;
line-height:1em;text-align:center;font:bold 16px arial;color:#333}
#PopularPosts1 ul li:first-child + li img,#PopularPosts1 ul li:first-child + li + li img,#PopularPosts1 ul li:first-child + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li img,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li img,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li img {display: none;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;margin-left: 10px;background:transparent;padding:0;width:65px;height:65px;border: 1px solid #eee;}
#PopularPosts1 ul li a{font:bold 12px arial;color:#555;text-decoration:none;float: left;margin-left:30px;overflow: hidden;}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

- ThaiAiTi.com chúc bạn thành công 

Read More

Tivi Trực tuyến tốc độ cao - Template Blogspot chuẩn seo

- Giá bán: 500.000 VNĐ- Mã nguồn : Blogger/blogspot- Thiết kế bởi: Thái AiTi- Liên hệ mua : Thái AiTi - ĐT: 0934.685.392- Hỗ trợ trực tuyến :

DemoDownload

Mô tả chi tiếtCách cài TemplateKho TemplateThủ thuật Blogger

Template blogspot dành cho trang Tivi online, với đầy đủ tất cả các loại kênh truyền hình
- Được chọn lọc những server load nhanh nhất, giao diện thoáng,
- Giao diện load khá nhanh

Read More

Bài 1: Những thao tác cơ bản của Blogspot cho người mới bắt đầu

Xin chào, tôi là ThaiAiTi và bạn đang xem Video từ Website ThaiAiTi.com, Đây là Video hương dẫn Những thao tác cơ bản của Blogspot trong Seri cho người mới bắt đầu. Để bắt đầu, trước tiên chúng ta cần đăng ký 1 tài khoản Gmail để khởi tạo blogspot (hay là Blogger)

Blogger (blogspot) là gì?

Blogspot đang thống lĩnh thị trường web trên toàn thế giới và Việt Nam nói riêng. Nó đang ngày càng khẳng định sức mạnh bởi sự tiện lợi trong khâu thiết kế và quản lý cũng như tương tác cao giữa người quản lý và visitors.

(Thống kê ngày 26/5/2013).Tại Việt Nam, blogspot.com đứng vị trí 13. Đây có thấy đây là rank rất khủng khẳng định sự phát triển mạnh mẽ của blogspot Việt. Trang web quản trị, viết bài blogger.com phản ánh lượng người sử dụng blogspot thường xuyên lui tới trang này để đăng bài. Rank cũng không hề nhỏ. Hạng 71 tại Việt Nam. Vượt mặt hầu hết tất cả các trang đọc báo, forum, tin tức nổi tiếng. 

- Blogger là một nền tảng miễn phí của Google. Không giới hạn băng thông cũng như dung lượng (Thực tế picasa của Google cho phép Upload tối đa 10G ảnh. 10G ảnh thì có lẽ chẳng bao giờ bạn dùng hết). 

- Đặc biệt với web làm bằng blogger thì bạn yên tâm vì độ bảo mật của nó, Nói nôm na rằng khó có thể hack được nó. Sở dĩ nói là con của Google.

[id]https://www.youtube.com/watch?v=gDjRo6tTDpI[/id]

Read More

Menu Icon CSS3 đẹp giống Footer ThaiAiTi.com

Thủ thuật tạo Menu Icon CSS3 đẹp cho blogspot, tốc độ load khá nhanh giống ở Footer ThaiAiTi

- Bạn chèn đoạn CSS sau trên ]]></b:skin>

.menucss3chantrang-thaiaiti {overflow: hidden;width: 940px;margin: 0 auto;}
div.devices{margin-bottom:0px}div.devices .modcontent ul{list-style:none;display:table;text-align:center;margin:0;padding-top:20px}
div.devices .modcontent ul
li{display:inline-block}div.devices .modcontent ul li:hover a:before{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2NencQBCu3cruje5lsW5qSIv_t-lpc4khN1zn-nOLBb8uNQRs9znrgbPN9f5N-lP_wJHINEHwtvZf2PDtcKgZO0CueSEyxZkykVSKZNhyna68IG975j9r5hMoYl4kUvdQgCbqesWWUXuq/s0/icon_devices_hover.png) no-repeat left 0;padding-bottom:10px}
div.devices .modcontent ul li a{-webkit-transition:all 0.2s ease-out 0s;-moz-transition:all 0.2s ease-out 0s;-o-transition:all 0.2s ease-out 0s;
transition:all 0.2s ease-out 0s;padding:17px 50px 10px 0px;display:inline-block;position:relative;color: #333;font: 16px arial;text-transform: uppercase;}
div.devices .modcontent ul li a:before{content:"";width:50px;height:47px;display:inline-block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9_tEMELi19X_yLt9GsBxr4XL3ki1miQz7kKlJSg0hNiM-LxYTNVNETwzOzm1KPIQYkXD1asgUsjre0OjzoETi6F-JFs8AnQgr15e0dfWIfHcHIEQ3YHpg0hHBFFTFgMaWuyx0g270XOD-/s0/icon_devices.png) no-repeat left 0;position:absolute;bottom:0px;left:0px;-webkit-transition:all 0.2s ease-out 0s;-moz-transition:all 0.2s ease-out 0s;-o-transition:all 0.2s ease-out 0s;transition:all 0.2s ease-out 0s}
div.devices .modcontent ul li
a.iphone{padding-left:60px}
div.devices .modcontent ul li a.iphone:before{background-position:0px 0px}div.devices .modcontent ul li
a.ipad{padding-left:70px}
div.devices .modcontent ul li a.ipad:before{background-position: -70px 0px;width:58px}div.devices .modcontent ul li
a.android{padding-left:60px}
div.devices .modcontent ul li a.android:before{background-position: -142px 0px}div.devices .modcontent ul li
a.tv{padding-left:85px}
div.devices .modcontent ul li a.tv:before{background-position: -207px 0px;width:74px}div.devices .modcontent ul li
a.page{padding-left:90px;padding-right:0px}
div.devices .modcontent ul li a.page:before{background-position: -305px 0px;width:79px}

- Chèn đoạn code sau vào nơi bạn cần hiển thị menu:

<div class='menucss3chantrang-thaiaiti'>
<div class='module devices'>
       <div class='modcontent clearfix'>

<ul>
<li>
<a class='iphone' href='http://www.thaiaiti.com/search/label/Template%20blogger'>Design</a></li>
<li>
<a class='ipad' href='http://www.thaiaiti.com/search/label/Photoshop'>PSD</a></li>
<li>
<a class='android' href='http://www.thaiaiti.com/search/label/iphone'>Mobile</a></li>
<li>
<a class='tv' href='#'>Video</a></li>
<li>
<a class='page' href='http://www.thaiaiti.com/search/label/Avid%20liquid%207'>Media</a></li>
</ul>
   </div>
</div>
</div>

- ThaiAiTi.com chúc bạn thành công !

Read More