Hôm nay, blogviet xin chia sẻ một thử thuật của George – một trong những blogger chuyên có các thủ thuật Thesis mà mình rất thích. Thủ thuật này khá đặc biệt và chắc chắn nhiều bạn đang sử dụng Thesis theme sẽ thích. Để cho các bạn dễ hiểu thì mình xin chia sẻ hình sau để các bạn biết thực sự thủ thuật này như thế nào, hình thù của nó ra sao:
Image credit: serradinho.com
Như vậy các bạn biết điều mà mình muốn chia sẻ là gì rồi đúng không? Xin đi ngay vào thủ thuật này.
Vì thủ thuật này tác động đến teaser post nên để nó hiện tốt thì bạn cần vào trong Thesis Options và chọn Home Page Display, bạn chọn số bài viết hiển thị là 0. Sau đó, bạn vào Design Options, vào mục Teaser, sau đó chọn Teaser Display Options, bạn sẽ thấy nút “link to full article” đã được chọn. Các bạn không chọn rồi lưu lại.
Bây giờ bạn chèn đoạn code sau vào file custom.css:
.custom .teaser {width: 100%; margin-top: 0.25em; padding-top: 0.25em; text-align: justify;}
.custom .teasers_box {padding-top: 0; padding-bottom:0; border-top: 0;}
.custom #teaserlinkscontainer {margin-top:0px;}
.custom #teasermenu {height: 30px;}
.custom #teasermenu , .teasermenu ul {padding: 0; margin: 0; list-style: none; line-height: 1; border-width: 0.5em 0.5em 0.5em 0.5em;}
.custom #teasermenu ul {float: left; list-style: none; margin: 0px 0px 0px 0px; padding: 0px;}
.custom #teasermenu li {float: left; list-style: none; margin: 0px; padding: 0px;}
.custom #teasermenu ul li {list-style: none; margin: 0px; padding: 0px;}
.custom #teasermenu a, .custom #teasermenu li ul {border-color: #FFFFFF;}
.custom #teasermenu li a, .custom #teasermenu li a:link {color: #FFFFFF; background: #444343; display: block; font-weight: bold; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; text-decoration: none; font-size: 13px; font-family: Arial, Helvetica, sans-serif; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}
.custom #teasermenu li a:hover, {color: #FFFFFF; background: #7BAAD9; display: block; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; text-decoration: none; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px;}
.custom #teaserempty {width: 100%; margin-top: 0.5em; margin-bottom: 0.5em;}
.custom #teaserline {width: 100%; margin-top: 0.5em; margin-bottom: 0.5em; border-top: 1px solid #D0D0D0;}
.custom #teasermenu li p,{color: #000000; background: #D0D0D0; display: block; width: 100%}
Tiếp đó bạn chèn 2 đoạn code sau vào file custom_functions.php:
Code 1: Code này giúp thay đổi độ dài đoạn tóm tắt sẽ hiển thị trên trang chủ (75), bạn có thể tăng hoặc giảm theo ý muốn:
add_filter(‘excerpt_length’, ‘my_excerpt_length’);
add_filter(‘the_excerpt’, ‘no_ellipsis’);
function my_excerpt_length($length) { return 75; }
function no_ellipsis($text) { return str_replace(‘[...]‘, ‘…..’, $text); }
Code 2: Code này giúp các bạn thêm các nút như hình minh họa ở trên:
add_action(‘thesis_hook_after_teaser’,'teaser_post_menu_links’);
function teaser_post_menu_links() {
if (!is_single() && !is_page()){ ?>
<div id="">
<div id="teaserempty"></div>
<div id="teaserlinkscontainer">
<ul id="teasermenu">
<li><a href="<?php the_permalink(); ?>#comments" title="<?php comments_number(__(’0 Góp ý’,'thesis’), __(’1 Góp ý’,'thesis’), __(‘% Góp ý’,'thesis’)); ?> on <?php the_title(); ?>" rel="nofollow"><?php comments_number(__(’0 Góp ý’,'thesis’), __(’1 Comment’,'thesis’), __(‘% Góp ý’,'thesis’)); ?></a></li>
<li><a href="<?php the_permalink(); ?>#respond" title="Add your opinion on <?php the_title(); ?>" rel="nofollow">Đăng góp ý của bạn</a></li>
<li><a href="<?php the_permalink(); ?>" title="Đọc tiếp: <?php the_title(); ?>" rel="bookmark">Continue Reading</a></li>
<li><p></p></li>
</ul>
</div>
<div id="teaserline"></div>
</div>
<?php } }
Hy vọng thủ thuật này sẽ giúp cho các bạn ít nhiều. Chúc thành công!
About Tran Tinh
Em thấy cái này bên anh Minh Mèo :D Khi nào có Thesis em làm ngay ;))
.-= Naruto_thf90´s last blog ..Theme Giáng Sinh dành cho Windows 7 =-.
Anh đang nghĩ cách xử lí, để nguyên như này làm trang index load rất lâu
.-= Minh Mèo´s last blog ..Bằng chứng nhận séc (check) của Adbrite =-.
Với lại hình như blog bạn background để fixed, nên khi quá nhiều images, chẳng hạn như ads, khi kéo thanh trượt Ken thấy hơi dựt! Mình duyệt trên FF!
.-= Ken Design´s last blog ..89 Typadelic Fonts Collection =-.
Cái này thì mình cũng cảm thấy, vì thế mà mình hạn chế tối đa các thủ thuật để cho nó lành!
Đúng là để sử dụng tốt Thesis cần phải có cái đầu và am hiểu CSS
.-= ngocthachez´s last blog ..Google Blogger ( Blogspot ) tích hợp Amazon Associates =-.
Cái này thì không phải Thesis mà bất kỳ theme nào cũng cần em ah
Tớ làm nhưng bị lỗi… Sau khi làm xong thì các Gravatar nằm bên cạnh title biến mất… và các ảnh chèn nằm trong teaser đều bị crop về kích thước 66×66. và bị số lỗi khác nữa….
Link ảnh:
http://www.tipsviet.com/wp-content/uploads/thesis.JPG
Cái này thì mình chưa hiểu rõ ngọn ngành nhưng nếu lỗi thì cách đơn giản là không nên tham qua. Hoặc là bạn tăng excerpt từ 75 lên 100 xem sao, có thể do hình to quá nó đẩy gravatar nên gây ra lỗi đó đấy
Dạo này Thesis lên ngôi quá
.-= Vút Bay.net´s last blog ..Phần mềm hỗ trợ mạch JDM Extreme =-.
Dạo này là ở VN thôi, nó lên ngôi vương trên thế giới lâu rồi, em đang đợi V2.0 của nó ra đời xem sao
em cũng đang mong bản 2.0 đây
.-= Mr.Bot´s last blog ..Poker King [2009][DVDRip-XviD-GAYGAY] =-.
Thank Tỉnh
.-= anh3ngơ´s last blog ..Vi Cầm xinh đẹp hơn sau khi kết hôn =-.
Cái này dùng cho page magazine khá hay! Thanks anh Tĩnh!
.-= Ken Design´s last blog ..89 Typadelic Fonts Collection =-.
Hy vọng nó giúp được bạn ít nhiều
Hôm nào Tỉnh chỉ cho vài đường cơ bản để tạo được cái hộp seârch đẹp như của Tỉnh nhé
.-= anh3ngơ´s last blog ..Sắm Laptop xịn để đọc truyện tranh +18 =-.
Anh Tỉnh dùng Google Custom Search, Minh có 1 bài hướng dẫn cài và custom cho đẹp với blog, bạn có thể đọc ở đây :)
http://minhmeo.info/wordpress/huong-dan-cai-dat-google-custom-search-vao-wordpress.html
.-= Minh Mèo´s last blog ..Hướng dẫn add Google Translator vào blog =-.
Bài của Minh cũng hay nhưng khi Google thêm template mới thì chỉ cần 1 click là có ngay tại google.com/webelements hoặc xem thêm tại đây: http://blogviet.info/thuthuat/google-web-elements-vua-tim-vua-kiem-tien.html
Chúc bác thành công
cái này hay quá, không biết có dùng được cho blogspot không nhỉ ?
.-= xem tivi online nhanh nhất việt nam´s last blog ..Kênh ITV =-.
Chỉ có WordPress dùng theme Thesis thôi bạn :)
.-= Minh Mèo´s last blog ..Name.com giảm giá domain mừng Giáng Sinh =-.
Bạn @Minh đã trả lời rồi bạn ah
làng nhàng quá
Bạn không dùng Thesis thì quan tâm làm gì, thủ thuật chỉ dành cho thesis thôi mà
ok
.-= PLnet´s last blog ..Những Bức Ảnh Của Tớ Nè =-.
Mình nghĩ nên cân nhắc khi sử dụng vì có thể sẽ làm giảm tốc độ load của web!
Ngoài ra khi can thiệp quá nhiều thì hay bị xảy ra xung đột :D
Cảm ơn bác, vừa chui vô minhmeo sang đây lại có tut thế mà giwof mới đọc