Menambahkan Recent Posts Dan Recent Comments Dengan Javascript

1. Dari halaman Dashboard blog kamu pilih Tata Letak (Layout).
2. Setelah masuk ke Elemen Halaman, klik Tambah Gadget.
3. Setelah itu pilih HTML/JavaScript untuk ditambahkan, seperti nampak pada gambar berikut:

4. Kemudian masukkan script berikut dan ubah NamaBlogKamu dengan nama blog kamu sendiri:

<script style="text/javascript" src="http://andreblog.googlecode.com/files/rc-posts.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://NamaBlogKamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Keterangan variabel:

• numposts = 10; artinya 10 posting yang ditampilkan (maksimal 25 posting. Jika ingin menampilkan lebih dari 25, silahkan pelajari artikel ini).
• showpostdate = false; artinya tanggal posting tidak ditampilkan (kalo mau ditampilkan false-nya ganti dengan true).
• showpostsummary = false; artinya ringkasan posting tidak ditampilkan.
• numchars = 100; artinya banyaknya karakter (huruf) untuk ringkasan posting yang ditampilkan adalah 100 huruf.
• standardstyling = true; artinya menggunakan type standard.

Kode untuk Recent Comments:

<script style="text/javascript" src="http://andreblog.googlecode.com/files/rc-comments.js"></script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan variabel:
var numcomments = 10; artinya 10 komentar yang ditampilkan.
var showcommentdate = true; artinya tanggal komentar ditampilkan.
var showposttitle = true; artinya menampilkan judul posting yang dikomentari.
var numchars = 100; artinya banyaknya karakter (huruf) komentar yang ditampilkan adalah 100 huruf.
jika Recent Comments kamu ingin menggunakan bullets,

<script style="text/javascript" src="http://andreblog.googlecode.com/files/rc-commentsbullet.js"></script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<ul>
<script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>

Setelah memasukkan kode script dan melakukan editing variabel yang disesuaikan dengan keinginan kamu. Lakukan Preview (Pratinjau) untuk melihat hasilnya. Jika sudah OK, simpan hasil kerjaan kamu.

Nah, selesai dah. Selamat mencoba.....

Read more »

Modifikasi list | angka dan huruf

cara memodifiasi tampilan type huruf besar

Letters list:
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya
Letters list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

cara memodifiasi tampilan type huruf kecil

Lowercase letters list:
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya :
Lowercase letters list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

cara memodifiasi tampilan type huruf romawi besar

Roman numbers list:
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya
Roman numbers list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

cara memodifiasi tampilan type huruf romawi kecil

Roman numbers list:
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya :
Roman numbers list:

1. Apples
2. Bananas
3. Lemons
4. Oranges

Read more »

Modifikasi list | disc,circle, dan square.

Pada tips sebelunya kita saya sudah membicarakan tentang cara membuat tulisan Membuat susunan tulisan berurutan (list), nah sekarang sedikit tips untuk memodifikasi tampilannya.

cara memodifiasi tampilan type disc

Disc bullets list:
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

Maka Hasilnya :

Disc bullets list:

• Apples
• Bananas
• Lemons
• Oranges

cara memodifiasi tampilan type circle

Circle bullets list:
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

Maka Hasilnya :

Circle bullets list:

• Apples
• Bananas
• Lemons
• Oranges

cara memodifiasi tampilan type square

Square bullets list:
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

Maka Hasilnya :

Square bullets list:

• Apples
• Bananas
• Lemons
• Oranges

Read more »

Membuat susunan tulisan berurutan (list)

Cara ini bisa saja secara otomatis dapat di buat ketika sobat membuat tulisan di bagian postingan, tapi ketika sobat ingin membuatnya di sidebar, anda harus menuliskannya secara manual.

Nah..berikut tips sederhana untuk sobat:

<ul>
<li>List baris pertama</li>
<li>Untuk yang kedua</li>
</ul>

Hasilnya :

• List baris pertama
• Untuk yang kedua

Untuk memodifikasi tampilan bulletnya bisa sobat coba disini

<ol>
<li>List baris pertama</li>
<li>Untuk yang kedua</li>
</ol>

Hasilnya :

1. List baris pertama
2. Untuk yang kedua

Untuk memodifikasi tampilan menjadi huruf bisa sobat coba disini

<dl>
<dt>Daftar</dt>
<dd>- daftar dalam daftar 1</dd>
<dt>Daftar 2</dt>
<dd>- daftar dalam daftar 2</dd>
</dl>

Hasilnya :

Daftar

- daftar dalam daftar 1

Daftar 2

- daftar dalam daftar 2

Read more »

Pasang Image/Gambar/Icon di Setiap Judul Artikel/Posting

Image. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan. Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat,walaupun tentusaja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di aksesoleh para pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para pengunjung akan menjadi malas untuk berkunjung. Memang segala sesuatu kalau berlebihan akan berakibat tidak baik, jalan keluarnya ya wajar-wajar saja Re....

Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.

Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan, antara lain :

• Langkah pertama
Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel terdahulu, silahkan klik disini untuk membacanya kembali.
• Langkah kedua
  langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com untuk masalah upload gambarpun sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan klik di sini.
  
• Langkah ketiga
  langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :
http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif
Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan kode : <img src="URL image"> Sehingga kodenya akan jadi seperti ini :
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif">
dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :  
tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut width="..." untuk lebar, height="..." untuk tinggi, dan border="..." untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini :
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">
sehingga image yang tadi akan berubah jadi seperti ini :   Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.
• Langkah keempat
  langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :
  
  Untuk yang memakai template klasik :
  
  
  
  • Sign in ke blogger dengan id sobat
  • Klik menu Template
  • Klik menu Edit HTML
  • Copy 'n paste seluruh kode HTML ke dalam notepad, ini dimaksudkan untuk mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode template
  • Cari kode berikut pada kode HTML sobat :
    
  <$BlogItemTitle$> cara yang mudah untuk menemukan kode tersebut adalah : klik menu Edit yang berada bar menu browser lalu klik Find kemudian tuliskan kode diatas tadi lalu klik tombol Find, maka secara otomatis kita akan langsung di bawa ke tulisan kode tadi. Nah kode <$BlogItemTitle$> adalah merupakan kode untuk menampilkan judul postingan, maka kita harus menyimpan kode image yang kita miliki di dekatnya, bisa sebelum atau sesudahnya tergantung dari keinginan kita. Tentunya bila di simpan sebelum kode judul posting maka image pun akan muncul sebelum judul posting, jika di simpan sesudah kode judul posting sudah barang tentu image pun akan muncul sesudah tulisan judul. Saya ambil contoh kode image di simpan sebelum tulisan judul :
  <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">&nbsp;&nbsp;<$BlogItemTitle$>
  pemasangn kode &nbsp;&nbsp; adalah untuk memberi jarak spasi antara image dengan tulisan judul, sebab jika tidak menambahkan kode &nbsp; maka image dengan tulisan akan bersatu walaupun kode image dengan kode judul di tulis ada jarak spasinya.
  • Klik tombol Preview untuk melihat perubahan yang dilakukan
    
  • Jika sudah OK, klik tombol Save Settings
    
  • Selesai
    
    Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini. 
  
  Untuk yang memakai templat baru :
  Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :
  
  <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">
  kode image tersebut tag nya harus ditutup dengan tag penutup :
  </img>
  Sehingga kode image jadi bertambah menjadi :
  
  
  <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img>

Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :

1. Sign in ke blogger dengan id sobat
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Full Template
5. Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting
6. Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya
7. Tunggu beberapa saat sampai proses selesai
8. Cari kode berikut pada template sobat :
<a expr:href='data:post.url'><data:post.title/></a> <b:else/>
9. Sisipkan kode gambar yang kita miliki diantara kode :
   
   <a expr:href='data:post.url'> dan kode <data:post.title/></a>
   

   <b:else/>
   Sehingga bila di satukan kodenya menjadi :
   
   <a expr:href='data:post.url'> <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img> &nbsp;&nbsp;<data:post.title/></a>
   
   

   <b:else/>
10. Klik tombol PREVIEW untuk melihat perubahan
    
11. bila sudah OK, klik tombol SAVE TEMPLATE
    
12. Selesai
    

Bagaimana sudah di coba? mudah-mudahan saja berhasil. Selamat mencoba !

Read more »

Pasang Icon Pada Setiap Judul di Side Bar

Untuk Mempercantik Blog salah satunya adalah dengan memberikan icon/logo/bullet pada setiap Judul di SideBar. Berikut ini Langkah-langkahnya :

• Seperti biasa.... Login ke akun blogger
• Kustomisasi (TataLetak/Layout)---> edit HTML
• Centang Expand Template Widget
• Cari #sidebar-wrapper h2{ pada deretan kode CSS, kemudian masukan sesuai kode warna biru dibawah:

#sidebar-wrapper h2{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaCc4rrP2LDUKqhBP6Y3cw9RRMd_kJLlYJ8fCtffKaQfKaDMAqGGTJeYjGwfpEu9moiF1hqKDMyWVD40knNWbvGmpZIwYerV6G-uL2HVIhz_2v_w7glPiQu7rZEL92sIuy9aGaDl2K9Sx2/s400/dotlink.gif") 0px 0px no-repeat; margin:.6em 0 .6em; padding:0 20px; font-size:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; color:#222; border-bottom:1px solid #C0C0C0}

• Pra tinjau dan Simpan Template
• Selesai...
• Singkatkan...heheheheheh

Diambil dari http://www.o-om.com/2008/08/kumpulan-blogger-hack-dan-tutorial.html

Read more »

Membuat Recent Post dengan Tumbnail (1)

Salah satu gadget yang sangat penting adalah recent posts. Jadi selain melihat postingan paling baru pembaca juga bisa tahu beberapa postingan yang paling baru (jumlah sesuai keinginan kita yang menyediakan informasi).

Selain itu, kita jadi tidak perlu menampilkan banyak postingan pada halaman utama karena takut postingan yang 'agak baru' bukan terbaru jadi tak terlihat. Langsung saja tambahkan script berikut pada widget HTML Anda. Copy Code Script Dibawah ini :

<div style="overflow:auto; padding:5px; width:250px; height:180px; background-color: rgb(255, 255, 255); border:1px solid #ccc;"><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 = 30;
home_page = "http://jendelainfo23.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
</div>

-- PENTING --

Ganti yang berwarna Biru dengan alamat blog kamu, kalau tidakya tidak apa-apa selain promosikan blog saya hehehe. Nomer 30 menunjukkan jumlah artikel terbaru yang ditampilkan. Atur height dan width pada bagian atas untuk menyesuaikan dengan sidebar kamu.

Semoga berhasil....
di copas dari Blog Tutorial

Read more »

Membuat Recent Post Java Script

Untuk menampilkan RECENT POST

Copy saja script dibawah ini

<script src="http://home.kpn.nl/oosti468/downloads/showrecentcomments.js">
</script><script>
var numcomments = 10;var showcommentdate = true;var showposttitle = true;var numchars = 100;
</script><script src="http://blog-anda.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=showrecentcomments">
</script>

Keterangan :

• var numcomments : jumlah posting yang akan ditampilkan
• showcommentdate : menunjukkan tanggal (false/true)
• showposttitle : Menampilkan Title Post (true/False)
• Yang ber warna Biru jangan lupa diganti dengan URL blog anda.

Hasilnya Seperti ini

Selamat Mencoba!

Read more »

Membuat HeadLine Recent Post

Satu lagi modifikasi Recent Post dengan Tampilan Headline News yang berjalan (efek marquee), Melihat DEMO. Originally written by: Copycat91. Untuk Membuatnya ikuti langkah-langkah Berikut ini :

Read more »