Tùy chỉnh mẫu Blogger Comment - style2

Đăng bởi Admin | 18/12/13 | 0 nhận xét

Đối với một số nhà thiết kế tùy biến các mẫu bình luận Blogger là việc cần thiết nhằm thu hút khách. Sau khi một số thử nghiệm và sai sót, chúng tôi thực sự đã thành công trong việc thay đổi chính thức mã hóa CSS Blogger. Chúng tôi rất vui đã mang lại cho bạn một hướng dẫn mà thực sự sẽ cho phép bạn có một mẫu bình luận tùy chỉnh tốt hơn so với Wordpress, Typad vv...

Hãy có một cái nhìn tại một số ví dụ dưới đây:

Bây giờ Di chuột trỏ chuột của bạn vào những hình thức bình luận cho 3-4 giây để xem một cái gì đó khác nhau ! 

Chúng tôi hy vọng bạn thích khám phá mới này! Cho phép giờ học như thế nào để tùy chỉnh các blogger bình luận hình thức / hộp cho phù hợp với sở thích của bạn.

Thêm một mẫu Comment Customized vào blog của bạn

Thực hiện theo các bước sau,

1. 1. Để đi Blogger > Layout > Edit HTML
2. 2. Click vào ô " Expand Widget Templates "ở góc trên bên phải.
3. 3. Tìm kiếm các mã dưới đây:                                 (Mẹo: Nhấn Ctrl + f)

<div class='comment-form'>

     
4. Thay thế mã này với mã dưới đây:

<div id='mbt-form'>

     
5. Bây giờ Tìm kiếm ]]> </ b: skin> 6. Ngay phía trên ]]> </ b: skin> dán mã CSS bên dưới:

#mbt-form iframe{ 
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1CRZacOC7fMx24hJ_L-eNjCnZWafN1Q1KsXeLBnyLOSr9StGdPj77hfTfdju5iZRmGK1sL0slGeiOI3i27rWTWNWPakRXKn8UAg8YVAzoZdnnagWNvfKnOZEx121kYdsJeiGGMU0V278V/s400/plz-do-not-spam1.gif) no-repeat bottom right; 
border:7px solid #C7C7C7; 
padding:5px; font:normal 12pt "ms sans serif", Arial; color:#7EB2AC; width:450px; } 
#mbt-form iframe:hover{ 
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrhD3pf4pWk2S2PqsF5idHaxRQ0SOsj3WG6VxnphmVjcLx7CFsJ28axHPJuyTyE3Cex1_pZqsaPUXu9BRIv6iebC0kICQVII4IJtAg861ggONX_Izh6-jLbmktylTksEX-Q4rip9mF3h-2/s400/plz-do-not-spam2.gif) no-repeat bottom right; border:7px solid #7EB2AC; 
} 
#mbt-form a{ 
color:#7EB2AC; 
}

     
7. Lưu mẫu của bạn và xem blog của bạn để xem một liên lạc khác nhau.

Các tùy chỉnh Comment Mẫu Blogger cho phù hợp với  giao diện blog của bạn

Cho phép thảo luận tại các khu vực quan trọng trong mã CSS ở trên để giúp bạn tùy chỉnh hình thức comment Blogger của bạn theo sở thích của bạn.
Có ba lĩnh vực quan trọng, đó là:

#mbt-form iframe
#mbt-form iframe:hover
#mbt-form a

Đây là các chi tiết cho từng phần 
1. Tùy đối với chế độ Active:

#mbt-form iframe

Phần này là chịu trách nhiệm cho sự xuất hiện hoạt động của hộp bình luận khi con trỏ chuột không được bay lượn trên đó. Nó bao gồm các khách sau đây, 
- Nền : Khách sạn này là chịu trách nhiệm cho màu nền, ảnh nền và vị trí hình ảnh nền của nó ở đâu:

• # ffffff : Đây là màu nền. Bạn có thể thay đổi nó bằng cách sử dụng của chúng tôi Biểu đồ màu
• url: Đây là URL của hình nền. Tôi đã sử dụng hình ảnh em bé trong trường hợp này. Bạn có thể thay đổi hình ảnh này với bất cứ điều gì bạn muốn.
• bottom right: Điều này định vị hình ảnh nền. Tôi đặt em bé vào góc dưới bên phải. Bạn có thể định vị hình ảnh ở góc dưới bên phải hoặc phía dưới bên phải bên trái hoặc trên cùng hoặc trên cùng bên trái

- Biên giới: thuộc tính CSS này xác định kích thước biên giới / chiều rộng, phong cách và màu sắc của hộp bình luận. Tôi đã thiết lập các giá trị cho các hình thức bình luận ở chế độ hoạt động (không phải trên chuột lên),

• Kích thước biên giới (border size) là 7px,
• Phong cách biên giới (border style) là rắn (solid). Bạn có thể chọn rắn, rải rác, tiêu tan vv... Xem trang này trên phong cách biên giới
• Màu sắc biên giới (border color) để # C7C7C7. Sử dụng của chúng tôi CSS Biểu đồ màu để sử dụng một màu sắc khác nhau.

- padding: CSS này chịu trách nhiệm cho khoảng cách / khoảng cách giữa các mẫu bình luận biên giới và của vùng văn bản . Bạn có thể tăng giá trị này nếu bạn muốn để chèn một hình ảnh ở trên bên phải hoặc góc trên bên trái của hình thức. 
- font:  CSS này định nghĩa sự táo bạo, họ phông chữ và kích thước của văn bản. Tôi đã thiết lập sau đây cho văn bản "Comment as:"

• táo bạo bình thường (boldness to normal),
• kích thước (size) 12pt 
• gia đình phông chữ (font family ) "ms sans serif". Nếu trong trường hợp trình duyệt không có "ms sans serif" font sau đó tôi đã thiết lập Arial như một bản sao lưu.

- Màu: tài sản này xác định màu sắc của văn bản "Comment as:" . Biểu đồ sử dụng màu của chúng tôi để thay đổi văn bản màu. chiều rộng: bất động sản này thiết lập chiều rộng của mẫu bình luận của bạn. Bạn có thể thấy những nhận xét ​​từ blog của tôi là rộng hơn so với bình thường bởi vì tôi đã điều chỉnh chiều rộng của nó. Thiết lập chiều rộng của hình thức bình luận của bạn nhỏ hơn một chút so với chiều rộng bài viết của bạn. Bạn có thể tìm thấy chiều rộng bài viết của bạn bằng cách tìm các mã sau đây trong mẫu của bạn (Chỉnh sửa HTML)

.post

2. Tùy Đối với chế độ chuột Hover : Bây giờ cho phép thảo luận về các thuộc tính CSS cho sự xuất hiện của hình thức khi con trỏ chuột đang bay lượn trên đó.

#mbt-form iframe:hover

Nó đã gần như giải thích tương tự cho nền và biên giới như chúng ta đã thảo luận trước đó.Thiết lập hai thuộc tính CSS sẽ ảnh hưởng đến hình ảnh thứ hai chỉ xuất hiện trên chuột di chuột. 

3. Tùy biến cho các màu sắc liên kết

#mbt-form a

Phần này xác định màu sắc của hai liên kết -> " Đăng ra "và" Đăng ký qua email ". Các liên kết xuất hiện ở góc dưới cùng bên phải của mỗi mẫu Bình luận Blogger. màu : màu này đặt liên kết.Thiết lập một màu liên kết như trái ngược với màu nền.

Đó là tất cả!

Tôi hy vọng hướng dẫn này sẽ giúp đỡ rất nhiều các blogger và nhà thiết kế.
Bạn có thể xem bài hướng dẫn theo phong cách khác TẠI ĐÂY
Chúc bạn thành công !...
                                                                                      Theo: mybloggertricks.com