Kamis, 24 Mei 2012

Cara Membuat Tombol Home, Next, Dan Previous Di Blog


Kali ini Saya akan membahas Cara Membuat Tombol Home, Next, Dan Previous Di Blog dengan gambar/icon, seperti yg pernah kita lihat di blog lain. Biasanya kalau template bawaan itu masih berupa tulisan.

Tanpa berlama lama berikut cara membuatnya :
  • Login ke blogger.com, jika sudah,
  • Pilih Template → Pilih Edit HTML → Expand Template Widget
  • Cari kode <data:newerPageTitle/> agar mudah mencari tekan f3
  • Ganti kode <data:newerPageTitle/> dengan <img src="URL gambar next page" alt="Next" />
    kode itu untuk mengganti tulisan "next page /posting baru" dengan gambar/icon.
  • Cari kode <data:olderPageTitle/>
  • Ganti kode <data:olderPageTitle/> dengan <img src="URL gambar previous page" alt="Prev" />
    kode itu untuk mengganti tulisan "previous page /posting lama" dengan gambar/icon.
  • Cari kode <data:homeMsg/>
  • Ganti kode <data:homeMsg/> dengan <img src="URL gambar home page" alt="home" />
    kode itu untuk mengganti tulisan "home" dengan gambar/icon.


Contoh gambar home page :


Contoh gambar next page :


Contoh gambar previous page :



Di bawah ini adalah contoh URL gambar home page yang bisa Sobat gunakan secara gratis :
  • http://i1168.photobucket.com/albums/r493/bysorry/tengah-1.png
  • http://icons.iconarchive.com/icons/archigraphs/collection/64/House-icon.png
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DR9r2dNR1mhE16gyOCDXgT4yGAfTABtEVe92Lk3TO7m69IsK2B519tSof6uR3sTocSeq8srEdADzY3AxKtvy4di-cl3tzUzu4BInVDpQ2ImqwD_q1GXYLa-_En527PIYLJUueon-q1w/s1600/otowebsite_home.png




Di bawah ini adalah contoh URL gambar next page yang bisa Sobat gunakan secara gratis :

  • http://i1168.photobucket.com/albums/r493/bysorry/2-4.png
  • http://icons.iconarchive.com/icons/mattahan/umicons/48/Arrow-Left-icon.png
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Y3hW9oOAUP8avpgtHHNyjUp5lLiO0yIxYKVu5o76Ohkf4BR6-mV3s8aBb-iUmoSXAys9_HbEt4utHxW-3lVqV_Icvc1nWEd-2fIm5MF_iRaGmJ8UmM_Jge7cEu3GBW1_ePS-IrhgZTg/s1600/otowebsite_next.png


Di bawah ini adalah contoh URL gambar previous page yang bisa Sobat gunakan secara gratis :

  • http://i1168.photobucket.com/albums/r493/bysorry/1-4.png
  • http://icons.iconarchive.com/icons/mattahan/umicons/48/Arrow-right-icon.png
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYLkx12XXGaN5E9iOgGuCj8-8Ijp4mRtGl8_IlpHu1TwVT0u6uPXeXYzlMk9OqPdg-mCpgNX8adIBv6XP1rVHiBFCKpI_oPvzGxn1oz17yGpQUBSde4TWRIHoQdx3yuR9uM3vUNnCYQnI/s1600/otowebsite_prev.png

Perhatian :

Untuk mendapatkan link gambar/icon yang sobat punya sendiri, Sobat bisa upload ke photo bucket dan ambil link URL nya.


Perhatian :
  • Biasanya, ada dua kode <data:homemsg> , Pilih yang paling atas !
  • Ganti kode terserah dengan alamat gambarnya 

  • Simpan dan lihat hasilnya

Selamat Mencoba !

Tidak ada komentar:

Posting Komentar