Thủ thuật Blog | Tin tức | Bất Động Sản

Home » Thủ thuật Blog

Cách làm cho nhiều Widget của blogspot dính khi kéo chuột

18:28 |

Thông thương khi các bạn kéo thanh cuộn xuống để xem phần dưới của blog thì các phần trên nó sẽ bị ẩn đi. Vậy nếu muốn hiển thị một tiện ích có ID bất kỳ khi bạn kéo chuột xuống dưới blog dạng Sticky thì phải làm thế nào.

Bài viết này NewTinVN sẽ hướng dẫn các bạn làm điều đó tạo Sticky cho một widget có Id bất kỳ, Bạn có thể áp dụng nó cho các widget chứa các nút like của các mạng xã hội hay hộp đăng ký nhận tin của bạn, hoặc đơn giản hơn là cho một menu, một banner quảng cáo mà bạn muốn. Với cách tạo Sticky này cho dù bạn kéo chuột đến vị trí nào đi nữa thì tiện ích của bạn vẫn luôn xuất hiện tại vị trí mà bạn muốn, trong bài viết này là trên đầu của blog.

Bạn có thể xem demo ngay trên blog của mình hãy kéo chuột xuống dưới chân trang và chú ý thanh menu ở trên đầu blog mình cũng di chuyển theo và không hề biến mất nha.

» Bước 1: Xác định ID của Wdget tiện ích cần tạo hiệu ứng Sticky

1.1- Vào Bố cục (Layout) -> Nhấp vào Chỉnh sửa (Edit) trên Widget cần áp dụng tiện ích Sticky.

Tạo Sticky cho nhiều Widget của blogspot

1.2 - Một cửa sổ Popup bật lên, bạn nhìn vào phía trên góc phải (gần thanh tiêu đề) sẽ thấy dòng có dạng tương tự sau: …null&widgetId=HTML10 (trong trường hợp này là widgetHTML10, đối với widget khác sẽ có ID khác)

- Sau khi xác định được Id của tiện ích bạn đóng cửa sổ popup đó lại và tiến hành bước tiếp theo nha.

» Bước 2: Thêm code để tạo hiệu ứng Sticky cho widget mà bạn muốn

Sau khi xác định được Id của tiện ích cần tạo hiệu ứng Sticky bạn tiếp tục thực hiện các bước sau để dán Sticky cho tiện ích đó nha:
2.1- Đăng nhập vào blog của bạn.
2.2. Vào phần Mẫu (Template) => Chọn Chỉnh sửa HTML (Edit HTML)

2.3- Chèn đoạn code bên dưới vào trước thẻ </head> .

<script>
// Sticky widget by namkna.blogspot.com
// Tutorial at http://namkna.blogspot.com/2013/10/tao-sticky-cho-nhieu-widget-cua-blogspot.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("HTML10"); 
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var width = bs_sticky.offsetWidth;
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = width + "px";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>

» Tùy chỉnh:

Thay HTML10 thành Id widget mà bạn muốn hiển thị trong chế độ Sticky. Trong trường hợp này id của mình là HTML10 bạn hãy thay đổi lại nó cho phù hợp với tiện ích mà bạn muốn áp dụng nha;
Bạn cũng có thể tùy chỉnh lại màu săc, cỡ chữ và cị trí dính banner bằng cách thay đổi các thuộc tính nằm trong class .bs_sticking.

2.4- Lưu mẫu lại và vào blog kiểm tra lại xem tiện ích mà bạn vừa áp dụng có hiển thị khi kéo chuột xuống chân của blog không nha.

NewTinVN-Nguồn Namkna

Read more…

SEO lên Top Google bằng cách copy bài viết của website khác

07:40 |

Phải thú thật là không phải bất cứ 1 Copywriter nào, một website nào cũng chỉ có những nội dung do chính mình tạo ra hay còn gọi là unique content. Chính vì thế tôi xin điểm một vài bước rewrite để chúng ta có thể tạo ra những content độc đáo và lên top hiệu quả.

1 – Chú ý đến title của bài viết
- Việc thay đổi title của bài viết là điều đầu tiên chúng ta phải quan tâm và nó là một trong những yếu tố quan trọng nhất cho việc lên top của bạn. Tôi đặt nó mức ưu tiên số 1
Ví dụ ta copy một bài viết với tiêu đề “Làm sao để copy bài viết mà vẫn lên top” Chúng ta có rất nhiều cách để thay đổi nó theo cách riêng của mình ví dụ như “Lên top cao hơi với những bài viết Copy” hoặc Đừng nghĩ copy là không lên được top v.v và v.v . Chịu khó google trước khi đặt title để chắc chắn rằng cái title của bạn là DUY NHẤT.

2 – Viết lại description.
- Đây cũng được coi là một trong những yếu tố cực kỳ quan trọng trong việc phân biệt bài viết Unique trên Google search và tôi đặt nó ở mức ưu tiên số 2.

- Viết lại description đôi khi khiến chúng ta bị “Bí” vì thông thường các biên tập viên đã cô đọng khá tốt nội dung bài viết đó để nhét vào 160 ký tự trong descrtion, tuy nhiên không phải là không thể. Tôi không biết các bạn rewrite thế nào trong hoàn cảnh này nhưng tôi thì đơn giản hơn là “Đọc lướt qua nội dung” và viết đôi nét về cảm nghĩ của mình về chính cái nội dung đó.

Ví dụ ngay về bài này nhé: Vừa đọc một bài rất hay trên VOM “làm thế nào mà copy bài viết mà vẫn lên được TOP”. Một bài viết rất tuyệt vời và tôi xin phép copy về bog cho mọi người tham khảo…

Hãy chú ý những nguyên tắc về việc soạn thảo description nhé. Chỉ nên chứa không quá 170 ký tự, description phải chứa những từ khóa và cụm từ khóa cần SEO. Viết hấp dẫn đề thu hút CLICK về website của bạn.

3 – Tấn công tới nội dung chính.
Như chúng ta đã biết thì Google đọc các nội dung text trên trang khá chính sác. Tuy nhiên theo tôi thì google chỉ có thể “Nhận dạng text” chứ không thể “Hiểu content” một cách chính xác như con người. Đặc biệt là các ngôn ngữ được hỗ trợ kém như “Tiếng Việt”. Và đây chính là lợi thế của chúng ta. Hãy:

Cô đọng lại bài viết cho ngắn hơn tuy nhiên đừng có ngắn quá 300words nhé
Thêm các phần nhận xét của cá nhân cho từng nội dung nhỏ trong post
Thay các từ, cụm từ nhất định với những từ “Đồng nghĩa” Ví dụ: Bố tôi -> Cha mình, Ba mình…
Thay các hình ảnh tương tự và nên nhớ Ảnh cũng có chỗ để chứa Profile, hãy tìm cách thay lại nó trước khi đưa vào bài viết nhé
Chèn từ khóa vào bài viết với mật độ thế nào? “Đừng quá 7%” là ok rồi
Viết lại TAGs và các thẻ meta keywords cho an toàn.
Với kinh nghiệm của bản thân tôi thì các “nội dung Text” của bài viết # với “nội dung Text” khoảng 70% là an toàn.
Đừng quên xóa các thẻ HTML của bài viết gốc trước khi post lại về Blog của mình nhé.

4 – Thêm mới nội dung = Kết Luận.
Tôi nhớ là tập làm văn luôn có 3 phần, mở bài, thân bài và kết luận. Ở trên chúng ta đã có “Đề bài”, Mở bài, Thân Bài rồi, và giờ là Kết Luận.

- Phần kết luận là phần để chúng ta có thể nêu những ý kiến nhận xét, đánh giá của cá nhân người rewrite về nội dung vừa được đăng tải. Cố gắng “Bôi” ra nhiều nhiều chút xíu và đừng quên câu View cho những bài viết # trên Blog có nội dung liên quan nhé.

Đó là 4 bước cơ bản để chúng ta có thể dễ dàng thay đổi nội dung của một bài viết gốc thành nội dung “Độc nhất” với Google và cũng là nội dung “Độc nhất” với cả người đọc nữa. Có nhiều bạn hỏi rằng: Có nên đặt link về bài viết gốc? Link out bao nhiêu thì đủ? Tôi xin trả lời rằng: Link về nguồn là cần thiết để người đọc có thể hiểu rõ ràng nhất cái mà mình muốn diễn đạt trong bài đang đọc. Link out bao nhiêu cũng được, miễn là LINK CÓ ÍCH CHO NGƯỜI DÙNG. Google cũng đã từng khuyến cáo rằng “Đừng tạo ra các links rác trong bài viết của bạn, hãy để người dùng tới nơi mà họ muốn tới. Linkout của bạn thật sự hữu ích có thể đó cũng là 1 điểm + cho Blog của bạn”.

“Copy cũng cần phải đầu tư chất xám, thời gian, tiền bạc. ”

Nguồn intertnet.

Read more…

Code - Thủ thuật tạo khung chứa mã Code cho Blogger.

23:36 |

Đa phần các tiện ích dùng cho Blog đều sử dụng các mã code đặc thù riêng của nó, các mã code này đa số đều phức tạp và dài dòng, do đó nếu bạn thường xuyên chia sẻ các mã code này trên blog thì bạn nên gom nó vào khung chứa code riêng cách biệt với chữ viết trong bài đăng để cho thao tác copy của khách tham quan được thuận tiện hơn và ít nhầm lẫn hơn.Thủ thuật blogger này sẽ giúp bạn làm tốt việc đó.

1- Đăng nhập vào Blogger

2- Vào Mẫu (Template)

3- Chọn Chỉnh sửa HTML (Edit HTML)

4-Bên dưới có rất nhiều mẫu. Chèn đoạn code bạn chọn vào trước thẻ ]]></b:skin>

Mẫu 1

.code { border-radius:20px 0; max-height:250px; min-height:50px; margin : 10px; padding : 10px; clear : both; list-style-type : none; overflow:auto; color:#FFF; text-shadow: 0 -1px 1px #a52676; border:none; background:#de45a6; background: -moz-linear-gradient(top, #e54aac, #f374c5 95%, #d3469f); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e54aac), color-stop(.9, #f374c5), to(#d3469f)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d3469f', EndColorStr='#f374c5'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d3469f', EndColorStr='#f374c5')"; /* IE8 only */ box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9; -webkit-box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9; -moz-box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9; }

Mẫu 2

.code { border-radius:20px 0; max-height:250px; min-height:50px; margin : 10px; padding : 10px; clear : both; list-style-type : none; overflow:auto; background: #E6E6E6; background: -moz-linear-gradient(top, #FFF, #f5f5f5 5%, #e2e2e2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(.03, #f5f5f5), to(#e2e2e2)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2')"; /* IE8 only */ -moz-border-radius: 4px; -webkit-border-radius: 4px; border:1px solid #d0d0d0; border-bottom:1px solid #b5b5b5; color:#5e5e5e; text-shadow: 1px 1px 1px #FFF}

Mẫu 3

.code { border-radius:20px 0; max-height:250px; min-height:50px; margin : 10px; padding : 10px; clear : both; list-style-type : none; overflow:auto; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color:#FFF; text-shadow: 0 1px 1px #0f739d; background: #40addb; background: -moz-linear-gradient(top, #d1edfa, #73cef5 5%, #49acd6); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d1edfa), color-stop(0.03, #73cef5), to(#49acd6)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73cef5', EndColorStr='#49acd6'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73cef5', EndColorStr='#49acd6')"; /* IE8 only */ border-bottom:1px solid #2581a8;}

Mẫu 4

.code { border-radius:20px 0; max-height:250px; min-height:50px; margin : 10px; padding : 10px; clear : both; list-style-type : none; overflow:auto; color:#FFF; text-shadow: 0 -1px 1px #0d3474; border:none; background: #3675da; background: -moz-linear-gradient(top, #4986e8, #76b8fc 95%, #4986e8); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4986e8), color-stop(.9, #76b8fc), to(#4986e8)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc'); /* IE6,IE7 only */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc')"; /* IE8 only */ box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8; -webkit-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8; -moz-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;}

Sau khi chọn được mẫu ứng ý rồi các bạn lưu mẫu lại.

Cách sử dụng: Sau này mỗi lần trình bày code thì bạn check vào phần HTML của bài viết hoặc trang và sử dụng cấu trúc như dạng sau.

<div class="code">
Nội dung đoạn code
</div>

NewTinVN - Ngồn internet

Read more…

ĐẶT CODE TRONG KHUNG BÀI VIẾT MỘT CÁCH CHUYÊN NGHIỆP.

23:23 |

Bài viết hướng dẫn về cách đặt CODE trong các khung trang trí đã được rất nhiều weblog đăng tải rồi. Nói chung là có rất nhiều mẫu khác nhau nhưng về cơ bản cách làm thì hầu như là giống nhau. Share All World xin giới thiệu với các bạn một cách trình bày code mà theo tôi thấy là đẹp, đơn giản,chuyên nghiệp và đang được áp dụng trong Share All World.

Tạo CSS điều khiển thuộc tính khung chứa code
Trước tiên, chúng ta tạo ra một class mới chứa các thuộc tính của khung hiển thị code và đặt chúng vào trong CSS của template (đặt trước thẻ ]]></b:skin>). Đoạn CSS này sẽ đi kèm thẻ pre hoặc thẻ code như đoạn code mà tôi đang sử dụng dưới đây:

pre, code {   display:block;   max-height:350px; min-height:45px;   font: 1em 'Courier New', Fixed, monospace;   font-size : 100%;   color: #666666;   background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY-K6sX-9HLrh9f7RUN8VL-V9s35zWHSpyNjIB6Gu4Q0PBjs0EHKCNiJfa8GdiwJNA4sqtBgJFQtDS75ySE046V6udm7wLu2OwZ9JtuWp9HIRjLHvkL0MN9McT6mnZJT7bRp6RrGo67Qo/s1600/Code-form-1.jpg) no-repeat left top;   overflow : auto;   text-align:left;   border : 1px solid #99cc66;    padding : 0px 20px 0 30px;   margin:1em 0 1em 0;   line-height:17px; }

Lưu ý: các thuộc tính max-height, min-height để quy định chiều cao tối đa,tối thiểu của khung. Nếu số dòng vượt quá max-height thì khung sẽ tự tạo scroll bar.

Cách sử dụng
Khi sử dụng trong bài viết, chúng ta chỉ cần đặt code theo một trong 2 cách:
- Giữa thẻ <pre>

< pre>
...Code....
< /pre>

hoặc giữa thẻ <code>


< code>
...Code...
< /code>

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

Read more…

Code Quảng cáo hai bên mới 2013 - Đứng im không di chuyển.

22:41 |

CODE:

Tạo một Wingdet mới rồi dán code vào nhé, dành cho blogspot.

NewTinVN

Read more…

Menu xổ dọc với màu tabs thay đổi cho blogger

18:03 |

Hôm nay Lamtienmobile giới thiệu cho các bạn menu ngang xổ ngang có hiệu ứng thay đổi màu sắc cho mỗi tab khi di chuột. Nó sử dụng các hàm JavaScript đơn giản để tạo ra các hiệu ứng chuyển tiếp gọn gàng và sạch sẽ. Thay vì hiển thị các mục trình đơn phụ trong truyền thống thả dọc xuống danh sách, chúng tôi đã liên kết chúng với nhau để phù hợp với một dòng duy nhất. Không giống như các menu khác, tiện ích này sẽ dễ dàng phù hợp với bất kỳ mẫu BlogSpot mà không có xung đột thiết kế. Nó được đặt ở phần đầu blog của bạn để thu hút độc giả nhiều nhất. Menu hoạt động tốt trên tất cả các trình duyệt chính tức là: IE7 +, Safari, Chrome, Mozilla và Opera.

Xem minh họa: View Demo
Các bạn có thể xem ảnh minh họa:

Menu xổ dọc thay dổi màu tabs cho blogger

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Xem vdeo:

4- Thêm đoạn code bên dưới vào sau thẻ <head>.

<script src='http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot-menu-doc-xo-ngang/jquery-pack-colourful.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot-menu-doc-xo-ngang/jcarousel-colourful.js' type='text/javascript'> </script>
<script src='http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot-menu-doc-xo-ngang/mt-colourful.js' type='text/javascript'></script>

5- Bây giờ tìm thuộc tính quy định phần thân blog (body). Bạn có thể tìm kiếm nó với từ khóa là body { hoặc body{ . Nó thường có dạng như sau:

body { 
---
---
}

- Và thêm 2 thuộc tính màu xanh vào như bên dưới:

body { 
margin:0px;
padding:0px;
---
---
}

6- Tìm kiếm đoạn code sau:

<body>

- Hoặc (với các mẫu simple của blogger thì như sau):

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

=> Thêm vào ngay sau đoạn mã vừa tìm được

<!--START OF COLOURFUL TABS BY MBT-->
<style>
/*------- Colourful Tabs Menu by www.MyBloggerTricks.com -------*/
.MBT-Nav-container {
border: 1px solid #cfcfcf;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcmG8G0Q6BSfVTCtSG57tgqXM3nH4rZB0WhHacEaRNHFMC-xDw7LJKe0NpKi_Ch8meirkTzJ9Bn-uVypsyou77CbAShCUJdncd2KPuBCI-0t8h4ZfKY_3uQOAPC5ronqjfWxk0vL4XsVU/s400/menu-bgd.png) bottom left repeat-x;
    position: relative;
      margin: 0;  padding: 0;
border: 1px solid #cfcfcf;
}
ul#nav {
    border-left: 1px solid #cfcfcf;
        border-right: 0px solid #cfcfcf;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcmG8G0Q6BSfVTCtSG57tgqXM3nH4rZB0WhHacEaRNHFMC-xDw7LJKe0NpKi_Ch8meirkTzJ9Bn-uVypsyou77CbAShCUJdncd2KPuBCI-0t8h4ZfKY_3uQOAPC5ronqjfWxk0vL4XsVU/s400/menu-bgd.png) bottom left repeat-x;
    position: relative;
    font-size: 12px; font-family: helvetica, arial, sans-serif;
    list-style: none;  margin: 0 auto;  padding: 0;
    width: 960px;
}
#nav ul {
     margin: 0;
   
}
:focus {
    outline: 0;
}
*html ul#nav { clear: both; height: 1%; }
ul#nav li a {
    display: block;
    float: left;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 33px;
    padding: 0 13px 0 10px;
    color: #333;
    text-decoration: none;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMvRahQTU5DnGhs6jbgylyI1BJ_ZS7Lh1Uyf6wZlgLsL0WnWFedvEGPzQUBnw8Ae_xN7MYmrRv7C98k82V0kCNqYd9Fg9GG9h8C-zmImwg3h6rHzjr3DchCh0CI7H52vdKH5TDTstEKww/s400/menu-rule.png) right 2px no-repeat;
}
*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
ul#nav li a:hover, ul#nav li a.open { color: #fff; }
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }

ul#nav li#link-home a {
    padding: 0 33px 0 10px;
    text-indent: -9999px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkDaZwxM4ieJLr6WR6ZPDHSe3XjhWdsd20x6DNdvUXZ5LKtg92rYeC1lAT6cxa3kfDuCo3nGeCvEG4ST6GJS1cfgWWyTYgcbcxncD0_AEhE3OrjKDSTUTqTkuf07LinmQEFSui8DVSdc/s400/home-icon.png) right 0px no-repeat;
}
*html ul#nav li#link-home a { padding: 0; width: 43px; }
ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkDaZwxM4ieJLr6WR6ZPDHSe3XjhWdsd20x6DNdvUXZ5LKtg92rYeC1lAT6cxa3kfDuCo3nGeCvEG4ST6GJS1cfgWWyTYgcbcxncD0_AEhE3OrjKDSTUTqTkuf07LinmQEFSui8DVSdc/s400/home-icon.png) right -33px no-repeat; }
/* Sub-Vertical Navigation */
ul.sub-nav {
    position: absolute;
    top: 33px;
    left: -1px;
    overflow: hidden;
    width: 960px;
    display: none;
    z-index: 999;
list-style: none;
  padding-left:0px;
}
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQDgDQUiX6KDmJHlPw-ycCuFOKIaoK_d4YIOXbF35hLcu9_pyPn2zPKUFINfC9F_2PHSdJWNcXDfaQIHm2dWpyYQUsIiQB0nCGwuBF2Lu26QpX0UhIZGCfpGRF758J_0CvZAy7GFe5MRI/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjid2ImA3jAxOGC3swsL5Y0iYjBmeeG3oZMJW_yIzkdUbYP5W8LvE-Wk0_s9IqvnpO8gayi1Ea5YBAWwFHvc1iJp1y3xB_wulqaXK88zrhxONIFmXwNgC1WLjnUTNygMMhWtlefDhYuj1I/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijukCZBDG-7Yq1oY34aB19U9L3NJrtxl_A3P1YSzq_h0Kw8O1N0_7e65GqFT9FurUXvTSleaLxCqC73lg4Q38vVNoRZ3mhEfD_jkqL3k-YxL6wKTxpdZsXb2QXKN6_NMbbBa7Wpba_uB8/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitkwJQ_MnSJEY_Rucfw7IkKpXf8fGcqVtxgoaIxn7zvz9D_zLfmv24LU8ESgYos9uGIrtmoKgOMxxKdUkaZs6d2zjSmnB08PoZJOFhj1vFGktPbA9Qedvovxp2_qEd-LlSgT-jtYy79Pg/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwLvJT9M0cvOTjwuLntkz6-CrEfjrnbDW59SPlACaWG0bZf3dMNVojfJrNmIINzPcW-bbGNa0Y_rzpYxLJGSZHM5wjevKATCeizXr0VNyx2zMLSczqkCORry-tnz6XREFyI-cLyHAZG2c/s400/technology-subnav-bgd.png) top left repeat-x; }
ul#nav li ul.sub-nav li { float: left;   }
ul#nav li ul.sub-nav li a {
    float: none;
    background: none;
    font-size: 11px;
    text-transform: none;
    color: #fff;
    line-height: 25px;
}
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }
</style>
<div class='MBT-Nav-container'>
<ul id='nav'>
               
               <li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Home</a></li>

                <li class='top-link' id='mbt'><a href='#'>TAB 1</a>
                    <ul class='sub-nav'> 
                    <li><a href='#'>SUB TAB 1.1</a></li>
                    <li><a href='#'>SUB TAB 1.2</a></li>
                    <li><a href='#'>SUB TAB 1.3</a></li>
                    <li><a href='#'>SUB TAB 1.4</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 2.1</a></li>
                    <li><a href='#'>SUB TAB 2.2</a></li>
                    <li><a href='#'>SUB TAB 2.3</a></li>
                    <li><a href='#'>SUB TAB 2.4</a></li>
                    <li><a href='#'>SUB TAB 2.5</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-news'><a href='#'>TAB 3</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 3.1</a></li>
                    <li><a href='#'>SUB TAB 3.2</a></li>
                    <li><a href='#'>SUB TAB 3.3</a></li>
                    <li><a href='#'>SUB TAB 3.4</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-life'><a href='#'>TAB 4</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 4.1</a></li>
                    <li><a href='#'>SUB TAB 4.2</a></li>
                    <li><a href='#'>SUB TAB 4.3</a></li>
                    <li><a href='#'>SUB TAB 4.4</a></li>
                    <li><a href='#'>SUB TAB 4.5</a></li>
                    <li><a href='#'>SUB TAB 4.6</a></li>
                    <li><a href='#'>SUB TAB 4.7</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-technology'><a href='#'>TAB 5</a>
                    <ul class='sub-nav' style='display: none;'> 
                    <li><a href='#'>SUB TAB 5.1</a></li>
                    <li><a href='#'>SUB TAB 5.2</a></li>
                    <li><a href='#'>SUB TAB 5.3</a></li>
                    <li><a href='#'>SUB TAB 5.4</a></li>
                    <li><a href='#'>SUB TAB 5.5</a></li>
                    </ul>
                </li>

<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>

<!--
<li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li>
-->
<!--
<li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li>
-->

                  <li style='clear: both;'/>
            </ul>
</div>
<!--END OF COLOURFUL TABS BY MBT-->

7- Lưu mẫu lại. Và quay lại xem thành quả nha.

Tuỳ chỉnh Code: Các mã được viết bằng một cách gọn gàng để cho bất kỳ ai có thể dễ dàng thay đổi, thêm hoặc xóa các tab.

Thay thế # thành liên kết (URL) của trang
Thay thế các tên TAB màu xanh thành tiêu đề trang
Để thay đổi độ rộng của menu chỉnh sửa width: 960px (có 2 đoạn width: 960px)
Để tạo ra một tab mới trong bất kỳ sub menu hãy dán mã bên dưới ở trên thẻ đóng </ ul>
<li><a href='#'>SUB TAB</a></li>
Tab 7 đến Tab 10 bị vô hiệu hóa. Nếu bạn muốn kích hoạt bất kỳ một trong số đó thì chỉ cần loại bỏ các thẻ  ở trước và sau nó

Để sử dụng lâu dài bạn hãy Download 3 file javarscip về và Upload lên host riêng để dùng lâu dài nha. Tải về tại đây:
jquery-pack-colourful.js
jcarousel-colourful.js
mt-colourful.js

mybloggertricks

Read more…

Menu ngang xổ dọc xuống nhiều cấp (Kiểu 2) - Update 21/03/2012

21:59 |

Trước đây, tôi có đăng bài Menu sổ dọc kiểu 1, với kiểu này thì menu chỉ có một màu đen, chữ trắng và các bạn không thể đổi màu được.
Do có một số bạn hỏi: Sao không đổi màu cho menu được?, vì vậy hôm nay Namkna xin giới thiệu đến các bạnkiểu 2, menu này cũng giống với menu kiểu 1 nhưng thay vào đó các bạn có thể dễ dàng đổi màu cho menu, đổi màu cho chữ trên menu...

Demo for Post

Hình ảnh minh họa:

Cách tạo Drop Menu ngang xổ dọc xuống nhiều cấp liên tiếp cho blogspot

Để tạo được như vậy, các bạn cần làm theo các bước sau đây:

Đầu tiên, bạn đăng nhập vào Blog > Chọn thiết kế > Chọn chỉnh sửa HTML, sau đó bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào khung dòng lệnh <head>. Bây giờ bạn copy đoạn code này và dán phía dưới dòng lệnh đó.

<style type='text/css'>
html .jqueryslidemenu{height: 1%;}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot-menu-xo-doc-2/drop_menu.js' type='text/javascript'/>

- Do hiện tại host goole code của mình bị ban từ nhà cung cấp do vậy các bạn chịu khóDownload 2 File JS về TẠI ĐÂY sau đó Upload lên Hosting riêng để dùng, nếu chưa có host thì bạn chịu khó xem host miễn phí Tại đây

4. Save template lại
5. Bây giờ bạn vào thiết kế - Phần tử trang và thêm 1 HTML/Javascript trên phần header và dán code bên dưới vào

<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#153E7E;   /* màu nền của menu*/
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;z-index:30;
}
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{
display: inline-block;
}
/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu cchữ các menu
}*/
.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li ul{
top: 0;
}
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Cuộc sống</a></li>
<li><a href="#">Học tập</a></li>
<li><a href="#">Thủ thuật</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>

<li><a href="#">Giải trí</a></li>

<li><a href="#">Blogspot</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>  </li> </ul></li>

<li><a href="#">Vườn thơ</a></li>

<li><a href="#">Hình ảnh</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul></li>

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
</ul></li>

</ul><br style="clear: left" />
</div>

Chỉnh code:

Bạn hãy dựa vào các dòng chữ màu xanh lá ở trên để chỉnh sửa màu nền và text theo ý bạn
Những dòng màu đỏ đậm trong code trên chính là tên của các thư mục chính, bạn hãy thay đổi cho phù hợp với blog của bạn.
Code màu xanh dương là tên của những thư mục con cấp 1 của menu chính
Code màu xanh nhạt là tên của thư mục con cấp 2 của thư mục chính
Code màu cam là thư mục con cấp 3 của thư mục chính, bạn hãy sửa tên các thư mục trên cho phù hợp với blog của bạn.
Thay các dấu "#" thành những đường dẫn tương ứng với tên của thư mục

- Trong đoạn code sau:

.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}

Bạn chỉnh padding: 5px; để điều chỉnh độ rộng cuả Menu
Chỉnh margin: 0px; để điều chỉnh khoảng cách giữa các Sub menu. Có thể lấy các giá trị âm và dương. Nếu khoảng các giữ các Menu con lớn thì lấy giá trị âm (Ví dụ: margin: -3px;), Nếu các Menu con chồng lên nhau thì lấy giá trị dương (Ví dụ margin: 5px;), Nếu khoảng cách giữ các Menu con là sát nhau thì giữ nguyênmargin: 0px; (Xem hình)

Tạo Menu ngang xổ dọc nhiều cấp liên tiếp cho blogspot

- Ở trên mình chỉ giới thiệu cho bạn tạo 7 thư mục, bạn có thể thêm nhiều hơn hoặc bớt đi tùy ý. Nhưng bạn cần phải lưu ý khi xóa đi hoặc thêm vào thư mục nào thì phải kiểm tra lại thẻ đóng của chúng cho phù hợp.

Cách tạo menu con: ví dụ bạn muốn tạo thư mục con cấp 2 cho thư mục "Download"tại thư mục Sub Item 2.2 thì bạn làm như bên dưới:

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.2.2</a></li>
</ul>
</li>
</ul></li>

Bạn muốn tạo cho các thư mục khác thì làm tương tự, chú ý các thẻ <li>, <ul> đóng chúng cho phù hợp.

Nếu muốn thêm thư mục không cần có thư mục con bạn chỉ việc thêm code như bên dưới và vị trí bạn muốn. ví dụ thêm như mục "Cộng cụ" vào sau thư mục "Học tập" bạn làm như sau:

<li><a href="#">Học tập</a></li>
<li><a href="#">Công cụ</a></li>

Chúc thành công!

Read more…

Menu trượt với CSS3 cho blogspot

07:07 |

Theo yêu cầu bạn chjpsea namkna sẽ hướng dẫn các bạn cách tạo một menu ngang với hiệu ứng thay đổi khi dê chuột qua mỗi một sub menu Thêm nữa menu này chỉ hiện ra khi dê chuột lên đầu trang.
Mình sẽ giới thiệu cho các bạn 2 style:

Style 1: Menu nằm trên đầu log và sẽ hiện ra khi ta dê chuột lên phần đầu của blog.
Style 2: Menu nằm ở chân của blog và sẽ hiện ra khi ta dê chuột vào phần chân của blog.

Các bạn có thể dê chuột lên đầu hoặc xuống chân blog của mình để xem demo:

Bước 1: Tạo một widget chứa code XML

☼ Cách tiến hành:

1- Đăng nhập vào Blog
2- Vào Phần tử trang
3- Chọn Thêm tiện ích -> tạo một tiện ích HTML/javarscip (Xem video)

4- Dán đoạn code bên dưới vào tiện ích HTML/Javarscip vừa tạo.

<div class="overlay"></div>
 <div class="nav">
  <div class="wrap">
   <ul class='navigation'>
    <li><a href="#">Home</a></li>
    <li><a href="#">Music</a></li>
    <li><a href="#">Technology</a></li>
    <li><a href="#">Sports</a></li>
    <li><a href="#">Stars</a></li>
    <li><a href="#">Cine</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Style</a></li>
   </ul>
  </div>
 </div>

Trong đó:

Thay dấu thăng thành liên kết của bạn
Phần màu xanh là tên của liên kết trên menu:
Bạn có thể Download code về tại đây

- Lưu tiện ích HTML/Javarscip lại!

Bước 2: Chọn skill cho menu:

☼ Cách tiến hành:

1- Đăng nhập vào Blog
2- Vào Mẫu (template)
3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)

4-Đến đây có 2 lựa chọn cho bạn. nếu bạn thich style nào hãy chọn style đó và dán vào trước thẻ ]]></b:skin> .

Style 1: Menu nằm trên đầu blog và hiện khi dê chuột.

Dê chuột lên đầu blog để xem Demo

ul, li, nav
{
     border: 0pt none;
     font: inherit;
     margin: 0pt;
     padding: 0pt;
}

nav{
     display: block;
}

ol, ul {
     list-style: none outside none;
}

a{
 text-decoration:none;
}

/*---end reset---*/

.overlay{
 position:fixed;
 lefT:0;
 top:0;
 height:60px;
 width:100%;
 background-color:transparent;
 z-index:1;
}

.wrap{
    width:960px;
    margin:auto;
}

.nav{
    background-color:transparent;
    height:60px;
 text-align:center;
 position:fixed;
 width:100%;
 left:0;
 top:-60px;
 z-index:999;
 -moz-transition:top 0.4s ease;
 -webkit-transition:top 0.4s ease;
 -o-transition:top 0.4s ease;
 -ms-transition:top 0.4s ease;
 transition:top 0.4s ease;
}

.overlay:hover ~ .nav,.nav:hover{
 top:0;
}

.navigation{
 display:inline-block;
}

.navigation li{
    display:inline;
}

.navigation a{
    display:block;
    float:left;
    font-family:helvetica,arial,sans-serif;
    color:#fff;
    font-size:12px;
    height:100%;
    line-height:60px;
    text-transform:uppercase;
    padding:0 35px;
 font-weight:bold;
    -moz-transition:all 0.4s ease;
 -webkit-transition:all 0.4s ease;
 -o-transition:all 0.4s ease;
 -ms-transition:all 0.4s ease;
 transition:all 0.4s ease;
}

.navigation li:nth-child(1) a:hover{
 background-color:#ffa32c;
}

.navigation li:nth-child(2) a:hover{
 background-color:#73e900;
}

.navigation li:nth-child(3) a:hover{
 background-color:#992ff3;
}

.navigation li:nth-child(4) a:hover{
 background-color:#38eec5;
}

.navigation li:nth-child(5) a:hover{
 background-color:#fff000;
}

.navigation li:nth-child(6) a:hover{
 background-color:#008aff;
}

.navigation li:nth-child(7) a:hover{
 background-color:#ff0096;
}

.navigation li:nth-child(8) a:hover{
 background-color:#ff3939;
}

Style 2: Menu nằm dưới chân blog và hiện khi dê chuột xuống chân blog.

Dê chuột xuống cuối blog để xem đemo

ul, li, nav
{
     border: 0pt none;
     font: inherit;
     margin: 0pt;
     padding: 0pt;
}

nav{
     display: block;
}

ol, ul {
     list-style: none outside none;
}

a{
 text-decoration:none;
}

/*---end reset---*/

.overlay{
 position:fixed;
 lefT:0;
 bottom:0;
 height:100px;
 width:100%;
 background-color:transparent;
 z-index:1;
}

.wrap{
    width:960px;
    margin:auto;
}

.nav{
    background-color:#1e1e1e;
    height:60px;
 text-align:center;
 position:fixed;
 width:100%;
 left:0;
 bottom:-60px;
 z-index:999;
 -moz-transition:bottom 0.4s ease;
 -webkit-transition:bottom 0.4s ease;
 -o-transition:bottom 0.4s ease;
 -ms-transition:bottom 0.4s ease;
 transition:top 0.4s ease;
}

.overlay:hover ~ .nav,.nav:hover{
 bottom:0;
}

.navigation{
 display:inline-block;
}

.navigation li{
    display:inline;
}

.navigation a{
    display:block;
    float:left;
    font-family:helvetica,arial,sans-serif;
    color:#fff;
    font-size:12px;
    height:100%;
    line-height:60px;
    text-transform:uppercase;
    padding:0 35px;
 font-weight:bold;
    -moz-transition:all 0.4s ease;
 -webkit-transition:all 0.4s ease;
 -o-transition:all 0.4s ease;
 -ms-transition:all 0.4s ease;
 transition:all 0.4s ease;
}

.navigation li:nth-child(1) a:hover{
 background-color:#ffa32c;
}

.navigation li:nth-child(2) a:hover{
 background-color:#73e900;
}

.navigation li:nth-child(3) a:hover{
 background-color:#992ff3;
}

.navigation li:nth-child(4) a:hover{
 background-color:#38eec5;
}

.navigation li:nth-child(5) a:hover{
 background-color:#fff000;
}

.navigation li:nth-child(6) a:hover{
 background-color:#008aff;
}

.navigation li:nth-child(7) a:hover{
 background-color:#ff0096;
}

.navigation li:nth-child(8) a:hover{
 background-color:#ff3939;
}

- Sau đó bấm Lưu Mẫu lại.

Lưu ý nếu muốn sử dụng đồng thời cả 2 loại menu bạn phải thay đổi class của 1 loại menu còn một lọa giữ nguyên.

(zlatanblog .)

Read more…

Bài Viết Đọc Nhiều

Bài Viết Mới Nhất

Hàng VIP Việt Nam Airlines!

Phần Mềm Được Quan Tâm

Những Phần Mềm Hay Nhất Cho Bạn

LH Quảng Cáo Tại Đây

Cách làm cho nhiều Widget của blogspot dính khi kéo chuột

» Bước 1: Xác định ID của Wdget tiện ích cần tạo hiệu ứng Sticky

» Bước 2: Thêm code để tạo hiệu ứng Sticky cho widget mà bạn muốn

SEO lên Top Google bằng cách copy bài viết của website khác

Code - Thủ thuật tạo khung chứa mã Code cho Blogger.

ĐẶT CODE TRONG KHUNG BÀI VIẾT MỘT CÁCH CHUYÊN NGHIỆP.

Code Quảng cáo hai bên mới 2013 - Đứng im không di chuyển.

Menu xổ dọc với màu tabs thay đổi cho blogger

Menu ngang xổ dọc xuống nhiều cấp (Kiểu 2) - Update 21/03/2012

Menu trượt với CSS3 cho blogspot

Bước 1: Tạo một widget chứa code XML

Bước 2: Chọn skill cho menu:

Bài Đọc Nhiều

Kiếm Tiền online

Top Bài Hot New

Tăng Doanh Thu Tối Đa

Liên Hệ Với Chúng Tôi