Memodifikasi Blog Pager Homepage Blogger Ala Kompi Ajaib

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/12/2017

Beberapa waktu yang lalu ada sahabat Kompi yang request tutorial untuk membuat atau memodifikasi blog pager atau next prev homepage seperti yang digunakan di Kompi Ajaib ini.

Dengan modifikasi ini, tombol blog pager akan tetap tampil dengan 3 buah tombol meski di halaman awal atau di halaman akhir seperti pada gambar di atas.

Dan tombol ini juga menggunakan ikon svg jadi cukup ringan dan tidak akan membebani loading blog. Untuk demonya silahkan lihat di halaman index di blog ini atau pada tombol di bawah ini, saya pasang pada template default Blogger.


Jika ingin mencobanya silahkan ikuti langkahnya di bawah ini.

Silahkan cari kode di bawah ini.

<b:includable id='nextprev'>

.............

.............

.............

</b:includable>

Kemudian silahkan ganti kode tadi dengan kode di bawah ini

              <b:includable id='nextprev'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  <div class='blog-pager' id='blog-pager'>

    <b:if cond='data:newerPageUrl'>

      <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>

    </b:if>



    <b:if cond='data:olderPageUrl'>

      <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>

    </b:if>



    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>



    <b:if cond='data:mobileLinkUrl'>

      <div class='blog-mobile-link'>

        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>

      </div>

    </b:if>

  </div>

  <div class='clear'/>

    </b:if>

<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>

      <div class='blog-pager' id='blog-pager'>

    <b:if cond='data:newerPageUrl'>

      <div 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'><svg viewBox='0 0 24 24'>

    <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#000000'/>

</svg></a>

      </div>

    </b:if>

    <b:if cond='data:olderPageUrl'>

      <div 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'><svg viewBox='0 0 24 24'>

    <path d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z' fill='#000000'/>

</svg></a>

      </div>

    </b:if>

     <div class='mobile-link-button' id='blog-pager-home-link'>

    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><svg viewBox='0 0 24 24'>

    <path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/>

</svg></a>

    </div>

<div class='home-box' title='This is the newest page'><svg viewBox='0 0 24 24'>

    <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#000000'/>

</svg>

</div>

<div class='lasthome-box' title='This is the latest page'><svg viewBox="0 0 24 24">

    <path fill="#000000" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" />

</svg>

</div>

</div>

    </b:if>

      <div class='clear'/>

</b:includable>

Kemudian silahkan simpan kode berikut di atas kode </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>

<style type='text/css'>

/*<![CDATA[*/

#Blog1{padding-bottom:55px;position:relative}

.home-box,.lasthome-box,a.blog-pager-newer-link,a.blog-pager-older-link,a.home-link{padding:0;line-height:45px;position:absolute;width:43px;height:43px;text-align:center}

#blog-pager-newer-link{float:left}

#blog-pager-older-link{float:right}

#blog-pager-newer-link a,#blog-pager-older-link a,a.home-link{color:#141924;transition:all .4s ease-in-out}

#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover{color:#e8554e}

.blog-pager svg{width:24px;height:24px;vertical-align:-5px}

#blog-pager,.blog-pager{clear:both;text-align:center;position:absolute;width:200px;height:45px;line-height:45px;bottom:0;left:50%;margin:0 0 0 -100px;overflow:visible}

#blog-pager-home-link a.home-link,a.blog-pager-newer-link,a.blog-pager-older-link{background:#fff;border:1px solid #dedede;color:#141924;transition:all .4s ease-in-out;bottom:0}

a.blog-pager-older-link{border-radius:3px;right:0;z-index:2}

a.blog-pager-newer-link{border-radius:3px;left:0;z-index:2}

#blog-pager-home-link a.home-link{border-radius:3px;left:50%;margin-left:-22.5px}

#blog-pager-home-link a.home-link:hover,#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover{color:#e8554e;border:1px solid rgba(232,85,78,1)}

.home-box,.lasthome-box{background:#fff;color:#888;border:1px solid #dedede;border-radius:3px;bottom:0;z-index:1}

.home-box{left:0}

.lasthome-box{right:0}

.home-box svg path,.lasthome-box svg path{fill:#888}

.clear{clear:both}

/*]]>*/

</style>

</b:if>

Selesai, silahkan save template dan cek homepage blog Anda.