Cara Membuat Tombol Next Page Dengan Angka 1,2,3,4 dst.
Assalamualaikum dan selamat malam semua para sahabat blogger,,oy pada kesempatan lalu saya baru saja memposting tentang bagaimana cara Membuat Tombol Prev , Home dan Next di Blogspot dan pada kesempatan kali ini saya akan membagikan cara memasang next page dengan angka,,sebenarnya antara (Membuat Tombol Prev , Home dan Next di Blogspot) dan (Memasang Next Page Dengan Angka) kegunaan dan tujuan sama,, yang berbeda hanyalah tampilan dan pastinya cara pemasangannya,, untuk contoh silahkan lihat gambar di bawah ini :



Okey sobat,,kita langsung saja masuk ke cara membuatnya.
1. Masuk dulu ke akun blogger anda
2. Setelah berada di Dashboard Klik Design --> Edit HTML
3. Backup Dulu Template anda dengan mengKlik Download Full Template
(Terserah anda Ya atau Tidak.tapi lebih baik Ya)
3. Centang Expand Template Widget
4. Cari Kode ]]></b:skin>
5. Copy kode di bawah lalu paste di atas kode ]]></b:skin>

.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. Setelah itu cari kode </body>
7. Copy lalu paste kode di bawah ini tepat si atas kode </body>

<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord=&#39;Previous&#39;;
var downPageWord=&#39;Next&#39;;
</script>
<script src='http://js-rezdown7.googlecode.com/files/rd7page.js' type='text/javascript'/>

8. Save Template Dan Lihat Hasilnya

Sebelumnya Blogger Tune-Up pernah membahas cara membuat Menu Navigasi Terapung dan Float Nav Bar. Pada artikel kali ini merupakan pengembangan dari trik-trik blogger hack yang pernah dibahas, yaitu kita akan membuat gadget terapung yang tidak terpengaruh oleh scrollbar dan selalu dalam posisi tetap.
Mungkin teman-teman pernah jalan-jalan ke blog orang lain dan menemukan sebuah tombol di pinggir halaman yang jika di klik akan menampilkan sesuatu (misal; shoutbox, buku tamu, subscriber, dan lain sebagainya) dan posisinya selalu tetap walaupun halaman tersebut kita geser atas bawah kiri kanan. Sebenarnya hal tersebut pada dasarnya adalah sebuah gadget yang diatur seakan-akan mengapung atau menempel pada halaman. Sebagai contoh Blogger Tune-Up menggunakan gadget terapung ini untuk menempatkan ShoutMix yang sudah lama hilang pada sebelah kanan atas dengan tombol bertuliskan "PESAN".

Langkah integrasi gadget terapung (floating widget)

Langkah 1
Login ke blogger
Langkah 2
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 3
"Tambah Gadget" Baru dengan tipe "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada isi/konten gadget yang baru kita buat:

<style type="text/css">
#nempel{position:fixed;top:65px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #A5BD51 url('http://lh5.ggpht.com/_xcD4JK_dIjU/Stq23DPOQUI/AAAAAAAADhQ/2imPnFpVUrA/d/floatnav.jpg')no-repeat;}
.nempelisi{float:left;border:2px solid #A5BD51;background:#CCFFFF;padding:8px;}
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">
<!-- Kode Isi Gadget Terapung -->
<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div>
<span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #999" href="http://wecodesign.blogspot.com/2011/06/membuat-gadget-terapung-floating-widget.html" target="_blank">Widget by Blogger Tune-Up</a></span>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>

Langkah 5
Ganti <!-- Kode Isi Gadget Terapung --> dengan kode yang akan kita tampilkan pada gadget terapung.
Langkah 6
Simpan Gadget dan Preview blog

Keterangan:

* Jika ingin membuat kotak pesan seperti pada blog ini, silahkan buat account di ShoutMix dan ambil kode yang diberikan, masukan kode tersebut menggantikan kode .

Selamat mencoba dan semoga berhasil, jangan lupa tinggalkan jejak dengan mengisi komentar dibawah. Happy Blogging... :)

<!--Related Posts with thumbnails Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; height:100%; min-height:100%; padding-top:10px; padding-left:15px; padding-right:15px; } #related-posts h2{ font-size: 1.3em; color: black; font-family: Arial; margin-bottom: 0.75em; } #related-posts a{ color:black; } #related-posts a:hover { background-color:#eeeeee; } </style> <script type='text/javascript'> var defaultnoimage="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/AAAAAAAADaY/gk-KFA5_m7w/noimage.png"; var maxresults=5; var splittercolor="#cccccc"; var relatedpoststitle="You might also like:"; </script> <script src='http://hermanblog.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails End-->
4. Lalu cari <p class='post-footer-line post-footer-line-1'/>
5. Kalau tidak ketemu coba cari post-footer-line
6. Letakkan kode berikut dibawahnya.
<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <!-- Related Posts with Thumbnails Code End-->

Keterangan:
var defaultnoimage="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/AAAAAAAADaY/gk-KFA5_m7w/noimage.png" menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar lain.

var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya.

var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.

var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.


Bagi anda yang merasa cara diatas terlalu sulit, anda bisa menggunakan widget related post dengan thumbnail yang disediakan oleh linkwithin.com. Untuk cara pemasangannya sangat mudah, berikut langkah-langkahnya:

1. Buka situs http://www.linkwithin.com
2. Isi data-data yang diperlukan pada form yang telah disediakan
Email: alamat email anda
Blog link: Alamat blog dimana anda memasang widget related post with thumbnail
Platform: pilih other atau sesuai jenis situs kamu
Width: pilih jumlah related post yang mau ditampilkan
Beri centang pada kotak kecil jika anda menggunakan background template yang gelap. Jika kamu memilih other ikuti petunjuk seterusnya dan jika kamu memilih sesuai jenis situsmu akan ikuti petunjuk yang tertera di linkwithin.com
3. Klik Get Widget
4. Copy dan paste kode script yang diberikan diatas </body> pada template blog anda lalu simpan template anda. Selesai

Membuat Related Posts (Berita Terkait) pada blog sangatlah penting untuk meningkatkan jumlah Page Opened pada blog anda. Oleh sebab itu, saya akan memberitahu salah satu caranya yakni dengan Link Within.