I love tacos!

Ilove tacos!

I love tacos!

This is a special title

Hoover over meto highlight!

Hoover over me to highlight!

This is the format I was looking for KBD tag!

Press the Ctrl+C keys to copy highlighted text.

kbd1 { padding: 0.2rem 0.4rem; color: #ffffff; background-color: #007bff; border-radius: 0.2rem; } html, body { height: 100%; }

<kbd1>Ctrl</kbd1> + <kbd1>Shift</kbd1> + <kbd1>V</kbd1>

Ctrl + Shift + V

Buscar con Ctrl+F </head> y pegar antes de </head> en la plantilla Blogger edicion HTML el siguiente link.

Modo de uso:

<h3>Press <kbd class="kbc-button">/</kbd> to search this site.</h3> <p>Press <kbd class="kbc-button">Ctrl</kbd> + <kbd class="kbc-button">Shift</kbd> + <kbd class="kbc-button">R</kbd> to re-render this page.</p>

Press `Enter` to search this site.

Press Ctrl + Shift + R to re-render this page.

Con sombra solo sin borde de la superficie:

Ctrl

.pa-callout { position: relative; color: #ffffff; background-color: #2cba6c; font-size: inherit; padding: .2em .4em; border-radius: 6px; margin: 0 6px; }

<span class="pa-callout">Example</span>

Example

#ABC { background-image: linear-gradient(45deg,rgb(69,104,220) 30%,#b06ab3 90%); padding: 1em; border-radius: 3px; margin: 1em 0; color: #fff; }

<section id="ABC"> Pon aqui tu codigo o texto para mostrar. </section>

#ABC1 { background: linear-gradient(to right, #fceabb, #f8b500); padding: 1em; border-radius: 4px; margin: 1em 0; color: #000000; }

<section id="ABC1"> Pon aqui tu codigo o texto para mostrar. </section>

#ABC2 { background: linear-gradient(to right, #159957, #155799); padding: 1em; border-radius: 0px; border-top: 32px solid #474747; border-top-left-radius: 5px; border-top-right-radius: 5px; margin: 1em 0; color: #ffffff; }

<section id="ABC2"> Pon aqui tu codigo o texto para mostrar. </section>

#ABC3 { background: linear-gradient(to right, #ffefba, #fff8e1); padding: 1em; border-radius: 0px; border-top: 32px solid #f5bc00; border-top-left-radius: 5px; border-top-right-radius: 5px; margin: 1em 0; color: #000000; border-bottom: 3px solid #f5bc00; border-bottom-style:dotted; }

<section id="ABC3"> Pon aqui tu codigo o texto para mostrar. </section>

p {padding:20px 20px 20px 20px;font-weight: bold;} .window { width: 100%; background: #eee; display: block; margin: 0 auto; top: 20%; max-height: 80%; min-height: 100px; position: relative; border-radius: 6px; } .mac.window { box-shadow: 0 5px 7px 5px rgba(0, 0, 0, 0.20); } .mac .title-bar { height: 40px; background: linear-gradient(to bottom, #f0f0f0, #e9e9e9); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top: 1px solid #faf9ff; } .mac .close, .mac .minimize, .mac .zoom { height: 12px; width: 12px; border-radius: 6px; background: #ddd; position: absolute; top: 14px; } .mac .close { background-color: #ff6052; left: 10px; } .mac .minimize { background-color: #ffbe06; left: 32px; } .mac .zoom { background-color: #16cc37; left: 54px; } .mac .maximize { height: 20px; width: 20px; background: #aaa; position: absolute; top: 10px; right: 10px; -webkit-clip-path: polygon(2px 9px, 0px 7px, 0px 14px, 7px 14px, 5px 12px, 7px 10px, 4px 7px, 7px 4px, 10px 7px, 12px 5px, 14px 7px, 14px 0px, 7px 0px, 9px 2px); }

<div class="window mac"> <div class="title-bar"> <div class="close"></div> <div class="minimize"></div> <div class="maximize"></div> <div class="zoom"></div> </div> <div class="page"></div> <p> Pon aqui tu codigo o texto para mostrar. </p> <br /> </div>

.code-sample1 {
  position: relative;
  border: 1px solid #d1d1d1;
  box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.20);
  color: #1D4D7D;
  margin: 0 0 1.5rem 0;
  padding: 1.5rem;
  line-height: 1.5rem;
  white-space: pre-wrap;
  background: #FCFDFC url("data:image/svg+xml;charset=utf8,%3Csvg stroke-width='2' stroke='%23EDF3ED' width='1224' height='64' viewBox='0 0 1224 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0L1224,0'/%3E%3Cpath d='M0,4l1224,0'/%3E%3Cpath d='M0,8l1224,0'/%3E%3Cpath d='M0,12l1224,0'/%3E%3Cpath d='M0,16l1224,0'/%3E%3Cpath d='M0,20l1224,0'/%3E%3Cpath d='M0,24l1224,0'/%3E%3Cpath d='M0,28l1224,0'/%3E%3C/svg%3E") repeat-y scroll 0 3rem / auto 4rem;

}

.code-sample1:after {
  display: block;
  position: absolute;
  top: 0;
  right: 1rem;
  font-family: sans-serif;
  opacity: .5;
  font-size: .825rem;
}

Si tu tema blogger no tiene en el css de tag pre comando de poner el tipo de lenguaje, debes de agregar las siguientes 3 linias abajo en el css de arriba.

.code-sample1.html:after { content: "HTML"; }
.code-sample1.css:after { content: "CSS"; }
.code-sample1.css:after { content: "JS"; }

<pre class="code-sample1 html">
Pon aqui tu codigo o texto para mostrar.
</pre>


<pre class="code-sample1 css">
Pon aqui tu codigo o texto para mostrar.
</pre>


<pre class="code-sample1 js">
Pon aqui tu codigo o texto para mostrar.
</pre>

.code-sample2 {
  position: relative;
  border: 1px solid #d1d1d1;
  box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.20);
  color: #1D4D7D;
  margin: 0 0 1.5rem 0;
  padding: 1.5rem;
  line-height: 1.5rem;
  white-space: pre-wrap;
  background-image: linear-gradient(#e2ebed 50%, #fcfdfd 50%);
  background-size: 100% 3rem;
  background-position: 0 1.5rem;
  background-origin: content-box;
}

.code-sample2:after {
  display: block;
  position: absolute;
  top: 0;
  right: 1rem;
  font-family: sans-serif;
  opacity: .5;
  font-size: .825rem;
}

Si tu tema blogger no tiene en el css de tag pre comando de poner el tipo de lenguaje, debes de agregar las siguientes 3 linias abajo en el css de arriba.

.code-sample2.html:after { content: "HTML"; }
.code-sample2.css:after { content: "CSS"; }
.code-sample2.css:after { content: "JS"; }

<pre class="code-sample2 html">
Pon aqui tu codigo o texto para mostrar.
</pre>


<pre class="code-sample2 css">
Pon aqui tu codigo o texto para mostrar.
</pre>


<pre class="code-sample2 js">
Pon aqui tu codigo o texto para mostrar.
</pre>

.code-sample3 {
  position: relative;
  border: 1px solid #d1d1d1;
  box-shadow: 0 5px 7px 5px rgba(0, 0, 0, 0.20);
  color: #1D4D7D;
  margin: 0 0 1.5rem 0;
  padding: 1.5rem;
  line-height: 1.5rem;
  white-space: pre-wrap;
 background-image: url("https://blogger.googleusercontent.com/img/a/AVvXsEhOSQ4Y0vmfSaPvDx27wDdv8gD2vZmVqNBzoCZOMjhIBcIUOn25hkJxckRPXyohDtEmyGS9qQ6vsqDzdXfWlNfDmVFhjsuxqfSQ69OjE6lX5U7cX33ECnJo26ve_vZM6b2E1XTk99Y0q68tG6YePcjxb9uolw3RFzAtP8TjDOVvfvOCVKvO_z9o-tl4=s200");
  background-size: 100% 3rem;
  background-position: 0 1.5rem;
  background-origin: content-box;
}

.code-sample2:after {
  display: block;
  position: absolute;
  top: 0;
  right: 1rem;
  font-family: sans-serif;
  opacity: .5;
  font-size: .825rem;
}

Si tu tema blogger no tiene en el css de tag pre comando de poner el tipo de lenguaje, debes de agregar las siguientes 3 linias abajo en el css de arriba.

.code-sample2.html:after { content: "HTML"; }
.code-sample2.css:after { content: "CSS"; }
.code-sample2.css:after { content: "JS"; }

<pre class="code-sample3 html">
Pon aqui tu codigo o texto para mostrar.
</pre>


<pre class="code-sample3 css">
Pon aqui tu codigo o texto para mostrar.
</pre>


<pre class="code-sample3 js">
Pon aqui tu codigo o texto para mostrar.
</pre>

/* Note1 */ 
  .note1 {
  position: relative;
  padding: 16px 20px 16px 50px;
  background: #e1f5fe;
  color: #3c4043;
  font-size: 0.85rem;
  font-family: 'Noto Sans', sans-serif ;
  line-height: 1.6em;
  border-radius: 10px;
  overflow: hidden;
}
.note1::before {
  content: "";
  width: 60px;
  height: 60px;
  background: #81b4dc;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -12px;
  left: -12px;
  opacity: 0.1;
}
.note1::after {
  content: "\002A";
  position: absolute;
  left: 18px;
  top: 16px;
  font-size: 20px;
  min-width: 15px;
  text-align: center;
}
.note1.wr {
  background: #ffdfdf;
  color: #48525c;
}
.note1.wr::before {
  background: #e65151;
}
.note1.wr::after {
  content: "\0021"
}

<p class="note1">Pon aqui tu texto para mostrar.</p>

Lorem Ipsum es un texto de marcador de posición comúnmente utilizado en las industrias gráficas, gráficas y editoriales para previsualizar diseños y maquetas visuales.

CSS
/* styling paper */ #paper { background-size: 100% 3rem; background-position: 0 1.5rem; position: relative; margin: 20px auto; padding-top: 40px; padding-bottom: 40px; background-color: white; box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.20); } /* styling red vertical line */ #paper::before { content: ''; width: 2px; height: 100%; position: absolute; top: 0; left: 40px; background-color: rgba(255,0,0,0.6); } /* styling blue horizontal lines */ #pattern { height: 100%; background-image: repeating-linear-gradient(white 0px, white 24px, teal 25px); } /* styling text content */ #content { padding-top: 6px; padding-left: 56px; padding-right: 16px; line-height: 25px; font-family: 'Inconsolata', monospace; font-size: 19px; letter-spacing: 1px; word-spacing: 5px; white-space: pre-wrap; }

HTML
<div id="paper"> <div id="pattern"> <div id="content"> Pon aqui tu codigo o texto para mostrar. </div> </div> </div>

Codigo original aqui: https://www.codesdope.com/blog/article/getting-notebook-paper-effect-with-css/

DESCRIPTION

Xdfly v1.0 Responsive Blogger Template are specially designed for movies, dramas, and online watch TV or Streaming website. You can Subscribe Via E Mail to download all new movie blogger templates when published. Movie blogger themes are suitable for a news and video portal website which provides video streaming. These Templates are generally downloaded by movie portal or news website. These templates are ideal for those who wants to run magazine video portal biggest blogger site. So, if you are looking to start a video blogger site, then here is a perfect collection where you can download all free video blogger themes in free of cost.

Live Preview

Features

Full Responsive
Seo Friendly
Header Sticky
Top Menu
Primary Menu
Menu Left
Slider Image Homepage
Slider Image Post
Recent Posts Per Label
Search Otomatis
Load More
Font Awesome Icons Integration
Related Posts
Breadcrumbs (Hiden)
Post Meta
Comment Blogger
More...

Notes	Free Version	Paid Version
Remove Footer Credits:
No Encrypted Scripts:
Lifetime Premium Support:
For Unlimited Domains:
Regular Template Updates:
Get Premium Support:
	Free Not Available	Premium Available

Resultados

Clean, neat and responsive templates.Clean, neat and responsive templates.

/* kbd3 Double Click to Select */ kbd3{font-family:monospace;position:relative;color:#000000;background: linear-gradient(to right, #ee9ca7, #ffdde1);font-size:95%;border-radius: 5px;padding: 0.05rem 0.5rem 0.15rem;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;} kbd3:before{ position:absolute; content:'Double click to select'; display:table; bottom:23px; left:0; background:linear-gradient(to right, #56ccf2, #2f80ed); color:#fff; padding:6px; border-radius:3px; font-size:75%; line-height:1; opacity:0; visibility:hidden; transform:scale(0.8); z-index:2; transition:all .3s;} kbd3:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}

<kbd3>Clean, neat and responsive templates.</kbd3>Clean, neat and <kbd3>responsive</kbd3> templates.

Clean, neat and responsive templates.Clean, neat and responsive templates.

kbd2 { font-size: 90%; overflow-wrap: break-word; word-wrap: break-word; position: relative; color: #222; font-weight: 500; font-family: monospace; background: linear-gradient(to right, #fce3ec, #ffe8cc); padding: 0.05rem 0.5rem 0.15rem; border-radius: 99em; }

<kbd2>Clean, neat and responsive templates.</kbd2>Clean, neat and <kbd2>responsive</kbd2> templates.

strong {
  position: relative;
}

strong::before {
  /* Highlight color */
  background-color: #46b96c;

  content: "";
  position: absolute;
  width: calc(100% + 4px);
  height: 60%;
  left: -2px;
  bottom: 0;
  z-index: -1;
  transform: rotate(-2deg);
}

COOL <strong>HIGHLIGHT</strong> TEXT

COOL HIGHLIGHT TEXT.

DOWNLOAD

/* CSS Button Style 2 by www.lk21.news */
a:link {
  text-decoration: none;
}
.vn-red a {
  background-color: #e74c3c;
  display: inline-block;
  position: relative;
  margin: 30px 5px;
  padding: 20px 20px 20px 80px;
  color: #fff;
  transition: all 0.4s ease;
}
.vn-red a:before {
  content: "\f019";
  font-family: fontAwesome;
  position: absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 28px;
  border-radius: 0 20px 0 0;
  color: #000;
  background-color: #fff;
  opacity: 0.3;
  padding: 20px;
  top: 0;
  left: 0;
}
.vn-red a:hover {
  background: #7f8c8d;
}
.vn-green a {
  background-color: #27ae60;
  display: inline-block;
  position: relative;
  margin: 30px 5px;
  padding: 20px 20px 20px 80px;
  color: #fff;
  transition: all 0.4s ease;
}
.vn-green a:before {
  content: "\f019";
  font-family: fontAwesome;
  position: absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 28px;
  border-radius: 0 20px 0 0;
  color: #000;
  background-color: #fff;
  opacity: 0.3;
  padding: 20px;
  top: 0;
  left: 0;
}
.vn-green a:hover {
  background: #7f8c8d;
}
.vn-wisteria a {
  background-color: #8e44ad;
  display: inline-block;
  position: relative;
  margin: 30px 5px;
  padding: 20px 20px 20px 80px;
  color: #fff;
  transition: all 0.4s ease;
}
.vn-wisteria a:before {
  content: "\f019";
  font-family: fontAwesome;
  position: absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 28px;
  border-radius: 0 20px 0 0;
  color: #000;
  background-color: #fff;
  opacity: 0.3;
  padding: 20px;
  top: 0;
  left: 0;
}
.vn-wisteria a:hover {
  background: #7f8c8d;
}
.vn-orange a {
  background-color: #f39c12;
  display: inline-block;
  position: relative;
  margin: 30px 5px;
  padding: 20px 20px 20px 80px;
  color: #fff;
  transition: all 0.4s ease;
}
.vn-orange a:before {
  content: "\f019";
  font-family: fontAwesome;
  position: absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 28px;
  border-radius: 0 20px 0 0;
  color: #000;
  background-color: #fff;
  opacity: 0.3;
  padding: 20px;
  top: 0;
  left: 0;
}
.vn-orange a:hover {
  background: #7f8c8d;
}
.vn-blue a {
  background-color: #2980b9;
  display: inline-block;
  position: relative;
  margin: 30px 5px;
  padding: 20px 20px 20px 80px;
  color: #fff;
  transition: all 0.4s ease;
}
.vn-blue a:before {
  content: "\f019";
  font-family: fontAwesome;
  position: absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 28px;
  border-radius: 0 20px 0 0;
  color: #000;
  background-color: #fff;
  opacity: 0.3;
  padding: 20px;
  top: 0;
  left: 0;
}
.vn-blue a:hover {
  background: #7f8c8d;
}

<div class="vn-red" style="text-align: center;"> <a href="#">DOWNLOAD &nbsp;&nbsp;<i class="fa fa-rocket fa-lg fa-spin"></i></a> </div>


<div class="vn-green" style="text-align: center;"> <a href="#" class="btn-wrap">DOWNLOAD &nbsp;&nbsp;<i class="fa fa-rocket fa-lg fa-spin"></i></a> </div>


<div class="vn-wisteria" style="text-align: center;"> <a href="#" class="btn-wrap">DOWNLOAD &nbsp;&nbsp;<i class="fa fa-rocket fa-lg fa-spin"></i></a> </div>


<div class="vn-orange" style="text-align: center;"> <a href="#" class="btn-wrap">DOWNLOAD &nbsp;&nbsp;<i class="fa fa-rocket fa-lg fa-spin"></i></a> </div>


<div class="vn-blue" style="text-align: center;"> <a href="#" class="btn-wrap">DOWNLOAD &nbsp;&nbsp;<i class="fa fa-rocket fa-lg fa-spin"></i></a> </div>

Non-hilighted text. highlighted text More non-highlighted highlighting is behind text

.marker {
  display: inline-block;
  position: relative;
  background: linear-gradient(to right, #ff5f6d, #ffc371);
  
}
.marker.under:before, .marker.under:after
{
  z-index: -1;
}
.marker:before, .marker:after
{
  display: inline-block;
  position: absolute;
  
  background: linear-gradient(to right, #ff5f6d, #ffc371);
  content: "";
  opacity: .5;
  height: 70%;
  width: 100%;
}
.marker:before
{
  left: 0;
  transform: rotate(5deg) translatey(-.5em);
}
.marker:after
{
  left: 0;
  transform: rotate(4deg) translatey(1em);
}

<span>Non-hilighted text. </span>


<span class="marker">highlighted text</span>


<span>More non-highlighted</span>


<span class="marker under">highlighting is behind text</span>

Battery Capacity: 5000mAh

Dimension: 197g, 0mm thickness

Chipset: Qualomm Snapdragon 450

Storage: 32Gb/64GB

Camera: Rear, 13 MP + Front, 8 Mp

OS: Android 10

type: 0 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya.
type: 1 berarti pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya.
type: 2 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya, setelah itu pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya.

Stop buang-buang waktu gonta-ganti template blogger!!
Gunakan Viomagz yang terbukti cepat loadingnya dan meningkatkan penghasilan Adsense.

Warning!
Before starting this tutorial, make sure you have to back up your blogger template first.

Stop buang-buang waktu gonta-ganti template blogger!!
Gunakan Viomagz yang terbukti cepat loadingnya dan meningkatkan penghasilan Adsense.

.post-box {
  direction: ltr;
  background: #fff;
  position: relative;
  margin: 40px 2px;
  padding: 40px 15px 15px;
  border: 1px solid rgba(230, 230, 230, 1);
  border-radius: 5px;
  box-shadow: 0 10px 20px 0 rgba(30, 30, 30, 0.07);
  font-family: tajawal;
  text-align: justify;
}
.post-box h2 {
  background: #16967f;
  border-radius: 3px;
  padding: 8px 20px !important;
  position: absolute;
  margin: 0 !important;
  font-size: 17px !important;
  color: #fff;
  top: -20px;
  font-weight: bold;
  right: 30px;
  text-transform: none;
}
.post-box.box-yellow h2 {
  background: #e2c601;
}
.post-box.box-blue h2 {
  background: #182144;
}
.post-box.box-red h2 {
  background: #a30606;
}
.dark-mode.post-box {
  background: #181818;
  border: unset;
}

Titulo

Agrega tu contenido aquí ...

Titulo

Agrega tu contenido aquí ...

Titulo

Agrega tu contenido aquí ...

Titulo

Agrega tu contenido aquí ...

Titulo

Agrega tu contenido aquí ...

Mostrar tu codigo o contenido aqui...

No	Nama	Kota
1	Kota	Balikpapan
2	Kelurahan	Gunung Sari
3	Desa	Klandasan Ilir

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}

JS here

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

Warning!
Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

Titulo

Nama	Coding Pro
Lisensi	Personal
Versi	1.0
Harga	Rp.100.000

<div class="wendybox">
<h2>Titulo</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Nama</b></td> <td>Coding Pro</td></tr>
<tr><td><b>Lisensi</b></td> <td>Personal</td></tr>
<tr><td><b>Versi</b></td> <td>1.0</td></tr>
<tr><td><b>Harga</b></td> <td>Rp.100.000</td></tr>
</tbody>
</table>
</div>

	
<div class="wendybox">
<h2>Titulo</h2>
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr><td><b>Nama</b></td> <td>Coding Pro</td></tr>
<tr><td><b>Lisensi</b></td> <td>Personal</td></tr>
<tr><td><b>Versi</b></td> <td>1.0</td></tr>
<tr><td><b>Harga</b></td> <td>Rp.100.000</td></tr>
</tbody>
</table>
</div>

Resultados

<div class="jagoanSpoiler"> <div class="tombol" tabindex="0"></div> <div class="isi">  Tulis konten yang ingin disembunyikan disini. </div> </div>

	
/* Spoiler Box Pure CSS */
.jagoanSpoiler {
  display: block;
  margin: 10px 0px;
  border: 1px solid #3498db;
  padding: 7px 10px;
  border-radius: 3px;
  -moz-border-radius: 3px;
}
.jagoanSpoiler .tombol {
  background: #3498db; /* Warna tombol */
  color: #fff; /* Warna tulisan di tombol */
  display: inline-block;
  cursor: pointer;
  font: normal 600 14px Tahoma, sans-serif;
  padding: 0px;
  border: none;
  outline: none;
  line-height: 20px;
  border-radius: 3px;
  -moz-border-radius: 3px;
}
.jagoanSpoiler .tombol:focus {
  pointer-events: none;
}
.jagoanSpoiler .tombol:before {
  content: "Lihat Spoiler"; /* Tulisan untuk membuka tombol */
  display: inline-block;
  padding: 7px 10px;
  border-radius: 3px;
  -moz-border-radius: 3px;
}
.jagoanSpoiler .tombol:focus::before {
  content: "Tutup Spoiler"; /* Tulisan untuk menutup tombol */
  background: #cc0000; /* Warna tombol ketika spoiler terbuka */
}
.jagoanSpoiler .isi {
  background: #e4e4e4; /* Warna background isi spoiler */
  pointer-events: auto;
  visibility: hidden;
  opacity: 0;
  height: 0px;
  transition: all 0.5s ease;
}
.jagoanSpoiler .tombol:focus + .isi {
  visibility: visible;
  opacity: 1;
  height: auto;
  margin: 10px 0px 5px;
  padding: 10px 15px;
  transition: all 0.5s ease;
}

	
<div class="jagoanSpoiler">
    <div class="tombol" tabindex="0"></div>
    <div class="isi">
        <!-- Isi Spoiler -->
        Tulis konten yang ingin disembunyikan disini.
    </div>
</div>

file_name.zip 200kb

Download Demo

Copy

<div class="jagoanSpoiler">
    <div class="tombol" tabindex="0"></div>
    <div class="isi">
        <!-- Isi Spoiler -->
        Tulis konten yang ingin disembunyikan disini.
    </div>
</div>

Warning!
Epcot es un parque de diversiones en Walt Disney World Resort que cuenta con emocionantes atracciones, pabellones internacionales y fuegos artificiales. Eventos premiados y especiales de temporada.

Epcot es un parque de diversiones en Walt Disney World Resort que cuenta con emocionantes atracciones, pabellones internacionales y fuegos artificiales. Eventos premiados y especiales de temporada.

Fuente:
www.thucblog.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ejemplo de texto con fondo de color

Judul-Gambar — https://mypctriksblog.blogspot.com/

Dummy Text para DEMO

Bienvenidos en este Blog de recuros graficos gratuitos.Este es un centro de material grafico gratuito para todo tipo de proyectos... comerciales personales o proyectos de pruebas y curiocidad.

MYPCTRIKSBLOG

Una forma muy bonita de personalizar la etiqueta <mark>.

I love tacos!

Ilove tacos!

I love tacos!

I love tacos!

I love tacos!

I love tacos!

I love tacos!

This is a special title

Press `Enter` to search this site.

DESCRIPTION

Features

Titulo

Titulo

Titulo

Titulo

Titulo

Titulo

Publicar un comentario

MYPCTRIKSBLOG

Code Snippets Box en Post de Blogger.Code Box.

Consentimiento de Cookies

Una forma muy bonita de personalizar la etiqueta <mark>.

I love tacos!

Ilove tacos!

I love tacos!

I love tacos!

I love tacos!

I love tacos!

I love tacos!

This is a special title

Press Enter to search this site.

DESCRIPTION

Features

Titulo

Titulo

Titulo

Titulo

Titulo

Titulo

Publicar un comentario

Consentimiento de Cookies

Press `Enter` to search this site.