Membuat Tampilan Navigasi Simple Blogger Template Lebih Menarik

Jumat, 05 Desember 2025

Jika masuk ke sebuah halaman web yang bertemakan simple blogger template, tampilan navigasinya begitu sangat sederhana bukan?

Tampilan navigasinya untuk : Beranda, Postingan Lama dan Postingan Lebih Baru 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.

Ibarat 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.

Pada artikel ini, seharisilam blog akan berbagi 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>

● Karena tidak bisa dilihat melalui pratinjau, maka untuk melihat hasinya harus dengan cara membuka salah satu dari halaman file atau homepage anda.

● Done!

Selamat mencoba....!