Senin, 06 Agustus 2012

Blogging - Cara mengganti tulisan posting lama dan baru dengan icon

Yo sobat blogger semua, nah kali ini bagi sobat blogger yang bosan dengan tampilan posting lama atau posting baru dengan kata - kata dan ngak tau caranya nih laptopku99 punya caranya nah silahkan di pelajari dan praktekkan.

Contoh : menggunakan icon dibawah ini
Next home previous

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

Cara mengganti tulisan posting lama dan baru dengan icon
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbw2FECRprh804MgS4PN734gDQgeB7cLaMQOUad2agWQLwAruzl2CaplUP9esTctyHS9S-s7tJ2Lh9-X9l8R18DOU4lgYH9iFke0zEPcYtoUTiP7kF41Wkme2yGEgFKVzwSjq9m44Zk0A/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipfw6D_voP0Oz_XoCx21pIU05RaeloslWYp4Tf9ZpizhuRrv8tVToZp_Qr8xH1y7wviOBCLyCKq2iuAYQNcb7qw2Pm77P1erUIQNzthCdKzEgs5w35GQk0IW3KhUGb3lCDkeC_tE3lcxs/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLisatNk_TecOO0kqaBKnfCrv5_7zIMo7kBU6ibEow-BHJIUHCz7ON_w-pmlVRdH79sp5fqs2xtOmpnXtwwdL73aZyyrS2E2jx17ORl8IMT4CANbEZKHbu2WK2due76G837YpzmYPEYlI/?imgmax=800

Ubahlah kode di atas menjadi seperti ini :
Cara mengganti tulisan posting lama dan baru dengan icon
<img alt='Next' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbw2FECRprh804MgS4PN734gDQgeB7cLaMQOUad2agWQLwAruzl2CaplUP9esTctyHS9S-s7tJ2Lh9-X9l8R18DOU4lgYH9iFke0zEPcYtoUTiP7kF41Wkme2yGEgFKVzwSjq9m44Zk0A/?imgmax=800' title='Next'/>
<img alt='previous' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipfw6D_voP0Oz_XoCx21pIU05RaeloslWYp4Tf9ZpizhuRrv8tVToZp_Qr8xH1y7wviOBCLyCKq2iuAYQNcb7qw2Pm77P1erUIQNzthCdKzEgs5w35GQk0IW3KhUGb3lCDkeC_tE3lcxs/?imgmax=800' title='previous'/>
<img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLisatNk_TecOO0kqaBKnfCrv5_7zIMo7kBU6ibEow-BHJIUHCz7ON_w-pmlVRdH79sp5fqs2xtOmpnXtwwdL73aZyyrS2E2jx17ORl8IMT4CANbEZKHbu2WK2due76G837YpzmYPEYlI/?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
    expand-widget

  6. Tunggu beberapa saat sampai proses selesai.

  7. Cari kode berikut pada template anda :
    Cara mengganti tulisan posting lama dan baru dengan icon
    <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/AVvXsEgbw2FECRprh804MgS4PN734gDQgeB7cLaMQOUad2agWQLwAruzl2CaplUP9esTctyHS9S-s7tJ2Lh9-X9l8R18DOU4lgYH9iFke0zEPcYtoUTiP7kF41Wkme2yGEgFKVzwSjq9m44Zk0A/?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/AVvXsEipfw6D_voP0Oz_XoCx21pIU05RaeloslWYp4Tf9ZpizhuRrv8tVToZp_Qr8xH1y7wviOBCLyCKq2iuAYQNcb7qw2Pm77P1erUIQNzthCdKzEgs5w35GQk0IW3KhUGb3lCDkeC_tE3lcxs/?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/AVvXsEiLisatNk_TecOO0kqaBKnfCrv5_7zIMo7kBU6ibEow-BHJIUHCz7ON_w-pmlVRdH79sp5fqs2xtOmpnXtwwdL73aZyyrS2E2jx17ORl8IMT4CANbEZKHbu2WK2due76G837YpzmYPEYlI/?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
Cara mengganti tulisan posting lama dan baru dengan icon
Contoh hasil yang akan anda dapatkan seperti ini :
olderpost

Selamat mencoba! Cara mengganti tulisan posting lama dan baru dengan icon
anda bisa mengganti link yng berwarna biru dengan link di bawah ini


kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJfBKaHWL43oxMV6tQm1X4FKNdQuGZLDbog-qdr4HfbM9PxsKsChPCpczNuS_z2WRFey5KO3b0xNGaMR_0MmfmrrN-zOqCreafJhtUalH6wvdgePwgvNVftDsy91xCkIJ8hT55RVj1-sXr/" border="0" >


kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaakn1tgmaBFxm_uA9r10h91iWfk87RrL7ygINdlWguQcLFFQFzuGjDNo48cOLjG0QEx-yIpTPojQdj4UECzpNnaigyip3AWttUH1K0hwGXkM7yPwIBFrPmtMrgOtKOWB-XAob3bI1vdPb/" border="0" />


kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4-qW_8kOkp7qhCjImgbYAQt4CMLPLOV2KLN7e0yTAv3aN8I2g6_VwCi3J81P3D8UW7PtrkosZSbB5-5mYta2LSA2K9PmJVHF8xoidoELMy6mg3S53nzMgIlC8Jk3CiMwaSRfvC1nHd6Hy/" border="0" />


Kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh34OhfTkNinIHsl2QyDYusqGWYZA9PtpJzu1lemZZs3i2OMNCPtaABpskAURaVe76dB_W_-tOyK2omveYdyC1OtZJyDd01vA1pW6l5e8A4rDdqsmalR64TMST1PFnzB6OPl6kqZgyZYTXy/" border="0" />


Kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLQPZfxQwoQ3rJZKI8I8TDyHSwmynJYpPqwY2FEHiA2Dhhbwj1eFfxE5loYL5RSnOyLUh8zw5YRljgTOdTNaQ7-cj-hlR4ZCCzTRIT9_qWv81Ev8Y6qn7LQEUyK7iRt8wGgtLAe2bYHRE/" border="0" />




Kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha1cVgXPwih3hQVXewNajJSlmI5ZebBMCgXVNhlRALQ-nMQ8-5ibTASW72qHHFGmMSA8dN4ktCk0TUpEzE-n4TC2kghMemrWBvcqB9pW9L8cuI3jW_HHt-FJrVXkxlJ7TxOeMME3dRz4BX/" border="0" /></a>


Kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXsNAXf8XITsiOss5I7wnPCL068kJdQH0Y35JA2V9S8Z2Ceg9W9VYZ5gO7aEcQXg-7Dh4X5ULIahAQfVdsOaKt1pQDbBLgP518wSwnmeWFWsGhCBm0-5W9A3dhDaw1xo0eRAYMpLYevfjn/" border="0" />


Kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-kS7umeiK7NEifGJ9Uc5mRKSTHWVmMJvuq11EbarVVib4nkbe3iymNatuPeCIsOe0IkbEOWzCixcBE6SljhJNW1dDz5ylApWXoIgivjXf1blm8atDI2lts2vk8kT7GMptgCTcIRes71Iw/" border="0" />


Kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzwBp8ZJaDRaeBAXbm5-FR-C2R4M4osUdIXgkRSjs2vP4SSwhmLFGolDl7yC4sygD9XfWrLuOeJfaCMZR3pKDsuC1qDOGkkel6c6aav7gDVflh3OZyuyt5tZ8yCPqBhrwSQNcPtXVTfzHl/" border="0" />


Kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT34ov6DVKgeDA1yu6KUctI8w0Es-XluzroWxPtAfWe2SkhKTotGbuKddVZwN8bGpe5Oxw-7V15iFR87skpjH4RtPccbuO_F6847hcKloZ0wAsqtjMhah7F0UitvPX5CXem_5OdigkhN2b/" border="0" />



Kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_k2F-ndYgdhPgb-Rkg-OboO2oojaK9YS7MxYUBnvx3wKkd1HsAJ6V_-EdbLqSzLsabWxEaQe1t15FwOZirNjvJUUDX7vTks6mYK7YQfHDJoTZXLQvF7xeTQXFdWkJ8Ka3mRBRMz18_xHh/" border="0" />


Kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIrwYSnNGjeaAa7ptF3Tne8pyWF254Q5SanQNnvou6EbMnMOnatWGxU9C87ozh_fxSWFk4wt26wS2O1VjCwAwfLmh9vkEUTNrFgD35jlOdy-D85LRBaRtuVSlR0XKYrZktBmYjcDw81LvH/" border="0" />


Kode:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXmp0TGWEBZlqB1zakjUTjSia1qEHAvxKcMNuN4Giksq3v3fwFk1cwuXTtaq2rFMP8eZddEDVeRO8jUy5glIOYH1rXuVGdmvQMUVi28j9_oAntYjs9suPcwruI_MpPCp-TQ8UEzMe4xC4o/" border="0" />


Kode
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fD4U3AYxvZcqlTt9-VCAHAdernpT33-b8dvgfOd6bKjuVo9xphwS_xT7jqRpGZqa35TvYQ2JrfLtnQR0_pMa_W1ZqXj0yfDuSmlClN_xUYiTz_Vuwpcwm1ACqLZxtOwyDSnAQpPPlkSv/" border="0" />

Nah begitu sobat bloggers, jangan lupa comment ya ...... :D

Tidak ada komentar:

Posting Komentar