Showing posts with label Read More. Show all posts

Read More Otomatis pada Template Blogger

Membuat Otomatis Read More - Auto Readmore Button.
Seperti janji minggu lalu ya sob,Pelajaran Blog kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Beberapa waktu lalu telah diposting cara membuat read more/baca selengkapnya.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.
Untuk demonya sobat bisa liat di SINI.

Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D

Langkah Cara Membuat Read More Otomatis tanpa jQuery pada Blogger dengan Bahasa Javascript


Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.


Cara membuat readmore otomatis.
(1)


membuat read more baca selengkapnya otomatis.
(2)


otomatis read more.
(3)


Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>


Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>


Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>


Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya Membuat Read More Otomatis / Auto ReadMore di Blogger Selesai.

Membuat Read more../Selengkapnya../Baca selanjutnya..

Sebenarnya sebelum posting tentang Cara membuat read more../selengkapnya..ini dipublikasikan,saya sudah mosting dengan artikel yang sama,tapi..
Ada keluhan dari temen saya Cemy,di http://www.cemyanca.com/ ,bahwa Cara membuat read more../selengkapnya.. tidak berjalan dengan baik.Setelah aku lihat lagi,O iya..ternyata kode itu akan berfungsi untuk template Blogger yang lama..#$@#$ !
Tapi,setelah muter2 ternyata nemu artikel yang sama dan di jamin manjur !
Sebenarnya,artikel ini sudah lama di publikasikan oleh blogger senior,yang telah malang melintang di dunia bokep,..
Eits !!! maksudnya dunia Blogger
Ternyata,untuk membuat read more../selengkapnya.. sangat sederhana banget !!!
  • Pertama,anda hanya disuruh pergi ke Dashboard,lalu pilih Tata Letak,selanjutnya pilih Tab Edit HTML.
  • Centang bagian check box tulisan Expand Template Windget.
Cari kode <data:post.body/> ,untuk mempermudah pencarian,tekan CTRL+F pada keybord dan tuliskan kode tersebut,nanti akan terdeteksi secara otomatis (terdeteksi? secara.. #$@)
Jika anda sudah menemukan kode <data:post.body/>,hapus kode tersebut, dan ganti dengan kode berikut :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Jika sudah anda ganti,
Simpan Template,Eit's blom selesai loh !
Langkah selanjutnya,pergi ke
Dashboard,lalu pilih Pengaturan,selanjutnya pilih Format.
Lalu tuju tulisan
Template Posting,lau tuliskan kode berikut :

<span class="fullpost">
</span>


Setelah itu Simpan.Apakah dah Selesai ? Ya.
Kode tersebut sebenarnya hanya untuk mempermudah penulisan saat posting,maksudnya ?
Saat anda hendak posting baru,pada kolom Edit HTML,bukan di Tulis (saat posting ada 2 pilihan halaman kan?)

Kode tersebut,akan keluar secara Otomatis.
Anda tinggal memasukkan artikel mana yang ingin di tampilkan pada haman depan,dan mana halaman yang untuk selanjutnya.

Untuk tata caranya lihat ilustrasi di bawah ini :

Saya membuat posting baru,dan saya menulisnya di kolom Edit HTML bukan di Tulis / Compose.
Saat membukanya ada tulisan :

<span class="fullpost">
</span>
Saya,akan menuiskan sebagai berikut :

Saya orang paling ganteng di Dunia ini
<span class="fullpost">Dan saya juga orang yang terkenal.
</span>

Maka,setelah saya publikasikan akan menjadi seperti ini :

Saya orang paling ganteng di Dunia ini
Read More../Selengkapnya..