Blogger với tiện ích thống kê tối đa 10 bài viết được xem nhiều trong tháng, trong tuần hoặc trong toàn thời gian. Theo mặc định đơn giản thì Blogspot đã có, nhưng làm thể nào để tạo cho tiện ích này hấp dẫn hơn.

Thủ thuật hôm nay itviet360 chia sẻ với việc chỉnh sửa Widget Popular Posts thêm hiệu ứng CSS3 cực đẹp.

Với việc sử dụng CSS3 tạo ra hiệu ứng khi rê chuột vào thì hình ảnh sẽ xoay vòng nhìn rất sống động.
Demo tại Blog:  Ảnh bìa Facebook
- Hướng dẫn thủ thuật:
1. Thêm 1 tiện ích Bài đăng phổ biến (nếu bạn thêm rồi thì bỏ qua bước này) bằng cách
- Vào bảng điều khiển Blogger - > Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> Bài đăng phổ biến (Popular Posts)

2. Vào Mẫu (Layout) -> Chỉnh sửa HTML (Edit HTML)
- (Ctrl + F)Tìm tới ]]> và dán đoạn code dưới đây trên nó

/* Huong dan thu thuat itviet360.com */
#PopularPosts1{max-width:300px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

3. Tìm tới đoạn Code của Popular cũ:


...


và thay thế nó bằng Code dưới đây:

4. Lưu lại và xem kết quả nhé :)

Read more…

Thủ thuật thêm những chia sẻ mạng xã hội và gợi ý người dùng theo dõi trang của mình qua mạng xã hội được rất nhiều blogger sử dụng. Tuy nhiên làm thế nào để cho nó trình bày gọn nhất trên giao diện trang web, blog của mình thì lại là lựa chọn của chủ trang blog đó.

- Với tiện ích này các bạn có thể thêm tất cả những kệnh mạng xã hội hoặc diễn đàn mà các bạn có như: Facebook, G+, Youtube, RSS, Twitter,...

- Hướng dẫn thủ thuật:
1. Vào bảng điều khiển Blogger-> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript.
2. Dán code dưới đây vào tiện ích vừa thêm:

• https://www.facebook.com/itviet360">itviet360 trên Facebook


• https://twitter.com/itviet360">Follow us on Twitter


• https://plus.google.com/117290973503680239179">Tìm tôi trên Google+


• http://www.youtube.com/itviet360">Subscribe us on YouTube


• http://feeds.feedburner.com/itviet360">RSS itviet360

- Trong đó:
Các link bô mùa vàng được thay thế bằng link của các bạn

Read more…

Mudim được biết đến là bộ gõ tiếng Việt dành cho Website, blog, Forum. Bộ gõ tiếng Việt làm cho Website, blog, 4rum trở nên chuyên nghiệp hơn. Thủ thuật blogger hôm nay mình chia sẻ cách thêm thủ thuật Mudim bộ gõ tiếng Việt này.

Demo thủ thuật tại blog: Demo thủ thuật blogspot
- Hướng dẫn cách làm thủ thuật:
1. Vào bảng điều khiển Blogger-> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl + F) Tìm tới và thêm code dưới đây ngay trên nó

Read more…

Hiệu ứng màu chạy lấp lánh trong chữ còn được gọi là neon Text Color. Đây là 1 hiệu ứng khá đẹp thường được dùng trong Website, Blog với những câu chào hoặc giới thiệu làm điểm nhấn.

Thủ thuật blogger hôm nay giới thiêu các bạn cách thêm thủ thuật này với việc sử dụng 1 đoạn mã Javascript khá đơn giản. Điều đáng nói hơn là đoạn Javascipt này thích hợp với cả trình duyệt củ chuối IE6...
Demo thủ thuật tại: http://demo-itviet360.blogspot.com/
Hướng dẫn thủ thuật:
1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript/
2. Dán đoạn code dưới đây vào tiện ích HTML /Javascript vừa thêm:





Trong đó:
http://itviet360.com :là đoạn chữ bạn muốn thể hiện.
Còn lại những thuộc tính khác mình đã ghi chú ngay ở code. các bạn tùy chỉnh theo ý mình nhé.

---

Read more…

Thủ thuật hôm nay mình giới thiệu tới các bạn cách tạo thêm thống kê "bình luận (comment) mới gần đây nhất" cho blogger. Đây là 1 thủ thuật hấp dẫn với người dùng blog khi sử dụng comment của blogger.

Lợi ích của thủ thuật:
- Load nhanh, liệt kê nhiều comment theo tùy chỉnh của mình
- Khung đẹp và gọn với thanh cuộn.
- Làm đơn giản

Hình ảnh Demo

Xem Demo trực tiếp tại blog: Demo thu thuat Blogspot
- Hướng dẫn thủ thuật:
1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript.
2. Dán Code dưới đây vào tiện ích vừa thêm

border: 2px #30a1db solid; padding:5px; text-align:center; background:#FFF380;">Demo bình luận mới

border: 4px solid orange; color: cyan; height: 220px; margin: 5px 0; overflow: auto; padding: 10px; text-align: left; width: 250px;">

Trong đó:
- Các thông số màu vàng thuộc về CSS các bạn có thể tùy chỉnh theo ý của mình về độ rộng, chiều cao, border (khung viền)
- 200 là số comment tối đa được hiển thị trong khung đó
- itviet360 là tên miền blog của bạn, ví dụ abcd.blogspot

---

Chúc các bạn vui vẻ !

Read more…

Dạng Template dùng cho site dịch vụ hoặc giới thiệu về công ty 1 cách chuyên nghiệp mà sử dụng Blogspot. Lang thang lượm lặt mình có nhặt được 1 mẫu rất phù hợp với site doanh nghiệp hoặc dịch vụ như: dịch vụ hosting, domain, network, giới thiệu công ty...

Template Đẹp dành cho blogger

Mẫu được thiết kế chuyên nghiệp, cung cấp bởi premiumbtemplates.
Bạn nào có hứng thú với Template dạng này thì:
Xem: Demo TẠI ĐÂY
Download Template: TẠI ĐÂY

---

Chúc các bạn vui vẻ !

Read more…

1 Khung liên kết đẹp và gọn được nhiều blogger hướng tới. Chúng ta vẫn bắt gặp những dạng khung liên kết đó xuất hiện ở những blogger khác nhau. Khung liên kết thanh cuộn với những icon bắt mắt.

- Thủ thuật hôm nay mình chia sẻ tới các bạn bằng cách sử dụng 1 đoạn CSS để làm 1 liên kết blog thật đẹp
Demo tại trang blog: Demo thủ thuật Blogspot
- Hướng dẫn thủ thuật:
1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán code dưới đây vào tiện ích vừa thêm:

http://www.itviet360.com/favicon.ico" class="favicon" align="center"/>itviet360


Tin shock, Scandal sao việt


Truyện cười tiếu lâm


Ảnh bìa FB

- Trong đó:
http://www.itviet360.com/favicon.ico là phần favicon của blog. Ví dụ nếu Blog của bạn có tên là abcd.blogspot.com thì link favicon là http://abcd.blogspot.com/favicon.ico
- Mở rộng nếu các bạn muốn cái kéo cuộn là màu xanh như Demo thì các bạn thêm 1 bước sau:
Vào Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
Tìm tới (Ctrl + F) ]]> và dán code dưới đây ngay trên nó:

/* lien ket blog - itviet360 */
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #dddddd;
}
::-webkit-scrollbar-thumb {
min-height: 28px;
padding-top: 100px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
background-clip: padding-box;
background-color: #0F83A0;
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
}
::-webkit-scrollbar-corner {
background: #dddddd;
}

- Lưu lại và xem kết quả nhé các bạn

Read more…

Thủ thuật thêm những nút điều khiển cho trang Web, blog giúp người xem blog không phải kéo thanh cuộn của mình khi muốn lên hoặc xuống. Làm thế nào để thêm được nút điều khiển, điều hướng cho blogspot.

Thủ thuật blogger hôm nay mình giới thiệu tới các bạn cách thêm nút điều khiển lên xuống với chức năng đầy đủ nhất.
Nếu dạo quanh nhiều blogger khác nhau thì các bạn cũng thấy khá nhiều blog sử dụng thủ thuật này. Mình giới thiệu nó hơi cũ nhưng ai cần thì sử dụng nhé:

Chức năng: Lên - xuống - dừng lại - Quay về trang trước.
Demo tại Blog: Tin shock
- Hướng dẫn thủ thuật:
1. Vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. Tìm tới (Ctrl + F) và dán code dưới đây ngay trên nó





3. Lưu mẫu lại và xem kết quả nhé.
Trong đó các giá trị bôi đỏ các bạn có thể chỉnh sửa theo ý mình nhé (chủ yếu là cao thấp)

Read more…

Làm thế nào để thêm nút Like Facebook, chia sẻ G+, theo dõi Twitter cho 1 trang Web hoặc blog?
Thủ thuật hôm nay mình giới thiệu tới các bạn cách thêm 1 nút Like Page FB, chia sẻ G+, theo dõi twitter cực đẹp và rất tiện dụng.
Điểm nổi bật của thủ thuật này là khi các bạn kéo thanh cuộn trình duyệt ra khỏi Top thì nút khung Like đó tự xuất hiện và khi lên Top thì nó lại tự động biến mất.

Demo tại blog: Tin shock (kéo thanh cuộn trình duyệt và xem kết quả nhé các bạn)
- Cách làm thủ thuật trên Blogspot (trên những nền Web khác nhau thì các bạn làm tương tự nhé)
1. Vào bảng điều khiển blogger - > Bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript
2. Dán Code dưới đây vào tiện ích vừa thêm.

(ĐÓNG)
Tham gia cùng Shock360 nhé!

#" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @hannygames

-Trong đó
Tham gia cùng Shock360 nhé! : là lời nhắc trên tiêu đề khung (Nhớ Like cho shock360 cái nhá các bạn)
511574655544346 : là con số id của Page FB các bạn. Nếu Page FB của các bạn đã đổi tên thì lấy nó là tên link id của Page đó nhé. Ví dụ "https://www.facebook.com/thuphapVietNam1" thì thay con số này bằng thuphapVietNam1
#: là Page twitter của các bạn.
Xong rồi. Xem kết quả nhé :)
Chúc các bạn thành công !

Read more…

Những hiệu ứng ảnh sống động luôn tạo tạo ra những điểm nhấn, thích thú cho trang Web, blog của bạn. Tuy nhiên sử dụng quá nhiều thì sẽ khiến web blog trở nên rối.
Với hiệu ứng sử dụng Javascript thì hạn chế sử dụng vì nó làm giảm tốc độ load của site, ...
Ở thủ thuật này mình chia sẻ với các bạn cách thêm những điểm nhấn cho blog với CSS3  hiệu ứng ảnh động cực đẹp.

Xem: DEMO
- Hướng dẫn cách làm thủ thuật:
1. đăng nhập vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. Ctrl + F tìm tới ]]> và dán  code dưới đây trên nó

.a-btn{
background:#a9db80;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1));
background:-webkit-linear-gradient(top, #a9db80 0%, #96c56f 100%);
background:-moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
background:-o-linear-gradient(top, #a9db80 0%, #96c56f 100%);
background:linear-gradient(top, #a9db80 0%, #96c56f 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
padding-left:90px;
padding-right:105px;
height:65px;
display:inline-block;
position:relative;
border:1px solid #80ab5d;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float:left;
clear:both;
margin:10px 0px;
overflow:hidden;
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
position:absolute;
left:15px;
top:13px;
border:none;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
position:absolute;
font-size:36px;
top:18px;
left:18px;
color:#6d954e;
opacity:0;
text-shadow:0px 1px 1px rgba(255,255,255,0.4);
-webkit-transition:opacity 0.2s ease-in-out;
-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}
.a-btn-text{
padding-top:5px;
display:block;
font-size:30px;
text-shadow:0px -1px 1px #80ab5d;
}
.a-btn-text small{
display:block;
font-size:11px;
letter-spacing:1px;
}
.a-btn-icon-right{
position:absolute;
right:0px;
top:0px;
height:100%;
width:80px;
border-left:1px solid #80ab5d;
-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
width:38px;
height:38px;
opacity:0.7;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
position:absolute;
left:50%;
top:50%;
margin:-20px 0px 0px -20px;
border:1px solid rgba(0,0,0,0.5);
background:#4e5c50 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG53bxqVhQllASnQEiaxmYAetD4L7keQh2F1zD57B6iTjOpifnLbQVGWK86lZUlnEHHPu4JCv8JNn65pEs93UpnS8aQonRGhVVYgy-tTIKeUEy3zQzq_Xm2vt8E5hNgw728cIo0hq9uLkD/s1600/arrow_down_black.png) no-repeat center center;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.a-btn:hover{
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}

.a-btn img{ margin-top:-15px;}

.a-btn:hover img{
-webkit-transform:scale(10);
-moz-transform:scale(10);
-ms-transform:scale(10);
-o-transform:scale(10);
transform:scale(10);
opacity:0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
opacity:1;
}
.a-btn:active{
position:relative;
top:1px;
background:#80ab5d;
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
border-color:#a9db80;
}
.a-btn:active .a-btn-icon-right span{
-webkit-transform:scale(1.4);
-moz-transform:scale(1.4);
-ms-transform:scale(1.4);
-o-transform:scale(1.4);
transform:scale(1.4);
}

3. Lưu mẫu lại
4. Lựa chọn bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript
5. Dán code dưới đây vào tiện ích vừa thêm

$9

Available on the Apple App Store



$75

Available on the Apple App Store



$25

Available on the Apple App Store



$100

Available on the Apple Download

Lưu lại và xem kết quả nhé :)

Read more…

Bài viết liên quan cho blogger là 1 tiện ích không thể thiếu trong mỗi Blog. Nó giúp lượt View Blog của bạn tăng lên và hiệu quả giữ chân độc giả trên blog của bạn.
Với mẫu bài viết liên quan dạng hiệu ứng thu nhỏ này giúp giao diện blog không bị chiếm quá nhiều dành cho phần bài viết liên quan.

Demo Blog: Ảnh bìa cho Facebook
- Hướng dẫn thủ thuật:
1. Đăng nhập vào bảng điều khiển blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
2. (Ctrl + F)Tìm tới  ]]> và dán code dưới đây ngay trên nó

ul#related-posts{font:14px Oswald;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:4px solid #bbb;display:block;height:95px;position:relative;width:90px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:89px;line-height:16px;position:absolute;width:84px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisdmII4mToSfhWFYAiHarriIOFOapgHREDAuAjICG1YWQitJ57L53tIzkj1JxkcpFUO2BKI4JQGg26F4V-BTwFA7igbEQSoZ490xUZ3kjePj51ULuXQC90ZUO9bUCTQPcoeTaj6qOj9tfY/s1600/transparant-itviet360-com.png);display:block!important;}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);border:4px solid #666}

3. Tìm đến 1 trong 4 tag sau:
Tag 1:



Labels

• admin-tools (1)
• Anh bia Facebook (37)
• Anh bia FB (37)
• anh dong nho xinh (4)
• anh-bia-facebook (37)
• anh-dep (10)
• anh-tinh-yeu (2)
• Bảo Mật Internet (4)
• cau-noi-vui (1)
• cham-ngon-danh-ngon (2)
• cuoc song (16)
• Dich-vu (3)
• Download (99)
• Facebook (27)
• font-chu (1)
• Game (10)
• HD 1080p (4)
• HD 720p (5)
• hinh hai huoc (15)
• hinh-hai-huoc (15)
• html-css (21)
• javascript (15)
• Key+Crack (6)
• Kien thuc (50)
• Kien-thuc (61)
• kinh-nghiem (4)
• kinh-nghiem-SEO (31)
• ky-nang-viec-lam (3)
• linh ta linh tinh (3)
• linux (5)
• lớp 12C4 (1)
• ltC (19)
• mạng (1)
• mang-can-ban (6)
• N-Linux (11)
• N-Windows (3)
• Network (27)
• nhac-Trinh (1)
• phan-mem-SEO (1)
• Phim Download (8)
• router Cisco (10)
• SEO (48)
• soft-mobile (12)
• softwares (61)
• Source code (37)
• Su-dung-internet (24)
• su-dung-softwares (26)
• tai-lieu (9)
• Tâm sự (2)
• tho-vui (20)
• Thu thuat (117)
• Thủ Thuật Blogger (6)
• Thu thuat blogspot (114)
• Thủ Thuật Internet (9)
• Thủ Thuật Máy Tính (7)
• thu-gian (50)
• thu-thuat (123)
• thu-thuat-blogger (113)
• thuat-ngu-trong-SEO (10)
• Tin hoc can ban (17)
• Tin hoc van phong (18)
• tin-cong-nghe (11)
• Tin-hoc-van-phong (18)
• truyện kể (4)
• truyen-cuoi (10)
• tu-hoc-SEO (15)
• Ứng Dụng (6)
• Video (2)
• vui-buồn IT (1)
• windows (13)
• xe-zongshen (1)