Sabtu, 26 Oktober 2013

Memindahkan tulisan Read More default Ke Kanan

Ada Berbagai Cara Modifikasi Read More atau Baca Selengkapnya , baik Read More Default bawaan blogger atau yang dibuat secara manual, salah satunya di Saung Link ini yaitu memindahkan Read More ke sebelah kanan,  bisa juga mengganti Tulisan Read More dengan kata lain atau gambar dll.
Ada berbagai alasan untuk modifikasi Read More, seperti ingin tampil beda , lebih keren sampai urusan SEO Friendly, dll. semua tergantung tujuan masing2. Saya misalnya karena posisi nya di sebelah kiri pas diatas widget Share AddThis atau Infogue, kalau mau klik Read More suka terganggu dengan munculan widget tersebut sehingga tulisan read morenya jadi terhalang. Untuk jelasnya coba aja sorot widget  tersebut.. nah seperti ituiah masalahnya.

Ok sekarang langsung ke topik Berbagai Cara Modifikasi Read More atau Baca Selengkapnya , diantaranya :
A. Memindahkan tulisan Read More default Ke Kanan
B. Memindahkan Tulisan Read More bukan default ke kanan
C. Merubah Tulisan Read More dengan kalimat sendiri
D. Mengganti Tulisan Read More dengan gambar atau icon
A. Memindahkan tulisan Read More default Ke Kanan

  1. Login ke blogger.com – > Pilih Template – > Edit HTML
  2. Backup dulu templatenya ya,, untuk berjaga-jaga
  3. Centang Expand Template Widget
  4. Cari kode seperti ini : Selalu gunakan Ctrl+F agar mudah mencarinya
    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>'Read More'/></a>
    </b:if>
  5. Tambahkan kode warna merah diposisi berikut ini
    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <div style='float:right;padding:10px 0px 5px 0px'> <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>'Read More'/></a>
    </div> </div> </b:if>
  6. Selesai , lakukan preview dulu, kemudian simpan template
B. Memindahkan Tulisan Read More bukan default ke kanan
Maksud bukan default disini adalah read more yang kita buat secara manual  seperti yang ada dalam postingan ini. Untuk memindahkan posisi Read More ke sebelah kanan yang saya lakukan di Blog ini adalah sbb.

  1. Langkah 1 sampai 3 lihat diatas
  2. Kode Pada blog ini saya dapatkan sbb. :
    <data:post.body/> 
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <a expr:href='data:post.url'> Read More...</a>
    </b:if>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div> 
       
  3. Kemudian saya tambah kode warna merah, hingga akhirnya seperti ini :
    <data:post.body/> 
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <span class='rmlink' style='float:right'>
    <a expr:href='data:post.url'> Read More...</a> </span>
    </b:if>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div> 
       
  4. Atau tinggal ganti left menjadi right kalau menemukan kode sudah seperti berikut ini :
<span class='rmlink' style='float:left'>
<a expr:href='data:post.url'>Read More.. <data:post.title/></a> </span>
C. Merubah Tulisan Read More dengan kalimat sendiri
Ini sih paling gampang tinggal ganti saja tulisan Read More dengan kata-kata sendiri sesuai selera, misalnya : Baca selengkapnya.. , lanjutkan.., dsb.
D. Mengganti Tulisan Read More dengan Gambar atau Icon

  1. Perhatikan kalau menemukan kode seperti dibawah ini :
<data:post.body/> 
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='rmlink' style='float:right'>
<a expr:href='data:post.url'> Read More...</a> </span>
</b:if>
Ayau ada juga kode yang seperti ini :
<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>
2. Sebelum menggantinya tentu harus punya dulu  sumber / Url gambarnya , buatlah logo misalnya dengan Software Cooltext . Kemudian ganti kode warna merah diatas dengan kode berikut :
<img src=' URL gambar Read More yang telah di upload '/>
Sampai disini aja.. Blog Tutorial dalam topik Berbagai Cara Modifikasi Read More , sengaja saya tampilkan beberapa kode yang berbeda, siapa tahu ada yang sama. Semoga bermanfaat.



Sumber : http://saunglink.blogspot.com/2012/12/berbagai-cara-modifikasi-read-more.html#ixzz2iDxmsJ6p

0 komentar :

Posting Komentar