Thursday, September 11, 2008

Aplikasi "Read More" pada Blog

Aplikasi read more adalah sangat penting kepada sesiapa yang inginkan penjimatan pada ruang posting
jika sebelum ini aplikasi "read more" belum terdapat pada blogspot akan tetapi blogger telahpun melancarkannya..berikut adalah screen shot aplikasi read mora :
 
Untuk versi read More ini, besar huruf ( font ) akan mengikuti besarnya font yang di setting dalam template anda, begitupun dengan warna link akan sama dengan warna link yang dipakai. Tampilan tersebut sebenarnya bisa anda kreasikan menjadi bentuk lain yang mungkin akan dianggap lebih menarik sehingga akan sedikit menambah keindahan tampilan blog anda.

Sebagai dasar pengetahuan, kode read more blogger adalah seperti ini :

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
      </div>
    </b:if>
Dengan mengetahui kode dasarnya, maka tentu saja kita dapat membuat berbagai krekter.
  • Agar read more tampil di sebelah kanan
Secara default " Read more " akan tampil di sebelah kiri. Jika anda berkeinginan agar read more tampil di sebelah kanan, anda bisa menambahkan kode tambahan seperti ini yang berwarna hitam.
<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;'><data:post.jumpText/></a> 
</div>
      </div>
    </b:if>
   
Atau jika anda lebih suka memasang pada CSS, bisa seperti ini ;

Simpan ini di atas kode ]]&gt;

.readmore { float:right;padding: 10px 0px 5px 0px; }

dan pasang ini di bagian body nya ;
<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<div class='readmore'>        
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
</div>
      </div>
    </b:if>

  • Agar Read more ditampilkan tebal
Agar tampilan  " Read more » " atau " Baca Selengkapnya » " bisa tampil dengan huruf tebal, anda cukup menambahkan kode atau . Contoh :

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <strong><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> </strong>
      </div>
    </b:if>
  • Agar Read more tampil plus Judul Posting 
    Tulisan read more anda bisa tampil bersama dengan tulisan judul posting anda, contoh kodenya bisa seperti ini :
 
  • Agar Read more diganti dengan banner
    Apabila anda menganggap tampilan huruf kurang menarik, anda bisa menggantinya dengan dengan tombol atau banner, misal banner seperti ini :

Format kodenya seperti ini ;

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

Contoh nyata seperti ini :

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'> 
       <a expr:href='data:post.url + &quot;#more&quot;'>
<img src='http://lh3.ggpht.com/_pt7i0nbIOCY/SfWbi-PiffI/AAAAAAAAB5k/0ReSxni_N14/more_thumb[1].png' alt='read more'/></a>
      </div>
    </b:if>

Dan anda bisa menciptakan puluhan atau bahkan ratusan kreasi untuk tampilan read more ini agar blog anda tampil menarik.

Masih pusing dimana menempatkan hasil kreasi read more mu? berikut gambaran langkah-langkahnya :

  1. Silahkan login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget " expand-template-widget
  5. Carilah kode yang mirip seperti Ini :

    <div class='post-body entry-content'>
          <data:post.body/>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
  6. Silahkan ganti kode di atas dengan hasil kreasimu seperti yang di contohkan kang rohman tadi di atas.
  7. Klik tombol SIMPAN TEMPLATE
  8. Selesai.

0 comments:


Post a Comment

۞ Ums Guess Rating Zone !!

Jum Chat with Fibox Chat®
Komuniti Universiti malaysia sabah Grab this Make your own

☺ Laman Forum facebook۞ Community™ library

Just Click To Show The Content » ۞ Welcome To community™ library ۞ Senarai Universiti Di malaysia ۞ Sumber Berita Masa Kini ۞ Download Free E-Book ۞
Sila Copy And Paste code di bawah masukan di blog anda, Untuk penyesuaian saiz di blog anda,sila ubah Angka(cursor:hand;width: 200px; height: 60px)
Banner Exchange:


۞ Add Your Blog Info Here >>>

Click Open To Add Blog Address:
Your Name
Email Address
Blog Adress
Message
.

۞ UMS HIGHLIGHT BLOG ۞

☺ Facebook Group۞ Network

 

Followers

Recent Comments

TOP COMMENTATORS

Your Connection