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.
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 + "#more"'> (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
cikidotnya sangat dimengerti sob .... hehehehe :)
ReplyDeleteNice tutor, Mad.
ReplyDeletegue udah pake Readmore Gambar :)
ReplyDeletemauuu coba :D
ReplyDeleteWah, bagus nih, boleh di coba nih,
ReplyDeleteBang request dong, cara buat menu bar . makasih :))
Oke, Request mu tak tampung dulu :)
DeleteMakaasih banget lho bang,
Deleteeh, kalo bisa yang kaya gini bang --> http://oi42.tinypic.com/14263h1.jpg ,
maaf banyak minta. hehe
iya nih. gua juga kesulitan buat menu bar. mohon tutor nya ya mad
DeleteUwohhh ini nih yg gue cari2...
ReplyDeletethank you banget infonya =)
Wah bisa pake gambar ya
ReplyDeleteBermanfaat. Tapi sekarang udah banyak juga template yang nyedian readmore otomatis.
ReplyDeleteNice tutor, bung! :))
Readmorenya memang harus di set otomatis dulu... baru ditambahin gambar di tutorial. :)
DeleteThanks banget bang, nyari tutor "readmore" dari dulu kagak nemu nemu nih :D
ReplyDeletesaya coba sekarang nih , soalnya saya belum pernah nyoba yang kaya ini heheh
ReplyDeletethanks bang bro atas tutornya :D
ReplyDeletebang 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
ReplyDeletewaaaah makasih banget....
ReplyDeletebisa dicoba niiih....
:)
Terima kasih, Mad :D
ReplyDeletekalau lewat wordpress bisa gak ?
ReplyDeletetutorial ttg pemasangan templates yg 'agak' susah dong, kak. Ngedesain blog juga asik tuh.
ReplyDeleteTerima kasih
ReplyDelete