Rabu, 23 Maret 2011

Tutorial :Cara Membuat Read More dan nama author di atas postingan

tutorial yang penting share
Read more is Back,hehehe.Ehh mau mengalahkan Superman ya? ,bukan tapi yang dimaksud disini adalah cara Membuat read more dengan gaya baru,yaitu diatas /header postingan kita plus nama authornya.Kalau sebelumnya ada readmore dengan Efek marquee ataupun yang biasa,sekarang kita letakkan diatas plus nama kita.Wah bagaimana caranya?mudah kok,ikuti saja tutorial berikut ini



Buat Read More di atas Posting plus read more lama tetap dipakai

  • Login ke blogger :gunakan id kamu yang bener hehehehe 
  • Dasboard/Dasbor : kemudian Cari dan KLIK link "Design/Rancangan".
  • Design/Rancangan : Cari dan klik "Edit HTML".
  • Edit HTML-1 : KLIK "Download Template Lengkap" untuk melakukan "back-up" templates. Tunggu beberapa saat kemudian simpan file template di folder PC.
  • Centang "Expand Widget Templates".
  • Tetap di Edit HTML, kemudian Cari kode 
    <div class='post-body entry-content'>.
    ---Gunakan Ctrl+F untuk memudahkan pencarian kode!---
  • Copy-Paste : Copy dan ganti kode di atas dengan kode HTMl di bawah.

    div class='post-body entry-content'>

    <div style='border-bottom:1px dotted #444;margin-bottom:10px;padding:1px 0;height:25px;text-shadow:1px 1px 1px #000;'>
    <span style='font-style:italic;color:yellow;'>posted by: <span style='color:blue;'>Nama Anda</span></span>
        <b:if cond='data:post.hasJumpLink'>
          <div class='jump-link' style='float:right;'>
            <a expr:href='data:post.url + "#more"' expr:title='data:post.title' style='text-decoration:none;'>
    <span style='font-family:Cataneo BT;font-weight:normal;font-size:16px;padding-right:20px; background:url(Masukkan url gambar read more anda disini) right center no-repeat;'>Read More ....</span>
    <!-- <data:post.jumpText/> -->
                    </a>
          </div>
        </b:if>
    </div>
    <div style='clear:both;'/>
  • Ubah semua tulisan pada kode yang berwarna Pink
  • SAVE Templates/Simpan Template : klik SAVE Templates dan lanjutkan dengan membuat posting menggunakan read more.
  • Buka hasilnya di halaman utama untuk mengetahui tampilan read more baru anda



 Buat Read More di atas Posting - Read More Lama di hilangkan


Caranya sama dengan cara di atas. Kode HTML dan penempatan kode juga sama, tetapi tolong cari dan hapus kode HTML yang seperti terlihat di bawah ini! Kode di bawah adalah kode read more lama yang selama ini di gunakan.

<b:if cond='data:post.hasJumpLink'>
     <div class='jump-link'>
         <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
             <data:post.jumpText/>
         </a>
     </div>
</b:if>



Untuk memudahkan dalam mencari kode di atas, cari dulu satu kode misalnya :


<data:post.jumpText/>


Setelah ditemukan maka di atas dan di bawahnya akan terlihat seluruh kode yangdimaksud di atas.(sumber)

0 komentar:

Posting Komentar