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 !

Menu Dropdown dengan JavaScript

Bagi sobat yang suka akan pernak-pernik blog, ada kabar baik nih. Pada kesempatan kali ini saya akan membahas tentang cara membuat menu Dropdown menggunakan JavaScript.



Biar agak seru, silahkan klik tombol di bawah untuk melihat demo :












Caranya silahkan arahkan mouse sobat ke deretan menu yang ada pada halaman demo lalu klik untuk membuka submenu yang ada di dalamnya dan untuk menutupnya kembali sobat klik sekali lagi ke menu yang ingin di tutup, silahkan mencoba :



Bagaimana sudah di coba belum? kalau belum, coba dulu deh biar agak seru pembahasannya! Nah kalau sudah, bagaimana tanggapannya, seru tidak? kalau seru silahkan sobat baca artikel ini sampai tuntas (kaya adu banteng aja pake acara seru apa kagak), nah kalau sekiranya tidak seru, ya mending cari topik lain biar semangat bacanya.



Oke biar tidak terlalu ngelantur, kita langsung ke topik bahasan. Untuk membuat menu
seperti di atas, kita perlu memasang kode JavaScript serta stylesheet CSS pada template blog kita, akan tetapi karena di blogger terdapat dua pemakaian template yaitu template klasik dan template baru, maka tentu saja dalam membuat menu dropdown tersebut caranya berbeda pula. Oleh karena itu, pembahasannya pun akan saya bagi dua juga yaitu untuk template klasik serta untuk template baru. Akan tetapi karena pembahasannya terlalu panjang, maka kali ini akan saya bahas untuk template baru saja, dan untuk template klasik akan saya bahas pada postingan berikutnya.



Untuk membuatnya silahkan ikuti langkah-langkah berikut ini :

Langkah pertama yaitu membuat dua buah tombol untuk background dari tulisan menu, sebaiknya warna ataupun style nya di bedakan, ini dimaksudkan agar antara menu utama dengan sub menu akan terlihat perbedaannya.
sebagai contoh lihat gambar tombol di bawah ini :

Langkah kedua adalah menyimpan file gambar tombol tersebut pada hosting untuk menyimpan gambar, bisa di blogger sendiri atau dengan hosting lain. Agar lebih terarah, saya ambil contoh menggunakan hosting lain yaitu www.photobucket.com.
Untuk cara upload gambar ke situs ini sudah saya terangkan pada postingan terdahulu, jika ingin baca -
baca lagi silahkan klik di sini.
Saya ambil contoh kedua tombol tadi sudah saya upload dan mempunyai URL address sebagai berikut :



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



http://i162.photobucket.com/albums/t253/rohman24/tombol_06.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 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 <title><data:blog.pageTitle/></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>







8. Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah silahkan cari kode ]]></b:skin>, lalu simpan kode berkut di atasnya







.ogah{

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

text-align:center;

width:90%;

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

padding-left:20px;

padding-right:20px;

padding-top:10px;

padding-bottom: 10px;

display:block;

text-decoration: none;

color: #000000;

height: 20px;

}



.ogahniye{

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

text-align:center;

width:90%;

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

padding-left:20px;

padding-right:20px;

padding-top:13px;

padding-bottom: 10px;

display:block;

text-decoration: none;

color: #000000;

height: 20px;

}



.hide{

display: none;

}



.show{

display: block;

}





a{cursor: hand}








9. Klik tombol SAVE TEMPLATE




Sedikit unek-unek, kode-kode diatas tentunya tidak seratus persen mutlak harus begitu, tapi bisa di sesuaikan dengan kondisi blog sobat.Contoh : width:90%; --> angka "90" artinya lebar dari gambar yang akan tampil sebesar 90%, nilai ini bisa diganti dan di sesuaikan dengan blog sobat, misal di ganti menjadi "80" atau berapa saja.





10. Klik menu Page Elements




11. Klik tulisan Add a Page Element





12. Klik tulisan ADD TO BLOG di bawah tulisan HTML/JavaScript




13. Masukan kode berikut :






<a class="ogah" onclick="showHide('ogahku1')">Menu utama 1</a>

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

<a href="#" class="ogahniye">Link 1 di sini</a>>

<a href="#" class="ogahniye">Link 2 di sini</a>

<a href="#" class="ogahniye">Link 3 di sini</a>

<a href="#" class="ogahniye">Link 4 di sini</a>

</div>

<a class="ogah" onclick="showHide('ogahku2')">Menu utama 2 </a>

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

<a href="#" class="ogahniye">Link 1 di sini</a>

<a href="#" class="ogahniye">Link 2 di sini</a>

<a href="#" class="ogahniye">Link 3 di sini</a>

<a href="#" class="ogahniye">Link 4 di sini</a>

</div>

<a class="ogah" onclick="showHide('ogahku3')">Menu utama 3 </a>

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

<a href="#" class="ogahniye">Link 1 di sini</a>

<a href="#" class="ogahniye">Link 2 di sini</a>

<a href="#" class="ogahniye">Link 3 di sini</a>

<a href="#" class="ogahniye">Link 4 di sini</a>

</div>

<a class="ogah" onclick="showHide('ogahku4')">Menu utama 4 </a>

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

<a href="#" class="ogahniye">Link 1 di sini</a>

<a href="#" class="ogahniye">Link 2 di sini</a>

<a href="#" class="ogahniye">Link 3 di sini</a>

<a href="#" class="ogahniye">Link 4 di sini</a>

</div>








14. Klik tombol SAVE CHANGES




15. Klik pada element yang baru di buat, tahan lalu pindahkan di tempat yang di sukai ( di drag & drop )




16. Klik tombol SAVE




17. Selesai

Keterangan : pada kode diatas ada tanda pagar (#), tanda itu harus di ganti dengan URL yang mau di pasang.




Jika di lihat dari reaksi menu ini yang bersifat membuka dan menekan isi yang ada di bawahnya, maka menu ini hanya cocok di simpan pada sidebar dan tidak cocok apabila di simpan pada header.




Mudah-mudahan dapat di mengerti. Selamat mencoba !

Membuat Link Untuk Download

Sobat Saiman beberapa waktu yang lalu mengajukan sebuah pertanyaan yang di tulis pada shoutbox, beliau menanyakan tentang cara memasang artikel atau file exe di blog agar bisa di download orang lain. Sepengetahuan saya yang terbatas ini, di dalam blog tidak bisa untuk menyimpan file exe kemudian bisa di download oleh orang lain, akan tetapi walaupun begitu ada cara lain yang bisa kita tempuh yakni menggunakan jasa situs-situs yang ada di internet yang menyediakan space untuk upload file yang kita punyai dan kemudian bisa di download lagi oleh orang lain.



Secara sederhana saya jabarkan cara kerjanya, pertama tentu saja kita harus mempunyai account pada situs tersebut, kemudian setelah mempunyai account, baru kita upload data yang ingin kita simpan, lalu setelah proses upload berhasil kita akan di beri URL address file yang kita upload. Nah langkah terakhir agar pengunjung dari blog kita bisa mendownload file tersebut adalah memasang tulisan yang mempunyai link terhadap URL address file yang kita upload tadi, jadi tentu saja orang lain bisa mendownload file yang kita pasang melalui blog kita. Kira-kira begitu bos .



Agar tidak terlalu bingung, penyedia layanan ini salah satunya adalah www.SnapDrive.net.
dengan menggunakan situs ini kita bisa upload file kemudian file tersebut bisa di download lagi oleh orang lain. Untuk caranya silahkan ikuti langkah-langkah berikut ini :

1. Silahkan buka http://www.SnapDrive.net




2. Klik tulisan Register




3. Isi formulir yang disediakan dengan data diri sobat






• Username --> isi dengan nama yang ingin sobat gunakan, boleh apa saja yang penting mudah di ingat. contoh : Unyil




• Password --> isi dengan password yang di inginkan. contoh : pakraden




• Confirm password --> isi kembali dengan password yang tadi di tuliskan.contoh : pakraden




• Email address --> isi dengan alamat email sobat, tentunya yang masih valid. contoh : amn_tea@yahoo.co.id




• First name -->isi dengan nama depan sobat




• Last name --> isi dengan nama belakang sobat




• Country --> pilih nama negara dimana sobat tinggal. contoh : indonesia




• Postcode --> isi dengan kode post daerah sobat




• Gender --> pilih sesuai dengan jenis kelamin sobat. male(pria), female(wanita)




• Date of birth --> pilih tanggal kelahiran sobat




• Preferances isi dengan tulisan yang tertera di situ






4. Klik tombol Register




5. Ada konfirmasi bahwa account yang baru di buat harus di aktifkan melalui email yang kita tulis tadi




6. Cek email milik sobat yang tadi ditulis, periksa apakah email dari Snapdrive sudah sampai atau belum




7. Jika email sudah sampai, silahkan buka email tersebut. Isi di dalam email tersebut ada yang berupa link untuk aktifasi,
   klik saja link tersebut




8. Secara otomatis sobat akan dibawa kehalaman yang berisi ucapan terima kasih




9. Klik tombol OK




10. Silahkan Login dengan username serta password yang tadi di tuliskan saat register




11. Setelah berada di halaman account sobat, klik tulisan Upload




12. Klik tombol Add Files




13. Pilih file yang ada dikomputer sobat yang mau di upload




14. Klik tombol Upload. tunggu beberapa saat ketika proses upload file sedang berlangsung




15. Jika proses upload selesai, sobat akan diperlihatkan file yang di upload tadi. Klik tulisan details yang ada disebelahnya




16. Klik tulisan HTML Code




17. Copy kode yang di berikan lalu paste pada program notepad




18. Klik tulisan Logout untuk keluar dari situs tersebut




19. Silahkan tutup layar browser sobat

Langkah selanjutnya adalah memasukan kode tadi ke dalam blog kita, saya ambil contoh kode yang sudah di upload seperti ini :






<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">billing internet.zip</a>





Kode ini merupakan kode link biasa, jadi tentunya tidak mutlak. Kata billing internet.zip, bisa kita ganti dengan kata apa saja sekehendak kita. saya ambil contoh kata billing internet.zip di rubah menjadi kata download,
maka kode diatas menjadi seperti di bawah ini :






<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>





Bagaimana cara memasukan kode diatas? tentu saja terserah sobat mau di tempatkan dimana saja, mau di sidebar, footer, atau bahkan di dalam postingan pun bisa. Saya ambil contoh didalam postingan isinya seperti ini :



Untuk men download program billing internet, silahkan anda klik link di bawah ini :



<br/><br/>





<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>





Maka nanti di blog kita akan tampil seperti ini :




Untuk men download program billing internet, silahkan anda klik link di bawah ini :



download




Contoh link yang saya buat diatas adalah link yang benar-benar nyata untuk mendownload program billing internet, silahkan sobat klik untuk membuktikannya!




Saya kira sudah cukup pembahasan tentang cara membuat link download, mudah-mudahan
dapat di mengerti. Selamat mencoba !