Memodifikasi Newer Post, Home dan Older Post link

Tutorial ini spesial diminta oleh sahabat saya yaitu Romero. Disini kita akan memodifikasi Link Newer Post (Postingan Baru), Home dan Older Post (Postingan Lama) yang biasanya terletak dibawah postingan.

Untuk lebih jelasnya silahkan ikuti langkah-langkah dibawah ini.

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates" (Backup dulu Templatemu jika nanti terjadi kesalahan bisa dikembalikan seperti semula)
3. Cari kode ini

<b:includable id='nextprev'>

4. Dibawah kode tersebut ada kode ini

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

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

+ Kode yang warna Merah adalah kode Link Newer Post (Postingan Terbaru)
+ Kode yang warna Biru adalah kode Link Older Post (Postingan Lama)
+ Kode yang warna Ungu adalah kode Home

Ada 3 cara untuk memodifikasi Newer Post (Postingan Baru), Home dan Older Post (Postingan Lama) yaitu :

A. Untuk mengganti tulisan Link Newer Post (Postingan Baru), Home dan Older Post (Postingan Lama) seperti ini

+ <data:newerPageTitle/> ganti dengan nama sesuai keinginanmu, misal Next Post atau Artikel Terbaru
+ <data:olderPageTitle/> ganti dengan nama sesuai keinginanmu, misal Next Post atau Artikel Lama
+ <data:homeMsg/> pada baris pertama atau kode yang berkedip-kedip ganti dengan nama sesuai keinginanmu, misal My HOmmy atau Rumah

Hasil penerapan kode diatas:

<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'>Artikel Terbaru</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'>Artikel Lama;</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Rumah</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Hasilnya :

B. Menambahkan icon disamping Newer Post (Postingan Baru), Home dan Older Post (Postingan Lama)

+ Tambahkan kode ini

<img src='link gambarmu'/>

Contoh :

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRcTQg2fHTsQBgucYHu45c77RgLTOJM8UfacNMmXEEH96_ouvQ2wfUWdN_CMXxTFOmPzbq1ufoq7f82XV40XsH4ggAwpOI3Ca_Pog9pK-0IuRbqccHu6zaKvS8mency2G0Hy8xC293bbU/s400/zn4qic.jpg.png'/>(Cara upload gambar di Blog lihat di Cara mengambil link gambar dari blogger

Hasil penerapan kode diatas:

<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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRcTQg2fHTsQBgucYHu45c77RgLTOJM8UfacNMmXEEH96_ouvQ2wfUWdN_CMXxTFOmPzbq1ufoq7f82XV40XsH4ggAwpOI3Ca_Pog9pK-0IuRbqccHu6zaKvS8mency2G0Hy8xC293bbU/s400/zn4qic.jpg.png'/><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/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlRgDPmDHdIFaqMz1_YonXFgNu6YZlkTOk6UKFTCPL0VFI7P0T8Vunsg4-U6IHc101ENOF-ZnVW2DL-R78iIj-pL2zWzf92gcNB3rjmeUYDT_SAViErrEJYTfBg1x_Zr2VOUVF3gvJy0/s400/sfcox4.jpg.png'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVOTQqfEdXsrEEBbAEQmuYEsM7kvHyiQGgBerCa3zIjhEnHgOrWf3hYbK4di5eYmqY0WCNTnwSe0dPraS0Mi9c-sjjRaCRmTfO1BXf1X94ptiiXPxSP1z-xRk3hidg2pg89SimMF4585I/s400/Home_32.png'/><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Hasilnya :

C. Mengganti tulisan Newer Post (Postingan Baru), Home dan Older Post (Postingan Lama) dengan Icon.

Hapus kode dibawah ini yang berwarna merah, biru dan ungu

<data:newerPageTitle/> ganti dengan <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRcTQg2fHTsQBgucYHu45c77RgLTOJM8UfacNMmXEEH96_ouvQ2wfUWdN_CMXxTFOmPzbq1ufoq7f82XV40XsH4ggAwpOI3Ca_Pog9pK-0IuRbqccHu6zaKvS8mency2G0Hy8xC293bbU/s400/zn4qic.jpg.png'/>

<data:olderPageTitle/> ganti dengan <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlRgDPmDHdIFaqMz1_YonXFgNu6YZlkTOk6UKFTCPL0VFI7P0T8Vunsg4-U6IHc101ENOF-ZnVW2DL-R78iIj-pL2zWzf92gcNB3rjmeUYDT_SAViErrEJYTfBg1x_Zr2VOUVF3gvJy0/s400/sfcox4.jpg.png'/>

<data:homeMsg/> pada baris pertama ganti dengan <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVOTQqfEdXsrEEBbAEQmuYEsM7kvHyiQGgBerCa3zIjhEnHgOrWf3hYbK4di5eYmqY0WCNTnwSe0dPraS0Mi9c-sjjRaCRmTfO1BXf1X94ptiiXPxSP1z-xRk3hidg2pg89SimMF4585I/s400/Home_32.png'/>

Hasil penerapan kode diatas:

<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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRcTQg2fHTsQBgucYHu45c77RgLTOJM8UfacNMmXEEH96_ouvQ2wfUWdN_CMXxTFOmPzbq1ufoq7f82XV40XsH4ggAwpOI3Ca_Pog9pK-0IuRbqccHu6zaKvS8mency2G0Hy8xC293bbU/s400/zn4qic.jpg.png'/></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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlRgDPmDHdIFaqMz1_YonXFgNu6YZlkTOk6UKFTCPL0VFI7P0T8Vunsg4-U6IHc101ENOF-ZnVW2DL-R78iIj-pL2zWzf92gcNB3rjmeUYDT_SAViErrEJYTfBg1x_Zr2VOUVF3gvJy0/s400/sfcox4.jpg.png'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVOTQqfEdXsrEEBbAEQmuYEsM7kvHyiQGgBerCa3zIjhEnHgOrWf3hYbK4di5eYmqY0WCNTnwSe0dPraS0Mi9c-sjjRaCRmTfO1BXf1X94ptiiXPxSP1z-xRk3hidg2pg89SimMF4585I/s400/Home_32.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Hasilnya :

5. Save template dan selesai.