Widget Recent Post Show Hide Content

Widget Recent Post Show Hide Content - Recent post secara umum selalu menampilkan beberapa content item didalamnya, seperti:

Gambar Posting
Deskripsi content post
Link read more (Baca Selengkapnya)

Akan tetapi saat link di KLIK, maka Anda akan diarahkan ke tab baru untuk melihat isi content secara menyeluruh, dan itu terjadi diluar halaman. Sekarang saya akan coba mendesain tampilan recent post blog Anda dengan effect SHOW (Content akan ditampilkan secara menyeluruh saat link (read more) di KLIK, dan seluruh isi content akan ditampilkan saat itu juga atau pada halaman yang sama), dan effect HIDE (Untuk menutup isi content ketampilan semula). Yang hasilnya akan tampil seperti ini:

DEMO SHOW

Pekerjaannya sama dengan spoiler box, dimana beberapa content kita sembunyikan, dan untuk melihat isi content seluruhnya dialihkan dengan perintah tombol "OPEN". Agar memudahkan semua pekerjaan Anda, beberapa pilihan spoiler box dibawah ini, bisa Anda jadikan referensi untuk menyembunyikan tampilan content post Anda, pilihannya lihat pada TAB Content dibawah ini:

Penerapan Content Recent Post
1.1 CSS input element

Efek show pada saat content ditampilkan akan mengikuti lebar halaman posting Anda, dengan efek transition membuat pergeseran content text tampil berjalan, kode lengkapnya seperti ini:

CSSfigure {
  margin: 0 0 1.3rem 0;
  -webkit-transition: 2s linear;
  -moz-transition: 2s linear;
  -ms-transition: 2s linear;
  -o-transition: 2s linear;
  transition: 2s linear;
  text-align:center}

figure img {max-width: 100%}
body {margin: -180px auto}
p {margin-bottom: 1.3rem }
article {margin-bottom: 3rem;position: relative;*zoom: 1}
article:before, article:after {content: "";display: table}
article:after {clear: both }
article figure {float: left;width: 32.5%}
article section:first-of-type {float: right;width: 62.5%}
article section:last-of-type {display: none;visibility: hidden}
section {
  -webkit-transition: 1.5s linear;
  -moz-transition: 1.5s linear;
  -ms-transition: 1.5s linear;
  -o-transition: 1.5s linear;
  transition: 1.5s linear}

input[type=checkbox] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute}

[for="read_more"] {
  position: absolute;
  bottom: -3rem;
  color:#fff;
  left: 0;
  width: 100%;
  text-align: center;
  padding: .65rem;
  background: #39f}

[for="read_more"]:hover {background: red}
[for="read_more"] span:last-of-type {display: none;visibility: hidden}
input[type=checkbox]:checked ~ section {display: block;visibility: visible;width: 100%}
input[type=checkbox]:checked ~ figure {width: 100%}
input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {display: none;visibility: hidden}
input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {display: block;visibility: visible}

1.2 HTML Markup

Tampilan tema pada recent post sudah selesai kita bentuk, saatnya memanggil semua element CSS diatas untuk menampilkan hasilnya dengan perintah HTML seperti ini, namun sebelum itu, Anda ganti teks yang saya beri tanda dengan garis bawah, HTML lengkapnya seperti ini:

HTML<article>
<input type="checkbox" id="read_more" role="button">
<label for="read_more" onclick="">
   <span>Baca Selengkapnya</span>
   <span>Close Content</span>
</label>    
<figure><img src="http://URL-Gambar" alt="My Blog" /></figure>
   <section>
     <p>...Description text post...</p>
   </section>

   <section>
        <p>...Letakkan Content Anda Disisni...</p>
   </section>
</article>

Anda bisa modifikasi semua tampilan content recent post diatas, Anda tinggal meletakkan apa saja disana. Karena semua ini saya berikan khusus buat sahabat semua pecinta SAHABAT BLOGGER 77 yang selalu setia hadir memberikan kesan dan pesan lucu dalam kolom cerita komentar dibawah. Semoga postingan ini bermanfaar buat Anda semua. Happy blogging.

Belum berminat? tak apa 😊 bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!