Read More Versi baru

Bagi para sobat yang gemar menyingkat artikel dengan fasilitas Read more
atau Baca selengkapnya seperti yang telah saya terangkan pada artikel terdahulu, Sekarang ada cara membuat menu Read more yang saya sebut dengan Read more versi baru. Kenapa demikian? karena menu Read more kali ini sedikit berbeda dengan yang saya terangkan pada artikel yang telah lalu.



Fasilitas Read more kali ini di buat oleh Ramani dan Hans. Kelebihannya
yaitu ketika pembaca mengklik link Read more, maka keseluruhan artikel
bisa terbuka tanpa harus me-loading ulang yang terkadang membuat BT pembaca yang
koneksi internetnya rada lelet ( jadi malu, padahal blog saya berat banget untuk di loading), selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga tidak mengganggu pemandangan seperti yang di keluhkan sobat yuki beberapa waktu lalu yang merasa terganggu karena tulisan readmore selalu muncul walaupun pada artikel yang pendek.



Tapi sayang kode-kode berikut ini hanya berlaku bagi sobat yang memakai template baru saja dan untuk yang memakai template klasik saya ucapkan Kaciaaaaaan deeeeehhh (padahal blog ini pun pake template klasik jadi ga bisa pake ini).



Untuk menyingkat tulisan agar tidak terlalu dipenuhi dengan intermezo yang
sedikit membuat bete and ngeselin, langsung saja untuk membuat read more versi baru ini silahkan ikuti langkah-langkah berikut ini :

1. Sig in di blogger dengan id sobat





2. Klik menu layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template





5. Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi jangan lupa untuk memberi tanda centang dulu yah





6. Tunggu beberapa saat sampai proses selesai





7. Copy kode berikut, lalu paste tepat di atas kode </head>






<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />






8. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan :





<h3 class='post-title'>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

<div class='post-header-line-1'/>


<div class='post-body' expr:id='"post-" + data:post.id'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>

<style>#fullpost {display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>

<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

</div>

.... rest of template code ....






9. Klik tombol SIMPAN TEMPLATE

Langkah selanjutnya :

1. Klik menu Pengaturan





2. Klik menu Format





3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping
   tulisan Template posting










<span id="fullpost">




</span>








4. Klik tombol Simpan Setting





5. Selesai.

Cara posting artikel :



Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :





<span id="fullpost">






</span>





Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode <span id="fullpost">, dan sisa keseluruhan artikel di simpan sesudah kode <span id="fullpost"> dan sebelum
kode </span>.




Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti
artikel muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja....



Untuk contoh nyata saya sudah membuat blog yang sudah memakai sistem ini, silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan sobat klik di sini !.




Selamat mencoba !

Cara membuat kategori (label)

Menanggapi beberapa pertanyaan dari para sobat yang di ajukan baik melalui
shoutbox, kotak komentar dan bahkan ada yang melalui yahoo messenger menyoal tentang
bagaimana cara membuat kategori dari artiekl-artikel yang telah di posting. Memang
betul, tentu dengan adanya pengkategorian atau pengelompokan artikel yang telah di
posting oleh pemilik blog dapat lebih mempermudah bagi para pembaca untuk memilih
artikel mana yang ingin dibaca.



Di blogger.com fasilitas ini sebenarnya sudah di sediakan, akan tetapi walaupun
fasilitas tersebut telah tersedia tentu saja jika kita tidak mengetahui cara menggunakannya akan menjadi tidak berguna. Untuk membuat kategori, di blogger.com di kenal dengan istilah Label. Dengan adanya fasilitas ini kita sebagai pemilik blog hanya tinggal mengisi kotak label yang di sedikan pada setiap posting artikel, sangat simpel dan sederhana.




Agar tidak membingungkan, silahkan sobat lihat pada akhir postingan artikel ini.
Disana ada tulisan seperti ini : Labels : Blog tutorial, membuat label.
Nah berarti postingan ini termasuk ke dalam dua kategori, yaitu kategori Blog tutorial dan kategori membuat label. Untuk melihat fungsi dari label ini silahkan sobat klik label yang bertuliskan Blog tutorial, maka secara otomatis seluruh postingan yang saya beri label Blog tutorial akan di tampilkan dan siap untuk di baca oleh pengunjung.



Bagaimana cara membuat label?



Untuk membuat sebuah kategori atau label, sobat hanya tinggal mengisi kotak kosong
di samping tulisan Label untuk postingan ini : (karena sekarang blogger sudah
ada yang berbahasa indonesia) yang berada di bawah kotak tempat membuat artikel.
Isi kotak tersebut dengan kategori yang kira-kiracocok untuk postingan yang kita buat. Contoh : liburan musim dingin. Satu postingan
tidak hanya terpatok hanya pada satu kategori saja, akan tetapi satu postingan bisa
mempunyai beberapa kategori. untuk membuatnya tinggal di pisahkan dengan tanda koma ( , )saja, misal untuk postingan artikel blog ini ada yang ber label Blog tutorial, blog tools, aksesori blog, karena postingan tersebut memang cocok dan masuk kedalam ketiga kategori tersebut.



Apakah kategori (label) bisa di tampilkan di sidebar?



Untuk sobat para pengguna template baru, Label (kategori) bisa di tampilkan
di sidebar, dan biasanya element label ini sudah tersedia ketika baru memasang template. Jika element label belum tersidia, sobat bisa membuatnya sendiri, silahkan ikuti langkah - langkah berikut ini :

1. Sig in di blogger dengan id sobat





2. Klik menu Layout





3. Klik menu Elemen Halaman





4. Klik tulisan Tambahkan sebuah Elemen Halaman





5. Klik tombol yang bertuliskan TAMBAHKAN KE BLOG yang berada di bawah tulisan Label





6. Tulisan Labels di samping tulisan Judul bisa sobat rubah menjadi Kategori jika sobat mau merubahnya





7. Pilih radio button yang sobat inginkan di samping tulisan Menyortir, Alfabetik : jika kategori ingin di tampilkan sesuai dengan abjad alfabetik ( dari A --> Z ), Berdasarkan Frekuensi : jika kategori ingin ditampilkan sesuai dengan banyaknya label (kategori)





8. Klik tombol yang bertuliskan SIMPAN PERUBAHAN





9. Selesai.

Sangat mudah bukan?



Sedikit pengumumam, karena blogger sekarang sudah ada yang berbahasa indonesia, maka
mulai sekarang dalam memandu mengikuti dengan memakai yang berbahasa indonesia.




Selamat mencoba !

Random Banner Header

Menjawab pertanyaan mba Ati beberapa hari yang lalu yang di ajukan melalui shoutbox mengenai cara membuat random banner header atau gambar banner yang ada di header bisa bergantian atau berubah-berubah. Sepertinya memang lebih menarik apabila banner yang ada di header bisa bergantian sehingga suasana akan lebih fresh karena tidak monoton seperti blog saya ini , tapi tidak apa-apa, mungkin suatu hari nanti blog inipun headernya bisa bergantian .



Untuk membuat random banner ada beberapa langkah yang harus sobat lakukan, yaitu :



Langkah pertama



Langkah pertama yang harus dilakukan tentunya sobat wajib membuat beberapa banner, bisa tiga, empat, lima, dan seterusnya tergantung dari keinginan sobat. Untuk membuatnya sobat bisa menggunakan program-program semisal adobe photoshop atau coreldraw serta kawan-kawannya yang lain. Akan tetapi karena saya tidak terlalu mahir masalah program untuk desain gambar, maka tidak akan saya terangkan cara pembuatannya. Jika sobat ingin berkonsultasi mengenai program adobe photoshop, silahkan kunujungi http://jaloee.blogspot.com miliknya kang jaloee, beliau ini pakarnya kalau masalah photoshop.



langkah kedua



Langkah kedua yang harus dilakukan adalah mengupload banner-banner tersebut pada hosting tempat menyimpan gambar, saya ambil contoh www.photobucket.com untuk cara upload pada situs ini sudah saya terangkan pada postingan terdahulu, jika masih bingung silahkan klik di sini.



Jika proses upload selesai, copy URl address banner-banner tersebut lalu paste pada program notepad guna nanti untuk di masukan kedalam kode/script yang akan saya berikan.



Langkah ketiga



Langkah ketiga yaitu memasukan script kedalam kode template yang sobat miliki. Script dasarnya adalah :





<script type="text/javascript">

var banner= new Array()

banner[0]="bannerURL0"

banner[1]="bannerURL1"

banner[2]="bannerURL2"

banner[3]="bannerURL3"

banner[4]="bannerURL4"

banner[5]="bannerURL5"

banner[6]="bannerURL6"

banner[7]="bannerURL7"

banner[8]="bannerURL8"

banner[9]="bannerURL9"

var random=Math.floor(10*Math.random());

document.write("<style>");

document.write("#header {");

document.write(' background:url("' + banner[random] + '") no-repeat top left;');

document.write(" }");

document.write("</style>");

</script>







Terlihat diatas bahwa jumlah banner yang diberikan adalah 10 buah, akan tetapi jumlah ini tidak mutlak yaitu berapa saja yang sobat inginkan yang penting pada kode var random=Mat. jumlahnya harus sesuai dengan jumlah banner.



Lagi-lagi karena template blogger ada dua yaitu template klasik dan template baru maka untuk menempatkan kode/script akan berbeda, Sehingga pembahasannya pun akan saya bagi menjadi dua bagian. Sebelumnya saya akan memberikan contoh kode yang memuat banner yang sudah saya upload dan masing-masing memiliki URL addres sebagai berikut :



http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif



http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif



http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif



http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif



http://i162.photobucket.com/albums/t253/rohman24/banner5.gif



http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif



http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif



http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif



http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif



http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif



dan contoh bannernya adalah sebagai berikut (gambar diperkecil) :















































Contoh script dari banner-banner ini adalah :





<script type="text/javascript">

var banner= new Array()

banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"

banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"

banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"

banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"

banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"

banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"

banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"

banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"

banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"

banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"

var random=Math.floor(10*Math.random());

document.write("<style>");

document.write("#header {");

document.write(' background:url("' + banner[random] + '") no-repeat top left;');

document.write(" }");

document.write("</style>");

</script>





Untuk caranya silahkan ikuti langkah-langkah berikut ini.

1. Sign in di blogger dengan id sobat


2. Klik menu layout


3. Klik menu Page Elements


4. Klik tulisan Add a Page Element


5. Klik tombol ADD TO BLOG di bawah tulisan HTML/JavaScript


6. Copy paste kode berikut kedalamnya



<script type="text/javascript">
var banner= new Array()
banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"
banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"
banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"
banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"
banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"
banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"
banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"
banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"
banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"
banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>



7. Klik tombol SAVE CHANGES


8. Selesai.

Sekedar tambahan (padahal masih banyak ), kode diatas adalah sekedar contoh, silahkan ganti address bannernya dengan yang di miliki sobat.



Mungkin ada beberapa template yang di pakai sobat saat ini banner headernya tidak sesuai dengan keinginan sobat, sebenarnya ukuran tersebut bisa kita ganti. Contoh untuk template minima sebagai berikut :



@media all {

#header {

width:660px;

margin:0 auto 10px;

border:1px solid #ccc;

}



Pada kode diatas terlihat bahwa untuk lebar banner header sebesar 660p(width:660px;), nilai tersebut bisa kita rubah sesuai dengan keinginan. Dan untuk tinggi dari banner header tidak di definisikan, nah agar banner kita sesuai dengan keinginan maka kita harus menyelipkan kode tambahan sebagai definisi, contoh lebar yang di inginkan adalah sebesar 150px, maka kode yang di tambahkan adalah height:150px; sehingga kode di atas menjadi seperti ini :



@media all {

#header {

width:660px;

height:150px;

margin:0 auto 10px;

border:1px solid #ccc;

}



Untuk masing-masing template tentunya akan sangat berbeda, akan tetapi untuk template milik blogger, biasanya untuk bagian header di beri nama #header.



Untuk melihat contoh nyata dari efek script diatas, saya sudah membuat satu blog sebagai percontohan, blog tersebut sudah di pasang 10 banner seperti yang saya terangkan di atas, untuk melihat perubahannya sobat harus mengklik susuatu agar layar browser menjadi berubah baru, saya beri contoh dengan mengklik judul arsip atau yang lainnya. Untu melihat contoh silahkan lihat di sini



Selamat mencoba !!!!

Text Berjalan di Bar menu

Sobat Ochim beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.



Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.



Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis
seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.



Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat




2. Klik menu Template




3. klik menu Edit HTML




4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula




5. Copy kode berikut ini lalu paste di atas kode </head>







<script language='javascript'>

message = "Tulis text pertama yang ingin muncul disini ^" +

"Tulis text kedua disini ^" +

"Tulis text ketiga disini ^" +

"Tulis text keempat disini ^"


scrollSpeed = 130

lineDelay = 0


// Do not change the text below //


txt = ""


function scrollText(pos) {

if (message.charAt(pos) != '^') {

txt = txt + message.charAt(pos)

status = txt

pauze = scrollSpeed

}

else {

pauze = lineDelay

txt = ""

if (pos == message.length-1) pos = -1

}

pos++

setTimeout("scrollText('"+pos+"')",pauze)

}

scrollText(0)

</script>






6. Klik tombol Save Template Changes




7. Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat




2. Klik menu Layout




3. Klik menu Edit HTML




4. Klik tulisan Download Full Template, lalu save data tersebut.
   Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template




5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates




6. Tunggu beberapa saat sampai proses selesai




7. Simpan kode berikut di bawah kode </body> ,
   kode ini letaknya berada paling bawah sebelum kode </html>







<script language='javascript'>

message = "Tulis text pertama yang ingin muncul disini ^" +

"Tulis text kedua disini ^" +

"Tulis text ketiga disini ^" +

"Tulis text keempat disini ^"


scrollSpeed = 130

lineDelay = 0


// Do not change the text below //


txt = ""


function scrollText(pos) {

if (message.charAt(pos) != '^') {

txt = txt + message.charAt(pos)

status = txt

pauze = scrollSpeed

}

else {

pauze = lineDelay

txt = ""

if (pos == message.length-1) pos = -1

}

pos++

setTimeout("scrollText('"+pos+"')",pauze)

}

scrollText(0)

</script>






8. Klik tombol SAVE TEMPLATE




9. Selesai

sedikit clue, pada kode diatas ada tulisan yang saya buat merah, nah tulisan tersebut
harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin
besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.




Seperti yang saya katakan di awal artikel bahwa kode yang saya berikan di atas hasil efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil nyatanya, silahkan sobat klik di sini.



Selamat mencoba !!!

Pasang Recent Comments

Kemarin lusa saya iseng-iseng buka email, dan ternyata ada kiriman email dari salah satu sobat saya yaitu sobat Aulia. Sobat Aulia ini menanyakan perihal cara membuat Recent comment atau komentar terbaru untuk new blogger template. Sebenarnya pertanyaan itu sudah saya jawab melalui email juga, akan tetapi saya pikir-pikir ada baiknya kalau topik ini saya bahas di blog ini, barangkali ada di antara sobat sekalian yang sama-sama tertarik ingin memasang Recent comment di sidebar blog sobat.



Untuk membuat recent comment pada new blogger template tidaklah sulit, karena saat ini sudah ada Recent comments widget creator dari hans
serta hackosphere yang bekerja secara otomatis, tugas sobat hanya login di blogger.com, pilih blog yang mau dipasang trus add widget, selesai. Sangat gampang tanpa harus bersusah payah menambahkan berbagai kode kedalam template sobat. Untuk membuatnya silahkan sobat klik tombol di bawah ini :

   Rasanya kurang seru kalau artikelnya cuma begitu ya.

Ok, setelah sobat klik tombol diatas, maka nanti akan muncul gambar seperti ini :













Agar lebih jelas, silahkan ikuti langkah-langkah berikut ini :

1. Silahkan klik kotak di atas atau bisa juga klik di sini




2. Tulis judul Recent Comments dengan yang sobat inginkan. contoh : "komentar terbaru". atau biarkan saja juga boleh




3. Ganti nama beautifulbeta di samping tulisan http dengan nama blog sobat. contoh : kolom-tutorial




4. Tulis angka banyaknya komentar yang diinginkan di samping tulisan Number of comments




5. Beri tanda centang pada kotak di samping tulisan Show comment date jika komentarnya ingin ada tanggalnya




6. Beri tanda centang pada kotak di samping tulisan Show posttitle jika komentarnya ingin ada judul postingan




7. Tulis jumlah karakter hurup yang diinginkan di samping tulisan Summary size




8. Untuk styling silahkan pilih yang mana saja




9. Klik tombol bertuliskan Customize




10. Klik tombol bertuliskan Add Widget To My blog




11. Silahkan sign in dengan id sobat




12. Pilih blog sobat yang ingin ada Recent comments nya di samping tulisan select a blog




13. Klik tombol bertuliskan ADD WIDGET




14. Secara otomatis Recent comment widget sudah di tambahkan ke blog sobat




15. Pindahkan elements Recent comment yang baru dibuat pada tempat yang sobat suka




16. Selesai.

Bagaimana sobat, gampangkan? so pasti gampang donk




Tapi ada satu lagi kabar gembira nih buat para sobat. Bagi sobat yang blog nya memakai bahasa indonesia tentu
saja akan sedikit janggal, karena recent comment diatas memakai bahasa inggris. Apakah recent comments tersebut
bisa menjadi bahasa Indonesia? jawaban nya bisa. Jika sobat tertarik silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat




2. Klik menu Layout pada blog yang ingin di rubah




3. Klik menu Page Elements




4. Klik tulisan Edit pada element Recent Comments yang tadi dibuat




5. Akan muncul kode-kode seperti ini :







<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/showrecentcomments2.js">

</script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://YourBlogName.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>




Pada kode yang tercetak biru diatas, silahkan ganti kodenya dengan kode dibawah ini :





http://amen24.googlepages.com/showrecentcomments.js






6. Klik tombol SAVE CHANGES




7. Selesai.

Untuk melihat contoh Recent comments yang berbahasa indonesia,
silahkan klik disini.
Jangan lupa klik di sini juga ya



Selamat mencoba !!!!

Cara Membuat Favicon

Update : Artikel ini sudah tidak up to date dan telah saya perbaharui, silahkan baca di sini!

Menu Dropdown dengan JavaScript (2)

Melanjutkan Postingan kemarin lusa yaitu tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.



Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :















Maka kali ini saya akan memberi contoh banner seperti ini :




















Dan contoh menu dropdown yang akan di bahas adalah seperti demo di bawah ini :










Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :

Langkah pertama adalah membuat tiga banner untuk background tulisan, banner ini bisa dibuat dengan program design & grafik semisal Adobe photoshop atau Corel Draw ataupun program-program lainya yang sejenis.

Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com. Untuk cara menguploadnya saya sudah terangkan, jika belum faham silahkan klik di sini.
Saya ambil contoh, banner yang telah saya upload mempunyai URL address sebagai berikut :


http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif



http://i162.photobucket.com/albums/t253/rohman24/bannerjava5.gif



http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif

Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :

1. Sign in di blogger.com dengan id sobat




2. Klik menu Template




3. Klik menu Edit HTML




4. Copy seluruh kode template lalu paste pada program notepad, ini untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template




5. Tambahkan kode berikut di bawah kode <head> dan sebelum kode
   </head>, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></title> :







<script>


var last_expanded = '';


function showHide(id)


{


var obj = document.getElementById(id);


var status = obj.className;


if (status == 'hide') {


if (last_expanded != '') {


var last_obj = document.getElementById(last_expanded);


last_obj.className = 'hide';


}


obj.className = 'show';


last_expanded = id;

} else {

obj.className = 'hide';

}

}




</script>







6. Masukan kode berikut diatas kode ]]></b:skin>








.raden{

background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');

text-align:center;

width:175px;

font-family: georgia, Helvetica, sans-serif;

padding-left:5px;

padding-right:5px;

padding-top:5px;

padding-bottom: 5px;

display:block;

text-decoration: none;

color: #F6E151;

}




.ogah{

background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');

text-align:center;

width:175px;

font-family: georgia, Helvetica, sans-serif;

padding-left:5px;

padding-right:5px;

padding-top:8px;

padding-bottom: 5px;

display:block;

text-decoration: none;

color: ##FAF705;

height: 18px;

}




.ogahniye{

background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif');

text-align:center;

width:175px;

font-family: georgia, Helvetica, sans-serif;

padding-left:5px;

padding-right:5px;

padding-top:8px;

padding-bottom: 5px;

display:block;

text-decoration: none;

color: #0572FA;

height: 18px;

}



.hide{

display: none;

}



.show{

display: block;

}





a{cursor: hand}









7. Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :








<a class="raden"><font size="5"><b>Navigasi</b></font></a>


<a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a>


<div id="ogahku1" class="hide">


<a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html" class="ogahniye">Membuat blog</a>


<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html" class="ogahniye">Membuat link</a>


<a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html" class="ogahniye">Membuar marquee</a>



<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-messenger.html" class="ogahniye">Icon YM</a>


</div>



<a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a>


<div id="ogahku2" class="hide">


<a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html" class="ogahniye">Yahoo ! Emoticons</a>


<a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html" class="ogahniye">Blogger Emoticons</a>


<a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html" class="ogahniye">Pasang jam</a>


<a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-artikel.html" class="ogahniye">Pasang Video</a>


</div>



<a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a>


<div id="ogahku3" class="hide">


<a href="http://rubrik-elektronik.blogspot.com/" class="ogahniye">Rubrik Elektronik</a>


<a href="http://rohman-freeblogtemplate.blogspot.com/" class="ogahniye">Free Blog Template</a>


<a href="http://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu D'tree</a>


<a href="http://kolom-authorized.blogspot.com/" class="ogahniye">Authorize service</a>


</div>



<a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a>


<div id="ogahku4" class="hide">


<a href="http://free-7.blogspot.com/" target="_blank" class="ogahniye">Free 7</a>


<a href="http://jaloee.blogspot.com/" target="_blank" class="ogahniye">Jaloee</a>


<a href="http://sundajava.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a>


<a href="http://anangku.blogspot.com/" target="_blank" class="ogahniye">Anang</a>


</div>













8. Klik tombol Preview untuk melihat perubahan yang baru di buat




9. Jika sudah OK, klik tombol Save Changes Template


10. Selesai.

Keterangan kode-kode diatas :

• kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini :






<script>


var last_expanded = '';


function showHide(id)


{


var obj = document.getElementById(id);


var status = obj.className;


if (status == 'hide') {


if (last_expanded != '') {


var last_obj = document.getElementById(last_expanded);


last_obj.className = 'hide';


}


obj.className = 'show';


last_expanded = id;

} else {

obj.className = 'hide';

}

}




</script>







• Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat :
• 
  
  
  
  
  
  
  
  .raden
  
  
  --> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.
  
  
  
  background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
  
  
  --> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.
  
  
  
  text-align:center;
  
  
  --> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.
  
  
  
  width:90%;
  
  
  --> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.
  
  
  
  font-family: georgia, Helvetica, sans-serif;
  
  
  --> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.
  
  
  
  
  padding-left:5px;
  
  
  --> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  
  
  
  padding-right:5px;
  
  
  --> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  
  
  
  padding-top:5px;
  
  
  --> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  
  
  
  padding-bottom: 5px;
  
  
  --> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  
  
  
  display:block;
  
  
  --> block berarti ditampilkan,jadi jangan dirubah.
  
  
  
  
  text-decoration: none;
  
  
  --> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.
  
  
  
  
  color: #F6E151;
  
  
  --> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.
  
  
  
  
  
  
  
  .ogah
  
  
  --> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.
  
  
  
  
  
  
  
  
  .ogahniye
  
  
  --> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.
  
  
  
  
  
  
  
  .hide
  
  display: none;
  
  
  --> Pendifinisian untuk .hide disembunyikan (tidak tampil).
  
  
  
  
  
  
  
  
  
  .show
  
  display: block;
  
  
  --> Pendifinisian untuk .show ditampilkan.
  
  
  
  
  
  
  
  
  
  a{cursor: hand}
  
  
  Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.
  
  
  
  
  
• Kode yang saya berikan diatas memuat links yang saya miliki, jadi links tersebuat harus di rubah dengan links milik sobat.

Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !