Sabtu, 14 Januari 2012

Cara Membuat Tombol Navigasi Next Page di Blogspot

Diposting oleh Digital Lyrics di 21.19
Membuat Tombol Navigasi Next Page di Blog - Hallo Sobat Blogger! Pada artikel ini Sobat Blogger akan menjelaskan satu cara yang sering dipakai di blog - blog terbesar baik di dalam maupun luar negeri. Impian Para blogger pasti ingin blog nya jadi ramai pengunjung dan juga terlihat profesional walaupun masih belum pakai domain alias gratis, wakakakkak...  Sobat Blogger ingin sedikit sharing bagi sobat-sobat blogger yang masih bingung cara memasang tombol navigasi next page di halaman blog dengan angka. Cara membuat tombol navigasi next page di halaman blog sebetulnya sangatlah simpel, mudah di praktek, dan juga gak pakek lama alias gak usah nunggu respon dari pihak ke empat. Ok, kita kembali ke tema judul postingan ini dan mari kita coba memebuat tombol navigasi next di blogspot. 
  1. Seperti biasa sebelum kita membuat atau mengedit blog kita langkah yang pertama yang harus sobat blogger lakukan adalah login/masuk dulu ke akun blognya sobat. 
  2. Sekarang kita mulai dengan masuk ke halaman edit HTML caranya klik pada bagian rancangan/design.
  3. Setelah menunggu beberapa detik anda akan di bawa kehalaman rancangan kemudian klik pada bagian edit HTML. setelah itu Silahkan sobat blogger centang di Expand Template Widget takutnya nanti ada yang error kalau kurang teliti.
  4. Sekarang silahkan sobat cari kata berikut ini  ]]></b:skin>, untuk mempermudah sobat untuk menemukan kata tersebut silahkan sobat blogger tekan CTRL + F dan kemudian ketik kata yang diatas tadi. Setelah itu silahkan sobat blogger copy coding dibawah ini dan pastekan tepat DI ATAS  ]]></b:skin>.

.showpageArea{padding:10px;background:#fff}

.showpageArea a{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-decoration:none}

.showpageNum a{font-weight:bold;color:#ca1717;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px solid #fff;background:#fff;}

.showpageNum a:hover{color:#fff;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);text-shadow:0px 2px 2px #00a;border:1px solid #ddd;}

.showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #ddd;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.showpage a{padding:1px 8px; margin:0 2px;border:1px solid #ddd;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);;color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}

.showpage a:hover{background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}
#showlastpage a{font-weight:bold}

  • Berikutnya silahkan sobat copy coding berikut ini dan pastekan DIATAS tag </BODY> 
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script src='http://belajarblogging.googlecode.com/files/pagenav.js' type='text/javascript'/>
</b:if>

  • Sebelum sobat save alangkah baiknya sobat klik petinjau terlebih dahulu untuk mengetahui ada terjadi error apa tidak yang baru sobat lakukan tadi.
Begitulah cara saya membuat tombol navigasi next di blogspot. semoga bermamfaat dan semoga sukses membuat tombol navigasi next di blog.

0 komentar:

Posting Komentar

 

Blog Sahabat Copyright © 2012 Design by RIDWAN ARDIANSYAH | Sponsored by PinginGaul.com