TUTORIAL


Cara membuat Read More otomatis di Blogspotdengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahasmengenai cara membuat read more di blogspot atau blogger. Kenapa cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot.

Bagaimana Cara membuat Read More otomatis di blogspot?

Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah  ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.

Langkah-langkah cara membuat Read More Otomatis di Blogspot

  • Login ke Blog anda
  • Buka halaman design > Edit HTML > centang Expand template widget
  • Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
  • Paste 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'/>
  • Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.
  • Jika sudah ketemu silahkan anda ganti kode tersebut 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="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  • Finish simpan template dan lihat hasilnya
Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. Yang bisa dirubah adalah berwarna merah saja dan berikut ini adalah keterangannya :
  1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
  2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
  3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
  4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
  5. Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gifsilahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya ">> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.
Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.
CARA BUAT LINK DALAM SATU HALAMAN



S
ebuah link biasanya di gunakan untuk mengarahkan alamat ke halaman lain atau ke postingan lain. Bagaimana jika kita ingin link tersebut mengarah pada satu halaman atau satu postingan,disini kita akan coba membahasnya.

Link dalam satu halaman ini biasanya disebut dengan anchor link. Kita bisa mengarahkan link tersebut ke atas,ke tengah atau ke bawah. Biasanya digunakan untuk postingan yang panjang dengan sub-sub halaman atau menggunakan beberapa bab.

Sesuai dengan namanya (Anchor link) untuk membuat link ini kita butuh yang namanya anchor name dan juga link name. Untuk lebih jelasnya mari kita sama-sama mencoba.

  • Pertama kita buat dulu anchor name:

    <A NAME="BAB 1"> BAB 1 </A>

Pada anchor name inilah nantinya link kita akan mengarah,tepatnya satu baris di bawah tempat kita meletakkannya. Sebagai contoh anchor name ini akan saya letakkan tepat dibawah judul postingan ini.
Sebagai catatan untuk tulisan BAB 1 yang berwarna merah boleh diganti dengan tulisan apa saja,sedang BAB 1 yang berwarna biru boleh dihilangkan.

  • Kedua yang harus kita buat adalah link name:

    <a href="#BAB 1"> kembali ke atas</a>

Link name ini kita gunakan untuk mengarahkan di mana anchor name tadi diletakkan,dan sebagai contoh link name ini akan saya letakkan di bawah postingan.

Catatan lagiii...: Untuk tulisan BAB 1 pada link name harus sama dengan anchor name.Untuk tulisan kembali ke atas boleh dirubah dengan kata apa saja,asal bukan kata-kata yang jorok sengihnampakgigi.
Misal: Kembali ke atas, ketengah atau bawah karena fungsinya untuk keterangan saja. Untuk melihat hasilnya silahkan klik Kembali ke atas.


Kali ini saya saya akan menulis mengenai tips blogger,cara membuat artikel terkait atau related post di blog.Artikel ini saya tujukan untuk berbagi info dan ilmu bagaimana membuat blog yang bagus meskipun blog nya gratisan,seperti punya saya ini.

Selain itu,saya membuat artikel ini agar saya tidak lupa dalam membuat artikel terkait atau related post di blog karena saya termasuk orang yang pelupa maka saya akan menuliskannya di blog ini.

Saya akan memberikan dulu screenshot dari yang saya maksud dengan artikel terkait,berikut gambarnya :


Seperti itulah yang dimaksud dengan artikel terkait atau related post.Untuk membuat artikel terkait seperti itu,silahkan masuk dulu ke Rancangan -  Edit HTML - Expand template widget.Kemudian,gunaan CTRL+F untuk memudahkan pencarian,cari kode dibawah ini :

<data:post.body/></b:if>

atau bila tidak ada,cari kode ini :

<data:post.body/>
Bila telah ditemukan,copy dan paste kode ini dibawah kode tadi,yang<data:post.body/></b:if>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
Ingat,simpan kode ini dibawah kode <data:post.body/></b:if>.

Tulisan yang saya warnai biru bisa anda ganti menjadi Artikel terkait atau dibiarkan juga tidak apa-apa.Setelah itu cari kode ]]></b:skin>,dan copy kode ini :

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
Lalu paste kode tersebut di atas kode ]]></b:skin>.Selesai dan jangan lupa save template,kemudian lihat dan cek,apakah artikel terkait/related post telah terpasang di blog anda.Selamat mencoba,salam blogger.
read more
Blogspot telah mengluarkan fitur read more atau yang di sebut dengan jump break. Sebelum dikeluarkannya fungsi read more ini yang dulunya kita harus dipusingkan dengan memasang script pada kode template. Maka sekarang akan lebih mudah dengan diluncurkannya read more fitur baru ini. Mungkin diantara sobat yang baru menggunakan blogger masih ada yang belum tahu bagaimana cara membuat read more atau jump break milik blogger tersebut, bisa ikuti cara di bawah ini:

Pada posisi compose arahkan mouse dan klik pada artikel yang ingin sobat penggal menggunakan read more. Kemudian arahkan mouse sobat ke arah pojok ( lihat gambar di bawah ) dan klik pada jump break, maka artikel sobat akan terpenggal dengan sendirinya.



Cara di atas tersebut jika sobat menggunakannya pada posisi compose. Jika sobat menggunakanya pada posisi edit HTML maka cukup tambahkan kode <!-- more -->di antara artikel yang ingin sobat penggal ( lihat gambar di bawah ).



Jka sobat ingin mengganti kata read more misalnya menjadi baca selengkapnya bisa edit pada bagian posting blog. Masuk ke tata letak kemudian klik edit pada posting blog maka akan muncul gambar seperti di bawah ini. Sobat bisa hapus dan ganti dengan kata yang sobat inginkan.




Untuk sobat yang menggunakan fitur blogger lama caranyapun juga tidak jauh berbeda, cuma sebelumnya blog sobat harus diedit terlebih dahulu. Caranya masuk ke pengaturan kemudian pilih dasar. Lihat gambar pada bagian bawah yang mirip di bawah ini.

Pilih editor entri : Editor yang di perbaharui.
Kemudian klik simpan.












    Tidak ada komentar:

    Posting Komentar

    Langganan: Postingan (Atom)