13.4.15
12
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




Recent Post Content



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:

figure {
  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:

<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.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Widget Recent Post Show Hide Content
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

12 komentar

  1. Wih keren bisa memperingas Ruang dalam posting... Tapi isi postingan yang di hide masih terbaca di mesin pencarian gak mba ? :-?

    BalasHapus
    Balasan
    1. Seperti yang mas katakan untuk meringkas ruang posting, jadi beberapa teks konten didalamnya kita sembunyikan dengan spoiler sistem, yang sebenarnya teks itu ada disana, hanya kita sembunyikan agar tidak ditampilkan saat post dimuat.

      jadi semua isi konten masih tetap terbaca di mesin pencari. terkecuali kita arahkan dengan link menggunakan perintah js. jadi yang terbaca hanya deskripsi singkat itu saja.

      Hapus
    2. Berarti widget ini masih aman untuk di taro pada postingan ya... Terimakasih penjelasannya.. Saya simpan pagenya, nanti akan saya coba :)

      Hapus
    3. Mba Devy widgetnya sudah saya coba, Tapi CSS nya saya taro bukan di dalam template tapi di Posting.. tapi kenapa hasilnya menu header saya tidak terlihat ya, Jika buka di postingan yang ada widget ini. tapi kalau buka postingan lainnya baru keliatan menu headernya

      Hapus
    4. Karena ini sengaja saya tampilkan pada halaman statis, disana saya menyisipkan pengaturan pada tag body, dimana widget ini akan terpasang, lihat pada CSS disana ada tag body seperti ini:

      body {margin: -180px auto}

      dihapus saja kode itu, karena letak CSS disejajarkan dengan tulisan lain dalam posting.

      Hapus
    5. Wah terimakasih banyak Mba Devy... iya bener sekarang jadi keliatan menunya (h)

      Hapus
    6. Terimakasih kembali mas.!!

      Hapus
  2. Wah efeknya bagus, penuh dengan sentuhan seni.....saya harus coba ni mbak devi. Terima kasih atas sharingnya

    BalasHapus
  3. ini bner-bner keren mba devy, desain sekali deh..

    BalasHapus
  4. bergerak sendiri gitu ck ck cantik nian

    BalasHapus
  5. wah keren, bisa show hide content gitu :-)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK