Đặt tên các thuộc tính trong template Blogger bằng CSS Variables để chỉnh sửa trong “trình thiết kế mẫu”

admin Mar 28, 2011 16

Thông thường để điều chỉnh các thuộc tính màu sắc chữ, kích cỡ chữ, kiểu chữ, … của blog làm tại Blogger, ta thường dùng phương pháp thử: Download template -> Điều chỉnh CSS -> Upload template -> Xem thử; nếu chưa vừa ý thì lặp lại quá trình đó![ad]

Làm vậy sẽ mất nhiều thời gian và công sức. Thực tế, Blogger cho phép chúng ta tạo các biến CSS (variables) trong template và tận dụng công cụ Template Designer của nó để chỉnh các thuộc tính này và xem trước chúng ngay trong phần Dashboard mà không phải lặp lại các thao tác trên.

Bài viết này trình bày cơ bản về cách làm đó.

Ở đây chỉ lấy 1 VD: thiết lập các biến về kiểu chữ, màu sắc chữ, cỡ chữ cho toàn bộ blog; màu sắc link khi bình thường và khi rê chuột qua.

Mở template của bạn lên, tìm đến đoạn:

Nếu blog của bạn không có các thông tin về tác giả và template, thì nó chỉ có:

Chúng ta chèn ngay phía sau đoạn đó các khai báo biến như sau:

Mỗi 1 biến được đặt trong 1 thẻ Variable, gồm có các thuộc tính:

  • name: tên của biến (cần nhớ để lát nữa dùng)
  • description: mô tả của biến
  • type: loại giá trị, ở trên có 2 loại giá trị được dùng là font và color
  • default: giá trị mặc định, được dùng khi không chỉnh sửa gì
  • value: giá trị thực tế, là giá trị mà người dùng thay đổi cho phù hợp

Các biến được nhóm vào thành các nhóm nhỏ (ở trên có 2 nhóm) nhờ thẻ Group.

Để sử dụng các biến đó, chúng ta chỉ cần tham chiếu đến tên biến trong phần CSS mà thôi, VD như sau:

Biến được tham chiếu có dạng $(tên_biến), khi đó, giá trị thực của nó (trong thuộc tínhvalue đã nói ở trên) sẽ được “copy and paste” vào vị trí mà nó được tham chiếu.

Khi bạn cần chỉnh sửa giá trị của biến, thay vì phải download template rồi sửa và upload ngược lại, bạn chỉ cần vào phần Design > Template Designer > Advanced, bạn sẽ thấy danh sách các biến và giá trị của chúng ở đó, như hình dưới:

Lúc này việc chỉnh sửa còn lại rất dễ dàng: sửa và xem trực tiếp ngay phía khung dưới tới chừng nào ưng ý thì thôi.

Việc sử dụng biến này ngoài ưu điểm giúp bạn đỡ tốn công sửa template, nó còn giúp bạn sử dụng 1 biến cho nhiều mục đích, VD bạn khai báo 1 biến có kiểu font là Times, bạn có thể dùng nó cho tiêu đề blog, tiêu đề bài viết, dòng copyright, … mà không mất công phải “copy and paste” nhiều lần, và khi sửa thì sửa 1 lần cho tất cả. Rất dễ dàng phải không?

Tính năng này vốn đã có từ lâu, trước khi Blogger ra Template Designer, nhưng ít thấy ai để ý và sử dụng.

16 Comments »

  1. Sammy Mesko Mar 29, 2011 at 9:31 am - Reply

    The Truth About Commission Crusher

    Lately there has been a lot of talk about this new program that has been coming in my email inbox and being wildly talked about online right now.

    But you see, I got a sneak peak into what Commission Crusher is all about and wanted to give you my review on it.

    So what is Commission Crusher exactly?

    Commission Crusher is based on a simple marketing concept that anybody can duplicate online and never have to compete against one another.

    This method allows anyone to find profitable affiliate campaigns online and swipe them for their profits.

    The real beauty behind Commission Crusher is the software engine that drives the product titled Ad Assault.

    This amazing piece of software will allow you with a flick of a switch find tons of hot websites in any market any niche and tell you everything you need to know to get tons of traffic from these websites.

    Best of all you do not have to deal with Google, Yahoo, MSN or any of that crap.

    This method is unlike anything I have ever seen before online. … and here is the best part!

    Steve walks through every step of the process on video.

    And he hass got a great support team in place to help you with any questions you have.

    Can you get any better than that?

    So simply put, Commission Crusher works.

    It is a fantastic product.

    If you have been looking for a way to make constant money online with something that is not going to disappear tomorrow, this is it.

    Grab a copy before they sell out.

    I highly recommend you get your hands on this software now!

    GO here!

  2. how to get quicktime player Apr 3, 2011 at 2:37 pm - Reply

    I in conclusion found to create a comment on your weblog. I just wanted to say very good place. I truly take pleasure in studying your posts.

    • admin Apr 3, 2011 at 8:44 pm - Reply

      thank you

  3. free online virus removal videos Apr 10, 2011 at 11:37 am - Reply

    Wonderful information here I know this is somthing my boys will probably be intereseted in thank you for taking the time for making it obtainable to us. Im sure he and he friends will like it too

  4. pozycjonowanie stron Warszawa Apr 10, 2011 at 12:14 pm - Reply

    Hiya, i’m sure that i saw you visited my web log so i came to “return the favor”.I’m looking to discover things to improve my blog! Perhaps it’s fine to use most of your thinking!

  5. pozycjonowanie Apr 12, 2011 at 8:30 am - Reply

    I seriously appreciate this unique blog post. I’ve been looking all over just for this! Thank goodness I uncovered it on Yahoo. You’ve made my day! Thanks a lot once again.

  6. pozycjonowanie Apr 12, 2011 at 10:02 am - Reply

    I am so very happy browse this. This is the kind of guide that should be given and never the accidental misinformation that is at the other sites. Appreciate your sharing this perfect doc.

  7. pozycjonowanie stron Apr 12, 2011 at 6:48 pm - Reply

    I just couldn’t depart your web-site before suggesting that I really liked the standard information a person provide for your website visitors? Is certainly gonna be back often in order to check out brand-new articles.

  8. pozycjonowanie Apr 12, 2011 at 8:18 pm - Reply

    This is very fascinating, You’re a very skilled blogger. I have joined your rss feed and look forward to looking for more of the amazing blog post. Also, I have shared your web page in my social networks!

  9. pozycjonowanie Apr 13, 2011 at 7:58 am - Reply

    I don’t even know how I ended up here, but I believed this write-up was great. I do not know who you are however absolutely you are going to a popular tumblr if you are not by now 😉 All the best!

  10. pozycjonowanie Apr 13, 2011 at 9:31 am - Reply

    Fine blog! I truly love how it is simple on my eyes and the info are well written. I’m wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which must do the trick! Have a nice day!

  11. Giuseppe Tajima Apr 17, 2011 at 1:34 pm - Reply

    prolonged register you’ve compass

  12. pozycjonowanie Apr 17, 2011 at 6:28 pm - Reply

    Hiya, Cool post. There is a problem with your websites in internet explorer, would test this… IE still is the market leader and a big part of people will miss your superb writing because of this problem.

  13. propecia gegen Haarausfall May 31, 2011 at 7:52 pm - Reply

    A good man is hard to find. (Good men are scarce).

  14. downloadfromyoutube Jun 7, 2011 at 4:45 pm - Reply

    I love thegioinet.org , bookmarked for future reference

  15. Janel Niesborella Jun 29, 2011 at 4:58 am - Reply

    Hi there, just became aware of your blog through Google, and found that it is really informative. I am going to watch out for brussels. I’ll appreciate in case you continue this in future. A lot of persons is going to be benefited from your writing. Cheers!

Đăng Bình Luận »