Cara Mudah Memodifikasi Blog Pager Homepage Blogger Ala Kompi Ajaib




Cara Mudah Memodifikasi Blog Pager Homepage Blogger Ala Kompi Ajaib
Cara Mudah Memodifikasi Blog Pager Homepage Blogger Ala Kompi Ajaib: Bagi anda yang ingin membuat atau memodifikasi blog pager atau next prev homepage seperti yang digunakan oleh KompiAjaib ini. untuk melihatnya bisa anda scroll nanti kebawah. Jika menurut anda pager homepage tersebut keren dan bagus, namun ingin membuat di blog anda simak penjelasan di bawah ini. :)


Tombol blog pager homepage akan tetap tampil dengan tiga buah tombol meski di halaman awal atau di halaman akhir seperti pada gambar di atas.

Kelebihan dari tombol Blog Pager Homepage ini juga menggunakan ikon svg jadi terasa cukup ringan  pada saat kita guakan dan tidak akan membebani loading blog anda. Nah untuk anda yang sudah penasaran dan ingin mencobanya pada blog blog anda, silahkan ikuti langkah-langkah cara membuat blog pager homepage.

Cara Mudah Memodifikasi Blog Pager Homepage Blogger 

  1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
  2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode seperti dibawah ini :
    <b:includable id='nextprev'>
    .............
    .............
    .............
    </b:includable>
  4. Selanjutnya silahkan anda 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>
  5. Jika sudah anda ganti kode di atas, maka silahkan copas kode di bawah ini dan tempelkan 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>
  6. Jangan lupa klik Save Template dan lihat hasilnya, berhasil atau tidak
Nah bagaimana mudah kan untuk membuatnya, selamat mencoba dan semoga berhasil ya.


Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



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

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect