Cara Membuat Spoiler

Lama juga saya tidak membuat postingan di blog ini, gatal juga rasanya tangan pengen mencet � mencet keyboard. Tutorial kali ini, saya akan membahas tentang membuat spoiler pada blog.

 

Spoiler sendiri fungsinya adalah untuk memperkecil postingan, kode script atau tulisan agar tidak makan tempat. Sebenarnya sobat juga bisa menggunakan menu dengan fungsi scroll atau bisa juga dengan menggunakan text area untuk menghemat tempat dalam penulisan kode script atau gambar.

 

Spoiler ini bisa sobat letakkan di postingan, mungkin sobat gunakan untuk meletakkan kode script yang panjang. Atau bisa juga meletakkan di sidebar, header atau footer blog.

 

Contoh Spoiler:

Letakkan kode script, HTML dan teks anda disini

 

 

Untuk membuat spoiler, silahkan sobat copy kode script nya dibawah ini :

 

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan kode script, HTML dan teks anda disini

 

<br>
</div>
</div>
</div>

 

Keterangan :

1. Untuk tulisan Open dan Close bisa sobat ganti sesuai keinginan.
2. Width : 55px untuk lebar spoiler.
3. Font-size: 11px untuk besar tulisan pada kotak spoiler.
4. Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan sobat.

Selamat mencoba !

Blogger Support Read More

Saya tidak tau pasti kapan blogger update fasilitas read more ini, seperti yang ada di wordpress, sekarang kita tidak perlu lagi menggunakan read more manual yang pernah saya bahas dulu. Jadi lupakan saja read more yang dulu pernah saya jelaskan di blog ini.

 

Karena fungsi read more dari blogger ini lebih praktis, sobat tidak perlu lagi meletakkan kode <span class=�fullpost�> setelah postingan pertama dan tidak pula harus menutupnya dengan </span> di akhir postingan.

 

Sebenarnya kode pemisah postingan yang pertama akan muncul dan yang akan muncul secara keseluruhan ini sangat simple, hanya kode <!--more-->, jadi tidak masalah jika sobat menulis menggunakan windows live writter.

Sobat masih bisa menggunakan read more ini dengan menambahkan kode <!--more--> diantara postingan yang akan tampil pertama. Oke kita tinggalkan windows live writter, sekarang tuju blogger.

 

1. Buka blogger dengan ID sobat. 

    

2. Pada halaman dashboard, klik Setting �> Pilih Global Setting, klik radio button Update Edittor. 

    

3. Kemudian tuju halaman postingan, dan perhatikan gambar yang saya lingkari dengan warna merah di bawah ini.

    

   

    

   Nah tombol tersebut adalah tombol pemisah postingan yang biasa kita sebut dengan read more. Silahkan di coba menulis artikel dan pisahkan dengan kode tersebut.

    

4. Untuk setting kata read more silahkan sobat tuju Elemen Halaman.

    

5. Kemudian klik Edit pada Posting Blog, seperti gambar di bawah ini

    

   

    

6. Pada halaman Edit tersebut, perhatikan Post Page Link Text, silahkan sobat ubah sesuai keinginan sobat, bisa dengan �read more� atau �baca selengkapnya�.

    

   

    

7. Kemudian Simpan.

Selamat menulis menggunakan read more baru dari blogger.

Widget Recent Posts dari Bloggertricks.com

Lagi � lagi tentang recent posts, semoga sobat tidak bosan dengan postingan saya. Sama dengan postingan yang kemarin, bedanya kalo postingan saya terdahulu, saya menulis tentang membuat recent posts dari fasilitas  yang ada di blogger, maka kali ini yang akan saya bahas adalah membuat recent posts yang di buat oleh Kranthi yang empunya bloggertricks.com.

 

Widget ini agak berbeda dari recent posts part 1, bedanya disini kita bisa atur lebar widget, warna border, ukuran font, tinggi dan lebar thumbnails, dll. Tapi kelemahan widget ini adalah tidak adanya cuplikan isi post atau preview dari postingan kita. Silahkan pilih sobat mau menggunkan yang mana.

 

Mau coba yang ini ? ayo kita lanjutkan. Jika dalam tulisan / postingan, sobat tidak pernah memasukkan gambar, maka gambar akan menjadi kotak hitam dan akan terlihat kurang bagus, jadi sebaiknya jika sobat menulis artikel, masukkanlah minimal 1 gambar agar dalam widget recent posts ini muncul gambar / thumbnails dari postingan kita. Lanjut, silahkan ikuti langkah � langkahnya berikut ini :

 

1. Seperti biasa, loginlah ke blogger terlebih dahulu.

    

2. Klik Tata Letak.

    

3. Klik Elemen Halaman.

    

4. Kemudian klik Tambah Gadget.

    

5. Pilih yang HTML / Javascript, lalu masukkan kode scriptnya berikut ini :

    

   <script language="JavaScript">
   imgr = new Array();
   imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
   imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

   showRandomImg = true;
   boxwidth = 298;
   cellspacing = 8;
   borderColor = "#FFFFFF";
   bgTD = "#000000";
   thumbwidth = 40;
   thumbheight = 40;
   fntsize = 12;
   acolor = "#666";
   aBold = true;
   icon = " ";
   text = "comments";
   showPostDate = false;
   summaryPost = 40;
   summaryFontsize = 10;
   summaryColor = "#666";
   icon2 = " ";
   numposts = 5;
   home_page = "http://kutu-blogspot.blogspot.com/";
   </script>
   <script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

    

6. Yang harus di ganti / edit:

    

      boxwidth = 298  -�> lebar kotak widget   
      cellspacing = 8  -�> ruang di antara sel   
      borderColor = "#FFFFFF"  -�> warna border / garis pada kotak
      thumbwidth = 40  --> lebar thumbnails
      thumbheight = 40  --> tinggi thumbnails 
      fntsize = 12  --> ukuran font (huruf)   
      acolor = "#666"  --> warna Judul   
      aBold = true  --> tebal huruf pada judul post (true or false)   
      numposts = 5  --> jumlah judul post yang ingin ditampilkan
     home_page = http://kutu-blogspot.blogspot.com/ -�> ganti dengan alamat url blog sobat.

    

   Untuk kode warna � warna, bisa lihat disini.

    

7. Kemudian Simpan.

Selamat berkreasi !!

Memasang Total Komentar dan Total Posts

Untuk memudahkan kita melihat jumlah makhluk yang sudah berkomentar di blog kita, sobat bisa pasang script untuk total komentar di blog sobat, script ini termasuk yang banyak di gunakan oleh blogger, selain script total post / artikel yang ada di blog kita.

 

Kalau total posts sendiri sebenarnya sobat bisa melihat di halaman dashboard blogger, namun jika sobat tertarik untuk memasangnya sekedar untuk mempelihatkan jumlah postingan yang sudah sobat buat, ya monggo disini juga ada scriptnya. Script total komentar ini ada bagusnya sobat letakkan dibawah recent comments, itu pun jika sobat telah memasangnya.

 

Dan begitupun untuk total posts sebaiknya dipasang dibawah recent posts, karena selain terlihat bagus juga agar tidak berantakkan. Coba saja jika total komentar sobat letakkan di atas header blog, kan lucu atuh, masa total komentar ada di header..pamer nih blog saya ada 10.000 komentar, huh cape� dehh.

 

Langsung praktek, berikut kode script total komentar dan total posts nya :

 

  Kode script untuk total komentar :

 

<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t +'</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

 

  Kode script untuk total posts :

 

<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
+ '</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

 

Yang harus diganti hanya tulisan dengan warna merah saja, ganti dengan alamat blog sobat.  Untuk meletakkannya sudah tau kan ? bagi yang masih awam, silahkan ikuti langkah � langkahnya berikut ini :

 

1. Login ke blogger dengan ID sobat.

    

2. Klik Tata Letak.

    

3. Klik Elemen Halaman.

    

4. kemudian klik Tambah Gadget.

    

5. Pilih yang HTML / Javascript, kemudian masukkan salah satu kode script diatas.

    

6. Setelah itu Simpan.

    

Mudah kan, silahkan di coba aja biar tau.

Memasang Widget Recent Post Dari Blogger

Postingan terbaru atau biasa disebut recent posts merupakan informasi singkat yang menampilkan judul postingan terakhir / terbaru secara berurutan untuk memudahkan pengunjung melihat postingan terbaru kita.

 

Pada postingan saya terdahulu, sudah pernah saya bahas tentang membuat recent post dengan menggunakan feeds url kita. kalau cara seperti itu sangat mudah , namun hasil yang di dapat kurang sempurna karena tidak di tampilkannya gambar / thumbnails dan comment count (total komentar) dari postingan kita.

 

Sebenarnya jika sobat jeli, widget recent posts ini ada didalam fasilitas yang disediakan oleh blogger. Tidak usah panjang lebar, langsung saja kita menuju lokasi.

 

1. Seperti biasa sobat login dahulu ke blogger.

    

2. Kemudian pada Elemen Halaman klik Tambah Gadget.

    

3. Pilih Featured.

    

   

    

4. Lalu pilih Recent Posts Advanced.

    

   

    

5. Pada halaman pengaturan, silahkan sobat ganti Blog Url dengan alamat blog sobat.

    

   

    

   Untuk Height merupakan tinggi dari widget, Number of posts to display adalah jumlah postingan yang akan ditampilkan, Summary length adalah panjang karakter isi postingan yang akan ditampilkan. Untuk yang lain � lain sobat contreng saja semua.

    

6. Dibawahnya ada preview recent posts untuk memudahkan sobat melihat seperti apa hasilnya nanti.

    

   

    

7. Setelah itu jangan lupa Simpan.

Silahkan lihat hasilnya, mudah kan.