Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

17
Tgl. 10 Agustus 2012

Cara Membuat Read More Sejajar Dengan Label Atau Waktu Posting Artikel

Apabila kita menggunakan ‘Jump Link’ untuk artikel yang diposting, maka secara default di bawah artikel tersebut akan ditampilkan tautan ‘...

Baca Selengkapnya
Apabila kita menggunakan ‘Jump Link’ untuk artikel yang diposting, maka secara default di bawah artikel tersebut akan ditampilkan tautan ‘Baca selengkapnya’. Dimana tautan tersebut akan ditampilkan dalam bentuk teks di bagian sisi kiri, sehingga tidak sedikit pengelola blog yang melakukan kustomisasi untuk bagian ini dengan maksud agar tampilan tautan atau tombol ‘Baca selengkapnya’ menjadi tampak lebih menarik.

Nah, terkait dengan kustomisasi tautan ‘Baca selengkapnya’, dalam artikel ‘Tanya Jawab’ ada seorang sahabat yang menanyakan mengenai cara membuat ‘Read more’ agar sejajar dengan tombol share, label artikel, atau waktu posting artikel seperti yang tampak pada gambar di atas. Sehingga menanggapi pertanyaan tersebut, maka berikut ini adalah uraian untuk melakukan kustomisasi pada tautan ‘Baca selengkapnya’ atau ‘Read more’ agar dapat sejajar dengan tombol share, label artikel, ataupun waktu posting artikel.

Untuk memindah tautan ‘Baca selengkapnya’ agar menjadi seperti yang tampak pada gambar di atas, sebenarnya tidaklah rumit. Karena yang perlu dilakukan hanyalah memindah rangkaian kode jump-link yang terdapat dalam template ke dalam area footer artikel. Sehingga untuk mengerjakannya Anda dapat melakukan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan>Expand Template Widget’.

Kedua, cari rangkaian kode jump-link seperti yang tampak pada rangkaian kode di bawah ini, kemudian pindah ke dalam area class='post-footer' yang terletak beberapa baris di bawahnya.
<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link' style='float:right;'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
</b:if>

Sebagai contoh, apabila Anda ingin menempatkan tautan ‘Baca selengkapnya’ sejajar dengan tombol berbagi seperti yang tampak pada gambar di atas, maka rangkaian kode jump-link dapat disipkan pada bagian rangkaian kode berikut ini.
</span> <div class='post-share-buttons goog-inline-block'>
  <b:if cond='data:post.sharePostUrl'>
    <b:include data='post' name='shareButtons'/>
  </b:if>
</div></div>

Nah, di depan </div> yang terakhir tekan tombol enter dan kemudian sisipkan rangkaian kode jump-link sehingga menjadi seperti yang tampak pada rangkaian kode di bawah ini.
</span> <div class='post-share-buttons goog-inline-block'>
  <b:if cond='data:post.sharePostUrl'>
    <b:include data='post' name='shareButtons'/>
  </b:if>
</div>

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link' style='float:right;'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
</b:if>

</div>


Ketiga, simpan template.

Dan selanjutnya agar tampilan tautan ‘Baca selengkapnya’ tampak lebih menarik, maka Anda dapat menambahkan style CSS tertentu pada tautan tersebut atau mengganti kode <data:post.jumpText/> dengan URL gambar tombol ‘Read more’ atau ‘Baca selengkapnya’ sesuai dengan yang Anda suka. Sedangkan untuk mengubah tautan teks ‘Baca selengkapnya’ dengan tautan dalam bentuk gambar, caranya dapat Anda pelajari dengan membuka artikel yang berjudul ‘Membuat Tombol Read More Tanpa Ribet’.

Semoga berguna dan bermanfaat.
Salam.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 17 komentar pada artikel ini ▶
10/08/12 14.25 O

Keren Sobat, wah menarik sekali ini. mau nanya sobat, bagaimana supaya tombol share, label artikel, ataupun waktu posting artikel disenyembunyikan agar lebih menarik lagi seperti tampilan pada blog sobat? dan tombol share, label artikel, ataupun waktu posting artikel akan muncul dibawahnya ketika postingan dibuka ? Trima kasih sobat.

10/08/12 17.04 O

terimakasih sobb.. :D berkat postingan sobat ini akhirnya saya dapat pencerahaan juga :D terimakasih sobat 1000x XD

11/08/12 00.31 O

@Kraeng FranciscoUntuk mengerjakan hal tersebut, Sobat dapat melihat uraiannya dalam artikel yang berjudul Menyembunyikan Elemen Halaman Posting Dari Beranda Blog.

Semoga dapat membantu.

11/08/12 00.33 O

@Agri Ahyar PrasetyaOke... Sama-sama Sob...

13/08/12 08.18 O

Mantap bgt thanks tas smw info,a gan..

mampir sejenak yuk kawand di blog newbie anee :D
jangan lupa tinggalkan coment/like ya kawand :D
salamm bloggerr :D

http://iphand9.blogspot.com/

21/08/12 13.33 O

Makasi boz untuk tutorialnya ...

25/08/12 01.37 O

@Iphand Putra MuhammadOke Sobat. Terimakasih pula atas kunjungan dan komentarnya.

25/08/12 01.38 O

@andikSama-sama Sob... :)

25/11/12 15.41 O

terimakasih sob, salam kenal.
sangat membantu sekali untuk newbie seperti saya.

jangan lupa mampir balik ke http://thesukualam.blogspot.com

25/11/12 20.17 O

@SukualamOke.Sama-sama dan salam kenal balik Sobat. :)

19/12/12 14.37 O

Super sekali....thanks dah share ilmunya

22/12/12 02.13 O

@AdminTerimakasih balik Sobat. Semoga secuil ilmu yang saya sampaikan di sini dapat diambil guna dan manfaatnya.

29/10/13 23.52 O

artikel ny sangat membantu
ijin bertanya, bagaimana cara membuat script code utk di tampilkan di postingan, contoh ny pada artikel anda yg bisa menampilkan script ny
trima kasih :)

01/11/13 20.02 O

blognya keren, saya dari dulu gak bisa2 buat permalink T_T

06/11/13 12.53 O

@Fajar BudiantoroUntuk keperluan tersebut, yang saya lakukan adalah dengan memakai salah satu plug-ins yang terdapat pada Windows Live Writer.

06/11/13 13.04 O

@Langit AnisaTerimakasih atas pujiannya Sob. Akan tetapi sebenarnya juga gak terlalu keren kok, karena di luar sana banyak sekali blog yang lebih keren dibandingkan dengan ini. :)

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog