Membuat "Baca Selengkapnya" di Blog

[TUTORIAL] Cara Membuat "Baca Selengkapnya" di Blog


Siapa sih, yang gatau tentag "Baca Selengkapnya" di bagian posting blog. biasanya berada di pojok bawah, dibawah informasi postingan. Nah, "Baca Selengkapnya" atau biasa disebut "Read More" ini buat apa sih? Jawabannya cuman buat menyingkat postingan kita yang akan ditampilkan dalam layar blog awal kita. Masih Penasaran sama yang namanya Baca Selengkapnya? nih admin kasih penampakannya.
Baca selengkapnya
Ikon yang dikotaki biru tersebut merupakan Shortcut atau link untuk menuju posting tersebut. jadi gausah panjang panjang informasi yang di awal. Pada waktu awal membuat blog, Blogger sudah menyediakan Fitur Baca Selengkapnya ini, tapi kita memunculkan nya secara manual, nah Posting kali ini akan bahas keduanya, dari Otomatis Hingga Manual. Selain untuk Merapikan Postingan di blog, Fitur ini juga untuk memperindah tampilan blog agar jadi lebih simpel dan enak dipandang. langsung saja yang pertama admin jelaskan cara membuat Baca Selengkapnya atau Read More secara Manual terlebih dahulu.

Cara Manual Menggunakan Jump Break Pada Posting Blog

Cara ini merupakan cara paling simpel dan paling mudah. cara ini sudah banyak digunakan karena kesimpelan tersebut. langsung deh liat gambar ini.
Jump Break
Fitur Jump Break Terletak pada Menubar di bawah Judul Posting saat kita Mengetik postingan baru di Blogger. Ikon Jump Break adalah Ikon yang dikotaki pada gambar diatas. Tapi cara ini jika kita lupa mengklik ikon tersebut, maka Baca Selengkapnya akan tidak ada. maka kita harus klik fitur Jump Break tersebut setiap mau posting Blog.
Hasil dari Jump Break
 Selain cara Manual menggunakan Jump Break, kita bisa menggunakan cara otomatis pada posting blog.

Cara Otomatis yaitu dengan edit HTML

Cara otomatis selanjutnya yaitu dengan edit HTML pada Blog. Sebelumnya admin ingin kasih tau, jika Template kita sudah terdapat fitur Auto Read More, maka tidak Perlu Menggunakan cara ini.
Cara ini adalah cara yang agak sulit jika kita tidak telaten. langsung nih admin kasih caranya.

LANGKAH LANGKAH :
  • Login Blogger dan masuk ke tampilan Ikhtisar Blog
Tampilan Ikhtisar Blog
  • Pilih Menu Template di Bagian Kiri  dan klik edit HTML
Klik Edit HTML

  • Langkah selanjutnya cari kode </head> di tampilan HTML. Lebih mudah nya bisa menggunakan Ctrl + F agar lebih mudah mencari nya. Ketik </head> dan cari
Contoh </head>
  • Jika </head> sudah ketemu, maka langkah selanjutnya menyalin kode berikut tepat dibawah </head>.
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>
Paste tepat dibawahnya

  •  Kemudian cari kode <data:post.body/> atau <p><data:post.body/><p> . Jika menemukan lebih dari satu kode yang sama, pilihlah kode pertama. cara nya sama dengan nomor diatas menggunakan Ctrl + F.
  • Setelah ketemu kode tersebut, kita hanya mengganti kode <data:post.body/> dengan kode dibawah ini.
<b:if cond='data:blog.pageType != &quot;item&quot;'><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src="xxxx"></img></a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Ganti kode tersebut dengan kode diatas
  •  Keterangan Kode :
 Pada kode yang di copy atau di salin, kita bisa mengedit kata "xxxx" dengan url foto atau kata ReadMore di situ. Jika kata, dalam blog nanti, Readmore kita hanya berupa teks tanpa gambar.

  • Terakhir Save template 
Nah sekian informasi dari saya tentang membuat Readmore Otomatis maupun Manual Semoga Bermanfaat bagi kita semua. Keep Posting ya

Comments

Post a Comment

Popular posts from this blog

7 Hal Seru Yang Pas Dilakukan Saat Ngabuburit

Image
Bulan Ramadhan memang bulan yang paling ditunggu tunggu oleh semua masyarakat muslim di Dunia. Mulai dari ujung Kutub Utara sampai Kutub Selatan yang beragama Muslim pasti menunggu akan datangnya bulan penuh barokah ini. Kenapa kok ditunggu tunggu? karena secara pribadi, Bulan ini punya keistimewaan tersendiri. Dari kita menahan lapar, haus dan emosi. Kita juga dituntut sabar dan tidak berlebihan saat berbuka puasa. Apalagi kalau banyak halangan dan rintangan saat kita berpuasa. Seperti Warteg warteg pinggir jalan yang tetep buka, sampai sampai temen temen kita sendiri yang bikin kita mengurangi pahala puasa.  Baca Juga : Cara Menampilkan "Home" di Blog Aktifitas pun banyak dikurangi saat berpuasa. Tapi seiring berjalannya waktu, banyak orang orang yang mengatasi kebosenan saat puasa ini dengan aktifitas aktifitas yang menarik dan seru. jujur sih, dangan makan waktu sahur, badan jadi lemes semua, eh tapi jangan lebay gitu. Puasa bukan halangan untuk males malesan...
Lanjutkan Membaca »

Cara Mengganti Header Blog dengan Logo

Image
Mengganti Header Blog dengan Logo Header? siapa yang tidak asing dengan header ini? dan bosan dengan header yang "itu - itu" aja? segera ganti header sobat dengan sebuah logo yang menarik. Sobat belum tau cara mengganti header Blog dengan logo?. Saya akan kasih tau sampai ke detail detailnya cara mengganti Header blog dengan logo. Namun beberapa template blog sudah terdapat header yang otomatis mengganti header sesuai judul Blog. Jika Template sobat tidak mengganti headernya. simak penjelasan di bawah ini. Tapi, pertama, sobat ada yang bertanya Kenapa sih harus diganti? Apa Efeknya? Bergunakah? Nah, sebenarnya mengganti header dengan logo ini bukan suatu kewajiban, namun sebuah keperluan yang membuat blog tampil semakin Rapi dan Bagus. Efeknya sih cuma logo di pojok Title Bar ganti menjadi logo sobat. selain ganti, blog akan tampil menarik dan pastinya bikin visitor tidak bosan dengan blog sobat. Pasti lah berguna, karena tidak ada suatu hal yang tidak berg...
Lanjutkan Membaca »