Membuat 'Read More' Pada Postingan Blog

Awal mula saya membuat tutorial ini karena saya merasa blog saya ini 'kepanjangan', belum lagi dengan banyaknya foto-foto yang ikut saya posting membuat loading awal blog ini jadi terasa semakin lambat, khususnya bagi saya yang fakir bandwidth ini.
Sebenarnya gampang saja sih kalau tidak mau panjang-panjang, atur saja di menu pengaturan lalu kurangi jumlah postingan yang ingin ditampilkan di laman muka. Beres kan. Mungkin itu salah satu cara mengatasinya, tapi kali ini saya akan coba berikan alternatif lain untuk mengatasi masalah 'kepanjangan' tadi dengan fungsi read more(baca selengkapnya) sehingga kita tidak perlu mengurangi jumlah postingan yang ingin ditampilkan di laman utama.

Oke langsung saja ikuti petunjuk di bawah ini:

• sign in ke blogger Anda.

• masuk ke menu Pengaturan lalu klik Format.

• geser layar hingga paling bawah, ada text area kosong disamping tulisan Templat Entri, isi area kosong  tersebut dengan kode di bawah ini : 

          <span class="fullpost">

          </span>

• klik tombol Simpan Setelan. 

Langkah persiapan ini dimaksudkan agar saat posting baru kita tidak perlu lagi menuliskan kode itu lagi karena akan secara default muncul diawal saat kita akan menulis postingan.

Selanjutnya,

• klik tab Tata Letak  

• klik tab Edit HTML.

• klik tulisan Download Template Lengkap, langkah ini dimaksudkan agar kita masih memiliki back up kode template blog kita jika sewaktu-waktu terjadi kesalahan sehingga kita bisa mengembalikannya seperti semula.

• beri tanda contreng pada kotak Expand Template Widget.

• cari kode <data:post.body/> atau  <p><data:post.body/></p>, biar lebih gampang tekan saja ctrl+f lalu ketikkan kode tadi.

• hapus kode diatas, ganti dengan kode di bawah ini :

<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>        

• kata 'Selengkapnya' pada kode di atas bisa diganti dengan 'read more' atau apalah terserah Anda

• klik tombol Pratinjau, kalau dirasa sudah pas posisinya maka klik tombol Simpan Template.

Oke semua setting sudah siap, sekarang tinggal bagaimana cara postingnya :

• klik tab Posting lalu klik tab Entri Baru.

• klik tab Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi.

• tuliskan artikel yang ingin ditampilkan pada blog sebelum kode

<span class="fullpost">

• tulis sisa artikel (yang ingin ditampilkan setelah kita klik kata read more) dibawah kode di atas dan sebelum kode :

</span>

• klik tab Pratinjau, kalau sudah sesuai yang diinginkan klik tombol Terbitkan Entri.

• lihat blog Anda,lalu lihat hasilnya. 

Good luck, semoga bermanfaat:)

Tag Cloud Cumulus

Saat iseng browsing, beberapa waktu yang lalu saya melihat salah satu blog dengan bentuk label yang unik. Kalau biasanya dalam bentuk list, blog yang saya lihat ini labelnya seperti melayang-layang. Jika kursor kita arahkan ke label tersebut maka label itu akan berputar. Wew, saya cukup terkesan saat pertama kali melihatnya.

Setelah browsing Mbah Google akhirnya saya tahu kalau itu namanya tag cloud. Hehe. Setelah dapat tutorialnya, tanpa pikir panjang langsung saja saya praktekkan.
Cara membuatnya cukup mudah, tinggal ikuti cara dibawah ini :

1. Sign in ke blogspot

2. Klik tata letak

3. Klik tambah gadget lalu klik label

4. Simpan dulu label tersebut

5. Klik edit HTML

6. Beri centang pada kotak expand template widget

7. Cari kode di bawah ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>

Untuk memudahkan, tekan ctrl+f pada keyboard lalu copy kode dibawah kemudian paste di kotak dialog.

8. Setelah ketemu, letakkan kode dibawah ini dibawah kode diatas tadi.

<b:widget id='Label1' locked='false' title='Labels' type='Label'><b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

9. Klik preview, jika sudah berhasil baru disimpan. Jika belum berhasil maka teliti lagi langkah-langkah yang kamu lakukan diatas.

10. Selamat mencoba, semoga bermanfaat :)

nb :

- Jika ingin merubah ukuran tag cloud maka cari kode dibawah ini lalu ganti ukurannya dengan mengganti angka 240 dan 300 sesuai keinginan kamu.

var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);

- Jika ingin merubah kecepatan tag maka ganti angka 100 pada kode dibawah ini sesuai keinginan kamu. Semakin besar angkanya maka semakin cepat.

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);