Cộng đồng Blogger Việt Nam
Rất vui khi bạn ghé thăm Diễn đàn Cộng đồng Blogger Việt Nam
Chúc bạn vui vẻ và tìm được thông tin mong muốn!
Hãy đăng ký thành viên để góp sức xây dựng Cộng đồng Blogger Việt Nam đoàn kết, cùng phát triển nhá!
Cộng đồng Blogger Việt Nam

Chia sẻ thủ thuật - Cùng nhau khám phá tìm hiểu và phát triển Blogger - Blogspot

Similar topics

    Latest topics

    » Mong muốn làm quen
    by LynhSan 16/5/2018, 11:26 pm

    » Template blogspot bán hàng chuẩn seo [đã tối ưu]
    by Tuan khai 18/10/2017, 7:58 am

    » [ Hỏi ] Về chỉnh sửa thanh menu ?
    by hoang4rever 18/5/2016, 10:53 pm

    » cách chỉnh sửa Menu Blogspot
    by hoang4rever 18/5/2016, 10:38 pm

    » Mong muốn làm quen mọi người trong 4rum
    by huongnguyen8393@gmail.com 5/9/2015, 5:53 pm

    » Thesic Blogspot Template (Latest version)
    by nguyendang1208 20/7/2015, 9:43 am

    » Zero Gravity Blogger Template
    by nguyendang1208 20/7/2015, 9:40 am

    » Chia sẻ DVTechPro - Template chuẩn SEO cho Blogger
    by Admin 3/7/2015, 8:39 am

    » Nhờ các bạn đánh giá Template!
    by Thanh Vân 27/5/2015, 11:44 pm

    » Làm quen Kết bạn
    by Phương Hậu 13/5/2015, 5:30 pm

    » Sửa lỗi ảnh blogspot không hiển thị do bị chặn
    by Admin 3/4/2015, 9:13 am

    » Tuyển nhân viên làm việc bán thời gian
    by Admin 30/3/2015, 11:14 pm

    » cách thêm cloud zoom hoặc magic zoom cho blogspot?
    by Admin 30/3/2015, 11:11 pm

    » blog phải đặt www đứng trước mới vào được (giúp em với)
    by Admin 30/3/2015, 11:00 pm

    » 7 bước để website được index nhanh lên google
    by vqw 13/1/2015, 11:59 am

    » Dùng Blogspot là web phim
    by phim360pro 1/1/2015, 8:49 pm

    » Cùng đặt liên kết để phát triển blog
    by ktuan 17/12/2014, 10:57 am

    » Tạo Tab widget bài viết mới nhất theo label
    by dungbk68 16/12/2014, 9:33 am

    » Label hiển thị không đúng số bài viết
    by vanviet098 10/12/2014, 5:08 am

    » Hỏi nhanh đáp gọn!
    by Admin 14/11/2014, 5:05 pm

    » BẤM MẮT HAI MÍ HÀN QUỐC
    by rubybeauty81 28/10/2014, 1:18 am

    Poll
    Statistics
    Diễn Đàn hiện có 635 thành viên
    Chúng ta cùng chào mừng thành viên mới đăng ký: cuahangtemplate

    Tổng số bài viết đã gửi vào diễn đàn là 503 in 165 subjects

    You are not connected. Please login or register

    Tùy chỉnh rút gọn bài viết blog

    Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

    calocnuong


    Mới tham gia
    Mới tham gia
    alien sau khi mò mẫm điên và nhờ sự giúp đỡ của admin mình đã có thể rút gọn dc bài viết cheers Áp dụng cách này bài viết sẽ tự động rút gọn theo cách bạn muốn

    Vào thiết kế>>>Chỉnh sửa HTML, chèn đoạn code sau trước
    Code:
    </head>
    (bấm Ctrl+F kiếm /head cho nhanh)

    Code:
    <script language='javascript' src='http://sites.google.com/site/love4all1080/Home/jquery-1.2.3.pack.txt?attredirects=0' type='text/javascript'/>
    <script language='javascript' src='http://sites.google.com/site/love4all1080/Home/jquery.extractor.txt?attredirects=0' type='text/javascript'/>

    <script type='text/javascript'>
    $(document).ready(function() {

    $('.excerpt').expander({
    slicePoint: 450, // default is 100
    expandEffect: 'fadeIn',
    expandText: '', // default is '....'
    userCollapseText: '[^]' // default is '[collapse expanded text]'
    });

    });
    </script>

    Lưu lại. Rồi tiếp tục chọn ô Mở rộng Mẫu Tiện ích, kiếm đọan sau

    Code:
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    bấm Ctrl + F, kiếm data:post.body sẽ nhanh hơn

    Ta xóa đoạn đó, thay vào code này

    Code:
    <b:if cond='data:blog.pageType != "item"'>
    <div class='excerpt post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    <a expr:href="data:post.url">Đọc Thêm....</a>
    <b:else/>
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    </b:if>

    Lưu là ok ra xem blog thấy gọn gàng hơn lol!

    Giờ sẽ chỉ các bạn tùy chỉnh chữ Đọc Thêm . Chúng ta chỉ chỉnh sửa dòng sau ko cần chỉnh nguyên đọan,à nếu ko thích chữ đọc thêm thì xóa chữ đó gõ gì tùy thích

    Code:
    <a expr:href="data:post.url">Đọc Thêm....</a>

    - Theo cách trên thì khi bấm vào "Đọc thêm" thì bài load trang vừa bấm, để khi bấm vào thì mở trang mới ta xóa code trên copy dòng này

    Code:
    <a expr:href='data:post.url' target='_blank'>Đọc thêm...</a>

    Lưu ok

    - Giờ chỉnh kích cỡ lớn nhỏ, Tô đen code cần chỉnh trên, copy paste code này. Ở cái phần 100% là chỗ tùy ý tăng giảm chữ theo mong muốn. Ví dụ: chữ nhỏ thì chọn 90%, lớn thì 120% vậy đó

    Code:
    <span style='font-size:100%;'><a expr:href='data:post.url'>Đọc Thêm....</a></span>


    - ÁP dụng 2 cái cùng lúc
    Code:
    <span style="font-size:100%;"><a expr:href='data:post.url' target='_blank'>Đọc thêm...</a></span>

    - farao Giờ ta sẽ thêm màu chữ, để dc màu thì chọn Phần đăng bài mới mục Viết ta gõ chữ bất kì tô đen lên màu rồi sang Chỉnh sửa HTML sẽ hiện dòng màu Ví du tớ làm màu cam, đây là mã tớ có dc ở phần đăng bài, có thể làm gì tùy thích

    Code:
    <span style="color: #f1c232;">Đọc thêm...</span>

    Về thiế kế chỉnh sửa nào, mã trước của chúng ta là đoạn này

    Code:
    <a expr:href="data:post.url">Đọc Thêm....</a>

    giờ thêm màu vào

    Code:
    <a expr:href="data:post.url"><span style="color: #f1c232;">Đọc thêm...</span></a>

    Tèng téng teng chữ màu xanh quen thuộc đã màu cam như ý muốn

    - Áp dụng 3 cách trên cùng lúc


    Code:
    <span style="font-size:100%;"><a expr:href='data:post.url' target='_blank'><span style="color: #f1c232;">Đọc thêm...</span></a></span>


    Đoạn code trên có chữ đậm rồi đó, đây mã đậm, nếu ko thích đậm thì xóa

    Code:
    <b:if cond='data:blog.pageType != "item"'></b:if>


    alien nhớ lưu lại sau khi làm. Good luck afro Tham khảo thêm cách nâng cao của Admin
    http://forum.bloggervn.tk/t48-topic#143



    Được sửa bởi calocnuong ngày 19/5/2011, 10:50 am; sửa lần 3.

    Xem lý lịch thành viên

    Admin

    avatar
    Admin
    calocnuong đã viết:alien sau khi mò mẫm điên và nhờ sự giúp đỡ của admin mình đã có thể rút gọn dc bài viết cheers Áp dụng cách này bài viết sẽ tự động rút gọn theo cách bạn muốn

    Vào thiết kế>>>Chỉnh sửa HTML, chèn đoạn code sau trước
    Code:
    </head>
    (bấm Ctrl+F kiếm /head cho nhanh)

    Code:
    <script language='javascript' src='http://sites.google.com/site/love4all1080/Home/jquery-1.2.3.pack.txt?attredirects=0' type='text/javascript'/>
    <script language='javascript' src='http://sites.google.com/site/love4all1080/Home/jquery.extractor.txt?attredirects=0' type='text/javascript'/>

    <script type='text/javascript'>
    $(document).ready(function() {

    $('.excerpt').expander({
    slicePoint: 450, // default is 100
    expandEffect: 'fadeIn',
    expandText: '', // default is '....'
    userCollapseText: '[^]' // default is '[collapse expanded text]'
    });

    });
    </script>

    Lưu lại. Rồi tiếp tục chọn ô Mở rộng Mẫu Tiện ích, kiếm đọan sau

    Code:
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    bấm Ctrl + F, kiếm data:post.body sẽ nhanh hơn

    Ta xóa đoạn đó, thay vào code này

    Code:
    <b:if cond='data:blog.pageType != "item"'>
    <div class='excerpt post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    <a expr:href="data:post.url">Đọc Thêm....</a>
    <b:else/>
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    </b:if>

    Lưu là ok ra xem blog thấy gọn gàng hơn lol!
    Rất hay, rất chi tiết và dễ hiểu. Cảm ơn bạn đã chia sẻ.

    Xem lý lịch thành viên http://forum.bloggervn.tk

    calocnuong


    Mới tham gia
    Mới tham gia
    study coi bên www.fandung.com có 1 bài chèn hình làm biểu tượng đọc thêm cho đẹp

    bạn nào giỏi PTS thì có làm chèn vào blog. Ví dụ như

    Trước khi thực hiện việc này, bạn cần tạo 2 ảnh dạng nút nhấn (kiểu buttom):
    + Ảnh 1 : là ảnh sẽ hiển thị khi ta chưa rê chuột vào.
    + Ảnh 2 : là ảnh sẽ hiển thị khi ta rê chuột vào.

    Và một gợi ý nho nhỏ, ta nên tạo 2 ảnh có cùng 1 màu, và ảnh 1 có màu sậm hơn, ảnh 2 có màu nhạt hơn, khi đó ta rê chuột vào sẽ có cảm giác ảnh bị mờ đi, trông cũng khá đẹp.

    Lưu ý : 2 ảnh phải có đồng nhất về kích thước cũng như đồng nhất về khung ảnh, tức là các điểm ảnh tương tự nhau phải nằm ở những vị trí tương tự nhau. Khi đó ta rê chuột vào sẽ không tạo ra cảm giác ảnh bị dịch chuyển. (Phần này thiêng về thiết kế đồ họa). Và nếu ảnh để background thì phải cho trùng với background của bài viết. Tốt nhất không nên dùng background cho ảnh.

    Và sau đây là cách thực hiện:
    1. Đăng nhập blog.
    2. Vào thiết kế.
    3. Vào chỉnh sửa HTML
    4. Nhấp chọn mở rộng tiện ích.
    5. Chèn đọan code CSS bên dưới lên trên dòng
    Code:
    ]]></b:skin> :

    Code:
    .readmore-fd {
    width: 101px;
    height: 24px;
    display: block;
    font-size: 10px;
    text-decoration: none;
    background-repeat:no-repeat;
    background-image:url(link ảnh 1);
    }
    .readmore-fd:hover {
    background-image:url(link ảnh 2);
    }

    Chú ý:
    - Đọan width, height kích thước hình
    - thay 2 link hình bạn link ảnh 1,2

    6. Tìm xóa đọan code sau :

    Code:
    <div class='post-body entry-content'>
    <data:post.body/>
    <span class='rmlink'><a expr:href='data:post.url'>Read More...</a></span>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    7. Thay đoạn này.
    Code:
    <div class='post-body entry-content'>
    <data:post.body/>
    <span class='rmlink'><a class='readmore-fd' expr:href='data:post.url'/></span>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    Rồi lưu lại là dc drunken

    Xem lý lịch thành viên
    Cái này không áp dụng cho blogspot.com ah?

    Xem lý lịch thành viên

    Admin

    avatar
    Admin
    huynhngoclong đã viết:Cái này không áp dụng cho blogspot.com ah?
    Cái này áp dụng cho blogger mà bạn. Không biết bạn vướng chỗ nào ?

    Xem lý lịch thành viên http://forum.bloggervn.tk
    mình chèn vào mà ko thấy nó thay đổi gì cả bạn ạ!Sad(

    Xem lý lịch thành viên

    Sponsored content


    Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

    Permissions in this forum:
    Bạn không có quyền trả lời bài viết