Friday, April 8, 2016

How To: Add Numbered Page Navigation Widget for Blogger

Assalamualaikum..

tutorial nie khas kepada 'blogger' yg baru join dengan dunia berblogging...
kepada yg baru, xpe...
tiada istilah terlambat dalam melakukan sesuatu perkara...
bak kata org tua... biar lambat asalkan kita berusaha untuk belajar...
jangan lambat tapi malas nk belajar...
itu termasuk kategori org2 yg rugi...
sebab...
benda ni F.R.E.E ye...
xde charges pon...
cuma perlukan sedikit skill dan kerajinan...

pelan2 kayuh...

ok, hari ni kak husna bagi bg tutorial...
camne nk klik next pages tp xnk tekan 'older post' or 'newer post'..???
itu dh obsolete method...hahaha...

Maksud kak husna nk jadikan page tu seperti di bawah...

-cantik x page navigation nie-
Jom kak husna terangkan....

Step 1 : Adding CSS..Pilih Template - Edit HTML


Step 2 : Tekan Control + F "]]>
" pada button Search dan cari seperti di bawah.
Step 3: Copy style di bawah.

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}.blog-pager {background: none;}.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;} .showpageOf{display:none!important}#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Step 4 : Adding Script. Tekan Control + F untuk buat carian sepeti di bawah.

Paste kan sebelum dengan code di bawah....

dan terakhir..please Preview dulu...

mane la tau.. ade error coding ke kn...

kak husna bukak kelas pertanyaan...
if ade yang berminat nk belajar, atau bertanye..
boleh emel kak husna...
insyaAllah tiada bayaran...hehehe....

emel kak husna: haizariniezaini@gmail.com



 

No comments :

Post a Comment