Cara mengganti tulisan posting lama dan baru dengan icon

Hmmm malam ini saya akan share tentang bagaimana cara mengganti tulisan posting lama dengan icon yang lebih keren sory yang  udah pada tau and master silahakan cabut aja dech ini buat yang belom tau and masih gagal aja untuk itu lanjut ke bawah lah buat cranya:
Untuk mengganti Posting lama serta Posting baru dengan icon, langkah pertama tentu saja anda harus mempersiapkan icon yang akan di pakai. Sebagai contoh kang Rohman mempunyai icon seperti ini :



Uploadlah icon-icon yang anda miliki ke server tempat anda biasa menyimpan gambar, kemudian catat URl nya. Contoh kang rohman mempunyai alamat icon icon di atas sebagai berikut :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8guCC6Ba1jh96_BriecoiQwBUT-FXugsu1wq-tTFdgxAzmX80TIVcxZbi2Ib75NQlv5wsWWydDf3PVQntt-xZ1_hjiN5K1Hm1PitPq86IMfgKZN3iLLg0N65Ceq2QVO3YVhljKCD1qPE/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixsiDWHQ21JXE9rd0OTJNb_jgSwy2Riw_e57JyEM3vBHCGP1j1fDplzgxIIb7QjhRvq0miFcy4wmQed9i8E9vkXdxhWOOKBy3N_TVcyPIWDbzAKT3glnoUm_k1DcDIvAwmtHzwhG8hoV8/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6EvHLPVhPApg-PYF1-HAhG9swqJuhMlS4FL6HUTJteOLyJqJTPS05tMObIenEp4IqpL7ZfM9QF0ZG687j4pCa9CbOg1yt2AdqLdYrC_1XyuOyHc6K9c8kvn6HCYXdPFNnXZdy6YnImjc/?imgmax=800

Ubahlah kode di atas menjadi seperti ini :

<img alt='Next' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8guCC6Ba1jh96_BriecoiQwBUT-FXugsu1wq-tTFdgxAzmX80TIVcxZbi2Ib75NQlv5wsWWydDf3PVQntt-xZ1_hjiN5K1Hm1PitPq86IMfgKZN3iLLg0N65Ceq2QVO3YVhljKCD1qPE/?imgmax=800' title='Next'/>
<img alt='previous' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixsiDWHQ21JXE9rd0OTJNb_jgSwy2Riw_e57JyEM3vBHCGP1j1fDplzgxIIb7QjhRvq0miFcy4wmQed9i8E9vkXdxhWOOKBy3N_TVcyPIWDbzAKT3glnoUm_k1DcDIvAwmtHzwhG8hoV8/?imgmax=800' title='previous'/>
<img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6EvHLPVhPApg-PYF1-HAhG9swqJuhMlS4FL6HUTJteOLyJqJTPS05tMObIenEp4IqpL7ZfM9QF0ZG687j4pCa9CbOg1yt2AdqLdYrC_1XyuOyHc6K9c8kvn6HCYXdPFNnXZdy6YnImjc/?imgmax=800' title='home'/>

Jika anda sudah mempunyai kode seperti diatas, langkah selanjutnya adalah tinggal memasukannya ke kode template anda, caranya seperti ini :

1. Login ke blogger dengan ID anda
2. Klik Tata Letak.
3. Klik tab Edit HTML
4. Klik tulisan “Download Full Template”, silahkan di backup dulu template anda (penting)
5. 
   Beri tanda centang pada kotak kecil di samping tulisan Expand Widget Template
   
   
6. 
   Tunggu beberapa saat sampai proses selesai.
   
7. 
   Cari kode berikut pada template anda :
   
   <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>
   
8. 
   Perhatikan kode yang saya cetak merah.
   
9. 
   Gantilah kode <data:newerPageTitle/>, <data:olderPageTitle/> , dan <data:homeMsg/> dengan kode icon anda. Contoh :
   
   <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 alt='Next' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8guCC6Ba1jh96_BriecoiQwBUT-FXugsu1wq-tTFdgxAzmX80TIVcxZbi2Ib75NQlv5wsWWydDf3PVQntt-xZ1_hjiN5K1Hm1PitPq86IMfgKZN3iLLg0N65Ceq2QVO3YVhljKCD1qPE/?imgmax=800' title='Next'/></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 alt='previous' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixsiDWHQ21JXE9rd0OTJNb_jgSwy2Riw_e57JyEM3vBHCGP1j1fDplzgxIIb7QjhRvq0miFcy4wmQed9i8E9vkXdxhWOOKBy3N_TVcyPIWDbzAKT3glnoUm_k1DcDIvAwmtHzwhG8hoV8/?imgmax=800' title='previous'/></a>
        </span>
      </b:if>
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6EvHLPVhPApg-PYF1-HAhG9swqJuhMlS4FL6HUTJteOLyJqJTPS05tMObIenEp4IqpL7ZfM9QF0ZG687j4pCa9CbOg1yt2AdqLdYrC_1XyuOyHc6K9c8kvn6HCYXdPFNnXZdy6YnImjc/?imgmax=800' title='home'/></a>
        <b:else/>
        <b:if cond='data:newerPageUrl'>
          <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
        </b:if>
      </b:if>
   
10. 
    Klik tombol Simpan Template
    
11. 
    Selesai
    

Contoh hasil yang akan anda dapatkan seperti ini :


Jika anda mempraktekan tutorial ini kemudian mendapatkan pesan error, Ziliwu menyarankan untuk mencoba lagi dengan menggunakan browser yang berbeda.
Selamat mencoba!


Dari blog master: Kang Rohma