Letak widget navigasi halaman

Widget navigasi halaman ini adalah alternatif bagi bagi recent posts,older post dan home .Terletak dibahagian bawah blog.Saya rasa cara ini lebih mudah sebab tidak perlu salin kod pada template,cuma letak kod pada add gadget sahaja.Kalau letak kat template ni,susah sedikit hendak mencari kod tempat dimana ia perlu diletakkan dan ada setengah tidak menepati dengan template yang ada.
Untuk membuatnya ikuti langkah langkah berikut:

  1. Masuk ke akaun blogger Anda dan pergi ke Design> Page Element
  2. kemudian klik pada Add a Gadget
  3. kemudian pilih HTML/JavaScript



    4.  Pada widget HTML/Javascript tersebut masukkan kod berikut:
<!-- StylishPage Navigation Widget For Blogger By http://bloggertrix.com -->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* 24work.blogspot.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* 24work.blogspot.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); }/* 24work.blogspot.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); }/* 24work.blogspot.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* 24work.blogspot.com */
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* 24work.blogspot.com */
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* 24work.blogspot.com */
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='https://sites.google.com/site/teknikbuatblog/tbb/teknikbuatblog.js' type='text/javascript'></script>
<!-- StylishPage Navigation Widget For Blogger By http://bloggertrix.com -->



5. Sesudah memasukkan kod tadi pada widget,klik dan seret widget HTML/Javascript tadi pada kedudukan dibawah blog post anda.

Sumber:bloggertrix.com

Catat Ulasan

15 Comments:

Ms Nury berkata...
Teknik Buat Blog

Dah cuba tapi tek leh pun... Nape ye?...

yahaya berkata...
Teknik Buat Blog

@Ms Nurypage navigation ni ada cara lain lagi selain cara ini.tapi kena masuk kat template.setiap template tak sama mungkin ada kod yg menyebabkan ia tak keluar.

redz berkata...
Teknik Buat Blog

perghh, first time, tgk kod script yang sgt panjang berjela untuk 1 widget je..
huhuhu.

nak try jgak la thanx ye bro yahaya. yang ni
lebih mudah kan sbb xpyah usik bhgian kod template.

Mr.Hac berkata...
Teknik Buat Blog

aku buat tak jadi la..isk..

yahaya berkata...
Teknik Buat Blog

@Mr.Hacada lagi satu cara..saya akan update nanti..

cempedak luar pagar berkata...
Teknik Buat Blog

Salam.1st skali saya nak bgtau blog anda memang cukup cantik dan sempurna.Saya adalah org yang baru nak berjinak-jinak dengan dunia blog.So banyak lah benda yg saya kena blaja.Saya cuma nak tau bagaimana caranya saya nak buat 'menu bar'(x tau betul ke x apa yg saya sebut tu..)Senang citer seperti yg ada kat bagian blog ni iaitu "HOME" "SITE MAP" "KOD WARNA" "LINK EXCHANGE" dan seumpamanya.Bagimana pula cara untuk menukar warna bar atau warna font pada bar tu.Terimakasih banyak.Sory la kalau soalan saya ini mgkn soalan bodoh.

yahaya berkata...
Teknik Buat Blog

@cempedak luar pagar
untuk membuat menu horizontal cuba kat tgk tutorial menu bar dengan fungsi search.http://teknikbuatblog.blogspot.com/2011/02/menu-horizontal-dengan-fungsi-search.html
pada kod tu boleh ubah warna tulisan>>pada color="white" kepada blue atau lain warna.
tgk jugapada tutorial membuat menu horizontal pada blog...

EMMY berkata...
Teknik Buat Blog

dah buat tak tak ada pun

yahaya berkata...
Teknik Buat Blog

@EMMY

tak ada bermakna tak boleh.memang ada cara lain nak letak navigasi halaman tapi kena letak pada template

Diya Sesame berkata...
Teknik Buat Blog

kalau classic template macam mana??

yahaya berkata...
Teknik Buat Blog

@Diya Sesamesama saja dengan template lain..

eryna arissa berkata...
Teknik Buat Blog

saya baru belajar wat blog...mcm mne nak wat halaman pas2 bila klik boleh wat anak panah sebelah dia (pada satu halaman ada antara2 dia)

Ehmy LoLo's berkata...
Teknik Buat Blog

mcm mner pula kalo nk wat kursor lain... maksud syer.. mcm glitter... lepastu cm ne pula nk msokkan muzik ktt blog???? sile jawab secept mungkin

KERJA SANTAI DENGAN KERJA COPY PASTE berkata...
Teknik Buat Blog

Artikelnya mantap gan.Saya mau naya nich ! Gimana cara antara artikel Link1, link 2 dan link 3 saling berkaiktan. Mhn penjelasannya. Trims!!!!!

abah khalisha berkata...
Teknik Buat Blog

a'ah tk jadi plak yag ni