rss

Supports

Just an ordinary blogger from urban city bekasi who want to be exist in cyberworld during learn and know bout blog also understanding internet world so i can share, study together in ensiblogpedia. Hanya seorang blogger biasa dari kota urban Bekasi yang berkeinginan untuk bisa eksis di dunia maya sambil belajar dan mengenal blog serta memahami dunia internet untuk bisa berbagi bercerita dan belajar bersama di ensiblogpedia ini.

Friday, 8 January 2010

Cara membuat "read more" pada blogger

Tidak perlu saya jelaskan lagi sudah berapa banyak postingan yang menjelaskan mengenai hal ini, tapi tetap saya tulis guna memenuhi arsip ensiblogpedia ini. Banyak referensi yang saya ambil mengenai pembuatan readmore ini. Secara garis besar, saat ini membuat readmore dapat dilakukan dengan 3 cara. Cara-cara tersebut terbagi menjadi 2 jenis, yaitu cara langsung dengan fitur yang sudah di sediakan oleh blogger itu sendiri, atau dengan cara pihak ketiga yang sering disebut css-hack. Berikut ini penjelasannya.

CARA PERTAMA : Membuat readmore dengan jump-break dari blogger.
  • Login ke blogger seperti biasa.
  • Masuk ke menu Layout, Edit HTML lalu centang box "Expand widget template".
  • Cari kode <data:post.body/>, lalu copas kode berikut dibawahnya.

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

  • Simpan editan kamu lalu beralih ke Page element atau Elemen Halaman.
  • Pada bagian posting, klik edit lalu masukkan kata-kata readmore-nya sesuai dengan keinginan kamu. Boleh Bersambung, dll. Lihat gambar dibawah.



  • Pada saat kamu membuat postingan baru, maka kamu tinggal memenggal kalimat/paragraf yang ingin di sembunyikan dengan menekan tombol jumpbreak.



  • Percantik tampilan readmore kamu ??? Tambahkan beberapa kode berikut untuk membuat tampilan readmore-nya sedikit berbeda.
    • Membuat latar belakang warna untuk tulisan readmore.
      Tambahkan kode berikut tepat setelah kode <b:skin>

      .jump-link a {
      background: #ffff00;
      padding: 3px;
      color: #fff;
      }
      .jump-link a:hover {
      background: #000000;
      padding: 3px;
      color: #ccc;
      }


      Yang berwarna merah dapat kamu ganti dengan warna kesukaan kamu sendiri.

    • Mengganti tulisan readmore dengan gambar. Caranya kamu tinggal mengganti kode yang paling pertama saya berikan diatas dengan kode berikut ini,

      <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
      <a expr:href='data:post.url + "#more"'>
      <Url alamat dari gambar yang ingin dijadikan readmore/>
      </a>
      </div>
      </b:if >


Sumber : bloggerbuster.com

bersambung...



Related Post:



Enter your email address to get the newest article here:



Delivered by FeedBurner


4 comments:

Ghost Call on 25 June 2010 at 01:02 said...

thank's atas infonya

Anonymous said...

dasar gila masa ada bersambungngnya!!!!!!!!

Poker Online on 25 November 2015 at 10:27 said...

Info yang berguna banget ni.. Lanjutkan yang lebih bagus lagi gan thanks ya..

Agen Poker
Agen Poker Online
Agen Poker Terpercaya
Poker Online
Poker Terpercaya
Bandar Domino
Bandar Domino Online
Agen Domino
Judi Poker
Taruhan Poker
Bandar Poker

Agen Casino on 16 April 2017 at 10:47 said...

Mantab banget artikelnya gan.. Thanks atas infonya gan..

Agen Casino
Agen Casino Online
Agen Casino Online Terpercaya
Agen Baccarat
Agen Baccarat Online
Agen Baccarat Online Terpercaya
Bandar Casino
Bandar Casino Online
Bandar Casino Online Terpercaya
Casino Terpercaya
Casino Online
Agen Casino Terpercaya
Agen Sicbo Online
Agen Sicbo Online Terpercaya
Agen Casino Terbaik
Situs Casino Online Terpercaya
Agen Kasino


Post a Comment

Saran, kritik, masukan, berikan semuanya ke ensiblogpedia agar blog ini dapat lebih maju untuk belajar bersama.

The Newest article

Enter your email address to get the newest article here:



Delivered by FeedBurner


Followers