• KIẾN THỨC SEO
  • BLOG SERIER
  • SEO BLOGSPOT
  • TEMPLATE BLOGSPOT
  • ICON FACEBOOK
MENU

Hoc Tieng Trung Khamphablog.com

Menu
  • Home
  • #Web Tools
    • Giải Mã
    • Mã Hóa
    • Chuyển đổi code
    • Lấy mã màu
  • Liên Hệ
  • #Dịch Vụ
    • Rip Blogspot
    • Rip Wordpress
  • Site map
  • #Giới Thiệu
    • Admin
    • Blog
  • Liên Kết
  • Hỏi Đáp
Trang Chủ Blog Series Blog-Tips spoiler Thu-Thuat [Tips] - Ẩn hiện một phần nội dung bài viết blogspot

[Tips] - Ẩn hiện một phần nội dung bài viết blogspot

Đỗ Mạnh Hồng May 04, 2015 Blog Series Blog-Tips spoiler Thu-Thuat
Đỗ Mạnh Hồng
Ẩn hiện một phần nội dung bài viết hay còn gọi là spoiler để ẩn hoặc hiện một phần nội dung bài viết là điều thường xuyên, không còn tình trạng đôi khi google index thay thế một đoạn code làm description cho blogspot của bạn làm bài viết của bạn tụt hạng ghê gớm.

spoiler blogger
Ẩn hiện một phần nội dung bài viết blogspot
DEMO

Trong bài viết này mình sẽ hướng dẫn các bạn cách để đưa tính năng spoiler vào trong cả blogger và wordpress.
Có hai cách để thêm spoiler vào blogger và wordrepss cực đơn giản mà không dùng đến bất cứ plugin nào.

1. Thêm spoiler vào blogger – wordpress bằng html.

Cách này cực kỳ đơn giản. Khi bạn đang soạn thảo bài viết chỉ cần bạn chuyển chế độ soạn thảo bài viết sang html và dán đoạn code dưới đây vào:
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Title of Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Hiện'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Hiện" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Chèn bất cứ thứ gì mà bạn muốn nó ẩn ở đây kể cả hình ảnh, video bla bla
</div>
</div>
</div>

2. Thêm Spoiler vào Blogger – WordPress bằng CSS + HTML

Đối với Blogger các bạn đăng nhập vào khu quản lý, tìm đến Mẫu –> Chỉnh sửa HTML tìm đến thẻ ]]></b:skin> thêm vào bên trên:
.spoilerbutton {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Hiện"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Ẩn"] + .spoiler {padding:5px;}
Và khi viết bài bạn chuyển chế độ soạn thảo là HTML thêm đoạn code sau vào trong bài viết:<div>
<input class="spoilerbutton" type="button" value="Hiện" onclick="this.value=this.value=='Hiện'?'Ẩn':'Hiện';"><div class="spoiler"><div>
Nội dung mà bạn muốn ẩn
</div></div></div
Đối với WordPress bạn chỉ cần thêm đoạn code CSS phía trên vào cuối cùng của file CSS sau đó khi viết bài cũng làm tương tự như đã làm với Blogger

Thay phần: Nội dung mà bạn muốn ẩn bằng hoặc chữ Ẩn, Hiện bằng những gì mà bạn muốn.

Trên đây là hai cách dễ nhất để thêm spoiler vào blogspot và wordpress để ẩn đi một phần nội dung bài viết. Phương pháp này được áp dụng cho các bài viết dài hoặc nhiều hình ảnh giúp người đọc đỡ phần scroll trang.
Nguồn : http://www.tohaitrieu.net/

Bài Viết Cùng Chủ Đề

  • Auto readmore 3 column không dùng js cho blogspotTiếp tục share mẫu auto readmore không dùng js (javascripts) cho các bạn muốn blog load nhanh nhưng vẫn đẹp. Hôm bữa mì ...
  • [Tips] - Làm sao để title, description, keywords cho mỗi trang khác nhau Chào các bạn nói đến title, description, keywords thì chắc ai cũng biết nếu làm blog, đối với seo thì chúng ta có rất ...
  • Vì sao blogspot không nhận thumbnail khi share linkThumbnail là hình đại diện của một bài viết hay một trang web nó mang tính chất hiển thị nhằm mô tả cho bài viết hay mộ ...
  • [Tips] - 3 bước để tạo đánh giá 5 sao cho bài viết BlogspotBạn là blogger muốn cho blogspot của mình chuyên nghiệp hơn với tính nắng đánh giá 5 sao khi thấy bài viết hay giống nh ...
  • [Tips] - Cách lấy data blogspot người khácLấy data blogspot hay còn gọi là rip data blogspot người khác có nghĩa là cách lấy một số hay toàn bộ bài viết của một ...
Next
« Prev Post
Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Icon CommentsIcon Comments

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
Đăng Nhập để bình luận chém gió.
Subscribe to: Post Comments (Atom)

Blog Tự Học Seo Online

Blog ra đời dưới sự thành lập của Đỗ Mạnh Hồng với mục đích chia sẻ những kiến thức giúp bạn tự học seo blog online chạy trên nền tản blogspot và website, cùng với đó chúng tôi còn chia sẻ tới các bạn những templates blogspot chuẩn seo, những thủ thuật đơn giản giúp bạn thao tác dễ dàng hơn trong phần quản trị Blogger. Với tiêu chí muốn gởi đến các bạn "SEO TỪ KHÓA LÊN TOP - KHÓ MÀ DỄ". Hãy cũng chúng tôi trao đổi và mong muốn được hỗ trợ các bạn nhiều hơn nữa.


  • Popular

Popular

  • [Tips] - Thẻ điều kiện trong blogspot là gì?

SUBSCRIBE TO OUR NEWSLETTER

Copyright © 2015 Khamphablog.com All Right Reserved Tự học seo blog online cho người mới bắt đầu