Membuat Blog Pager/Navigasi Halaman Blogspot Melayang

Tabel Konten
  1. Navigasi Melayang di Sebelah Atas 
  2. Navigasi Melayang di Sebelah Bawah 
navigasi halaman/blog pager melayang blogspot
Navigasi halaman melayang

Metode pembuatan blog pager/navigasi halaman melayang ini pada dasarnya sama dengan metode pembuatan navigasi breadcrumb melayang. Ada dua posisi peletakkan yang bisa kamu ambil, yaitu posisi melayang di atas atau di bawah jendela.
Pertama-tama masuklah ke halamaneditor HTML templatemu, lalu cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Letakkan salah satu kode CSS ini di atas kode ]]></b:skin> atau </style>:

Navigasi Melayang di Sebelah Atas 

/* 
Copyright September 2011 :: Taufik Nurrohman 
(http://hompimpaalaihumgambreng.bogspot.com) 
*/ 
#hompager           {position:fixed;z-index:1000;top:0;left:0;width:100%;height:24px;padding:5px 0 5px;background:#000;border-bottom:2px solid #999;text-align:left;-webkit-box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;box-shadow:0 0 7px #000;} 
a .ikon-beranda     {display:block;background:transparent url(http://1.bp.blogspot.com/-WWh5YQJeXNI/TmMx8MUXfDI/AAAAAAAAAz0/JW5cUjwzMeg/s1600/Home2.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;float:left;margin-left:15px;opacity:0.7;filter:alpha(opacity=70);} 
.float-right        {float:right;width:100px;margin-right:13px;} 
.float-right span   {display:block;float:right;margin-right:2px;} 
a .ikon-kiri        {background:transparent url(http://3.bp.blogspot.com/-7d2gsBxHw_0/TmMxp8lSpVI/AAAAAAAAAzk/bbvChtbeJIk/s1600/Arrow2%2BLeft.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);} 
a .ikon-kanan       {background:transparent url(http://3.bp.blogspot.com/-udYjYLBXw4A/TmMxqOchFLI/AAAAAAAAAzs/JFOr359xcw0/s1600/Arrow2%2BRight.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);} 
a .ikon-beranda:hover,
a .ikon-kiri:hover,
a .ikon-kanan:hover {opacity:1;filter:alpha(opacity=100);} 
#blog-pager         {display:none !important;} /* menghilangkan blog pager bawaan dari template */

Navigasi Melayang di Sebelah Bawah 

/* 
Copyright September 2011 :: Taufik Nurrohman 
(http://hompimpaalaihumgambreng.bogspot.com) 
*/ 
#hompager           {position:fixed;z-index:1000;bottom:0;left:0;width:100%;height:24px;padding:5px 0 5px;background:#000;border-top:2px solid #999;text-align:left;-webkit-box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;box-shadow:0 0 7px #000;} 
a .ikon-beranda     {display:block;background:transparent url(http://1.bp.blogspot.com/-WWh5YQJeXNI/TmMx8MUXfDI/AAAAAAAAAz0/JW5cUjwzMeg/s1600/Home2.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;float:left;margin-left:15px;opacity:0.7;filter:alpha(opacity=70);} 
.float-right        {float:right;width:100px;margin-right:13px;} 
.float-right span   {display:block;float:right;margin-right:2px;} 
a .ikon-kiri        {background:transparent url(http://3.bp.blogspot.com/-7d2gsBxHw_0/TmMxp8lSpVI/AAAAAAAAAzk/bbvChtbeJIk/s1600/Arrow2%2BLeft.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);} 
a .ikon-kanan       {background:transparent url(http://3.bp.blogspot.com/-udYjYLBXw4A/TmMxqOchFLI/AAAAAAAAAzs/JFOr359xcw0/s1600/Arrow2%2BRight.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);} 
a .ikon-beranda:hover,
a .ikon-kiri:hover,
a .ikon-kanan:hover {opacity:1;filter:alpha(opacity=100);} 
#blog-pager         {display:none !important;} /* menghilangkan blog pager bawaan dari template */

Setelah itu temukan kode ini:

<a expr:name='data:post.id'/>

Tip: Tekan CTRL + F lalu ketik expr:name='data:post.id' untuk mempermudah pencarian.

Letakkan kode ini di atasnya:

<div class='hompager' id='hompager'> 
     <a expr:href='data:blog.homepageUrl'><span class='ikon-beranda'/></a> 
     <div class='float-right'> 
          <b:if cond='data:olderPageUrl'> 
               <a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Halaman Berikutnya'><span class='ikon-kanan'/></a> 
          </b:if> 
          <b:if cond='data:newerPageUrl'> 
               <a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Halaman Sebelumnya'><span class='ikon-kiri'/></a> 
          </b:if> 
     </div> 
</div>

Klik Pratinjau untuk melihat hasilnya.

Dalam sebuah template blogspot terkadang terdapat satu atau dua buah kode <a expr:name='data:post.id'/>. Jika apa yang telah kamu lakukan tidak menunjukkan hasil, cobalah untuk meletakkan kode tersebut di atas kode <a expr:name='data:post.id'/> yang kamu temukan berikutnya.

Terakhir tinggal klik Simpan Template.

Lihat Sampel

18 Komentar

  • Admin

    kunjungan setelah lebaran, minal aidzin wal faidzin :)

  • Rudy Azhar

    Naviasinya keren, tapi apa hanya untuk penguna Blogger saja yang bisa menerapkannya?

  • Taufik Nurrohman

    @Rudy Azhar: Setahu Saya sih begitu, soalnya ini berhubungan dengan XML. XML itu sistemnya terlalu bebas karena memungkinkan kita membuat nama-nama tag sesuka hati sendiri. Tapi kalau untuk kerangkanya sih sebenarnya bisa digunakan di mana saja. Tinggal bagaimana cara kita memasukkan kode-kode PHPnya itu lho.. Wordpress pakai PHP kan?

  • Unknown

    Nah, ini yang saya cari-cari. O...O... navigasi nextprev-nya dibikin fixed yah.
    Loh...ini form komentarnya kok kaya jatuh dari atas.
    Nice blog, gan.

  • Unknown

    nice info mas...:D

  • Andi AF Studio

    wiw.. baru selesai 2 template dengan nama TovickTheme :D wkwkwkwkwk..
    tunggu sampai ada 20 template yang jadi, nanti saya bikin blog khusus template..

  • Taufik Nurrohman

    @Andy Online: Wah, suka bikin-bikin template juga ya! :D

  • Unknown

    Wew langsung saya terapkan :)

  • Unknown

    kang saya minta source kode "beranda berikutnya sebelumnya" yang terdapat pada template sekaratmutlak.blogspot.com

  • Taufik Nurrohman

    @Serpihan Duka Ganti elemen ikon di dalam tautan menjadi teks.

  • Unknown

    @Taufik Nurrohman makasih kang udah bisa :D

  • Unknown

    mas caranya menyisipkan sesuatu di ruang kosong navigasi ini gimana? seperti pada Navigasi Breadcrumb melayang. terima kasih.

    • Taufik Nurrohman

      Taruh barang-barang sisipan di bawah <div class='float-right'>

      • Unknown

        Terima Kasih infonya... saya coba sekarang.

  • Unknown

    yang saya ingin sisipan di bawah <div class='float-right'> adalah <script style="text/javascript">
    function showpostcount(json) {
    document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script>
    <script src="http://gudang-informasiku.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

    <script style="text/javascript"></script>
    <script style="text/javascript">
    function numberOfComments(json) {
    document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script>
    <script src="http://gudang-informasiku.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

  • azewBz

    mas ko pake widget ini ga funsi ya..
    pdahal saya pke template buatan mas, ini --> http://www.dte.web.id/2013/05/template-blogazine.html

    • Taufik Nurrohman

      Coba jangan memakai tutorial ini. Tambahkan CSS ini saja di atas ]]></b:skin> lalu simpan. Kalau hasilnya navigasi halaman berubah menjadi melayang, sisanya tinggal memodifikasi saja:

      #blog-pager {
      position:fixed !important;
      position:absolute;
      top:0;
      right:0;
      left:0;
      z-index:9999;
      width:auto;
      background-color:#ff0;
      }

Komentar telah ditutup.