Membuat Tombol Prev Next Shadow Melayang di Template Plus UI 2.6.2

Tutorial membuat 'Tombol Prev Next' efek melayang di Plus-UI 2.6

Tombol Prev Next Shadow Melayang di Template Plus UI 2.6.2

Tombol Prev Next

Tombol Prev Next adalah tombol navigasi next dan previous pada blog merupakan sebuah menu navigasi blog yang secara default berada di bawah postingan untuk memberitahu pengunjung supaya bisa memilih antara postingan sebelumnya dan postingan selanjutnya.

Dan kali ini kita akan mencoba untuk memodifikasi tombol navigasi pada template Plus UI tersebut supaya menjadi lebih keren dan juga responsive, juga menambah nilai user friendly maka kita akan memodifikasinya dengan cara memberikan efek bayangan shadow pada Tombol Next Post dan Previous Post.

Tutorial

Bagaimana caranya membuat tombol prev next shadow ?. Cara mudah membuat tombol previous next shadow bayangan seperti melayang pada Template Plus UI, dengan menambah kode CSS sebagai berikut.

Copy Paste Kode Script

1. Pertama Masuk ke Dashboard Blogger.
2. Pilih Tema.
3. Pilih Edit HTML.
4. Kemudian cari kode .chpN >*{ yang terletak di /* Post Next or Prev */, setelah ketemu salin kode di bawah ini dan tempelkan setelah kode .chpN >*{ .

box-shadow: 0 2px 8px #212121; border-radius:10px;padding:5px 10px;border: 1px #eee;

Sehingga contoh hasilnya menjadi seperti di bawah ini.

  
.chpN >*{ box-shadow: 0 2px 8px #212121; border-radius:10px;padding:5px 10px;border: 1px #eee; ................

5. Terakhir Pratinjau dan Simpan

Demo

Prev Next Shadow

Demikian cara mudah membuat tombol previous next shadow melayang di template Plus UI , semoga bermanfaat.

Go to Link