Kesempatan kali ini ingin k'ian manfaatkan dengan sebuah tutorial blogging yang cukup sederhana, yaitu mengenai cara merubah tampilan text navigasi bawaan blogspot dengan menggunakan image atau gambar.

Oke sedikit penjelasan , kita mengenal navigasi bawaan blogspot sebagai berikut :"Older post, beranda/Home, dan New Post".. semua tampilan navigasi tersebut tentunya dengan menggunakan text saja bukan dengan menggunakan sebuah gambar. Kita mulai saja tutorialnya :
Perhatikan gambar disamping ini (klik gambar untuk diperbesar). tampak disitu k'ian menunjukkan tampilan tulisan next page sebagai navigasi bawaan dari blogspot.

Jika kamu sudah cukup paham sekarang kita masuk kedalam koding (code) untuk penjelasannya.

Masuk kemenu -->> Rancangan, kemudian pilih menu "Edit HTML".

Kemudian cari kode berikut ini :

Perhatikan kode yang berwarna merah diatas, kode tersebut adalah kode text dasar untuk menu navigasi yang akan kita ubah. selanjutnya adalah menambahkan gambar untuk masing-masing kode yang akan kita ubah tadi, dimana kode text "next prev" akan kita ubah dengan gambar "next prev" juga. begitu seterusnya ( untuk gambar bisa kamu cari dibeberapa link situs gambar seperti : photobucket, dll, atau kalau kamu cukup mahir menggunakan photoshop atau coreldraw bisa juga menggunakan salah satu dari kedua tutorial diatas).

Untuk sekedar contoh k'ian akan memasukkan gambar yang k'ian pilih, kamu bisa merubahnya sesuai dengan kebutuhan blog kamu. K'ian akan mencoba memasukkan gambar sebuah rumah seperti yang tampak dikanan artikel ini. --->
Gambar rumah disamping akan kita masukkan di dalam kode "home" yang telah k'ian tandai diatas, dengan menambahkan kode <img src="Url gambar"/> sehingga kodenya akan berubah sebagai berikut :

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src="Url gambar"/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src="Url gambar"/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://i355.photobucket.com/albums/r455/sheve_anssver/1256558735_home.png" /></a>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
</b:includable>

Dari contoh diatas k'ian harap kamu bisa mencobanya dengan beberapa experimen yang kamu sukai untuk beberapa gambar yang kamu rasa paling cocok, yang perlu diingat adalah hapus kode text dasarnya dan tambahkan kode <img src="Url gambar"/>, setelah kode dipasang kamu cukup mengganti "Url gambar" nya saja. semoga bermanfaat..!!

nb : ingat tidak semua kode untuk masing-masing template itu sama, jadi cari kode yang kira-kira hampir sama dengan kode yang k'ian tulis diatas