© 29-Nov-2011
About the Author
11:18 WIB
Snippet
Tampilkan postingan dengan label page number. Tampilkan semua postingan
Tampilkan postingan dengan label page number. Tampilkan semua postingan

Nav halaman dengan tampilan scroll

  1. Log in blogger
  2. masuk ke rancangan , Edit HTml
  3. Lalu cari kode  ]]></b:skin> Lalu kopikan kode di bawah ini di atasnya :

.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zdCpzyQOLRDYassH6DTJ2bDq_iuI18x4XP4aJ54HyLujsNWqOJoxRcqjBFUXrsL_ah5PrX4RqGslVP6l2N41Q6FJ4SypBhum40A6q9sLcwEOv7d077w77UJbji1uLFfCpbA6i8AkQTA/s1600/slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}

.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}
Selanjutnya cari kode  </body> dan kopikan kode berikut diatasnya :
<script src='http://kangdadang.googlecode.com/files/Paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;</script>
<script src='http://kangdadang.googlecode.com/files/PaginatorForBlogger.js' type='text/javascript'/>
yang berarna biru ubah sesuai pengaturan blog anda :

PostPerPage: Berapa banyak Post setiap Halaman untuk blog Anda
numshowpage: Banyak cara nomor akan muncul pada halaman Anda Navigasi


selanjutnya centang tanda Expand Widget Templates 


'data:label.url'

lalu ganti dengan kode berikut :

'data:label.url + &quot;?&amp;max-results=7&quot;'

Ubah 7 berdasarkan berapa banyak posting setiap halaman

selamat mencoba..........................
Read More Sabtu, 03 Desember 2011 0 komentar

Membuat Page number pada blog

Maksud dari page number itu sendiri, adalah Penomeran setiap halaman dan ditampilkan pada satu menu navigasi, dengan Fasilitas Jump page atau kita bisa memilih langsung Page ke berapa pada blog yang ingin kita kunjungi, untuk contohnya bisa dilihat digambar di bawah ini :

Untuk cara membuatnya ikuti langkah-langkah berikut:




  1. Login blogger
  2. Rancangan, Edit Html, 
  3. Centang menu  Expand Template Widget
  4. Cari kode ]]></b:skin>
  5. Dan Simpan kode berikut diatasnya :
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
6. Simpan kode berikut di atas kode </body> :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://kangdadang.googlecode.com/files/blogger-page-nav.js' type='text/javascript'/>
</b:if>
7. Cari kode di bawah ini (CTRL+F untuk mempermudah pencarian):
'data:label.url'
jika sudah ketemu ganti kode diatas dengan :
'data:label.url + &quot;?&amp;max-results=5&quot;'
8. Simpan template dan lihat hasilnya.
Read More 0 komentar

Efek Slide out pada navigasi Posting lama dan Posting baru

Bingung juga ngasih judul dari postingan saya kali ini, tapi untuk jelasnya Tutorial menu kali ini adalah membuat menu Fixed Slide Out yang saya terapkan pada Navigasi untuk Posting Lama dan Baru yang biasanya ada pada bagian bawah artikel, saya buat menjadi menu Fixed dengan efek slide out, yang saya sudah coba pada blog saya sendiri bisa dilihat di sebelah kanan atau kiri blog saya.



Saya buat hanya coba-coba saja untuk membuat ini dengan CSS3 yang sedikit saya ketahui. Nh sekarang kita langsung ke cara membuat Menu tsb, tapi sebelumnya Di menu edit Html Download Template Lengkap terlebih dahulu untuk antisipasi bila terjadi kesalahan. Kita mulai dengan cara-cara dibawah ini:

  1. Login blogger
  2. Rancangan, Edit Html
  3. Download Template Lengkap
  4. Centang menu Expand Template Widgets
  5. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :
/********************************
CSS Slide Out Posting lama/baru *
********************************/
.lama a {
    color: #000;
    position:fixed;
    top:50%; 
    right:-50px;
    height: 23px; width: 100px;
    color: #fff; text-shadow: 1px 1px 0px #999;
    background: #aaa; background-color: rgba(116,116,116,0.36);
    -moz-border-radius-topleft:7px;
    -moz-border-radius-bottomleft:15px;
    padding: 3px 3px;
    text-decoration: none;
    -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;
    }
.lama a:hover {
    color: #ffffff; /* background saat hover */
    right:-1px;
    background: #fff;
    }


.baru a {
    color: #000; position:fixed;
    top:50%;  left:-50px;
    height: 23px;  width: 100px;
    color: #fff; text-shadow: 1px 1px 0px #999;
    background: #aaa;
    background-color: rgba(116,116,116,0.36);
    -moz-border-radius-topright:7px;
    -moz-border-radius-bottomright:15px;
    padding: 3px 3px; text-decoration: none;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    }
.baru a:hover {
    color: #ffffff;
    left:-1px ; background: #fff; /* background saat hover */
    }

6. Jika sudah sekarang Cari kode seperti dibawah ini (Untuk Posting Lama) :
<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'><data:olderPageTitle/></a>
      </span>
  • CTRL+F untuk mempermudah pencarian
Ganit kode tersebut dengan kode:
<div class='lama'>
      <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'>Prev</a>
      </span>
      </div>
7. Jika sudah sekarang Cari kode seperti dibawah ini (Untuk Posting Baru) :
<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'><data:newerPageTitle/></a>
      </span>

Ganit kode tersebut dengan kode:
 <div class='baru'>
      <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'>Next&gt;</a>
      </span>
      </div>

8. Simpan Template dan Lihat hasilnya, Kurang lebihnya bisa sobat kembangkan sesuai keinginan.
Read More 0 komentar