Belajar Ngeblog _--_ Halo sobat blogger pemula, di jumpa kita kali ini saya akan membagikan suatu tutorial dasar blog. Seperti yang saya katakan di setiap postingan sebelumnya bahwa blog yang saya buat ini benar - benar blog untuk blogger pemula jadi buat sobat yang ingin belajar ngeblog di sini anda bisa memahami, bertukar pikiran, saling berbagi sesama blogger pemula. Nah untuk tutorial kali ini yaitu Cara Memasang Auto Read more pada Blog. Ini adalah salah satu pembelajaran di mana dalam membangun sebuah blog dengan harapan blog kita tampil dengan sempurna dan meningkatkan traffig pengunjungnya dengan kata lain yaitu membuat blog kita lebih ramah SEO.
Ayo sobat kita simak bersama dan langsung kita ke inti dari pembelajaran berikut.
Langkah pertama adalah;
- LOGIN ke blog. (sudah pasti)
- Pilih Blog yang ingin anda edit.
- Klik TEMPLATE pada menu vertical di bagian kiri dashboard.
- Klik CADANGKAN atau EXPAND adalah langkah terbaik.
- UNDUH TEMPLATE LENGKAP blog anda untuk menghindari kesalahan pengeditan pada Kode HTML templat.
- Setelah selesai mengunduh, Klik close pada pop up expand.
- Klik EDIT TEMPLATE untuk mengedit html nya.
- Lalu cari kode </head> atau gunakan Ctrl+F dan copy paste kode yang dicari.
- Setelah ketemu kode </head>, copy kode di bawah ini dan pastekan tepat di atas kode </head>.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 300;
summary_img = 250;
img_thumb_height = 110;
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; pada kode di atas yang dicetak tebal berwarna merah adalah jumlah karakter bergambar dan tidak bergambar, sedangkan yang berwarna biru adalah lebar dan tingginya tampilan gambar pada halaman utama. Anda bisa mengubah kode di atas sesuai yang di inginkan.
Setelah tahap pertama selesai, kita lanjutkan ke tahap berikutnya;
- Cari kode seperti ini <data:post.body/> atau gunakan Ctrl+F seperti cara yang pertama.
- Supaya kode HTML semuanya terbuka, tekan Ctrl+A -->Ctrl+C -->Del -->Ctrl+V.
- Biasanya ada tiga kode seperti ini <data:post.body/>.
- Copy kode di bawah ini dan ganti kode ini <data:post.body/> satu per satu mulai dari bawah.
- Klik PREVIEW atau PRATINJAU.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><b>Baca Selengkapnya</b> → <a expr:href='data:post.url'><data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Keterangan; Setiap mengganti kode satu persatu, lakukan pratinjau untuk mengetahui apakah kode scrip di atas berjalan dengan normal.
- Klik SAVE dan selesai.
Setelah sobat berhasil melakukan langkah di atas berarti penjelasan ini mudah anda pahami. Ingat..ilmu yang anda dapat dari blog ini jangan lupa untuk di bagikan kepada blogger - blogger pemula lainnya.
Dengan mengikuti pembelajaran kali ini yaitu tentang Cara Memasang Auto Read More pada Blog, harapan saya semoga bermanfaat bagi anda yang membutuhkannya. Salam