Translate

Mengganti Nextprev dengan Icon di Blogger

Mengganti Nextprev dengan Icon di Blogger
nextprev Blogger <code>


Getcond Blogger, Bagaimana mengganti nextprev button di Blogger

nextprev icon

Membuat tombol "Next" dan "Previous" di Blogger bisa menjadi langkah penting untuk meningkatkan navigasi dan pengalaman pengguna. Dalam tutorial ini, kita akan menggunakan HTML, dan CSS untuk menciptakan tombol tersebut.


Persiapkan HTML

Tambahkan HTML berikut di dalam pos atau halaman Blogger Anda di mana Anda ingin menampilkan tombol "Next" dan "Previous": atau cari kode berikut di bawah widget type='Blog' di Tema Blogger anda:

HTML
	  
<b:includable id='nextprev'>
  <div class='blog-pager g3-margin' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link g3-button g3-hover-green g3-border' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><i class='fa fa-angle-double-left'/> Prev</a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link g3-button g3-hover-green g3-border' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Next <i class='fa fa-angle-double-right'/></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:includable>


Sematkan Kode Font CSS

Sematkan kode css icon untuk icon prev dan next diantara <head></head>

HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

Gaya CSS

Tambahkan gaya CSS berikut untuk merancang tampilan tombol:

HTML
<style>
<!-- sytle nextprev-->
.g3-margin {
margin: 16px!important
}
.g3-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.g3-button:disabled {
cursor: not-allowed;
opacity: 0.3
}
.g3-button:hover {
color: #000!important;
background-color: #ccc!important
}
.g3-green,.g3-hover-green:hover {
color: #fff!important;
background-color: #4CAF50!important
}
.g3-border {
border: 1px solid #ccc!important
}
</style>


Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat mengganti dengan tombol icon "Next" dan "Previous" ke halaman atau pos di Blogger Anda. Pastikan untuk memodifikasi CSS sesuai dengan preferensi desain Anda.
Jangan ragu untuk menyesuaikan gaya dan fungsionalitas tombol sesuai kebutuhan Anda. Semoga tutorial ini bermanfaat untuk meningkatkan navigasi di blog Anda!

Posting Komentar

0 Komentar


Followers