Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

Tutorial Blogger, Kesehatan, Islami

  • HOME
  • DAFTAR ISI
  • BLOGGER
  • TEMPLATE
  • TIPS TRIK
  • SEO
  • DESAIN BLOG
  • WIDGET
  • KESEHATAN
Home Blogger Desain Blog Tips And Trik Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

Ketemu lagi dengan saya disini dan Alhamdulillah saya masih diberi kesempatan oleh Allah SWT untuk membagikan artikel kepada anda semua. Artikel pembuka hari ini yaitu artikelMembuat Tombol Next Prev Di Samping Kanan Kiri Blog , Cara ini sendiri saya terapkan di blog saya ini , kalau anda ingin melihat silahkan lihat pada kanan kiri blog ini , pastinya ada Tombol Next Prev Di Samping Kanan Kiri Blog ini. Tutorial ini sendiri di buat oleh blog www.kompiajaib.com yang telah memodifikasi Membuat Tombol Next Prev Di Samping Kanan Kiri Blog ini.

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

Sebelumnya saya juga pernah membagikan suatu tips kepada anda semua yaitu artikel yang berjudul Membuat Blockquote dengan Fungsi Popup Copy Plain yang berguna untuk memudahkan pengunjung dalam mencopy kode di blockquote kita.

Untuk menerapkan trik memindahkan tombol next prev dari bawah ke sisi kiri dan kanan blog ini seperti kata kompiajaib :  sebenarnya sederhana saja. Anda hanya perlu tambahkan kode "position:fixed" agar icon tetap mengambang. Tambahkan juga pengaturan jarak atas, kiri, dan kanannya.

Untuk Membuat Tombol Next Prev Di Samping Kanan Kiri Blog anda perlu melakukan langkah-langkahnya berikut in :

1. Loggin Ke blogger Anda
2. Klik Template > Edit HTML
3. Cari kode dibawah ini :
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center}
4. Gantilah kode diatas dengan kode berikut ini :
#blog-pager-newer-link{float:left;position:fixed;left:10px;top:500px}
#blog-pager-older-link{float:right;position:fixed;right:10px;top:500px}
#blog-pager{text-align:center} 
5. Silahkan anda ganti kode css pengaturan tombol next prev lama (seperti kode di atas tadi) dengan kode di bawah ini:
a.home-link{visibility:hidden}#blog-pager-older-link a, #blog-pager-newer-link a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlCzEzqjYZO7T2ZNuWCjuwG_dqO1hOQeK4-aZZOUPKOjffhKW4m_sYPxkONbgt5m91Yroo8V-GVchedTsI9jmUtuaIvzrdPxGLckunqAHly8vRehF73Zbzmpz25ww3BYN7XsDRHmz4ltc/s1600/nextprev.png) no-repeat transparent;text-indent:-99999em!important;}
#blog-pager-older-link a{float:right;position:fixed;right:10px;top:500px;display:block;width:35px;height:35px;background-position:-29px 0;transition:all 400ms ease-in-out}
#blog-pager-older-link a:hover{background-position:10px 0}
#blog-pager-newer-link a{float:left;position:fixed;left:10px;top:500px;display:block;width:35px;height:35px;background-position:0 -47px;transition:all 400ms ease-in-out}
#blog-pager-newer-link a:hover{background-position:-35px -47px}
Kode berwarna biru  itu adalah jarak icon dari tepi atas ,Silahkan atur jaraknya agar sesuai dengan blog Anda.

Anda juga bisa mengganti gambar Next Prev Di Samping Kanan Kiri Blog anda , dan anda bisa memilih jenis tombolnya dibawah ini :


Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevhijau_zps0a34c059.png

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevhitam_zpsc058a99e.png

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevkuning_zps3ac71ab2.png

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevungu_zps39532b73.png

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevbiru_zpsa96b9cbf.png

Anda bisa memilih warna kesukaan anda , juga bisa memilih sesuai warna template blog anda.

Demikianlah artikel saya hari ini tentang Membuat Tombol Next Prev Di Samping Kanan Kiri Blog semoga artikel ini bisa bermanfaat dan berguna bagi anda semua, dan bila ada tutur kata atau pengucapan saya yang kurang baik saya mohon maaf sebesar-besarnya , Wassalamuaikum.
Tweet

17 Responses to " Membuat Tombol Next Prev Di Samping Kanan Kiri Blog "

  1. Unknown8 Juni 2013 pukul 12.57

    Nice share gan :)

    BalasHapus
    Balasan
      Balas
  2. Unknown8 Juni 2013 pukul 13.09

    Keren Artikelnya Bang.
    jgn lupa berkunjung ke blog cupu saya juga.
    polo-palo.blogspot.com

    BalasHapus
    Balasan
    1. Anonim8 Juni 2013 pukul 13.55

      udah saya kunjungi gan , blognya keren kok...
      BTW makasih ya

      Hapus
      Balasan
        Balas
    2. Balas
  3. Unknown8 Juni 2013 pukul 16.23

    Berguna banget gan , thanks ya .
    http://infoterupdatedanterbaru[dot]blogspot[dot]com

    BalasHapus
    Balasan
    1. Anonim8 Juni 2013 pukul 16.33

      makasih gan...

      Hapus
      Balasan
        Balas
    2. Balas
  4. Triyanto WS9 Juni 2013 pukul 23.01

    sangat bermanfaat , salam kenal kwan blogger baru
    http://den-ino.blogspot.com/

    BalasHapus
    Balasan
    1. Anonim10 Juni 2013 pukul 12.21

      oke

      Hapus
      Balasan
        Balas
    2. Balas
  5. Bung Destur12 Juni 2013 pukul 21.59

    wuihhhh keren

    BalasHapus
    Balasan
    1. Anonim13 Juni 2013 pukul 16.42

      hehehe , silahkan dicoba

      Hapus
      Balasan
        Balas
    2. Balas
  6. MHI13 Juni 2013 pukul 23.08

    makasih, saya coba ya

    BalasHapus
    Balasan
    1. Anonim14 Juni 2013 pukul 06.26

      ia , kok lama banget sih gak ngeblog ?

      Hapus
      Balasan
        Balas
    2. MHI14 Juni 2013 pukul 20.01

      ternyata belum berhasil...
      ujian~ nasib anak SMP :D

      Hapus
      Balasan
        Balas
    3. Anonim15 Juni 2013 pukul 16.20

      hehe , sama dong , tapi saya udah selesai ujiannya :D

      Hapus
      Balasan
        Balas
    4. MHI16 Juni 2013 pukul 00.13

      saya juga udah~ *hurray

      Hapus
      Balasan
        Balas
    5. Anonim16 Juni 2013 pukul 07.44

      iya horee :D

      Hapus
      Balasan
        Balas
    6. Balas
  7. Anonim6 September 2013 pukul 14.28

    mantep tombolnya , izin pake :D

    BalasHapus
    Balasan
      Balas
  8. Anonim23 Juli 2014 pukul 22.12

    Wah, CSS Sprite ya sobat?. Bagus gambar penganti Nextprev nya. Ijin praktek ya sob.
    Terima kasih, salam blogger.

    BalasHapus
    Balasan
      Balas
Tambahkan komentar
Muat yang lain...

Posting Lebih Baru
Posting Lama
Beranda
Langganan: Posting Komentar ( Atom )

Sering Dibaca

  • planet ajaib

    Cara Membedakan Raket Yonex Asli Dengan Yonex Palsu

  • planet ajaib

    Inilah 4 Alasan Suami Ceraikan Istrinya

  • planet ajaib

    Langkah-Langkah Cara Membuat Blog SEO

  • planet ajaib

    Fenomena Mangkung Anggur Dinasti Ming Terjual 409 Miliar

  • planet ajaib

    Download Template Responsive Zikazev Blue

  • planet ajaib

    Hitung Mundur Google Pagerank Bulan Juni 2013 Dimulai

  • planet ajaib

    Khasiat dan Manfaat Sayur Pare

  • planet ajaib

    5 Pembalap GP Paling Legendaris di Dunia

Site Info

Blogroll

  • Harga Motor Yamaha Honda
  • Cek Resi JNE
  • Katalog Carrefour
  • Kata Kata Mutiara

Sahabat

Label

Aneh (13) Badminton (1) Bisnis (3) Blogger (67) Cerita (3) Cinta (3) Desain Blog (14) Directory (1) Fakta Menarik (2) Fenomena (2) gadget (1) Hewan (1) Hoby (2) Information (8) Internet (1) Iseng (12) Kata Kata Mutiara (1) Kecantika (1) Kecantikan (1) Kesehatan (45) Komputer (2) Manfaat (5) Olahraga (1) Pengetahuan (6) Resep (3) SEO (26) Software (1) Teknologi (3) Template (12) Tips And Trik (57) Tool Blog (3) Widget (18)
Privacy Police | Contact| About Me
Support : sertifikasi crane
isnpeksi dan sertifikasi
Copyright © 2013 Planet Ajaib - All Rights Reserved
Design by jasa sertifikasi crane
Powered by Blogger