Em này tên là Na na 1990, girlxinh TPHCM – gợi cảm quyến rũ đến từng chi tiết. Nào cùng ngắm nhé các bạn trẻ.Buổi tối cuối tuần vui vẻ,chúc các bạn có những ngày nghỉ lễ vui vẻ bên gia đình và người mình yêu thương nhé nhé. ^^
Thread Comment đẹp phân cấp với CSS cho blogspot
Posted by Unknown on 06:31
Như các bạn đã biết hiện nay Blogspot đã cho ra Threaded comments mới, tuy nhiên giao diện còn khá đơn giản, nhìn không đẹp mắt lắm. Do vậy hôm đây mình sẽ giới thiệu cho các bạn Threaded comments đã được mình tùy biến trông đẹp hơn,bắt mắt hơn và đặc biệt là có thể phân bao nhiêu cấp tùy ý bạn.Đây cũng là yêu cầu của bạn Hồng Phi Lê .
1.Vào blogger > Mẫu > Chỉnh sửa HTML
2.CTR+F Tìm đoạn code sau :
<b:include data='post' name='comments'/>3.Thay toàn bộ đoạn code tìm được bằng code bên dưới ( có 4 lần thay hoặc nhiều hơn tùy templete )
<b:include data='post' name='threaded_comments'/>4.Lưu lại template
Tùy chỉnh Threaded Comments của blogger
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Dán code bên dưới vào trước ]]></b:skin>
#comments h4{margin:15px 0 15px;line-height:1.4em;text-transform:capitalize;font-size:160%;box-shadow:0 1px 3px 0 #B5B5B5;-moz-box-shadow:0 1px 3px 0 #b5b5b5;-webkit-box-shadow:0 1px 3px 0 #B5B5B5;border:1px solid #DDD;border-bottom:4px solid #0F83A0;overflow:hidden;position:relative}- Đoạn code màu vàng chính là phần xác định phân cấp cho thread comment.
.comments .comments-content .comment,.comments .comments-content .comment:first-child,.comments .comments-content .comment:last-child{padding:5px;border:1px solid #CFCFCF;margin:0 0 5px;box-shadow:0 1px 3px 0 #B5B5B5;-moz-box-shadow:0 1px 3px 0 #b5b5b5;-webkit-box-shadow:0 1px 3px 0 #B5B5B5;border:1px solid #DDD;border-bottom:4px solid #0F83A0;overflow:hidden;position:relative}
.comments .avatar-image-container{max-height:50px;width:45px;height:45px;padding:2px;border:1px solid #BDBDBD}
.comments .avatar-image-container img{max-width:50px;width:100%}
.comments .comment-block{margin-left:52px;}
.comments .inline-thread .avatar-image-container{float:right;width:40px;height:40px}
.comments .inline-thread .comment-block{margin:0 50px 0 0}
.comments .comments-content .comment-header{padding:0 0 3px;border-bottom:1px solid #D8D8D8}
.comments .comments-content .comment-replies{margin:10px 5px 0}
.comments .comments-content .inline-thread .comment-content{padding:0 10px}
.comments .comments-content .icon.blog-author{position:absolute;right:10px;background-color:#5390ad;width:65px;height:20px;border-radius:0 0 3px 3px;top:-7px}
.comments .comments-content .icon.blog-author::before{content:"Admin";color:white;position:absolute;left:12px;top:3px}
.comments .comments-content .inline-thread .comment:first-child{margin-top:8px}
#comments-block{margin:1em 0 1.5em;line-height:1.6em}
#comments-block .comment-author{margin:.5em 0}
#comments-block .comment-body{margin:.25em 0 0}
#comments-block .comment-footer{margin:-.25em 0 2em;line-height:1.4em;text-transform:uppercase;letter-spacing:.1em}
#comments-block .comment-body p{margin:0 0 .75em}
.deleted-comment{font-style:italic;color:gray}
.comment-form{max-width:100%}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment .comment-block {
margin-left:52px;
}
.comments .comment-thread.inline-thread .comment {
margin:0px 0px 5px 30%; /* Level 6+ */
background-color:#f4f4f4;
border:1px solid #ddd;
padding:10px 15px;
color:#333;
}
.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;} /* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;} /* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;} /* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;} /* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%; } /* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%; } /* Level 1 */
#comments .avatar-image-container img{border:2}
.comment-thread{color:#111}
.comment-thread a{color:#2F4F4F}
.comment-thread ol{margin:0 0 20px}
- Nếu bạn đang sử dụng một trong các style giao diện Thread Comment(Duy Pham) thì chỉ cần thêm nguyên đoạn mã màu vàng trên vào trước thẻ ]]></b:skin> trong template.
Bước 3: Save lại và thử comments xem có pro hơn trước không nhé!
Di chuyển ghi chú nhận xét theo khung nhận xét khi reply đây là thủ thuật của bác Duy Pham.
Các bước thực hiện.
Bước 1: Tìm trong template thẻ
<b:includable id='threaded-comment-form' var='post'>. 
Mã hàm
threaded-comment-form trước khi thay thếTại hàm
threaded-comment-form này thay thế thẻ <b:else/> bằng đoạn mã dưới đây: <b:else/>
<div id='threaded-comment-form'>Thay thế thẻ
</b:if> bằng đoạn mã dưới đây: </div>
</b:if>
Mã hàm
threaded-comment-form sau khi thay thếBước 2: Thay thế đoạn mã
document.getElementById(domId).insertBefore(replybox, null);trong template của bạn bằng đoạn mã dưới đây: document.getElementById(domId).insertBefore(document.getElementById('threaded-comment-form'), null);Các bước trên là nhóm những thành phần cần di chuyển theo khung nhận xét vào cùng thẻ<div>vớiidlà threaded-comment-form và khai báo lại hàminsertBefore. Thủ thuật đã xong!
- Trên đây là các bước cơ bản các bạn có thể tùy chỉnh css theo phong cách riêng của bạn.
- Để tránh bị vỡ khung comment các bạn nên xóa tất cả những đoạn css có dạng #comments...đi,chỉ để lại đoạn mình hướng dẫn thôi.
- Bạn nên sao lưu Template để tránh trường hợp bị lỗi,bằng cách nhấp vào liên kết Mẫu => Sao lưu/Khôi phục => Tải về .
Chúc các bạn thành công.
Tạo khung liên kết blog theo yêu cầu
Posted by Unknown on 04:57
Theo yêu cầu của bạn World APK mình sẽ hướng dẫn bạn cách làm khung liên kết blog, giống blog của mình đang dùng.Thủ thuật này cũng đơn giản thôi là sử dụng css có một số hiệu ứng như to chữ ,hiển thị thanh cuộn...
Tạo một widget HTML/Javascript mới tại vị trí thích hợp sau đó bạn dán đoạn code bên dưới vào phần nội dung rồi lưu lại.
<style type="text/css">
#chinhtrucblog{margin:0; padding: 0; height:290px;overflow: auto; background:url(Link hinh) background:#FFFF no-repeat bottom right; font-weight:bold ;}
#chinhtrucblog p {margin:0; padding:2px 10px}
.favicon {width:16px; height:15px; margin-right:8px}
20px 0}
.tochu
{
color: red;
}
.tochu:hover
{
color:red;
padding: 0px 0px 0px 16px;
}
</style>
<div id="chinhtrucblog">
<p>
<a href="http://chinhtrucblog.blogspot.com/" target="_blank" title="Chính Trực Blog|Giải trí|Game|Thủ thuật|Software for Mobile,PC| Drivers | Tips | Antivirus | Ebooks | Graphic|" class="tochu"><img src="http://chinhtrucblog.blogspot.com/favicon.ico" class="favicon" align="center"/>Chính Trực Blog</a></p>
</div>
- Bạn thay những nơi tô đậm thành địa chỉ blog của bạn.
- Có thể tùy chỉnh css theo ý của bạn.
- Để làm đổi màu thanh cuộn màu xanh giống của mình thì bạn thêm đoạn css sau vào ]]></b:skin> và dán trước nó code bên dưới :
::-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;
}
Chúc bạn thành công với thủ thuật nhỏ này.
