________________________________________________________________________________________________________________________________

Minggu, 03 April 2011

Mengganti "Posting lama dan Posting baru" dengan Icon

Untuk mengganti Posting lama serta Posting baru dengan icon, langkah pertama tentu saja anda harus mempersiapkan icon-icon yang akan di pakai. Sebagai contoh iconnya seperti ini :




Nexthomeprevious

Uploadlah icon-icon yang anda miliki ke server tempat anda biasa menyimpan gambar, kemudian catat URL nya. Khusus contoh icon di atas link bannernya sebagai berikut :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsH2dXPqKGFDtYU9VdKC97oKqk5KneRydlgHdGeRfPyR7HB25NVZqsD2xAWKg5283bTHbUnRQvKswhfV2ZyT9s8tI2PzUvxNF_YlsNVAn3THmigTODzFgyXQhjXbJXoq6XDSl6EOUbdws/?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQBPlFiF2NuLJ85uL7KmXRRxVL94fy_PlsmiJb2KoPsrdUtaGv9gAca-Lr-CQORVdcglUdBsaApbnEONpLZ8pq-EtNrpFR6rKNh-47YYuH8Nx0qm-KZwd0EQim8foEaD8cPtrlmk-ydPU/?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQYuC3a0_6TmFEbVi1o0UtcUEy-musjueUYgA2Q9v7X7f8hTLbif60FYunI0beQao_h1HC2wOvifXuljueAd_KjwK_iGw4Bd4MOe14uH7fhG1in4bZv2hNg0OUOWOHOCvFdNkIK6FprEs/?imgmax=800

Ubahlah kode di atas menjadi seperti ini :

<img alt='next' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsH2dXPqKGFDtYU9VdKC97oKqk5KneRydlgHdGeRfPyR7HB25NVZqsD2xAWKg5283bTHbUnRQvKswhfV2ZyT9s8tI2PzUvxNF_YlsNVAn3THmigTODzFgyXQhjXbJXoq6XDSl6EOUbdws/?imgmax=800' title='Next'/>

<img alt='previous' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQBPlFiF2NuLJ85uL7KmXRRxVL94fy_PlsmiJb2KoPsrdUtaGv9gAca-Lr-CQORVdcglUdBsaApbnEONpLZ8pq-EtNrpFR6rKNh-47YYuH8Nx0qm-KZwd0EQim8foEaD8cPtrlmk-ydPU/?imgmax=800' title='previous'/>

<img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQYuC3a0_6TmFEbVi1o0UtcUEy-musjueUYgA2Q9v7X7f8hTLbif60FYunI0beQao_h1HC2wOvifXuljueAd_KjwK_iGw4Bd4MOe14uH7fhG1in4bZv2hNg0OUOWOHOCvFdNkIK6FprEs/?imgmax=800' title='home'/>

Kemudian 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 (ini penting)
5. Beri tanda centang pada kotak kecil di samping tulisan "Expand Widget Template"

expand-widget

6. Tunggu beberapa saat sampai proses selesai.
7. Cari kode berikut pada template anda :


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


8. Perhatikan kode yang saya cetak merah.
9. Gantilah kode <data:newerPageTitle/>, <data:homeMsg/> dan kode <data:homeMsg/> dengan kode icon anda. Contoh hasil perubahannya akan menjadi seperti ini :


<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 alt='next' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsH2dXPqKGFDtYU9VdKC97oKqk5KneRydlgHdGeRfPyR7HB25NVZqsD2xAWKg5283bTHbUnRQvKswhfV2ZyT9s8tI2PzUvxNF_YlsNVAn3THmigTODzFgyXQhjXbJXoq6XDSl6EOUbdws/?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/AVvXsEjQBPlFiF2NuLJ85uL7KmXRRxVL94fy_PlsmiJb2KoPsrdUtaGv9gAca-Lr-CQORVdcglUdBsaApbnEONpLZ8pq-EtNrpFR6rKNh-47YYuH8Nx0qm-KZwd0EQim8foEaD8cPtrlmk-ydPU/?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/AVvXsEhQYuC3a0_6TmFEbVi1o0UtcUEy-musjueUYgA2Q9v7X7f8hTLbif60FYunI0beQao_h1HC2wOvifXuljueAd_KjwK_iGw4Bd4MOe14uH7fhG1in4bZv2hNg0OUOWOHOCvFdNkIK6FprEs/?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. Proses selesai, begitu mudah dan sederhana :)

Contoh hasil yang akan anda dapatkan seperti ini :

0 komentar:

Posting Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Dcreators