Memodifikasi Blog Pager Homepage Blogger Ala Kompi Ajaib

Beberapa waktu yang kemudian ada sahabat Kompi yang request tutorial untuk menciptakan atau memodifikasi blog pager atau next prev homepage menyerupai yang dipakai di Kompi Ajaib ini.

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

Dan tombol ini juga memakai 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, aku pasang pada template default Blogger.

DEMO

Jika ingin mencobanya silahkan ikuti langkahnya di bawah ini.

Silahkan cari isyarat di bawah ini.

 <b:includable id='nextprev'>
 .............
 .............
 .............
 </b:includable>

Kemudian silahkan ganti isyarat tadi dengan isyarat 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 isyarat berikut di atas isyarat </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.


Sumber https://www.kompiajaib.com/

Share this post