24.2.14
29
Efek Tumpukan Kertas Pada Laman Posting - Secara berturut-turut saya memberikan banyak kode CSS untuk mengatur atau sekedar mempercantik tampilan sidebar widget, tidak satupun artikel saya yang menuju tentang pembahasan laman posting, karena apa yang bisa kita ubah dari laman tersebut, paling hanya memberi warna pada sisi bordernya saja, membuat efek transisi 3D bayangan pada lamannya, selebihnya ya untuk menuliskan artikel, upload gambar, publikasikan jadi dech artikel baru.

Tetapi setelah tadi iseng-iseng design HTML kode Template, ternyata laman posting ibarat sebuah kertas tempat kita menuliskan artikel, dan posisinya mempunyai kode tersendiri pada struktur template yang dapat kita ubah bentuk dan gaya tampilannya, dengan sedikit sentuhan CSS kode saya coba memberi tumpukan kertas baru pada laman posting, sehingga kolom posting yang biasa menampilkan artikel akan terlihat ada 3 kertas yang tertumpuk layaknya sebuah buku.

Berikut kode CSS yang saya tambahkan didalamnya, Saya menambahkan 2 lembar kertas dengan ukuran yang sama, 2 lembar kertas kosong dan 1 kertas untuk postingan, jadi ada 3 lembar kertas yang menumpuk

.paper1 {
  width:auto;                                                /*(830 + 0)*/
  background:#fff;
  border:1px solid #cecece;}
.paper1:before {
  width:754px;                                            /*(830 + 26)*/
  background:#fafafa;
  border:1px solid #ccc;}
.paper1:after {
  width:761px;                                           /*(830 + 31)*/
  background:#fafafa;
  border:1px solid #cecece;}

Hasilnya
Gambar Efek Tumpukan Kertas
Gambar diatas membuat saya tertarik untuk memberikan sedikit HOVER pointer klik pada kodenya, Kode ini akan mengatur tampilan back/kembali ke-dafault, detailnya jika postingan terbuka akan terlihat seperti biasanya, tetapi saat pointer klik mouse melintas, maka akan terjadi efek yang secara otomatis akan menampilkan tumpukan kertas baru yang kita beri pada kode pertama

Berikut kode CSS untuk memanggil efek tumpukan kertas untuk laman posting

.paper1 {
  padding:15px;
  height:100%;
  position:relative;
  -webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  box-shadow:0 0 2px hsla(0,0%,0%,.2);}
.paper1:after, .paper1:before {
  content:'';
  bottom:-3px;
  height:100%;
  left:1px;
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -moz-box-shadow:0 0 2px hsla(0,0%,0%,.2);
  box-shadow:0 0 2px hsla(0,0%,0%,.2);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;}
.paper1:before {
  bottom:-5px;
  left:5px;}
.paper1:hover:after {
  -webkit-transform:rotate(-3deg) translate(-20px,0);
  -moz-transform:rotate(-3deg) translate(-20px,0);
  -ms-transform:rotate(-3deg) translate(-20px,0);
  -o-transform:rotate(-3deg) translate(-20px,0);
  transform:rotate(-3deg) translate(-20px,0);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;}
.paper1:hover:before {
  -webkit-transform:rotate(3deg) translate(20px,0);
  -moz-transform:rotate(3deg) translate(20px,0);
  -ms-transform:rotate(3deg) translate(20px,0);
  -o-transform:rotate(3deg) translate(20px,0);
  transform:rotate(3deg) translate(20px,0);
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;}

Hasilnya
DEMO SHOW


Seperti biasa, saya akan selalu memberikan keterangan kode-kode CSS diatas agar pengunjung setia SAHABAT BLOGGER 77 dapat dengan mudah memahami dan meng-custom untuk penerapan pada blog. Mudah-mudahan Membuat Efek Tumpukan Kertas Pada Laman Posting dapat bermanfaat.

KETERANGAN KODE
  1. Perhatikan kode I, Ada 3 CSS Code, 1 untuk tampilan default laman posting dan 2 kode berikutnya kertas kosong sebagai tumpukan, disamping masing-masing kode sudah saya beri ukuran yang sesuai dengan lebar laman posting saya, jadi silahkan sesuaikan karena template saya belum tentu sama dengan anda
  2. Kita lanjut pada kode II, Kode ini untuk menentukan gaya tampilan hover efek tumpukan kertas postingan, ROTATE kecepatan untuk muncul saat pointer klik, sedangkan transisi adalah pemanggil efek-nya per second out. Jadi saya sarankan jangan mengedit kode ini jika belum yakin
  3. Kode CSS diatas sudah saya susun pada tempat yang sebenarnya (No potition edit, OK guys.!!) dan membuang kode yang error, jadi kodenya aman untuk di komsumsi, hehe..!!
  4. Saatnya penerapan ke Blog, Kita kembali lagi pada kode I, disana ada kode .paper1 {..}, kode ini sudah merupakan atribut class, jadi pada postingan cukup anda tambahkan class="paper1"
Contoh-

<div class="paper1">ISI TULISAN ANDA</div>
SELAMAT MENCOBA..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Efek Tumpukan Kertas Pada Laman Posting
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 =

29 komentar

  1. pertamax di simpan dulu :)

    berarti kalau semakin banyak postingan tumpukan nya juga semakin banyak yaa mbak
    waah boleh di coba nih code css nya :))

    BalasHapus
    Balasan
    1. tetapi sisain buat yang lain ya bang pertamaxnya,karena bensin lagi ngadet,hehe
      Postingan semakin banyak berarti kertas baru akan selau mencul untuk tulisan berikutnya, begitu bang

      Hapus
    2. Saya masih kebagian gak nih Mas Ferdon
      apa saja deh yang masih tersisa boleh saja hhh :D

      Hapus
  2. Cakep hasilnya Mbak, mantap dah tutorialnya.

    BalasHapus
  3. wah... cakep banget bos, ijin copy CSS dan mempraktekannya yia bos, hehehe....

    BalasHapus
    Balasan
    1. silahkan mas, semoga halaman postingannya jadi semakin keren dengan efek ini

      Hapus
  4. Wah bagus ni untuk dicoba dan sebagai inspirasi menarik, salam kenal ya mbak blogger 77

    BalasHapus
  5. Keren ya mbak..hehe saya pelajari pelan2 ya mbk..makasih banget

    BalasHapus
  6. sumpah keren mbak,
    akan saya pelajari :D

    BalasHapus
    Balasan
    1. sumpah pemuda ya mas,,hehe,alhamdulillah kalu mas merasa keren mah,terimakasih pujiannya mas.

      Hapus
  7. keren sob... izin simpan ya

    BalasHapus
  8. Keren Mbak.... kreatif abis tentunya :)
    Saya coba dulu ya Mbak :)

    BalasHapus
  9. Selamat sore Mbak Devy, kinjungan perdana kalau gak salah yah Mbak saya?
    Salam kenal sebelumnya, simak artikel tumpukan kertasnya menarik ijin coba
    Untuk terapkan di Blog saya Mbak salam sukses dan salam sejahtera :))

    BalasHapus
  10. Ijin follow blog nya juga yah Mbak? agar blogwalking lebih nyaman
    Blog Mbak Devy sudah saya Follow succesful terima kasih :)

    BalasHapus
    Balasan
    1. seip dah mas, langsung ke TKP follback follow juga bang

      Hapus
    2. Oke deh Mbak Devy terima kasih atas kerja samanya
      Semoga Mbak Dey dan Blog nya sukses dan lancar terus amin :)

      Hapus
  11. keren haha buat blog jadi ga bosen dilianya
    slam knal juga

    BalasHapus
  12. bagus mbak..
    tp sayang.. sudah nggak ada tempat kosong di blog saya nih..
    hehehe.. saya nyimak aja ya sambil numpang minum kopi..

    BalasHapus
  13. Langsung dicoba...

    BalasHapus
  14. kodenya lumayan banyak juga sob.

    BalasHapus
  15. Cehhh, selalu ada yang baru di sini...

    BalasHapus
  16. Kunjungan sore yang Indah di blog Mbak Devy yang serba wah blognya
    Bagus desain blog nya. dan artikel efek tumpuk ini melengkapi postingan
    Keren dan bagus sekali. salam sukses

    BalasHapus
  17. Walah, kalo keren begini malah top hehe

    BalasHapus
  18. keren mbak. Ijin nyoba ya

    BalasHapus
  19. Nice post kawan...
    Sungguh menyenangkan ibsa mendapatkan ilmu semacam ini...

    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