Cara Mengganti Older/Newer Post-Home Blogger dengan Teks/Gambar Icon

older-neer-post-home-links


Tutorial cara mengganti text "Older Post", "Home", dan "Newer Post" di Blogger/Blogspot dengan tulisan lain atau gambar (icon)

Jika kita melihat dan mengamati tulisan older post, newer post, dan home dalam tampilan template Blogger/Blogspot, tampak kurang menarik, terkesan jadul, dan tidak profesional, bukan? Sebagai alat navigasi, tentunya anda perlu memperhatikan tampilannya agar lebih menarik pengunjung untuk meng-klik-nya.

Anda dapat dengan mudah mengubahnya menjadi tulisan lain atau gambar (icon) dengan cara sebagai berikut:
1. Masuk ke dashboard > design/rancangan > edit HTML, klik "Expand Widget Templates".
2. Cari kode yang berwarna merah sebagai berikut:
Wujud barisnya biasanya seperti ini, kopi kode yang berwarna merah dan masukkan ke kotak pencarian browser (Ctrl+F).
expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>
expr:title=’data:olderPageTitle’><data:olderPageTitle/></a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
(yang terakhir adalah Home/Beranda, biasanya ada dua, jadi cari satu lagi).

3. Perhatikan poin-poin berikut:
a. Jika ingin mengganti dengan tulisan lain:
<data:newerPageTitle/> adalah newer post, hapus dan ganti dengan "Previous" atau kata-kata sejenisnya yang diinginkan.
<data:olderPageTitle/> adalah older post, hapus dan ganti dengan "Next" atau kata-kata sejenisnya yang diinginkan.
<data:homeMsg/>adalah home/beranda (biasanya ada dua, jadi jika ingin mengganti, maka ganti keduanya), biarkan begitu saja atau ganti dengan "Home" atau kata-kata sejenisnya yang diinginkan.
Contoh:
expr:title=’data:newerPageTitle’>Next</a>
expr:title=’data:olderPageTitle’>Previous</a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>Home</a>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’>Home</a>
b. Jika ingin mengganti dengan gambar (icon):
Masukkan script image source sebagai pengganti dari tulisan: <img src="url gambar icon"/>
contoh:
expr:title=’data:newerPageTitle’><img src="http://4.bp.blogspot.com/-h81HEqJYuec/TcAX4t0shsI/AAAAAAAAAc0/u_5hpy8lbIo/s1600/next.png"/></a>
dan seterusnya......

Anda dapat menggunakan gambar berikut, seperti yang dipakai blog ini, namun upload dan host sendiri ya. Klik kanan di atas gambar dan klik "save image as", atau bisa cari di internet. Lalu upload gambar dan ambil direct link-nya, masukkan seperti contoh diatas.

4. Langkah terakhir, preview terlebih dahulu, atau langsung save.
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Mengganti Older/Newer Post-Home Blogger dengan Teks/Gambar Icon
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 53 Comment(s):

istiqlal said...

sibb, udah dicoba

Ahmad Khoirul Azmee said...

good lah :D

D-quote said...

thanks ya mas...

Amrini Zulfa Sukmawati said...

bagaimana ini..... aku gak bisa posting text+gambar secara bersamaan.....
Help me, Please....!!!!!!!!

Ahmad Khoirul Azmee said...

maksudnya ga bisa posting gambar+text bersamaan bagaimana? jelaskan lebih rinci.

Portal Unique said...

dapet lagi artikel yang saya dari om ahmad ..

minta izin pake gambar buat icon'nya. untuk sementara aja ^^v

Ahmad Khoirul Azmee said...

silahkan, tapi gambarnya di host sendiri ya...

WerYWerewolF EvolutioN said...

Thank's
sangat bermanfaat

Rizki said...

thank ya http://mashasih.blogspot.com

ADMIN [akita-kun.com] said...

Wah makasih banget yaa gan udah sangat bermanfaat u/ template baru saya!!

Stupid monkey said...

terima kasih informasiny sob

Prayogi said...

tengkyu kang infonya....sudah di coba! suksesss!!!

aat said...

siip bro...
infonya manjur

yOu said...

Berhasil kan... ada tapinya kang... Kalo di halam muka ok.. v pas di halaman postingan malah di pinggir kotak komen + tertutup sebagian.. gimana ya kang ?mhon bantuannya

dinira said...

kok nggak bisa ya, ada tulisan "Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Content is not allowed in prolog." itu gimana ya tolong bantu dong._.thanks

Waldi said...

Blh tny g? Bgmn cr merubah link posting artikel pd blog kita? Thanks ya ats jawabannya..

Ahmad Khoirul Azmee said...

@Waldi: maksudnya mengubah tampilan judul posting?
akan sangat panjang jika lewat komentar, ke depan akan saya buat postingnya :)

Shodiq Wibowo™ said...

Thank you gan, mantap

my blog>>punyashodiq.blogspot.com

App said...

Klw mengganti dengan Page 1 of 24 | 1 2 3 4 .... 5 | Next | Previous gmana caranya??
sbg contohnya kyk www.pastiunik.com
mohon pencerahannya :)

Rendy Marfitra said...

wah makasih ya gan ^_^

thx


kunjung balik ya


http://rendymarfitra.blogspot.com


thx

Yudha said...

sukses gan, makasih infonya...
ditunggu kunjungan baliknya...

yOuShiE said...

terima kasih infonya... snagat bermanfaat

iyal said...

Gan ada yang ico tanggal gak?jadi misalnya hari ini taggal 24,di older postnya icon tanggal 23!tolong ya gan

Tutorial Blogger said...

makasih

Yaumil Akbar Firdaus said...

izin pasang y mas

ABP said...

Thnx bgt infonya gan..skrg di http://limitededition88.blogspot.com/ udah ada.,

...:::DieBrie:::... said...

info menarik.... ada icon yang lain ga gan?


salam kenal
www.adib21.com

tamtamcomputer said...

nice post

yozi_dp said...
This comment has been removed by the author.
yozi_dp said...
This comment has been removed by the author.
Abang Bung said...

Masukkan script image source ,,,, di belah mnh mas kurang jelas ,, minta pencerahannya mas ,,

dedi26 said...

wah terima kasih info nya gan,, lumayan tambah pengetahuan,, maklum hanya msh newbie di dunia blog

Ahmad Khoirul Azmi said...

@Abang: itu di bawahnya sudah ada contohnya, tag html untuk memasang gambar.

Abang Bung said...

mas azmi sip,sip ,, makasih banyak sudah,,, berhasil mas ,,

Ribka Cecilia said...

Wahhh om , makasih , berhasil ane~! gila ente pinter om , dapet darimna kode script gini ??? yang pake inggris itu bukan ?

Anggara D. Rezpector said...

kok ane g'muncul ya?? ane pke template Zoom Magazine

Visit : http://freedownloadfromadr12.blogspot.com/

Aditya said...

Makasih Banget bossss

seven said...

punya saya kok gag muncul2,
tu uploadnya dan hostnya d mana???

mohon pencerahannya...

Ahmad Khoirul Azmi said...

@Seven: itu uploadnya cuma di picasa aja lewat blogger. buka post editor blogger seperti mau bikin posting baru. upload gambar, masukkan ke posting, kemudian ambil url nya.

Teknisi.blogspot.com said...

Nice Info. Visit Back http://theknisi.blogspot.com

revoreva said...

thanks masbro.. :D

Akhir Alubi said...

Okee gan.. mantaap infox...
oiaa,, saya juga copy beberapa artikel kamu, tpi sebeagai blogger kita harus saling menghargai cipta orang lain... jadi di bawa artikel yang saya copy, ada link blog ini..

Makasih .. ^_^ salam blogger... bisa di cek dsini.. http://13erbagipengetahuan.blogspot.com/2012/07/cara-buat-fitur-emoticonsmiley-di.html

Satrio.Komputer said...

Wehh
luar biasa sekali.. sya ikut tutorialnya mas Azmie...

dari Nol sampe lumayan ngerti.

All : mampir sob di
http://www.satriokomputer.com

-=[ Doni ]=- said...

mantp neh postingnya, gan :)
Thank's dah share..

main2 keblog gwa yah:
doni-efendi.blogspot.com

apri naldi said...

wah terimakasih bnyak om dah ngasih cara2 memperindah blog,nih baru asli nunjukin cara2nya gak asal aja,yang udah2 gg ada yang berhasil smuanya hanya blog ini yg oke n bermanfaat buat pemula seperi saya..??

salam dari : http://aprinaldie.blogspot.com

mantau said...

Terima Kasih banyak, sudah saya terapkan dan berhasil :D

Petuboy said...

Terimakasih buat tutorialnya, jadi lancar-car... :D

tendou pain said...

Thanks kk, ditunggu selalu artikel menariknya

Video Gratis Animasi Subtitle Indonesia untuk PC dan HP

Rheza Ramadhan said...

mantap sangat membantu ^^

Alief Rezki said...

pake alt text gak ?

Toms said...

thanks pak :D

Islam Cendekia said...

makasih gan, aku selalu cari blog buka-rahasia.blogspot.com kalo mau tanya soal blog, soalnya penjelasannya bagus kayak di buku, gak seperti blog2 lain yang cuma spam demi indeks google. Lanjutkan menulis artikel berkualitas gan, salam dari kami
www.islamcendekia.blogspot.com

Afiq Ilyasa said...

cara pake background dalam kode html nya gimana ya? saya bingung nih..

trims>kalo tidak bisa lewat komentar, tolong kirim lewat afiqilyasa4@gmail.com.

thx

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap