Skip to main content
KOMPI AJAIB

follow us

Berbuat khilaf adalah sifat. Meminta maaf adalah kewajiban. Dan kembalinya Fitrah adalah tujuan. Saya, Adhy Suryadi admin blog Kompi Ajaib MEMOHON MAAF LAHIR DAN BATHIN. Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum. Selamat hari raya Idul Fitri, 1 Syawal 1439 H.

×

Memodifikasi Blog Pager Homepage Blogger Ala Kompi Ajaib

Baca juga:

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.

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar