Membuat Tampilan Navigasi Simple Blogger Template Lebih Menarik

Jika kalian memasuki sebuah halaman web yang bertemakan simple blogger template, tampilan navigasinya hanya berupa tilisan, begitu amat sederhana bukan. Oleh karena itu, pada postingan kali ini saya akan berbagi cara membuat tampilan navigasi simple blogger template menjadi lebih menarik.

Seperti kita tahu, tampilan navigasi (Blog Pager) baik: 'beranda, postingan laama dan postingan terbaru' hanyalah berupa link teks, tanpa ada variasi yang membuat tampilan navigasinya lebih menarik. Bahkan terkadang pembaca tidak melihat jika ada navigasi untuk mengarahkan ke berbagai halaman web.

Blog Pager ini kita ibaratkan sebagai rambu lalulintas, navigasi website mempunyai peran yang sangat penting pada sebuah web yang merupakan alat yang memberikan petunjuk untuk menuju ke berbagai halaman web yang ada. Oleh karena itu, sangatlah penting untuk membuat tampilan navigasi yang menarik, yang mudah ditemukan oleh pembaca.

Oke, sobat seharisilam blog, kita langsung ke TKP tentang bagaimana cara membuat tampilan navigasi simple blogger template menjadi lebih keren dan menarik seperti image di atas. Begini langkah-langkahnya:

● Pertama: cari css blog-pager, yang kurang lebih seperti di bawah ini:

/* Accents

---------------------------- */

.section-columns td.columns-cell {

border-$startSide: 1px solid $(body.rule.color);

}

.blog-pager {

background: $(paging.background);

}

.blog-pager-older-link, .home-link,

.blog-pager-newer-link {

background-color: $(content.background.color);

padding: 5px;

}

kemudian css blog-pagernya rubah menjadi seperti berikut:

/* Accents

---------------------------- */

.section-columns td.columns-cell {

border-$startSide: 1px solid $(body.rule.color);

}

.blog-pager{display:inline-block;width:100%;font-size:14px;vertical-align:middle}

.blog-pager a{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:15px;display:inline-block;white-space:nowrap;color:#fff;text-align:center;background:#75539e;border-radius:3px;}

.blog-pager a:hover{color:#f4a900}

.blog-pager a:active{position:relative;top:1px}

.blog-pager svg{width:16px;height:16px;fill:#fff;}

.blog-pager-older-link, .home-link,

.blog-pager-newer-link {background-color: $(content.background.color);height:auto;padding:0;display:inline-block;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;border-radius:1px;float:right;text-align:right;margin-left:5px;}

.blog-pager-older-link:hover svg, .home-link:hover svg, .blog-pager-newer-link:hover svg {fill:#f4a900}

.blog-pager-older-link svg, .blog-pager-newer-link svg{vertical-align:middle}

● Kedua: cari bagian html dari blog-pager, yang kurang lebih seperti di bawah ini:

<b:includable id='nextprev'>

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

</span>

</b:if>

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

</span>

</b:if>

kemudian html blog-pagernya rubah menjadi seperti berikut:

<b:includable id='nextprev'>

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

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><text>NewerPost</text><svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M9 21l9-9-9-9-3 3 6.1 6-6.1 6z'/></svg></a>

</span>

</b:if>

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

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M15 21l-9-9 9-9 3 3-6.1 6 6.1 6z'/></svg><text>OlderPost</text></a>

</span>

</b:if>

Sebagai rujukan, karena Blog Pager ini tidak bisa dilihat melalui pratinjau, maka untuk melihat hasinya haruslah dengan cara membuka salah satu dari halaman file atau homepage anda.
Untuk penataan blog pager yang lebih menarik, baik warna, ukuran, pemilihan warna yang sesuai dengan yang anda inginkan, kalian bisa meg-otak-atik pada bagian css.
Done!

Semoga artikel ini bermanfaat, Selamat mencoba....!

05 Desember 2025