Xinh Xinh Việt Nam

Note: bài cũ up lên! Hầu như các blogger hiện nay đều sử dụng widget nhận xét mới trên blog của mình. Chức năng của nó là hiện thị các bình luận gần nhất của độc giả, giúp tăng tính tương tác cũng như là thẫm mĩ cho blog. Cách thực hiện rất đơn giản: Các bạn vào Blog > Bố Cục > Chọn HTML/Javascript và dán toàn bộ code sau vào: <style> .nxmoi{color: #ccc;} .nxmoi li{margin:0;padding:10px;border-left: 2px solid #ccc;} .nxmoi li:before {content: "";width: 12px;height: 12px;display: block;border: 3px solid #ccc;border-radius: 50%;float: left;left:-5px;position: absolute;background: #fff;} .nxmoi li:hover:before{background:#F48FB1} .nxmoi span a{color:#F48FB1;font-weight:600;transition: color .3s;} .nxmoi span a:hover{color:#F48FB1;transition: color .3s;} .nxmoi span {color:#fff} </style> <script>//<![CDATA[ var sl_nhanxet = 5,     kt_nhanxet = 50; // Recent Comment function nhanxetmoi(json) {     var entry, commurl, commsum;     d...

Ở nhiều trang tin tức người ta thường có 1 hoặc nhiều widget chạy ngang điểm những tin tức mới những bài viết mới và tác dụng của nó sẽ kéo thành viên ở lại trang lâu hơn bởi những tin nóng những tin hay mà nếu như bình thường người xem sẽ không để ý. Nếu dạo qua các trang tin tức các bạn có thể thấy một thanh ngang được đặt lên đầu trang với tiêu đề là “Tin mới”, “Tiêu điểm”,… hiển thị các bài viết mới với hiệu ứng load sinh động rất thu hút người đọc. Đó gọi là Breaking News Widget (hay Widget Tin tức mới). Trước đây, mình thấy có rất nhiều bạn viết nhiều bài viết hướng dẫn về cách làm này nhưng đa số hiện tại bây giờ xài được vì bị cái gì mà gọi là xung đột css javascript mà mình chả hiểu cm gì hết :v, nói chung là không xài được và thường bị lỗi tùm lum. Hôm nay, mình xin chỉa sẻ cho các bạn Cách tạo một thanh Breaking News đơn giản mà đẹp có hình ảnh luôn, load chuẩn và chả có xung đột cái gì hết :) Các bước thực hiện: Bước 1 : Truy cập Chủ đề - Chỉnh sửa HTML. Bước 2 : Thêm đoạ...

Hiển thị các bài đăng ngẫu nhiên (hay còn gọi là Related Posts) trong blog làm giảm tỷ lệ thoát. Nó cũng cung cấp trải nghiệm người dùng tốt cho người đọc. Trong bố cục Blogger không có sẵn tiện ích này. Tuy nhiên, bạn có thể thêm Related Posts trong Blogger với sự trợ giúp của code tùy biến bên ngoài. Ảnh Demo Trong bài này, chúng ta sẽ thấy các bước để thêm các bài viết liên quan [với hình thu nhỏ] bằng cách sử dụng code như sau: Widget Related Posts dưới mỗi bài viết blogspot Các bạn chèn code sau vào dưới mỗi bài viết blogspot (tùy vào cách sắp xếp bài viết của các bạn) <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .related-post-title{font-size: 1.5em;padding: 0px 0px 10px;margin: 5px 0px;border-bottom: 1px dotted #000;} #related-posts {margin: 0px 0px 15px 0px;border-bottom: 1px dotted #000;padding-bottom: 10px; } #related-posts a { font-size: 1.2em; color: #525252; text-transform: capitalize; text-decoration: n...

Hihi.! Hiện tại trên blog mình có 4 cái cần share cho các bạn và hôm nay Style css beauty label for blogspot là bài đầu tiên mình share. Đây là một kiểu trang trí cho Label blog đơn giản nhưng cũng rất là bắt mắt. Style css beauty label for blogspot edit Bước 1 : Trước tiên các bạn nên xóa hết css cũ có sẵn của Label, sau đó các bạn chèn thay thế đoạn code sau vào css đã xóa hoặc là có thể chèn code vào cặp thẻ style .widget.Label li a,.widget.Label li span{text-decoration:none;float:left;width:45%;white-space:nowrap;text-overflow:ellipsis;border-radius:20px!important;border:1px solid #138882;overflow:hidden;height:24px;line-height:20px;position:relative;margin:2px;padding:4px 3px 0 5px;background:#222;color:#888!important;font-size:100%;font-family:Arial,sans-serif;font-weight:500;text-align:left}.widget.Label li a:hover{background:#2980b9;color:#fff!important}.sidebar ul,.footer ul{list-style:none;margin:0;padding:0}.widget-content.list-label-widget-content ul li a:before{font-fam...

Nói đến Label được coi là một thành phần vô cùng quan trọng trong Blogspot. Có rất nhiều cách để hiển thị label cho blogspot, và hôm nay mình xin giới thiệu đến các bạn một cách hiển thị label bằng hình ảnh đơn giản cho blogspot của các bạn. Bước 1 : Các bạn chèn đoạn css dưới lên trên thẻ  ]]></b:skin> /*Image Label*/ .image-labels {float:left} .image-labels .label img:hover{opacity:0.7} .image-labels .label img{width:217px;height:115px;} .image-labels .label{float:left;position:relative;width:217px;height:115px;padding:0;margin:0;overflow:hidden} .image-labels .label:nth-child(3n){margin-right:0} .image-labels .label a{position:absolute;right:0px;bottom:0;padding:5px 10px;font-size:12px;line-height:20px;color:#fff} .image-labels .label a:hover{text-decoration:underline} .image-labels .clearfix{float:left;min-width:700px;margin-top:50px;} .image-labels .clearfix a{color:#fff;text-decoration:none} Bước 2 : Các bạn chèn đoạn code hiể...

Khi viết bài bạn bắt buộc phải đặt tên Label không dấu để tạo liên kết Seo nhưng phần hiển thị tên Label này do thẻ data gọi dữ liệu tự động cho nên sẽ hiển thị không dấu do đó nếu bạn muốn chuyển sang tiếng Việt có dấu bạn phải thay thế thẻ data mặc định bằng thẻ gọi Label có điều kiện. Bài này mình sẽ hướng dẫn cách đơn giản chuyển từ Label không dấu sang Label tiếng Việt của tiện ích nhãn khi bạn đã đặt tên Label không dấu. Việc này giúp người đọc dễ hiểu hơn khi Label đó bạn muốn đê cập đến chủ đề gì. Trong cấu trúc của tiện ích nhãn mặc định trong Blogger có thẻ data gọi dữ liệu mặc định tên Label là <data:label.name/>, như vậy nếu bạn muốn chuyển các Label này sang tiếng Việt bạn cần thay thế thẻ data mặc định bằng cách sử dụng thẻ <b:if cond='data:label.name == &quot;label-name&quot;'>. Lấy ví dụ bạn có một Label tên "choi-blog" như vậy để Label này hiển thị bằng tiếng Việt "Chơi Blog" thay thế "choi-blog" hiển thị trong ...

Popular Post hay còn được gọi là Bài đăng phổ biến , Xem nhiều trong tuần ,...tùy theo cách gọi của mỗi bạn. Là một thành phần ko thể thiếu trong Blog của các bạn. Nó giúp các bạn thống kê được những bài viết có lượt xem nhiều nhất trong Blog mình nhằm tạo sự chú ý đến người xem Blog. Và để góp phần tạo nhiều sự chú ý hơn, Niệm Đợp Troai sẽ chia sẻ đến các bạn 1 số mẫu Popular Post tương đối là đẹp cho các bạn sử dụng khi cần thiết. Để thực hiện các bạn tìm đến ]]></b:skin> và dán đoạn code mình thích lên trên thẻ nhé! Kiểu 1 Code /*--- Popular Posts --- */.popular-posts ul {padding-left: 0px;counter-reset: popcount;}.popular-posts ul li:before {list-style-type: none;margin-right: 15px;padding: 0.3em 0.6em;counter-increment: popcount;content: counter(popcount);font-size: 16px;background: #292D30;color: #ffffff;position: relative;font-weight: bold;font-family: georgia;float: left;border: 2px solid #dddddd;box-shadow: 1px 2px 9px #666666; }.popular-posts ul li {border-bottom:...

 Landing label theo kiểu METRO tuyệt đẹp cho blogspot. Cái nào mà ko xài Js là thích à. Lúc trước lấy cái này bên  Iris-Tips về xài nên xin bài về đăng luôn. Các bạn nên lấy về xài thử đi, về tuỳ biến lại hình ảnh mình nghĩ đẹp. Các bạn thực hiện như sau Bước 1: Ctrl + C đoạn code sau và Ctrl + V trên thẻ ]]></b:skin> .intro-labels{padding-bottom:5px;margin-left:15px;} .intro-labels .label img:hover{opacity:0.7} .intro-labels .label img{width:260px;height:160px;margin:0 10px 10px 0} .intro-labels .label{position:relative;float:left;width:260px;height:161px;padding:0;margin:5px;overflow:hidden} .intro-labels .label:nth-child(3n){margin-right:0} .intro-labels .label a{position:absolute;right:10px;bottom:0;padding:10px 15px;font-size:18px;line-height:24px;color:#fff} .intro-labels .label a:hover{text-decoration:underline} .intro-labels .clearfix{float:left;min-width:720px;margin-top:50px;margin-bottom:-10px} .intro-labels .clearfix a{color...

Cũng lâu rồi chưa làm mấy cái Tips Blog này kia, bởi vì thủ thuật Blog giờ nó khan hiếm quá, mình nghĩ là tình hình chung! Nhưng thôi kệ có cái nào chơi tạm cái đó vậy hả :v Thì cái Widget liên kết bạn bè này mình xin về từ Blog của Dân 47  để xài cho template trước kia. Nay share lại cho bạn nào cần sử dụng đối với template của mình. Các bạn dán tất cả code sau bỏ vào Widget nơi mà mình muốn hiển thị nha! cái này cũng đơn giản ko có gì khó đúng ko nào! <div class='widget-content'> <style> #banbe-ntt::-webkit-scrollbar{width:5px} #banbe-ntt::-webkit-scrollbar-thumb{background:#484848;border-radius:100px} #banbe-ntt::-webkit-scrollbar-thumb:active{background:#777} #banbe-ntt{padding:0;margin:0;list-style:none;max-height:295px;overflow:auto;} .banbe-ntt{margin:0;padding:0} .banbe-ntt li{margin:0;padding:0;line-height:normal;display:block;float:left;text-align:left;width:50%} .banbe-ntt a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; ...

Chào các bạn! Hôm nay mình sẽ giới thiệu đến các bạn Code tạo nút MXH với hiệu ứng Spin rất đẹp! Bộ Social Button này đã được tích hợp đầy với tất cả các mạng xã hội hiện nay. Các bạn có thể tùy chỉnh ẩn hiện Nút mà mình thích một cách dễ dàng. Demo Để thực hiện các bạn vào Tool này để làm: Truy cập Tool Theme blogspot chia sẻ bởi : Share123 Blogger Templates Design Blog Hồng Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam