Thursday, January 9, 2014

Cara Bikin Readmore Pakai Gambar


Haloha.. pie kabare?..

Mungkin sebagian visitor blog gue ada yang kangen dengan postingan-postingan tutorial gue. Bahkan mungkin ada yang belum tau kalau di blog gue ada postingan tutorial. Tutorialnya bermacam-macam, ada yang berhubungan dengan video maker, design blog, dll. Penasaran? klik disini.

Kali ini gue bakal membahas tutorial singkat alias nggak susah-susah banget yang berhubungan dengan design blog. Semoga tutorial gue jelas dan mudah dimengerti oleh kalian. Kalau masih nggak ngerti, gue bakal praktekin dengan video juga. Dan, mungkin untuk postingan tutorial gue seterusnya bakal di lengkapi dengan video. 

Di postingan ini, gue bakal bahas tutorial "Bagaimana caranya agar readmore kita berupa gambar". Mungkin ada yang belum tau apa sih maksudnya Readmore pakai gambar?.. 

Readmore adalah fitur blogger yang mempunyai fungsi mempersingkat postingan kita di halaman utama blog (Yang kita kenal dengan "Selengkapnya/Selanjutnya"). Biasanya kan pakek text doang tuh, tapi disini diganti dengan berupa gambar.

Contohnya begini:


Bagaimana cara bikinnya? Cekidot!
Cara Bikin Readmore Pakai Gambar
Sebelumnya, siapkan dulu gambar yang ingin dijadikan Readmore. Bisa diambil dari google image atau kalian design/bikin sendiri di photoshop dengan ukuran yang pas.

Oke, pertama-tama kita login blogger dulu. Kalau nggak login, kalian nggak bisa apa-apain blog kalian. Setelah login, jangan lupa klik tab template, disitu kalian akan melihat tampilan seperti dibawah ini.


Di gambar, ada tombol "Edit HTML". Kalian klik aja.. Setelah itu tampilan akan berubah lagi menjadi seperti ini..


Kalau blogger awam pasti mikir ini adalah bagian sulit dan nggak dimengerti. Sama, gue juga nggak ngerti tentang ginian. Yang gue tahu ini namanya kode HTML. Kalau kalian penasaran dengan penjelasan lengkapnya, check aja google

Ya udah, lanjut saja~

Pada tampilan kode HTML, kalian cari kode <a expr:href='data:post.url + &quot;#more&quot;'> (Jangan lupa pakek CTRL+F dahulu agar pencarian kode semakin mudah dan cepat). 


Masih di gambar, dibawahnya ada kode <img alt='read more' src='http://i.imgur.com/JEiCLKE.png'/> kan? Nah, itu kodenya. Kalau kodenya nggak ada di blog, tambahkan aja..

Perhatian, disana gambarnya adalah gambar readmore gue. Kalau kalian mau ganti gambar, silahkan ubah pada kode src='http://i.imgur.com/JEiCLKE.png'/ dengan kode gambar kalian sendiri.

Masih bingung dengan dapetin kode gambar gimana? silahkan upload gambar readmore versi kalian di imgur.com dan ambil kode gambar yang kalian upload tadi disana. Trus, ganti deh kodenya..

Nah, sekarang blog kalian agak sedikit menarik dari sebelumnya. Kalau masih belum jelas dan tulisan gue terlalu ribet, silahkan nikmati videonya dibawah ini..


Oke, kalau masih belum ngerti juga, Silahkan bertanya melalui komentar, Facebook, dan Twitter gue. Kalian juga bisa cari tutorial jenis ini di google, banyak kok.

Selamat mengobrak abrik template blog!

Ps: Khusus untuk pengguna blogger/blogspot.
Sumber Gambar Postngan Readmore By www.allblogtools.com

21 comments :

  1. cikidotnya sangat dimengerti sob .... hehehehe :)

    ReplyDelete
  2. gue udah pake Readmore Gambar :)

    ReplyDelete
  3. Wah, bagus nih, boleh di coba nih,
    Bang request dong, cara buat menu bar . makasih :))

    ReplyDelete
    Replies
    1. Oke, Request mu tak tampung dulu :)

      Delete
    2. Makaasih banget lho bang,
      eh, kalo bisa yang kaya gini bang --> http://oi42.tinypic.com/14263h1.jpg ,
      maaf banyak minta. hehe

      Delete
    3. iya nih. gua juga kesulitan buat menu bar. mohon tutor nya ya mad

      Delete
  4. Uwohhh ini nih yg gue cari2...
    thank you banget infonya =)

    ReplyDelete
  5. Bermanfaat. Tapi sekarang udah banyak juga template yang nyedian readmore otomatis.
    Nice tutor, bung! :))

    ReplyDelete
    Replies
    1. Readmorenya memang harus di set otomatis dulu... baru ditambahin gambar di tutorial. :)

      Delete
  6. Thanks banget bang, nyari tutor "readmore" dari dulu kagak nemu nemu nih :D

    ReplyDelete
  7. saya coba sekarang nih , soalnya saya belum pernah nyoba yang kaya ini heheh

    ReplyDelete
  8. thanks bang bro atas tutornya :D

    ReplyDelete
  9. bang ane mau tanya, kok pas cari < a expr:href='data:post.url + "#more"' > pake ctrl+f tetep gak ketemu? itu jadinya gimana? tolong dijawab yaaa

    ReplyDelete
  10. waaaah makasih banget....
    bisa dicoba niiih....
    :)

    ReplyDelete
  11. kalau lewat wordpress bisa gak ?

    ReplyDelete
  12. tutorial ttg pemasangan templates yg 'agak' susah dong, kak. Ngedesain blog juga asik tuh.

    ReplyDelete

Setelah membaca, alangkah baiknya meninggalkan komentar. Karena komentar adalah sebuah apresiasi untuk penulis blog. Diharapkan komentar tidak mengandung spam dan kata-kata yang tidak pantas.

Terima Kasih.