HTML Cara Pasang Gambar atau Foto

3 Des 2008

Terkait dengan pertanyaan di Shoutbox "Guest MAS CARANYA NARUK IKON FRIENDSTER DI BLOG ITU GIMANA CARANYA" Nah pada dasarnya pertanyaan itu bisa dengan mudah temen-temen jawab yaitu dengan mengunakan kode untuk gambar menggunakan HTML
Untuk memasang Gambar /Foto di Blog atau web, kita perlu mengatahui dulu alamat foto/gambar yang kita ingin tampilkan, Dahulu sudah agak lama saya bahas mengenai Cara menyimpan foto/gabar di internet salah satunya dengan menggunakan layanan Gratisan www.photobucket.com di sana juga anda sudah mendapatkan layanan yang saya rasa cukup memuaskan mulai dari pengaturan folder penyimpanan foto (album) modifikasi gambar secara online, dan Beserta kode gambar yang siap anda pakai untuk di pasang pada blog anda.

Di sini saya hanya memberikan sedikit gambaran atau cara untuk menampilkan gambar pada blog.

Kode yang di perlukan adalah kode ini: <img src="url gambar anda" alt="deskripsi gambar" width="x% atau xpx" height="y% atau ypx"/>

• Supaya tidak terjadi masalah pada browser anda pastikan di akhir kode image gunakan /> itu menandakan penutup kode, pada awalnya kode Image tidak memerlukan penutup kode tapi pada perkembangannya, harus memiliki kode penutup, selain tiu anda bisa menggunakan kode </img> dengan catatan tidak menggunakan kode /> contohnya: <img src="...." > </img>.
• SRC adalah URL gambar yang akan di pasang.
  
• Width untuk menentukan lebar gambar, satuannya dalam pixel atau persentase, Untuk gambar yang ingin di tampilkan apa adanya, silahkan hapus kode width="......"
• Height untuk menentukan tinggi gambar, satauannya sama seperti width yaitu persentase dan pixel.
• ALT adalah kode untuk mendeskripsikan sebuah gaambar yang anda maksud hal ini berguna untuk mesin pencari menemukan gambar yang sesuai di cari.

selain kode di atas, masih banyak parameter atau kode tambahan untuk tag IMG. selengkapanya bisa di baca di sini :http://www.htmlcodetutorial.com/images/_IMG.html
 Berikut Contoh kode beserta hasilnya:

Gambar aslinya:

<img src="http://klikrupiah.com/images/klik5.gif" alt="Dapatkan Uang lewat Klik Rupiah" width="50%" height="50%/>

Gambar seteleh di atur lebar dan tingginya sebesar 50% dar gambar normal.

Pasang Link pada Gambar

Pada Gambar di atas terlihat bahwa tidak ada link /tautan ke situs atau blog orang lain. jika anda klik maka yang tampil adalah gambar itu sendiri. Cara menambahkan Link pada Gambar adalah cukup mudah, Caranya dengan meletakan tag <a></a> diantara tag <img> Contohnya sebagai berikut:

<a href='https://www.klikrupiah.com/index.php?ref=contoh' target='_blank'><img alt='Klik Dapet Duit' src='http://klikrupiah.com/images/klik5.gif'/></a>

Coba perhatikan kode di atas,  maka saat anda klik, gambar maka akan membuka halaman baru yaitu https://www.klikrupiah.com/index.php?ref=contoh adapun hasilnya bisa di coba langsung pada gambar di bawah ini:

Tampilkan Gambar dari Blog/web Orang Lain

Kemudian bagaimana jika ingin menampilkan gambar dari situs atau blog orang lain?

Caranya hanya mencari alamat gambar yang ingin anda gunakan dan berikut screenshotnya: (sebagai sample saya menggunakan logo www.friendster.com

Cari gambar yang ingin anda pasang, kemudian klik kanan pada image tadi nanti akan muncul menu seperti ini:

Kemudian Pilih dan klik "Copy Image Location" nah setelah di copy silahkan gabungkan dengan kode Image yang sudah di berikan sebalumnya: atau silahkan paste dulu ke notepad atau halaman kerja anda di sini alamatnya sebagai berikut:
http://images.friendster.com/images/friendster_nav_logo.png

Kemudian Siapkan Alamat atau url yang ingin di jadikan link pada saat gamabr /logo Friendster tadi di klik: saya contohkan menggunakan URL friendster saya yaitu: http://profiles.friendster.com/adesanusi Nah setelah terkumpul maka selanjutnya adalah penggabungan yaitu sebagai berikut:

<a href='http://profiles.friendster.com/adesanusi' target='_blank'><img alt='Friendsternya Ade Sanusi' src='http://images.friendster.com/images/friendster_nav_logo.png'/></a>


Dan Hasilnya Sebagai berikut:

Silahkan klik Icon friendster di atas nanti akan tampil Account fiendster saya. Pemasangan dapat di terapkan pada Widget blog maupun postingan blog anda. Semoga berhasil.

Read Post | komentar

HTML untuk Membuat Tabel

19 Nov 2008

Untuk membuat Tabel di Blog atau Web, kita memerlukan kode <table> sebagai pembuka dan kode </table> sebagai penutup. didalam kode Table tersebut terdapat dua bagian yaitu <tr></tr> (Table Rows) untuk membuat banyaknya baris kemudian di dalam Table Rows ada kode <td></td> (Table Data) Untuk tempat pengisian data dan menentukan banyaknya kolom pada masing-masing baris (Table Rows).
Contoh Kode Table:

<TABLE>
<TR> <TD>Raha Mutisya</TD>      <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>     <TD>3829</TD> </TR>
<TR> <TD>Hallie Curry</TD>      <TD>8372</TD> </TR>
<TR> <TD>Shari Silberglitt</TD> <TD>4827</TD> </TR>
</TABLE>
     

Hasil:

Raha Mutisya		1493
Shalom Buraka		3829
Hallie Curry		8372
Shari Silberglitt		4827

Penjelasan: Untuk Membuat Tabel, Pertama Buta Baris dengan menggunakan tag <tr> kemudian isi dengan banyaknya kolom tag<td>dan tutup kode sesuai dengan kode asing masing

<tr><td> kolom ke 1 Baris Pertama </td><td> Kolom ke 2 baris pertama </td><td>Kolom Berikutnya</td></tr>

Itu artinya pada Baris Pertama diisi dengan 3 kolom dan untuk menambahkannya cukup menggunakan tag <td> isi </td>

Parameter Pendukung Table:

Untuk mempercanti Table, ada banyak parameter mulai dari Background, Border, Jarak antar Sel dan lainnya: berikut penjelasannya:

Border: Untuk memberikan Garis Tepi pada tabel. coba lihat dan bandingkan dengan tabel pertama. Penulisannya di dalam tag <table> yaitu <table border="5"> dimana angka lima merupakan besarnya garis tepi dalam pixel.

CellSpacing: Untuk Menentukan jarak Antara garis (border Table dengan garis atau border text (terlihat jarak antar garis terlihat berjauhan) Penulisan kodenya diletakan pada tag <table> yaitu <table cellspacing="10"> dimana angka 10 merupakan besarnya jarak antar sel.

CellPadding: Untuk Menentukan jarak text dengan Garis dalam ( telihat garis dalam dan luar berdekatan dan ada jarak teks dengan garis dalam). Pnulisannya :<table cellpadding="10"> dengan jarak 10 pixel.

Terkadang dalam Membuat tabel, kita menggabungkan beberapa kolom atau baris menjadi satu. untuk itu digunakan kode ColsSpan dan RowSpan

Kode:
<table border="2">
<tr>
<th bgcolor="#99ccff" rowspan="3">Production</th>
<td bgcolor="#ccccff" colspan="2">Name and Code</td>
</tr>
<tr>
<td>Shalom Buraka</td> <td>3829</td>
</tr>
<tr>
<td>Brandy Davis</td> <td>0283</td>
</tr>
<tr>
<th bgcolor="#cccccc" rowspan="2">Sales</th>
<td>Claire Horne</td> <td>4827</td>
</tr>
<tr>
<td>Bruce Eckel</td> <td>7246</td>
</tr>
<tr>
<td>Office</td><td>Danny Zeman</td> <td>5689</td>
</tr>
<tr>
<td colspan="3"><a href="http://www.duniague.net/">http://dunia-blogger.blogspot.com</a></td>
</tr>
</table>

Production	Name and Code
	Shalom Buraka	3829
	Brandy Davis	0283
Sales	Claire Horne	4827
	Bruce Eckel	7246
Office	Danny Zeman	5689
http://dunia-blogger.blogspot.com

Penjelasan:

• Diberikan Warna pada kode di atas, menunjukan banyaknya baris disini ada baris silahkan cek pada tabel.
  
• Tag <th> (tabel header) penggati tag <td> biasanya untuk menebalkan bagian Umum Suatu Tabel misalnya, No, Keterangan, Jumlah dan lainnya.
  
• Contoh untuk Rowspan adalah bagian"Production dan Sales" sedangkan untuk Colspan adalah bagian "Name and Code" dan "http://dunia-blogger.blogspot.com" untuk memahaminya silahkan perhatikan pada kodenya :)
  

Lebih Lanjut: http://www.htmlcodetutorial.com/tables/ silahkan pelajari lebih banyak di sana.

Read Post | komentar

Kode Tanda Kutip eh Quote

15 Nov 2008

Tanda kutip atau Quote dalam bahasa inggris, dan kalau dalam komputer nih yang di dalam kurung ( " ), eh ternyata di ada juga lho di blog. bukan apa apa, hanya kode <blockquote> dan diakhiri dengan kode </blockquote> kode itu digunakan untuk menandai sebuah catatan penting, misalnya sebuah kata mutiara dan lainnya. dan pada keadaan standarnya, Quote akan menjadikan paragraf menjorong ke dalam, maksudnya kayak menggunakan tab gitu deh kalo di MS WORD.

Berikut Contoh Quote:
untuk membuat Tanda kutip atau quote Cukup mudah, silahkan gunakan kode <blockquote> dan akhiri dengan </blockquote>

Misalnya:
<blockquote>Contoh Quote: Kegagalan adalah sebuah langkah awal menuju suatu keberhasilan, dan jadikanlah kegagalan anda menjadi pelajaran bagi anda untuk tidak mengulanginya dikemudian hari.</blockquote>

Untuk menampilkan Quote pada saat pengaturan /posting, silahkan gunakan tombol tanda kutip di menu atas biasanya di samping Bullet List.

hasilnya seperti gambar di bawah:
di sana terlihat agak menjorok ke kanan. nah sekarang pembahsan utamanya adalah memodifikasi kode Quote supaya tampilannya lebih cantik dan bagus tentunya.

Modifikasi Quote

Untuk memodifikasinya, cukup mudah yaitu dengan sedikit otak-atik kode CSS di blog atau situs kita. Caranya seperti ini:

1. Login ke blogger dan Klik Layout
2. Pilih Edit HTML dan gak perlu klik Expand Widget Template.
3. Cari kode blockquote { dan kalau sudah ada silahkan hapus dan ganti dengan kode dibawah: jika belum sada silahkan pasang kode di bawah.
   

Tambahkan Kode berikut: ini: dan pasang diatas kode ]]></b:skin>

blockquote {
margin: 10px 0px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #00ff00r;
background: #fcffd4;
border: 2px solid #C2CD43;
}

Itu akan memberikan kotak pada Quote dan hasilnya seperti ini:

nah itu contohnya Itu standar, mungkin teman teman ingin dengan hal baru misalnya Gambar pada bcakgrounnya cukup memodifikasinya pada bagian background: #fcffd4;

Jarak padding contohnya yang ditunjukan oleh warna merah sedangkan margin jarak text dengan batas /border. garis biru. Color untuk warna tex Quote, line-height untuk besarnya garis tepi atau border, silahkan atur besarnya. Border untuk menampilkan garis tepinya. bisa diatur berupa garis titik-titik atau minus.

Contoh ke dua menggunakan background gambar:

blockquote { margin: 10px 10px 10px 10px; padding: 5px 10px 5px 50px; color: #86AA3F; background: url(http://i261.photobucket.com/albums/ii65/adephotobucket/tanda_kutip.png)top left no-repeat; }

Berikut ini haslinya:

Silahkan Padukan dengan Kreasi anda, dan ganti dengan background yang anda inginkan. cukup mengganti kode di atas.

Read Post | komentar

Membuat Kode Artikel Blog

12 Nov 2008

Agak lama saya baru memposting artikel terbaru, karena sedikit sibuk dan males baerbaur dengan kondisi badan yang kurang fit. Sekarang saya hanya sedikit tips untuk membuat kode Artikel Blog Kita. Ini bermanfaat bagi pengunjung/visitor blog kita yang mungkin ingin copy paste artikel.

Silahkan Masuk ke Edit HTML, kemudian Cari kode ini:

<data:post.body/>

Kemudian Hapus atau modifikasi dan menjadi Seperti ini:

<data:post.body/><br/><b>Ingin Memasang artikel ini ?: Silahkan Copy kode di bawah:</b><br/><center><textarea cols='45' rows='5'><data:post.body/></textarea></center>

Nanti Hasilnya Kurang Lebih Seperti ini:

 

Penjelasan: kode <br/> untuk memberiakan jarak  kosong satu baris, dan <center> Agar Kotak kotaknya berada ditengah, dan  <textarea cols='45' rows='5'> Untuk Menampilkan kode Artikel kita, dengan Colom/lebar sebesar 45 dan baris atau tinggi sebesar 5. Silahkan atur besarnya sesuaikan dengan blog masing-masing.

Note:Mungkin perlu diperhatikan kalau blog anda menggunakan Readmore /ringkasan artikel, besar kemungkinan kodenya ada 2. dan biasanya berada paling atas. Selamat Mencoba.

Read Post | komentar

Menambahkan Bacground Pada Link

30 Okt 2008

Salah satu untuk mempercantik Blog adalah melalui link yang di postingan kita, artikel sebelumnya membahas bagaimana membuat link menjadi besar/kecil saat kursor diarahkan. kali ini sedikit bermain-main dengan kode CSS untuk menambahkan background gambar pada Link.

Langkahnya Mudah kok, Login ke Blogger, dan menuju EditHTML.

Silahkan Cari Kode di bawah ini: /* masing-masing kode */

1. Kode a {

2. Kode a:hover {

3. Kode a:visited {

Berikut kode yang diperlukan untuk menambahkan background pada link. Caranya dengan menambahkan kode di bawah ini dan letakan kode di bawah kode a { , a:hover { dan a:visited {

1. Gambar /Background di samping Kiri Link

background: url(http://pic.photobucket.com/general/right-arrow-off.gif) no-repeat;
padding-left: 20px;

2. Gambar/background berada tepat pada link.
background: url(http://i261.photobucket.com/albums/ii65/adephotobucket/h1_bg.jpg) repeat-x; 

Berikut Contoh Hasilnya. kiri untuk langkah 1 dan kanan untuk langkah ke 2. Da akan ada background gambar pada link. sesuai langkah yang dilakukan.

Kode a { adalah saat link dalam keadaan normal. sedangkan kode a: hover { adalah kode saat kursor diarahkan pada link. sedangkan kode a:visited { adalah kode untuk link yang sudah di klik/dikunjungi, berikan gambar berbeda untuk masing masing kode tadi supaya tampilan lebih bagus. atur sesuai kebutuhan dan sesuaikan dengan link yang ada, misalnya .post a { maka animasinya hanya pada postingan saja, lainnya misalnya sidebar a { dan lainnya.

Selamat Mencoba.

Read Post | komentar

Dropdown Pada Label Postingan

18 Sep 2008

Habis Keliling ke Blognya Kang Rohman,  yah Sekedar nyari inspirasi Buat nyari yang baru. Nah Saya Mampir deh di Blognya dan Baca Artikel yang Ini [Membuat Sidebar dalam Kotak-kotak terpisah] sekalian Komentar dan bartanya di Sana ada yang menarik, Dropdown Menu untuk Archive dan Label Ternyata Penuh /full sesuai ukuran Sidebar :d sedangkan di DB ngga..! Makasih kan Udah Memberikan Ilmunya ke saya, dan melalui shoutbox juga :D OK Sekian Basa Basinya yah... Setelah Mampir dan Berhasil Eh Saya Dapet Ide Baru Nih akhirnya... Ini Dia Idenya... :)
Coba Lihat Gambar di Atas atau cek Dunia blogger pasti Label yang Biasanya berada di Footer Postingan Posisinya Kesamping kan Sekarang jadi Drop Down :D mau juga...? nih tutorialnya:
Bermodal Ilmu dari Kang Rohman mengenai Label menjadi Dropdown /Dropdown pada Label dan apa lah istilahnya:d saya mencoba mengaplikasikannya pada Label Postingan, /* itu tuh yang suka ada di bawah Postingan kita */

Sekalian Kang Saya Numpang Pasang tutorialnya di sini:d bagi yang sudah tahu, langsung aja yah ke TKP no 2 :s

1] Dropdown pada Widget Label,...

Kalau yangini sekedar menambah basic/dasar aja, toh udah banyak yang bisa kok :d saya aja yang ketinggalan :d
Silahkan Login ke Blogger, Pilih LayOut, dan EditHTML dan Klik Expand Widget Template selanjutnya Silahkan Cari Kode Ini:

<ul>
   <b:loop values='data:labels' var='label'>
     <li>
       <b:if cond='data:blog.url == data:label.url'>
         <data:label.name/>
       <b:else/>
         <a expr:href='data:label.url'><data:label.name/></a>
       </b:if>
       (<data:label.count/>)
     </li>
   </b:loop>
   </ul>

Tahap berikutnya Silahkan Ganti Kode di Atas dengan kode ini:

<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>

<option>Cari Berdasarkan Kategori...</option>
   <b:loop values='data:labels' var='label'>
      <option expr:value='data:label.url'><data:label.name/>
         (<data:label.count/>)
      </option>
   </b:loop>
</select>

Jika sudah silahkan Simpan dan lihat hasilnya. dan Nantinya Label yang biasanya Tampilannya Ke Bawah, Menjadi Drop down, dan Tempat yang dibutuhkan Sedikit, dan mempercpat Loading blog kita :D

2] Dropdown Pada Label Postingan

Nah Ini yang ditunggu-tunggu kan :d Dunia-Blogger berusaha menampilkan Artikel yang Belum ada Sebelumnnya :D Oh ia Promosi Artikel yang tentang Label juga [Modifikasi label Postingan] yah mudah-mudahan aja bermanfaat:D

Silahkan Cari Kode yang Seperti Ini: /*yang tebal  yah :d */
<p class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </p>

Supaya Lebih Gampang, Silahkan Cari kode ini aja  <data:postLabelsLabel/> dan cocokan sama gak ma yang atas :D
Ganti kode yang Miring Warna Biru dengan Kode di Bawah ini:

<select onchange='location=this.options[this.selectedIndex].value;'>
<option value='http://www.duniague.net/2008/09/dropdown-pada-label-postingan.html'>Label Post [X]</option>
          <b:loop values='data:post.labels' var='label'>
      <option expr:value='data:label.url'><data:label.name/>
      </option>
          </b:loop>
</select>

Silahkan Simpan Hasil Setingan Kita dan Eng Ing Eng...:d jadi deh... Nah Biasanya di Sampingnya Ada Bacaan Label/Labels, Jika Ingin Menggantinya dengan Tulisan "Artikel ini Masuk Kedalam ketegori" Misalnya :D Silahkan Hapus Kode <data:postLabelsLabel/> dengan Tulisan di atas:d Selamat mencoba dan Semoga Berhasil :)

Sayang jika ILMU hanya Sekedar COPY, PASTE, Kembangkanlah sesuatu hal yang bermanfaat dan menjadikan sesuatu hal yang Baru :) Salam Blogger, Berinspirasi, Bereksperimen, Cari Hal Baru Bersama Dunia Blogger

Read Post | komentar

Cara Mudah Pasang Kode HTML di Blogger

28 Agu 2008

Masih Susah buat Pasang Kode HTML di Posting Blogger....?, atau belum tau,?  mau baca yang ini  [Pasang Kode HTML di Blogger], Upz itu udah Basi kayaknya :d soalnya Ribet mesti ubah kode segala... :D atau mondar mandir buka Konverter.. Akhirnya Blogger memperbaiki Bug/kesalahan sistemnya, Ini terjadi Saat kita ingin Menuliskan kode HTML, ternyata malah gak tampil kodenya.....!! Jika Sebelumnya harus merubah dulu kodenya seperti pada artikel yang lalu [Pasang Kode HTML di Blogger] yang kita mesti bolak balik atau ngerubah dulu kodenya... huz... cape deh...:D Mau tau cara yang paling mudah dan pasti semua teman teman bisa lho....? :D
Ya dah Gak usah panjang lebar yah... Sekarang Login di Blogger....! Upz... Jangan Salah klik yah.... Pastikan Login di Blogger in Draf [http://draft.blogger.com] jangan di [www.blogger.com] karena hanya bisa di lakukan di Blogger in Draft... :D

Jika Sudah masuk di  Blogger in Draft, silahkan Posting/Edit Artikel yang akan di tambahkan kode HTML... Pastikan Melakukan Pengeditan di Mode [ Compose ] bukan [Edit HTML]

Misalnya kodenya Seperti ini: <head></head>
Nah Jika Sebelumnya untuk menampilkan kode iti mesti seperti ini jadinya: &lt;head&gt;&lt;/head&gt;

Sekarang gak usah seperti itu... Cukup ketikan Kodenya....
kemudian Klik [Post Options] yang kotak biru atas yah... posisinya berada di atas [Publish Post] atau biar lebih jelas silahkan lihat gambar di bawah ini:

Selanjutnya akan tampil seperti Gambar di atas..... Jika Sudah Silahkan Klik [Show HTML literally]
Nah... Selesai deh... jadi gak Usah Ribet lagi deh pasang kode HTML di Postingan Blog... Gimana......? Mudah kan.... :)

Read Post | komentar

Widget dengan Tema Ramadhan

26 Agu 2008

Marhaban ya Ramadhan...  kalo mau lihat videonya silahkan kli di sini http://www.youtube.com/watch?v=m5IWcbqgvBk Kita patut Mensyukuri akan datangnya Bulan yang Penuh Berkah dan Ampunan ini, dan Semoga kita Semua mendapatkan Ridho-Nya.... Kali ini dalam rangka Bulan Suci Ramadhan, Alangkah baiknya kita memasang Widget dengan Thema Ramadhan, Saya dapat dari http://myquran.org, yang mana dengan ini memudahkan kita untuk mengatahui Jadwal Sholat dan Imsak per hari...
Berikut Contoh Kode untuk wilayah Jakarta dan Sekitarnya:
<script language="JavaScript" src="http://myquran.org/jsholat/?kode=jakarta&amp;type=js"></script>
Seperti biasa masuk ke bagian Layout/tataletak dan pilih Edit HTML, dan pasang kode di atas... Setelah kode <head>

jika Sudah
Silahkan pasang kode Ini dengan menambahkan Page Element [HTML/JavaScript] dan pasang deh kode ini:

<SCRIPT language="Javascript">
<!--
document.write("Jadwal Sholat Kota : <strong>",kota,"</strong> dan sekitarnya. <br>");
document.write("<marquee onmouseover=\"this.stop()\" onmouseout=\"this.start()\" title=\"Jadwal Sholat @ myQuran.org\">");
document.write(namahari,", ",ntanggal," ",nnamabulan," ",ntahun," / ",htanggal," ",hnamabulan," ",htahun," - ");
document.write("<b>Shubuh</b> ",sholat[0]," <b>Dzuhur</b> ",sholat[1]," <b>Ashar</b> ",sholat[2]," <b>Maghrib</b> ",sholat[3]," <b>Isya'</b> ",sholat[4]);
document.write("</marquee>");
// -->
</SCRIPT>

Hasilnya silahkan lihat di sini http://myquran.org/jsholat/test.html

Ribet yah...? :D Tenang masih ada kok yang Mudah Caranya Cukup Pasang kode ini aja... silahkan pasang kode ini:
<img src="http://myquran.org/jsholat/index.php?kode=jakarta&type=png"/> dan nanti hasilnya seperti di bawah ini:


Caranya Cukup Pasang Kode di Atas dan Tempatkan di Sidbar dengan Menambahkan Page Elemen/Add Gadget dan pilih yang tipe HTML/JavaScript 
Jangan lupa ganti kode http://myquran.org/jsholat/index.php?kode=jakarta&type=png Sesuai Kota dan Warna yang di inginkan, Kode bisa di dapatkan di sini http://myquran.org/jsholat/?type=kota
Semoga Bermanfaat dan Selamat Menunaikan Ibadah Puasa, Semoga Mendapatkan Ampunan dan Ridho-Nya.. Amin

Read Post | komentar

Percantik Blog dengan Marquee

16 Agu 2008

Bagi yang Sering barmain dengan kode HTML, sudah tidak asing lagih dengan kata Marquee, yang meupakan sebuah kode untuk menampilkan text atau gambar bergerak/berjalan secara vertikal maupun Horizontal, kodenya yaitu <marquee>dan selalu di akhiri dengan </marquee> ini bisa di gunakan untuk mempercantik blog kita lho....  biasanya Ucapan Selamat Datang, atau Berita singkat, atau lainnya ada juga yang digunakan buat Link teman- teman Blogger,... bisa juga lho.. di pasang di Testimorial Friendster...
Untuk membuat Marquee, berikut contohnya: selalu di awali dengan kode <marquee> dan diakhiri dengan kode </marquee> dan memiliki beberapa perintah dan untuk menempatkan perintahnya mesti di dalam kode <marquee> berikut contohnya:

<marquee onmouseout="this.start()"direction="up" align="center" scrolldelay="500" height="100px"onmouseover="this.stop()" width="100%">Silahkan Ganti dengan kode text atau gambar yang ingin di tampilkan</marquee>

Kode yang merah merupakan kode marquee sedangkan yang miring merupakan perintah tambahan.. "pastikan untuk menambahkan perintah selalu di SPASI " berikut pnjelasannya:

onmouseout="this.start()" Text/marquee akan bergerak saat mouse berada di luar kode marquee
direction="up" merupakan arah marquee untuk bergerak ke atas, silahkan ganti UP dengan bottom right atau left 
align="center" untuk mengatur perataan jika pada text kalau untuk gambar gak perlu di pasang :d
scrolldelay="500" untuk memperlambat kecepatannya semakin besar semakin lambat.... selain itu ada juga kebalikannya yaitu scrollamount="2" semakin besar semaikin cepat.... silahkan ganti angkanya sesuai dengan selera masing-masing.
height="100px" dan width="100%" height untuk menentukan tingginya, dan width untuk lebarnya silahkan atur nilannya dan besarnya bisa dalam pixel (px) atau persen (%)

onmouseover="this.stop()" jika mouse berada di atas kode/marquee maka secara otomatis akan berhenti.... dan mulai lagi jika mouse sudah keluar dari area :)



Selain itu masih ada kode tambahan yaitu: Behavior, Bgcolor, HSPACE dan VSPACE.


 Behavior tipe pergerakan sutu marquee, dan memiliki 3 value yaitu Sroll, Slide dan Alternate. <marquee behaviour="value">....<marquee>
Contoh:
Contoh tipe Scroll Teks atau gambar akan berjalan terus menerus satu arah.... sesuai Direction nya Contoh tipe SlideTeks atau gambar berjalan sekali kemudian berhenti. Contoh tipe AlternateIni alternatif, teks/gambar akan bergerak ke kanan terus balik lagi ke kiri /ke atas terus balik lagi ke bawah dan sebaliknya.

Loop, untuk menentukan banyaknya putaran /* di internet explorer gak bisa */ silahkan tambahkan kode loop="2" misalnya untuk mengulang sebanyak 2 kali. lebih jelas bisa di lihat di sini

Bgcolor, untuk menentukan Background marquee... kodenya bgcolor="kodewarna" kode warna bisa berupa Nama warna tapi dalam bhs. inggris lho.... :D misalnnya Green, Lime, Red, blue dan lainnya atau dengan kode #ff00ff, #ff0000 dan lainnya....
<MARQUEE BGCOLOR="YELLOW">Contoh menggunakan Bgcolor warna kuning</MARQUEE>
Contoh menggunakan Bgcolor warna kuning 
HSpce dan VSpace untuk menentukan jarak horizontal maupun vertikal jika kode marquee di letakan di tengah text.... untuk contohnya bisa di lihat di sini

Demikian Tutorialnya semoga Bermanfaat, materi referensi LOE KEREN
http://www.htmlcodetutorial.com/_MARQUEE.htmlPerhatian...!!! jika di firfox gak jalan silahkan coba di Internet Explorer..

Read Post | komentar

Drop Down Menu Ala Widget Subscribe

12 Agu 2008

Akhirnya Saya berhasil juga Ide saya untuk membuat menu ala [Widget Subscribe] Sebenanya sih dah ada 1 mingguan ide ini tapi belum ketemu ketemu pas Googling dan Hari ini [Senin 11 Agustus 2008] Ba'da Magrib saya sempat Chat Ma Mas [ Umar Khaliyf(fj_nine) ]  blognya di sini http://www.analogikan.web.id/ Sebelumnya sih Chat biasa, biasa lah sesama Blogger, gara garanya Blognya beliau gak bisa di buka eh taunya salah di Status YM nya mas Umar, yaitu kurang www pantesan aja gak berhasil-berhasil.... Ya udah deh Curhatnya disitu dulu yah... nah pas kemudain saya bertanya aja ke mas Umar tentang IDE yah lumayan lah kayaknya belum ada yang gitu he he... kalo Css Drop Down Menu ada di http://cssmenumaker.com/ dan itu biasa.. aja kayaknya he he yah nyari yang beda ja gitu.....


Nah saya bertanya tuh ke mas Umar dan beliau baik loh mau nyariin buat saya he he dan beliau juga sih udah posting di http://www.analogikan.web.id/2008/08/buat-menu-chiklet-menjadi-dropdown.html, tapi agak beda sih ma saya,  saya mah mang dari awal mau buat menu di blog saya kayak gitu.....,
Brikut Inspirasi Awal saya he he, maaf yah :

 

Di situ Drop Downnya Berupa Animasi dan Gambar Bukan Text Seperti CSS biasa makanya itu unik buat di jadikan menu... berikut Tutornya yah... silahkan yang berminat atau yang sekedar membaca silahkan saya sambut dengan senyuman


Untuk membuatnya silahkan lihat kode di bawah ini:

<script type="text/javascript">

function showDiv(objectID) {

var theElementStyle = document.getElementById(objectID);

if(theElementStyle.style.display == "block"){

theElementStyle.style.display = "none";

}else{

theElementStyle.style.display = "block";}

}

</script>

<style type="text/css">

#TW-feed, #TW-feed ul {list-style:none; margin:0px; padding:0px}

#TW-feed li ul {display:none;position:absolute;background-color:#ffffff;padding:3px;border:1px solid #cccccc;}

#TW-feed li {font-weight:bold; color:#EC8132;}

#TW-feed ul li {padding-bottom:3px;}

</style>

<div onmouseover="showDiv('TW-Pop');return false;" onmouseout="showDiv('TW-Pop');return false;">

<ul id="TW-feed">

<li>Menu

<ul id="TW-Pop">

<li><a href="http://www.clixsense.com/?2360995"><img style="border: 1px solid ; width: 100px; height: 20px;" src="http://www.clixsense.com/Ad/clixsense5.gif"/></a>

</li>

<li><a href="http://bux.to/?r=buxtoade"><img style="border: 1px solid ; width: 100px; height: 20px;" src="http://bux.to/images/top.png"/></a>

</li>

<li><a href="http://www.kios-pulsa.com/?id=daftar" target="new" title="Pulsa murah, dan server Stabil">Kios Pulsa</a>

</li>

<li><a href="http://kumpulblogger.com/signup.php?refid=8486" target="new" title="Dibayar Rupiah per Klik">Kumpul Blogger</a>

</li>

<li><a style="font:9px Verdana, Arial, Helvetica, sans-serif; width:100px;" href=" http://www.indoptc.com/?r=contoh">INDOPTC</a></li>

</ul></li></ul></div>

Silahkan Copy Paste Kode Tersebut dengan menambahkannya Pada Widget HTML kita, dan beberapa hal yang perlu/mungkin mau di ganti:
#ffffff : adalah warna Bacground Drop Drown
border:1px merupakan Tebal Border Menu dan Silahkan Ganti Warnanya yang ini #cccccc dan sesuaikan dengan blog kita,
Ganti Url yang Garis bawah warna Biru sesuai dengan Link tujuan.

Jika ingin menambahkan Menu Silahkan Copy Paste Kode terakhir yang ada backgrounya warna biru muda.....dan tempatkan di bawah kode tersebut..... 

Seandanya Menunya gak menggunakan Gambar Silahkan Hapus dari Tag  <a href= sampai dengan </a> dan Ganti dengan Teks...

 Ini Contoh Hasilnya di [dunia-Blogger] ketika Cursor di Arahkan Ke Logo Blogger.

Selamat Mencoba, Semoga Berhasil, Ini Juga Bisa di Gunakan Untuk Menampilkan Link Teman, Iklan, dan Lainnya sehingga Ruangan Blog kita semakin luas,  Silahkan lihat di blog ini di bagian Iklan... kurang lebih seperti itu, silahkan ber-experiment dengan menggunakan kode blink, marquee, dan lainnya semoga bermanfaat..!!

Read Post | komentar

Blogumus: Flash Label Could untuk Blogger

6 Agu 2008

Duh ada yan Baru nih... kemarin sempat jalan jalan ke blog Orang :d nah eh ketemu deh Widget untuk Artikel favorite, di situ tertulis Widget By BloggerBuster... penasaran ya Mampir deh di sana... eh taunya Ada yang Baru tuh.... Label Could Menggunakan Flash... asik kan...! Nah Saya Coba deh dan Berhasil.... Berikut Saya berikan tutorialnya untuk memudahkan teman teman semua....

Nah cara Kerjannya ternyata menggunakan kombinasi Flash, dan Java Script sehingga dengan mudah kita bisa mengganti Lebar, Tinggi, Background dan Ukuran Huruf....

Cara Memasangnya Silahkan Cari Kode Berikut ini <b:section class='sidebar' id='sidebar' preferred='yes'> 
dan silahkan Copy Paste kode di bawah ini dan letakan Persis di bawah kode <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label3' locked='false' title='flash Label Could' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/><div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div><script type='text/javascript'>var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");// uncomment next line to enable transparency//so.addParam("wmode", "transparent");so.addVariable("tcolor", "0x333333");so.addVariable("mode", "tags");so.addVariable("distr", "true");so.addVariable("tspeed", "100");so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");so.addParam("allowScriptAccess", "always");so.write("flashcontent");</script><b:include name='quickedit'/></div></b:includable></b:widget>

Nah... Berhasil deh, sekarang Label kita bisa ada Animasinya.., Perlu di ingat juga yah.. dengan mengunakan flash tentunya kita mesti memiliki Flash player, dan membuat Blog kita tersa berat jadinya... So mending pikir pikir dulu yah... sesuai kepentingan kita, udah baca kan yang ini Aksesoris blog dengan Widget atau Gadget 

Pengaturan Ukuran, Warna:
Tinggi, dan Lebar Could: silahkan cari kode berikut ini:

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

Silahkan Ganti 240 untuk Lebar dan 300 untuk Tinggi Could silahkan sesuaikan dengan Blog masing-masing,

Warna background: kalo warna background silahkan ganti kide #ffffff di atas dengan warna  yang sesuai dengan background Blog kita....

Berikutnya Perhatikan kode Berikut ini:

so.addVariable("tcolor", "0x333333");

Silahkan Ganti angka yang warna merah untuk efek Pada warna Text..... kode warna dalam hexa misalnya #00FF00 untuk warna hijau/lime dan cukup tambahkan 00FF00 ke kode di atas..

Selanjutnya Atur Ukuran Huruf pada kode di bawah ini:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Ganti angka 12 dengan Ukuran yang di inginkan.....

Selesai semua Tips dan Trik [Dunia blogger] dan ucapan terimakasih banyak buat Seorang Blogger Cantik yang Handal [Amanda on http://www.bloggerbuster.com/ ] dan pada saat mampir di sana ternayata teman saya [ENHAL] sudah berkomentar di BlogBuster dan pas di cek ke blognya udah pasang Flash Could :D dan pagi pas saya cek Shoutbox eh dah ada juga yang dah buat tutorialnya http://ahn-bidikcom.blogspot.com/

Read Post | komentar

Favorite Site

3 Agu 2008

Favorite Site/Blog (Bookmarks)

Tutorial kali ini adalah berupa Java Script yang dengan mudah pengunjung menjadikan sebagai blog/situs favorite di Browser Seperti [Internet Explorer atu Fire fox... sedikit tips dari saya mudah mudahan membantu dan menjadikan blog teman teman semua menjadi blog favorite... he he..... dangen menjadikan blog favorite di Browser otomatis pengunjung pasti tau soalnya langsung ada link ke blog kita di Browser.. berbeda dengan yang Online.. kita harus Log-In dulu untuk mengetahui blog/web favorite kita sebelumnya ada juga artikel yang ini [Efektifitas Internetan]...meski kurang nyambung ama isinya he he.. udah deh basa basinya kita lanjut aja yah ke tutorialnya.....
nah caranya liat deh kode di bawah ini,,, tapi jangan lama lama,,, cepetan copy paste ... he he

<script type="text/javascript">

function favorite () {if ( navigator.appName != 'MicrosoftInternet Explorer' ){ window.sidebar.addPanel('Dunia Blogger ','http://dunia-blogger.blogspot.com',''); }else {window.external.AddFavorite('http://dunia-blogger.blogspot.com','DuniaBlogger'); } }

</script>

Nah... abis itu pasang Masuk ke Edit layout trus pilih [Edit HTML] jangan lupa backup yah sebelum di coba he he.....nah pasng Code tersebut di antara tag <head> </head> biar lebih gampang Paste/pasang tepat di bawah kode <head>

Kalo udah...di pasang trus klik Save.Simpan.... Nah itu baru tahap satu lho... masih ada tahap berikutnya... he he selanjutnya pasang link untuk meload script tadi caranya

<a href="javascript:favorite()" id="favorite">
Klik yah....!!!
</a>

Nah hasilnya bisa di coba [ Klik yah....!!! ] kalo di klik nanti muncul
Seperti gambar di bawah...:

Nah.. nantinya bila kita jalanin Frefox/IE kita tinggal pilih [Bookmarks/Favorite] terus pilih deh blog/web favorite kita yang udah masuk daftar favorite kita....lebih cepat kan gakusah ngetik http://dunia-blogger.blogspot.com lagi misalnya....!!!

selamat mencoba .. jika Berhasil jika masih gagal[Masih ada waktu... he he silahkan tanyakan....]
.

Read Post | komentar

Pasang Code HTML di Blogger

28 Jul 2008

Waktu kita Posting di Blog, biasanya kita perlu menuliskan kode HTML apalagi kalau blog kita tutorial blog atau pun HTML nah pasti pasti harus sering sering donk nampilin codenya....

Ada masalah jika kita Posting di Blogger... jika kita ketik <marquee> nantinya malah gak tampil, beda yah ama ProntPage/Dreamwever misalnya yang otomatis bisa tampil kayak gitu.... nah solusinya gimana donk.... tenag aja... gampang kok... yah sebenarnya sih saya juga sempat males kalo mau nampilin kode harus rubah ini rubah itu... referensi di ambil waktu Surfing di blognya mas Mizwar [Kursus Blogger] klik kanan trus open link in new tab silahkan berkunjung ke sana, nah berikut tutorialnya....

Berhubung sudah jelas di blognya Maz Mizwar Berikut saya tampilkan aja dech gambar codenya aja yach....

Nah Artinya kalau mau menampilkan Code HTML tinggal ganti aja pakek kolom yang paling kanan.... ok nah... Ribet emang kalo mau buat code harus ngapalin Kodenya... nah gimana kalo lupa.... pusingkan...

Nih saya kasih solusi

[1] Menggunakan [Text Area] atau bisa di liat caranya di
http://www.duniague.net/2008/07/membuat-kode-tukeran-link.html

misalnya seperti ini:

<textarea rows="6" cols="15" name="code"> <a href="http://dunia-blogger.blogspot.com" target="_blank"><img border="0" alt="Photobucket" src="http://i261.photobucket.com/albums/ii65/adephotobucket/banner.png"/></a> </textarea>

dan hasilnya seperti di bawah:

<a href="http://dunia-blogger.blogspot.com" target="_blank"><img border="0" alt="Photobucket" src="http://i261.photobucket.com/albums/ii65/adephotobucket/banner.png"/></a>

Silahkan Ganti yang warna merah dengan Code yang Akan di Tampilkan.... Atur juga Cols dan Rows nya sesuai selera Nah kalo udah tinggal masukan di Postingan tapi Mode [Edit HTML] bukan [Compose] ingat yah codenya di Copy di mode {Edit HTML]

[2] Gunakan Fasilitas Converter
Nah kalo yang ini paling mudah di jamin pada bisa dech.... silahkan kunjungi halaman ini http://centricle.com/tools/html-entities/ terus COPY PASTE deh di Postingan Kita

Semoga Berhasil..... nah ada yang lupa nie.... kalau punya Dreamwever/ProntPage bisa kok digunain......

Read Post | komentar

Membuat Kode Tukeran Link

27 Jul 2008

Nah untuk para maniak Blogger, untuk mendapatkan traffik ke Blog katanya kita harus punya banyak Link Back..... coba dech liat di Google trus isi link: link:http://www.duniague.net/ nah nanti muncul deh situs mana aja yang menampilkan link ke http://www.duniague.net/ bisa di coba untuk blognya....


Semakin banyak link ke blog kita semakin bagus rangkingnya di Google he he blog ini aja masih kosong.... belum ada di google he he.... Artikel kali ini kita membuat code [Tukeran link] yang biasanya di gunakan untuk menambah link bac ke kita... caranya cukup Simple kita cukup memanpaatkan Code HTML [Text Area] dan [Link] di dalamnya....



Silahkan Copy Paste Code di bawah ini:

<textarea rows="6" cols="15" name="code"> <a href="http://dunia-blogger.blogspot.com" target="_blank"><img border="0" alt="Photobucket" src="http://i261.photobucket.com/albums/ii65/adephotobucket/banner.png"/></a> </textarea>

Silahkan ganti nilai Rows dan Cols nah ganti aja nilanya sesuai selera masing masing.. Jangan lupa Ganti Juga yang waran biru dengan Url Blog dan Url Gambar yang mau di tampilkan,.... nah hasilnya yang kotak di bawah:

<a href="http://dunia-blogger.blogspot.com" target="_blank"><img border="1" alt="Dunia blogger" src="http://i261.photobucket.com/albums/ii65/adephotobucket/banner.png"/></a>

Nah Jika Code di Atas di Copy Paste di blog Maka di hasilnya seperti di bawah

Nah cukup dech Tutorialnya di sini aja dulu... tar nambah lagi, Upz jangan lupa mencobanya yach... ok deh Hepy Blogging.

Read Post | komentar