Tuesday, 16 February 2016

2 Tips Membuat Read More di Blog

Sudah banyak sekali panduan cara membuat  Read More, Kali ini saya akan memberika 2 tips membuat read more di blog. Di dunia blogger mungkin sudah banyak yang sudah paham dan mengerti, tetapi kalau ada yang belum tau tutorialnya sillahkan baca hingga selesay.Dalam pembuatan read more ada 2 cara. Pertama read more yang sudah disediakan blogger, dan yang kedua yaitu read more buatan, yang melalui edit HTML. Sekarang saya sebagi blogger pemula akan memberikan 2 tips membuat read more di blog.

1. Read More Bawaan Blogger.

Hal pertama seperti biyasanya silahkan anda masuk ke akau blogger anda sendri, Langkah selanjutnya dalam membuat read more di blog yaitu silahkan anda menuju ke pos, lalau silahkan anda pilh pos mana saja yang akan di buat read more. Kalau anda sudah memilih pos yang akan di edit silahkan klik edit yang berada di bawah judul pos, selanjutnya anda akan di tampilkan pada pengeditan pos. Langkah selanjutnya silahkan cari yang namanya Insert Jump Break, yang berada di menu edit pos. Kalau anda susah menukannya silahkan lihat gambar dibawah ini
 
Kalau anda sudah menemukannya, sekarang bagi mana cara penggunaannya?. Pertama silahkan anda ke bawah atau ke tulisan terakir artikel. Selanjutnya anda blok dari bawah sampi mau di sisakan beberapa paragraf saja, kemudian anda klik ikon yang sudah di tunjukan gambar panah di atas. dan lihat hasilnya sepeti gambar yang ke dua. Selanjutnya publiskan dan silahkan anda lihat di blog anda sendri hasilnya.

2. Read More Buatan.

Dalam Pembuatan read more yang satu ini mungkin sedikit rumit, tetapi hasilnya sangat lebih bagus dari pada yang barusan sudah di jelaskan. Janga terburu-buru dalam mengerjakan hal seperti ini karena ini memainkan HTML atau bisa di sebut javascript. Hal ini begitu sangat memusingkan bagi belogger pemula kaya saya. Tapi tenang saja saya akan memberikan tutorialnya dengan jelas. dalam membuat read more di blog.

Cara Pembuatnya saya akan jelaskan sekarang. silahkan baca da peraktekan langsung ok kawan !.

1.Hal pertama yang anda lakukan yaitu silahkan anda masuk ke akun blogger anda sendri.
2. Sesudah masuk, silahkan anda klik template pada menu blogger.
3. Sesudah di klik, kemudian klik Edit HTML.
5. Selanjutnya anda akan di tampilkan pada tulisan HTML, Jangn mengeluh di tengah jalan. Lanjut !.
6. Cari kode </head> Misalnya anda susah mencarinya atau pusing silahkan anda tekan CTRL+F kemudian pastekan kode yang di cari di kolom yang sudah di sediakan.
7. Langkah selanjutnya silahkan anda letakan kode di bawah ini pas di atas kode </head>. Angka yang berwaran biru adalah ukurun untuk gambar postingan silahkan anda ganti sesuka anda.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Keterangan yang berwarna merah
1. Summary_noimg : Banyaknya huruf jika tidak ada gambar.
2. Summary_img : Banyaknya huruf jiga ada gambar.
3. Img_thumb_height : Ini tingginya ukuran gambar.
4. Img_thumb_width : Ini adalah lebarnya ukuran gambar.

Langkah selanjutnya silahkan anda cari kode : <data:post.body/>. Kalau anda seblumnya sudah memasang skrip lain silahkan hapus dulu. Di dalam mencari kode <data:post.body/> ada dua di dalamnya. Dalam pemasnagn kode, silahkan anda ganti yang kedua. Selanjutnya ganti kode <data:post.body/> yang ke dua dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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:left'> <a expr:href='data:post.url'><b>Readmore</b> &#8594; <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Keteranagn berwaran biru
Tulisan Read More bisa anda rubah sesui yang anda inginkan.
Langkah selanjtnya silahkan anda simpan tempalte, dan lalu lihat hasilnya.

Semoga bermanfaat bagi anda yang sudah membaca artikel tentang 2 tips membuat read more di blog. Terima kasih segabai admin di blog ini.