dalam sudut pandangku...

Friday, September 06, 2019

Cara Membuat Show Hidden Toggle di Blogger



Menurut saya penggunaan toggle pada sebuah blog amatlah penting. Apalagi jika konten yang diberikan sangat banyak baik dari sisi tulisan maupun gambar. Hal ini menjadi pandangan saya ketika menulis pada artikel sebelumnya tentang Top 2 Teratas Hosting Terbaik di Indonesia.

Pada artikel itu saya memiliki beberapa gambar yang ditampilkan secara vertikal/menurun, dimana nantinya akan membuat keseluruhan artikel menjadi sangat panjang ketika dilihat. Dengan kata lain, pembaca akan scroll berkali-kali dalam membaca artikel.

Pertimbangan inilah yang membuat saya memutuskan dan beranggapan perlunya toggle dalam sebuah blog.

Tidak hanya dalam sebuah konten, toggle ini pun bisa diterapkan dimana saja sesuai dengan keinginan anda. Berikut langkah pemasangan toggle,

  • Tempatkan kode dibawah dimanapun yang anda inginkan
  • Jika anda ingin menempatkan pada konten, paste di mode html 

<button class="tybbutton" onclick="if(document.getElementById('tybtoggle') .style.display=='none') {document.getElementById('tybtoggle') .style.display=''}else{document.getElementById('tybtoggle') .style.display='none'}" title="Click To Show/Hide Content" type="button">Show/Hide Content!</button>
<div id="tybtoggle" style="display: none;" class="tybtogglecontent">Hidden Content!</div>

  • Ganti tulisan "Hidden Content!" dengan apapun yang anda ingin show hidden
  • Kemudian beralih ke menu "Theme/Template
  • Pilih "Edit HTML"
  • Paste kode berikut di bagian css atau sebelum "]]></b:skin>"

/*Toggle Button Css*/
.tybtoggle
{
   font-family:Georgia,serif;
   font-weight:bold;
   background-color:#00CC33;
   border-color:#000000;
}
.tybtogglecontent
{ font-weight:bold;
  color:#000000;
  letter-spacing:1pt;
  word-spacing:2pt;
  font-size:12px;
  text-align:left;
  font-family:comic sans, comic sans ms, cursive, verdana, arial, sans-serif;
  line-height:1;
}

  • Save template

Hasilnya akan seperti ini, 

Tapi semua itu kembali lagi bagaimana kita sebagai blogger dalam menyajikan konten kepada pembaca. Semoga bermanfaat.

source
4.9 5

No comments:

Post a comment