Membuat Read More Read Less Dengan Tampilan Button Yang Menarik

Read More Read Less adalah suatu fungsi yang dimana menyembunyikan tulisan.
Read More Reas Less Button adalah suatu fungsi yang dimana menyembunyikan tulisan dan dapat dilihat jika menekan tombol.

Yang perlu Anda lakukan untuk Read More Read Less Dengan Tampilan Buttonsebagai berikut:

Read More Read Less Dengan Tampilan Button Standart.

Lihat juga: Cara Mudah Membuat Tombol Notifikasi

1. Login ke blogger.com.
2. Cari kode </body> pada Tema > Edit HTML.
3. Copas (copy-paste) kode di bawah ini sebelum kode </body>.

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Baca Selengkapnya"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Ciutkan"; 
    moreText.style.display = "inline";
  }
}
</script>

4. Cari kode </style> pada Tema > Edit HTML.
5. Copas (copy-paste) kode di bawah ini sebelum kode </style>.

#more {display: none;}
button {
  background-color: #f44336; /* Red */
  border: none;
  color: white;
  padding: 6px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 1px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.green {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.green:hover {
  background-color: #4CAF50;
  color: white;
}

.blue {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.blue:hover {
  background-color: #008CBA;
  color: white;
}

.red {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.red:hover {
  background-color: #f44336;
  color: white;
}

.gray {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.gray:hover {background-color: #e7e7e7;}

.black {
  background-color: white;
  color: black;
  border: 2px solid #000;
}

.black:hover {
  background-color: #000;
  color: white;
}

6. Bila sudah memasang style button pada Tema > Edit HTML, sekarang simpan tema Anda.
7. Sekarang untuk menerapkan kode di atas, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML (bukan compose).

<p>Jika kalian berkenan silahkan kunjungi Blog maupun Website kami yang lainnya<span id="dots">...</span><span id="more"> www.idanime.net, www.legendseo.net, www.westernblog.xyz dan www.idviral.site. Selain itu kunjungi fanspage kami di <a href="https://www.facebook.com/indonesiaberitaterkini/" target="new">Status Indonesia.</a></span></p>
<button onclick="myFunction()" id="myBtn">Baca Selengkapnya</button>

Lihat juga: Cara Aman Membuat Tombol Download Popup dan Menampilkan Ads Google AdSense di Bawahnya

Result:Press

Berikut ini adalah kode penerapan untuk style lain dari Membuat Read More Read Less Dengan Tampilan Button Yang Menarik.

<button class="green" onclick="myFunction()" id="myBtn">Baca Selengkapnya</button>

Result:Press

Berikut ini adalah kode penerapan untuk style lain dari Membuat Read More Read Less Dengan Tampilan Button Yang Menarik.

<button class="blue" onclick="myFunction()" id="myBtn">Baca Selengkapnya</button>

Result:Press

Berikut ini adalah kode penerapan untuk style lain dari Membuat Read More Read Less Dengan Tampilan Button Yang Menarik.

<button class="red" onclick="myFunction()" id="myBtn">Baca Selengkapnya</button>

Result:Press

Berikut ini adalah kode penerapan untuk style lain dari Membuat Read More Read Less Dengan Tampilan Button Yang Menarik.

Lihat juga: Menampilkan Seberapa Kemampuan Anda Dengan Menggunakan Script HTML

<button class="gray" onclick="myFunction()" id="myBtn">Baca Selengkapnya</button>

Result:Press

Berikut ini adalah kode penerapan untuk style lain dari Membuat Read More Read Less Dengan Tampilan Button Yang Menarik.

<button class="black" onclick="myFunction()" id="myBtn">Baca Selengkapnya</button>

Result:Press

Cobalah kreasikan sendiri di sini Tryit Editor

Related Search Pages:

• 10 Button / Tombol Read More Cantik
• Cara Cepat Membuat Read More Button Tanpa Pindah Halaman ...
• Membuat Read More
• Membuat Read More Dengan jQuery ... - Panduan Pemrograman
• Cara Membuat dan Mengubah Read More di WordPress