Membuat Tombol Next Prev Di Samping Kiri Kanan Blog

Membuat Tombol Next Prev Di Samping Kiri Kanan Blog

Bola Hero Gawai

Membuat Tombol Next Prev Di Samping Kiri Kanan Blog

Tombol Next Prev
Melanjutkan pembelajaran saya tentang CSS Sprite untuk image di blog, sasaran saya kini tertuju pada tombol next prev di bawah. Alasan utamanya yaitu ingin menyingkirkan penomoran halaman yang sebelumnya saya pakai di homepage. Loading blog jadi tersendat oleh hostingan javascriptnya.

Sekalian memodifikasi next prev yang telah ada (blogger) dengan image yang ditambahkan efek hover transisi sehingga image seperti bergerak ketika disorot mouse. Dan kali ini saya pindahkan tombol next prev-nya dari bawah ke kiri dan kanan blog. Ditambahkan juga efek sticky sehingga tombolnya akan selalu nampak biar pun halaman digulang ke atas atau ke bawah.

Enggak usah dibuatkan demonya karena saya sudah menerapkannya di Kompi Ajaib ini. Silahkan lihat di kiri dan kanan blog, ada icon next prev dan silahkan sorotkan mouse Anda ke atasnya. Icon akan bergerak ke kiri dan kanan blog.

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

Biasanya kode css untuk pengaturan letak tombol next prev akan tampak seperti di bawah ini:

#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center}

Agar tombolnya pindah ke kiri dan kanan blog, rubah kodenya menjadi seperti di bawah 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}

Nah sampai di sini sekarang tombol next prev blog Anda sudah pindah ke sisi kiri dan kanan blog. Jika Anda ingin modifikasi tombolnya dengan icon, silahkan ikuti langkah-langkahnya seperti di bawah ini.

Silahkan ganti kode css pengaturan tombol next prev lama (seperti kode di atas tadi) dengan kode di bawah ini:

a.home-link{display:none}
#blog-pager-older-link a, #blog-pager-newer-link a {background:url(http://2.bp.blogspot.com/-cJuvrllFnjM/UbFp8muCOyI/AAAAAAAAYxM/3Bl8krsFx6I/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}

Perhatikan kode yang berwarna biru, itu adalah jarak icon dari tepi atas. Silahkan atur jaraknya agar sesuai dengan blog Anda. Untuk kode yang berwarna merah paling atas adalah untuk menyembunyikan tombol home/beranda karena saya pikir link homepage (home/beranda) biasanya sudah ada pada menu header atau menupage jadi saya hilangkan saja.

Perhatikan tulisan yang berwarna merah, itu adalah url imagenya yang menampilkan icon next prevnya. Ada beberapa gambar yang saya sediakan dalam beberapa warna di bawah ini. Silahkan pilih yang sesuai dengan tema blog Anda dan ganti tulisan/kode yang berwarna merah di atas dengan url image yang Anda pilih (untuk image yang ada di kode di atas iconnya berwarna merah).

Silahkan pilih gambar-gambar di bawah ini yang sesuai dengan selera dan tema blog anda kemudian copy url imagenya

Biru

http://2.bp.blogspot.com/-8g5CCIPoCE4/UbG5a5Z8SqI/AAAAAAAAYyE/1YH53gJtO-Y/s1600/nextprevbiru.png

Hijau

 http://2.bp.blogspot.com/-fr_X9V-bCYg/UbG5a_g88DI/AAAAAAAAYyM/JuVz23aDDVs/s1600/nextprevhijau.png

Hitam 

http://4.bp.blogspot.com/-16AsFDA0iVs/UbG5a9kw14I/AAAAAAAAYyU/P6F2tz9XcKY/s1600/nextprevhitam.png

Kuning

http://4.bp.blogspot.com/-MChsqce5CQQ/UbG5bYyFe9I/AAAAAAAAYyc/ajPRmCtjvIU/s1600/nextprevkuning.png

Ungu

http://1.bp.blogspot.com/-bWQ7oEvBEHE/UbG5bvFizFI/AAAAAAAAYyg/Fua6s6YdZ-8/s1600/nextprevungu.png

Demikian saja cara membuat tombol next prev di samping kiri dan kanan blog. Semoga dapat dimengerti dan bermanfaat.

UPDATE:
Maaf ada kesalahan pada kode di atas yang menyebabkan error pembacaan html blog. Silahkan rubah kode a.home-link{display:none} dengan kode a.home-link{visibility:hidden}.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

39 Comments Add Comment

pertamax..
oya, itu kalau udah ada blog pager-nya dihapus dulu apa tidak?

btw, saya ngefans banget sama maskolis dan mas kompi (kurang tau namanya), udah beberapa x coba edit templatenya maskolis tp slalu berhenti di tengah jalan. Buat mas kompi, kasih ilmunya sedikit dong, tool apa aja yg di pake, karena saya cuma pakai notepad.
ini pekerjaan saya beberapa waktu lalu, kurang lebih 2 jam saya utak atik hasilnya kayak gt, setalah itu tidak saya lanjutin lagi :(

Balas

maaf lupa, ini mas http://template-embuh.blogspot.com/

Balas

Iya dihapus blog pagernya karena nanti akan menghilangkan tombol next prev blogger, jadi sia-sia deh. Lagian saya pikir malah jadi double ya blog pager ya tombol next prev. Dengan menghapus blog pager maka menghilangkan salah satu beban blog.

Untuk blog editannya dilanjutin lagi aja mas... karena gimana mau bisa kalau ga berani mencoba. Jangan pantang menyerah.

Balas

Mantapp gan , cara mmbuat pesan berkomentar caranya gmna gan ?

Balas

Next Preview model baru ya Mas? saya baru lihat modelnya...
btw tidak memberatkan loading blog mas?

Balas

Itu dari kang Ismet mas...
http://blog.kangismet.net/2013/05/membuat-pesan-di-atas-form-komentar.html

Balas

Ini hanya memodifikasinya dengan css. dan untuk imagenya memakai css sprite jadi hanya perlu 1 image untuk menampilkan 4 image dengan size kecil (2 next dan 2 prev). :D

Balas

Gan caranya bikin tulisan kayak home,kontak,about di samping hearder gmn?

Balas

Sama aja seperti membuat menu pada umumnya, tapi pemanggilnya disimpan di widget header2 (biasanya dipakai untuk slot iklan).

Balas

Mas gimana cara buat tombol kembali ke atas,, kayak punya kompi ajaib, Makasih.. :D

Balas

Sudah saya posting dulu, silahkan ketikan keyword "scroll to top" di search box di atas. Untuk tampilannya silahkan modif pada kode cssnya.

Balas

oh gitu ya, udah paham mas, trimakasih..

hehe, iya mas kalau ada waktu saya lanjutin. bagi2 terus ilmunya ya mas :)
dan kalau boleh tau, dasar template kompi ajaib ini apa ya?
maaf mas bnyak nanya..

Balas

Dasar templatenya "Bukan johny" dari Maskolis :D

Balas

menurut mas kompi lebih ringan mana ama next prev mas kompi yg sebelumnya?

Balas

Kalau dibandingkan dengan next prev button standar bawaan blogger jelas lebih ringan standar bawaan blogger karena berupa teks dan tampilannya dimodif pakai css (background). yang ini ada beban image tentunya, makanya saya gunakan teknik css sprite untuk imagenya dengan meminimalkan size image sehingga hanya perlu 1 url image untuk menampilkan 4 image.

Namun kemarin saya menggunakan blog pager untuk menggantikan tombol next prev blogger yang tentunya menggunakan javascript. Alhasil blog jadi terbebani sama javascriptnya. Untuk itu saya buang blog pagernya dan modif tombol next prevnya dengan ini.

Balas
This comment has been removed by the author.

yg bener mas?
udah nggak ada miripnya sama skali :D
maaaf jadi OOT :D

Balas

Keren kreasinya om...

Oh iya mau lapor ternyata ada blog yang ngefans bgt sama blog om adhy.xixixi
coba intip
planetajaib.blogspot.com

Balas

Iya hehehe... :D serasa jadi selebriti pakai ngefans segala :D

Balas

tapi wrnya yang merah ? ada gak ?

Balas

Cara buat konversi kode sama OOT caranya gmna mas , cuma tinggal itu..

Balas

Iya nih, sampe posting yang ini juga di tiru haha...
pengen donk minta tanda tangan..xixixi

Balas

Sama itu juga dari kang Ismet.

Balas

bagi link nya dong mas.

Balas

Kan ada itu di atas, diobok-obok aja di kang Ismet :D

Balas

parah emang tu admin Pl**etaj**b :D

Balas

mas mw tanya nee saya kemaren utak atik template ehh gak tau nya tombol next prev bawaan blog nya gak nongoll gimana tu solusinya
balas donk ke districk2014@gmail.com

Balas

Saya jadi bingung jawabnya...kode yang mas kutak-katik juga saya ga tahu....Gini aja kan kalau sebelum kutak-katik pastinya dibackup dulu template blognya, coba kembaliin lagi backupnya.

Balas

help-help


kenapa tombol nextpage dan prev.page di halaman awal blog saya hilang.

Balas

Mungkin ada yg salah dengan script pagenumber-nya mas...

Balas

om gmna cara modofikasi form komentar nya.. pengen juga om..
kasih tips ny yaa..

Balas

mas saya minta tolong, untuk membuat tombol2 HOME GAMES TEMPLATE HEALTH dll secara berurutan yang ada bagian paling atas halaman blog bagaimana caranya ya? Tolong mas, saya membutuhkan sekali, tolong balsannya ke email okeeeoke@gmail.com. Terima kasih sebelumnya.

Balas

Terima kasih ya mas,udah saya pasang di blog saya. Pokoknya keren lah. :)

Balas

Berhasil. Saya sudah trial dan pasang di Hotline Terkini.

Teknik CSS-Sprite agar hanya perlu 1 url image untuk menampilkan 4 image. HEBAT.
Saya masih bingung, kenapa pada pager-older-link,= (background-position:-29px 0;), sedang pada pager-newer-link,= (background-position:0 -47px;), Bukankah size img=35x35px. Kalau position img terletak simetris pada sebuah Square (bukan rectangular), bukankah value transitionnya seharusnya sama gan??.Maaf saya baru mengenal HTML dan CSS.

saya semakin kagum sama 3M.
Terima kasih.

Balas

asiik gan mampir semua dong ke blogku..tolong informasiin semua,,blog ku sepi soalya...

Balas

makasih mas, kunjungi juga blog adik ya http://prediksibola888.blogspot.com

Balas

Datang Lagi Mas Adhi, mau saya gunakan untuk blog yang lain.
Makasih ya Mas Adhi, saya tetap cinta dengan kreasi-kreasi mas Adhi. Selalu segar dan penjelasannya mudah difahami.

He..he.. semua blog saya menggunakan ini.
Terima kasih.

Balas

great tutorial, I love it!

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×