BO GÓC CHO CÁC TIỆN ÍCH CỦA BẠN (BLOGGER , HTML/JAVARCRISP)

[FD's BlOg] - Một cách khá phổ biến cho việc trang trí các widget ở sidebar là bo các góc. Ở bài viết này mình sẽ giới thiệu một thủ thuật nhỏ để bo góc cho header của widget với ảnh nền, và trang trí 1 chút cho khung hiển thị nội dung với việc tạo đường viền.

Hình ảnh minh họa :

Ở trong hình minh họa ta thấy có 2 phần cần phải chỉnh sửa, đó là phần header và content của widget, do đó ta sẽ tìm trong code CSS của template 2 class sau: ".sidebar h2" và ".sidebar .widget" .(hoặc class tương tự)

☼ Ta bắt đầu với thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Tìm đọan code CSS sau (hoặc tương tự):

.sidebar h2 {
margin:0;
padding:0;
color:$sidebarHeaderColor;
font: $headerFont;
}

- Thay thế nó bằng code bên dưới:

.sidebar h2 {
background: #CCCBB9 url(http://img133.imageshack.us/img133/3540/h2bgwn2.png) top center no-repeat;
padding: 5px 10px;
margin-bottom: 0;
color: #333;
}

- Lưu ý : bạn nên download ảnh nền (code màu xanh) trong code về, và thay đổi màu sắc cũng như độ rộng để phù hợp với blog của bạn. Việc này khá đơn giản với các phần mềm đồ họa.

5. Tiếp tục tìm đọan code như bên dưới (hoặc tương tự):

.sidebar .widget {
font-size:86%;
margin-top:6px;
margin-$endSide:0;
margin-bottom:12px;
margin-$startSide:0;
padding:0;
line-height: 1.4em;
}

- Và thay thế nó bằng code như bên dưới :

.sidebar .widget {
font-size:86%;
border-left: 3px solid #CCCBB9;
border-right: 3px solid #CCCBB9;
border-bottom: 3px solid #e0d5c2;
padding: 10px;
line-height: 1.4em;
}

- các code màu xanh chính là code tạo đường viền cho khung hiển thị nội dung của widget.

6. Save template.

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

cac mau dep cho Blogger

Nếu đang sử dụng nền tảng Blogspot để viết blog hẳn bạn đã từng hoặc đang gặp vấn đề về việc lựa chọn mộtTemplate (hay Theme) thích hợp cho trang web của mình. Đối các Blog Platform khác như Wordpress hayJoomla, ngoài các theme được chia sẻ miễn phí, bạn hoàn toàn có thể mua các theme Premium với thiết kế chuyên nghiệp đúng nghĩa, hoặc thậm chí bạn có thể đặt hàng các designer thiết kế riêng cho mình một mẫu theme "không đụng hàng".


Trong khi đó, các templates của Blogger lại hoàn toàn miễn phí với số lượng cực kì lớn khiến nhiều người bối rối trong việc lựa chọn, và cũng chính vì free nên bạn khó có thể đánh giá được chất lượng bên trong của một Blogger Template. Lí do mà Blogger không phải là mảnh đất màu mỡ của các web designer chuyên nghiệp chính là vì mã nguồn đóng của nó, rất hạn chế trong việc can thiệp vào SEO và phát triển các tiện ích mở rộng. Mọi thứ đều nằm trong quyền sinh sát của Google. Tuy vậy chúng ta vẫn dùng Blogger, lí do thì ai cũng biết rồi: free và dễ tùy biến.

Trong bài viết này, Noct muốn chia sẻ một ít kinh nghiệm trong việc lựa chọn một template cho blog của bạn, một số ý kiến có thể hơi chủ quan:

Bạn có thể tự thiết kế được template không ?
Template do chính bạn làm ra là phù hợp nhất, bởi chỉ có bạn mới hiểu rõ về blog của mình và chắc chắn là bạn muốn nó phải thật đẹp, thật hoàn hảo. Tuy vậy, việc tự thiết kế template không chỉ cần khiếu thẩm mỹ mà còn đòi hỏi một kiến thức nhất định về Blogspot, về CSS,HTML và biết sử dụng thành thạo ít nhất một phần mềm đồ họa, ví dụ như Photoshop. Nếu bạn chưa sẵn sàng trong việc tự thiết kế template cho riêng mình thì hãy cân nhắc việc lựa chọn một template do người khác thiết kế.

Bạn viết blog về vấn đề gì ?
Phải xác định được nội dung chủ đạo của blog thì bạn mới dễ dàng tìm được template phù hợp. Một blog nhật kí cá nhân thì không nên sử dụng các template dạng báo chí và ngược lại. Một khi đã định rõ được nội dung cần viết thì cũng dễ hình dung được bố cục phù hợp cho template. Ví dụ, blog về tranh ảnh thì chỉ nên có 2 cột, và phần đăng bài phải đủ rộng để hiển thị ảnh một cách đầy đủ

Bạn muốn template trông phải như thế nào ?
Tùy vào sở thích và gu thẩm mỹ của mỗi người mà chọn template thích hợp. Ví dụ, bạn muốn nó trông sáng sủa và màu sắc chủ đạo là màu xanh chẳng hạn. Ngoài ra, có thể bạn muốn template đó phải có một cái footer gồm 3 cột tiện ích và phải có một cái Slider ở trên cùng để thu hút độc giả .v.v.. Các yếu tố này khá quan trọng trong việc lựa chọn template, bởi nếu bạn không quan tâm tới chúng mà chọn bừa một template để rồi cảm thấy không phù hợp với sở thích và nội dung thì quả là phí công vô ích.

Một vài lưu ý khác
Khi đã chọn được template ưng ý thì chưa nên vội sử dụng nó ngay, hãy thử nghiệm nó trên một blog phụ để đảm bảo rằng mọi thứ đều ổn. Việc đầu tiên nên làm là mở blog thử nghiệm bằng tất cả các trình duyệt phổ biến (Firefox, Chrome, IE...) để xem có xung đột gì xảy ra hay không ? Nếu trên Firefox, template hiển thị kiểu này nhưng trên IE lại hiển thị kiểu khác thì quả là tai hại. Nếu đủ khả năng, hãy tự fix các lỗi đó còn không thì nên chọn một template khác ít xung đột hơn. Cái thứ hai cần chú ý là tốc độ trang web khi dùng template đó, nhiều template bị chèn quá nhiều script hoặc code viết chưa chuẩn dẫn đến tốc độ trang web trở nên chậm chạp khiến ảnh hưởng đến traffic và SEO. Bạn có thể truy cập địa chỉgtmetrix.com để kiểm tra tốc độ blog thử nghiệm, gtmetrix cũng đưa ra nhiều lời khuyên hữu ích để cải thiện tốc độ blog. Một vấn đề cần quan tâm nữa là khả năng SEO của template, đây là yếu tố rất khó có thể đánh giá, nhất là đối với Blogspot. Tuy vậy chúng ta vẫn dễ dàng cải thiện SEO cho template bằng nhiều thủ thuật được chia sẻ trên mạng.


Tiêu chí lựa chọn template của mình là: bố cục đơn giản, màu sắc sáng sủa, đẹp, nhiều hiệu ứng bắt mắt nhưng vẫn đảm bảo tốc độ load nhanh. Hy vọng bài viết này có ích cho bạn trong việc tìm kiếm một template thích hợp nhất với mục đích.

Một số trang web chuyên cung cấp Template cho Blogger:
-   http://btemplates.com (kho template đồ sộ nhất)
-   http://www.premiumbloggertemplates.com (nhiều template "độc")
-  http://besttheme.net (cung cấp nhiều template cực đẹp được convert từ wordpress)
-   http://www.deluxetemplates.net (thư viện template minimalist)
-   http://www.zoomtemplate.com

Viền động cực hot trang trí blog yahoo

Chắc ai cũng thấy blog mình có cái đường viền nhìn đơn giản, nếu ai muốn là blog mình đẹp hơn thì theo hướng dẫn này nhé!

Đây là các đường viền cây tre, viền động bạn nào thích thì dùng nhé!                                                                                                                                                                                                                                Để lấy link thay vào code trên thì bạn phải có link, cách lấy link:      Đối với Internet Explore thì bạn bấm chuột phải vào hình này và sau đó click vàoproperties  => sau đó hiện lên một cái khung bạn thấy ô Address(URL) không và chỉ cần copy link đó và thay vào code này.      Còn đối với những ai dùng Firefox thì click chuột phải sau đó vào Copy image location và sau đó chỉ cần paste vào code này thuj. CSS: #friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:transparent url(Thay link viền trên) no-repeat right bottom;} #friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent url(Thay Link Viền bên Fải) no-repeat left bottom;} #friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc {background:transparent url(Thay Link nút bên trái fía trên) repeat-y right top;} #friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent url(Thay link ảnh Viền bên trái) repeat-y ;} #friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent url(Thay Link ảnh Viền Dưới) no-repeat right top;} #friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent url(Thay Link ảnh nút trái fía dưới) no-repeat left top;} #friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:transparent url(Ngang Tren) repeat-x right bottom;} #friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent url(Goc tren ben trai) no-repeat left bottom;} #friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc {background:transparent url(Doc fai) repeat-y right top;} #friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent url(doc trai) repeat-y left top;} #friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent url(Ngang Duoi) repeat right top;} #friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent url(Goc duoi ben trai) no-repeat left top;}  Cho đoạn code này vào khung css bạn nhé. Cách thực hiện: + Click Thiết Kế --> Theme . + Chọn Chế Độ Tự Chỉnh Sửa --> Tiếp + Bản Thiết Kế hiện ra, bạn rê chuột kéo thanh trượt đến phần CSS phía dưới nhé ! + Paste đoạn code lúc nãy đã thay link hình vào khung CSS --> Xong Theo Thuthuatblog360plus

MỘT SỐ TRANG WEB CUNG CẤP THEME CHO BLOGGER

Blogspot Templates - Một tổng hợp templates của Blogger.

Blogger Templates (Classic) - Nhiều Blogger templates, nhiều nhất vẫn là các template thuộc “classic”.

Free Blogger Templates, High Quality Blogger Templates - Một Blogger Templates được thiết kế dựa trên những chuẩn về thiết kế template với Blogger.com.

Free Templates - Nhiều templates cho Blogger - miễn phí.

Shellen Blogger Templates - Dành cho các blogger tao nhã - Blogger.

PsycHo - Kết xuất tự động các templates cho blogger.

Pannasmontana Templates - Các mẫu thiết kế blog.

The Style Contest - Một vài templates rất tuyệt - chủ yến được thiết kế cho Blogger.

Blogger Templates- Carl’s Journey - Blogger templates.

Free directory of blog templates and layouts for Blogger - Một tập hợp các thư mục templates - liên kết đã nói liên tất cả.

Free Blogger Templates and Designs - Một nhà thiết kế chuyên nghiệp, mầu Blogger themes.

Daceblog- Blogger Templates - Một nhà thiết kế chuyên nghiệp, mầu Blogger themes.

Tips for Blog Templates and Blog Designs in Photoshop - Những kỷ thuật cho phép bạn và gới tiệu những hướng dẫn thủ thuật thiết kế ttemplate dùng photoshop.

Blogger Templates Isnaini.com - Một tập hợp khác về Blogger templates, công cụ và hướng dẫn

Nguồn bài: http://www.diendanvungtau.com/tintonghop/read.php?id=15058#ixzz1O9J6ThHZ