Teen Giao Thanh

Chèn ảnh luôn hiện ở phía trước mặt BlOg của bạn

06:52 |

[FD's BlOg] - Khi thực hiện điều này các hình ảnh (được chọn) sẽ luôn luôn xuất hiện ở phía trước mặt của blog của bạn, hình ảnh sẽ luôn luôn xuất hiện ngay cả khi người xem di chuyển chuột (lên, xuống) trong blog của bạn.

Ứng dụng phổ biến của việc này là tạo 1 nút nhảy lên đầu trang (giúp cho việc di chuyển lên trên đầu trang). Như blog của mình (xem ảnh).
Xem hình minh họa:

Để làm điều này, các bạn thực hiện các bước sau: (nên save template lại trước khi làm)
1. Đăng nhập vào BlOg của mình.
2. Vào Chỉnh Code HTML
3. Nhấp vào Mở Rộng Tiện Ích
4. Chèn đọan code sau ngay trên dòng ]></b:skin> :

#top_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Trong đó:

_position:absolute;
bottom:5px;
left:5px;

là vị trí bạn muốn hiển thị trong blog, trong trường hợp này là phía trái bên dưới.

- Nếu bạn muốn hiển thị chỗ khác có thể tham khảo code bên dưới

Phía dưới bên phải
bottom:5px;
right:5px;

Phía trên bên phải
top:5px;
right:5px;

Phía trên bên trái
top:5px;
left:5px;

Ngòai ra để hiển thị tại vị trí bất kì bạn chọn code :
top:5px;
left:5px;
rồi thay đổi trị số px. Nếu màn hình có độ phân giải 1024x768 pixel, muốn hiển thị ngay chính giữa thì chúng ta có code sau:
top:512px;
left:384px;

5. Tiếp theo chèn tiếp đọan code bên dưới ngay trên thẻ đóng </body>

6. Save template. Xong

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

04:16 |

Modify Comment Form

[FD's BlOg] - Bài viết hôm nay mình sẽ đề cập việc Modify lại Form của các bài comment. Các bạn nhớ rằng, mỗi template có code khác nhau, nhưng nhìn chung thì chúng tương tự nhau. Bài viết hôm nay sẽ liên quan đến code của các theme rất nhiều, việc chúng không hòan tòan giống nhau rất khó cho việc tìm code và thay thế chúng. Trong bài này mình sẽ dùng code của theme Minima, bởi thế code theme của bạn nào là Minima hoặc theme khác có code hòan tòan tương tự (có các ID và Class giống nhau trong CSS) với theme Minima thì hãy làm việc này. Tuy nhiên những ai rành về CSS thì có thể tham khảo code để tự modify cũng được.

Sau đây là các bước thực hiện:
1. Đăng nhập vào blog
2. Vào Layout
3. Vào Edit HTML (Chỉnh sửa HTML)
4. Chọn Expand Template Widget () (Mở rộng mẫu tiện ích)

5. Save template lại (nên làm việc này để đảm bảo, bởi 1 khi gặp sự cố sẽ không thể hòan trả lại template ban đầu).
6. Tìm các đọan code CSS sau :

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#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;
}

7. Thay thế chúng bằng đọan code sau:

#comments h4 {
margin:0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000;
}

#bg_commentblock {
width: 548px;
background: #ffffff;
float: left;
padding:20px;
margin:0 0 10px 0;
border:1px solid #C0C0C0;
}

#commentblock {
width: 510px;
background: #E8E8E8;
text-align:left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 2px solid #333333;
border-bottom: 1px solid #333333;
}
#commentblock ol {
list-style-type: square;
margin: 0px 0px 0px 10px;
padding: 0px 0px 10px 0px;
}
.commentdate {
font-size: 12px;
padding-left: 0px;
}
#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(http://lh4.ggpht.com/kangrohman/SMZb-VqQlYI/AAAAAAAAAOM/RpT6fNN3M88/commentgray_thumb%5B1%5D.gif?imgmax=800) no-repeat top left;
}

.commenttext-admin {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(http://lh4.ggpht.com/kangrohman/SMZb-VqQlYI/AAAAAAAAAOM/RpT6fNN3M88/commentgray_thumb%5B1%5D.gif?imgmax=800) no-repeat top left;
}

8. Tiếp theo là hiệu chỉnh phần code HTML, tìm đọan code sau :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1<data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>

<data:post.commentRangeText/>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>

<data:post.commentRangeText/>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>

9. Thay thế bằng đọan code sau:

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>

<div id='bg_commentblock'>

<h4>

Comments :

</h4>

<div id='commentblock'>

<b:if cond='data:post.numComments == 1'>1
<b:else/>
<strong><data:post.numComments/> <data:commentLabelPlural/> to “ <data:post.title/> ”</strong>
</b:if>

<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt> on <dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></span>
<dd class='commenttext'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:loop>
</dl>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>

<data:post.commentRangeText/>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>
</div>

</div>
</b:if>

10. Save template.

Nếu hòan thành, nó sẽ trông giống như thế này

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

Read more…

Blogroll

Xem nhiều trong tuần

Tổng số lượt xem trang

Teen Giao Thanh

bài đã xuất bản

thư mục bài đăng

Blogger news

Chèn ảnh luôn hiện ở phía trước mặt BlOg của bạn

Form comment - Làm cho bài comemt trông đẹp mắt hơn

Top Hot