Membuat Blog Pager/Navigasi Halaman Blogspot Melayang

Metode pembuatan blog pager/navigasi halaman melayang ini intinya sama dengan metode pembuatan navigasi breadcrumb melayang. Ada dua posisi peletakkan yang sanggup kau ambil, ialah posisi melayang di atas atau di bawah jendela.
Pertama-tama masuklah ke halaman editor HTML templatemu, kemudian cek Expand Template Widget semoga seluruh elemen pembangun posting tampil.
Letakkan salah satu instruksi CSS ini di atas instruksi ]]></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 instruksi ini:

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

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

Letakkan instruksi 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 instruksi <a expr:name='data:post.id'/>. Jika apa yang telah kau lakukan tidak menawarkan hasil, cobalah untuk meletakkan instruksi tersebut di atas instruksi <a expr:name='data:post.id'/> yang kau temukan berikutnya.

Terakhir tinggal klik Simpan Template.

Lihat Sampel

Sumber https://www.dte.web.id/