October 01, 2013

author photo

Assalamualaikum dan selamat sejahtera saya ucapkan kepada pembaca HaswanSyakier Blog. Sebelum itu, saya ingin ucapkan GOOD LUCK kepada geng-geng yang sedang menjawab PMR pada hari ini. Do The Best Guys! Baca doa sebelum jawab dan jangan gopoh gapah okay? Kembali pada tajuk, kalau korang perasan pada atas komen disetiap pos yang saya telah karang ada menu navigasi seperti gambar diatas.

Faham atau tak faham? Kalau tak faham mari saya terangkan. Kalau korang perasan, kebanyakan bloggers menggunakan gambar anak panah kecil untuk menu navigasi mereka. Tapi, cuba korang lihat menu navigasi saya. Saya menggunakan huruf atau perkataan dan bukannya gambar seperti bloggers yang lain. Sekarang sudah fahamkan? Baiklah, tahu tak macam mana saya buat ni? Tak tahu? Kalau tak tahu, teruskan bacaan korang.

Untuk membuat menu navigasi pada blog korang seperti saya punya, korang perlulah:



STEP 1
Login blog → Template → Download Backup → Edit HTML.

STEP 2
Tekan CTRL + F pada keyboard dan cari code <b:include name='nextprev'/>. Lalu highlight code yang dicari tadi dan gantikan dengan code dibawah
<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:include name='nextprev'/> </b:if></b:if>
STEP 3
Tekan CTRL + F pada keyboard sekali lagi dan cari code <b:if cond='data:blog.pageType == &quot;item&quot;'>. Code ini terlalu banyak, jadi korang kena try dan error. Maknanya, cuba satu persatu.

STEP 4
Kemudian, highlight code yang dicari tadi dan gantikan dengan code dibawah
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='blog-pager' id='blog-pager'> <div class='pager-isi'> <b:if cond='data:newerPageUrl'> <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'><data:newerPageTitle/></a> <b:else/> <span class='linkgrey left'><h6>Next</h6><h5>This is the most recent template.</h5></span> </b:if> <b:if cond='data:olderPageUrl'> <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'><data:olderPageTitle/></a> <b:else/> <span class='linkgrey right'><h6>Previous</h6><h5>This is the last template.</h5></span> </b:if> </div> </div> <script type='text/javascript'> //<![CDATA[ $(window).load(function(){ var newerLink = $('a.blog-pager-newer-link').attr('href'); $('a.blog-pager-newer-link').load(newerLink + ' .post-title:first', function () { var newerLinkTitle = $('a.blog-pager-newer-link').text(); $('a.blog-pager-newer-link').html('<h6>Next</h6><h5>' + newerLinkTitle + '</h5>'); }); var olderLink = $('a.blog-pager-older-link').attr('href'); $('a.blog-pager-older-link').load(olderLink + ' .post-title:first', function () { var olderLinkTitle = $('a.blog-pager-older-link').text(); $('a.blog-pager-older-link').html('<h6>Previous</h6><h5>' + olderLinkTitle + '</h5>'); }); }); //]]> </script> </b:if>

STEP 5
Selepas itu, preview dan kalau tiada error terus save. Lalu tekan view blog dan lihat hasilnya.

Okay, tamat sudah tutorial menghias blog pada kali ini. Jangan lupa cuba ye, kalau tak jadi atau menjadi komenlah ye diruangan yang telah disediakan dibawah. Assalamualaikum!
Next article Next Post
Previous article Previous Post