Tampilkan postingan dengan label Sekilas HTML. Tampilkan semua postingan
Tampilkan postingan dengan label Sekilas HTML. Tampilkan semua postingan

Minggu, 12 Juni 2011

Cara Membuat Teks Berjalan

Post under , di 03.19 Diposting oleh Yopi
Assalamualaikum Selamat datang di Yopi Blog

pernah melihat tulisan berjalan seperti ini ? Pengen tahu bagaimana cara membuat tulisan berjalan seperti ini ? cara sangat-sangat gampang, kode utama yang di pakai untuk membuat tulisan berjalan adalah marquee contoh : <marquee>letakan tulisan anda disini</marquee> maka tulisan berjalan anda sudah jadi.

letakan tulisan anda disini

Tapi kok lebih cepat dari tulisan yang pertama ? Nah untuk mengatur kecepatan gerakan tulisan anda cukup menambahkan skrip scrollamount dan isi nilai nya dari satu sampai berapapun, semakin besar nilainya maka akan semakin lambat gerakannya


<marquee scrollamount="3">letakan tulisan anda disini</marquee>

maka gerakannya jadi melambat

letakan tulisan anda disini

Nah bagaimana jika kita ingin merubah arah gerakannya dari kanan ke kiri menjadi kiri ke kanan ? kita cukup menambahkan kode direction dan isi nilai nya dengan right.

<marquee direction="right">letakan tulisan anda disini</marquee>

letakan tulisan anda disini

Ganti dengan up jika ingin dari bawah ke atas atauy down jika sebaliknya

Kemudian jika anda ingin teks berhenti ketika cursor di dekatkan ke tulisan dan berjalan kembali jika cursor di jauhkan  maka masukan kode ini ke dalam marquee atau teks berjalan yang telah kita buat

onmouseover="this.stop()" onmouseout="this.start()"

<marquee direction="right" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3">letakan tulisan anda disini</marquee>


letakan tulisan anda disini

Semoga postingan ini menjadi tambahan pengetahuan kita tentang kode HTML. Wassalamualaikum.
read more...
0 komentar

Rabu, 08 Juni 2011

Cara Membuat Link Berkedip

Post under , , di 21.31 Diposting oleh Yopi
Assalamualaikum salam sejahtera, mungkin diantara sobat blogger pernah yang melihat alamt link berkedip seperti ini alamat link mungkin ada yang masih bertanya bagaimana cara membuat nya berkedip ?

Cara membuatnya sangat sederhana 
<blink>alamat link</blink>

nah mudah bukan ? semoga bermanfaat wassalam
read more...
0 komentar

Jumat, 20 Mei 2011

Recent Post Dengan Thumbnail Made In Abu Farhan

Post under , , di 01.03 Diposting oleh Yopi
Sebenarnya Blogger sudah menyediakan widget recent post dengan thumbnail bagi sobat blogger yang ingin menampilkan tulisan terbarunya, namun Abu Farhan yang saya kenal sebagi seorang blogger yang jago  dalam hal koding-kodingan, menciptakan recent post dengan thumbnail buatannya sendiri, mau tau lebih jelas silahkan kunjungi blognya Abu Farhan.
read more...
0 komentar

Jumat, 28 Januari 2011

Membuat Halaman Berefek Scroll

Post under di 08.48 Diposting oleh Yopi
Halaman berefek scroll banyak sekali manfaatnya salah satunya adalah untuk menghemat area pada halaman blog kita jika kita ingin mebuat daftar isi postingan blog daftar tukar link atau daftar yang lainnyadan ternyata mebuatnya cukup mudah ini kode-kodenya.

<div style="overflow:auto; width:300px; height:150px; padding:10px; border:1px solid #eee">letakkan content anda di sini</div>

Maka tampilannya menjadi seperti ini

letakkan content anda di sini

dan ini untuk halam scroll yang sudah diisi dengan beberapa daftra link sobat hanya tinggal menambahkan link didalammnya contoh kode link

<ul><li><a href="http://link anda disini">Titel link</a></li></ul>


Nah bagaimana sobat sudah bisa semoga bermanfaat untuk menambah pengetahuan kita tentang kode-kode HTML, semoga bermanfaat.
read more...
2 komentar

Jumat, 12 November 2010

Membuat Text Area Dengan Tombol Copy

Post under , , di 10.09 Diposting oleh Yopi
Sudah lama gak nulis tentang tips dan trik blog kali ini saya akan mencoba membuat text arae teks are ini biasanya dipakai untuk menmpilkan kode-kode atau tulisan yang ingi kita tampilkan di postingan kelebihan dari text area ini adalah kita bisa menghemat space pada potingan apalagi jika kode-kode atau tulisan yang ingin kita tampilkan sangat banyak atau panjang, ini dia kode nya.

<div align="center">
<textarea cols="20" name="code" rows="6"> Ketikan disini kode-kode atau tulisan yang ingin sobat tampilkan contoh misalnya kode HTML atau kode image atau banner untuk saling bertukar link </textarea></div>

Umtuk atribut center sobat bisa mengganti dengan right agar posisi nya dikanan atau left agar posisinya di kiri sobat juga bisa menambahkan nilai cols="20" untuk menambah lebar text arae dan rows="6" untuk tinggi text area


Selain itu sobat bisa memodifikasi text area dengan tombol otomatis copy untuk kode-kodenya seperti ini


<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 144px; width: 300px;" wrap="VIRTUAL">Ketikan disini kode-kode atau tulisan yang ingin sobat tampilkan contoh misalnya kode HTML atau kode image atau banner untuk saling bertukar link </textarea></div>
</form>
</div>

Maka tampilannya jadi seperti ini


Nah selamat mencoba dan semoga berhasil wassalam
read more...
0 komentar

Selasa, 12 Oktober 2010

Daftar Kode Warna HTML

Post under di 17.53 Diposting oleh Yopi
Dalam mendesain sebuah web atau blog selain isi atau konten salah satu yang perlu diperhatikan adalah komposisi warna pada desain atau tampilan sebuah web atau blog seorang desainer web harus mampu memilih dan memadukan warna agar tampilan web menjadi menarik dan sedap dipandang, saya pernah berkunjung ke sebuah blog kalau dilihat dari segi pengunjung blog ini bisa dibilang banyak sekali pengunjungnya namun hal yang disayangkan yang membuat saya tidak betah berlama-lama melihat blog ini adalah tampilan warna yang terlalu mencolok dan desainan yang ramai disana-sini dan tampaknya kurang begitu rapih, sama seperti waktu saya awal-awal ngeblog apa saja yang membuat blog saya rame saya pasang.

Oke kembali ke pokok bahasan awal terkait warna saya tertarik sekali dengan detik.com karena komposisi warna yang saya rasa begitu menarik dan pas, saya coba googling mencari warna-warna yang sama dengan warna yang ada di situs detik.com susahnya minta ampun dan tidak ada yang pas apalagi sama, namun saya teringat dengan firebug, software bantuan untuk mengedit tampilan web atau blog dan jreeeennnggg.....akhirnya ketemu juga kode-kode warnanya.

#FFFBE6
#920092
#AC4AAC
#FFE269
#FBF3CB
#000099
#AA0000
#DD0000
#DDC688
#FF0000
#00BDFF
#006633
#FD7EC3
#6666FF
#CCCCFF

Sebenarnya intinya adalah kepandaian kita dalam memadukan warna yang cocok dan pas untuk mendesain sebuah blog atau web bisa saja kita memakai warna-warna yang tidak umum tapi jika kita pintar memadukan warna maka bukan tidak mungkin dari warna-warna yang jarang orang pakai pun bisa menjadi sebuah blog atau web yang enak dipandang. Hanya sekedar sharing semoga bermanfaat. wassalam.
read more...
0 komentar

Jumat, 24 September 2010

Membuat Kotak Pencarian Dengan Teks Otomatis menghilang

Post under , di 06.12 Diposting oleh Yopi
Salah satu widget pada blog yang dianggap penting adalah kotak pencarian, kotak pencarian adalah kotak tempat kita mencari suatu artikel atau postingan dengan cara mengetikan sebuah keyword artikel yang ingin kita cari baik itu dari label atau isi dari postingan.

Sebenarnya Blogger telah menyediakan widget kotak pencarian, namun saya lebih tertarik membuat kotak pencarian yang apabila kita mengklik pada kotaknya maka tulisan atau kata yang terdapat dalam kotak itu akan menghilang contohnya pada kotak pencarian diblog saya ini atau pada Kotak pencarian Custom Google yang artikelnya pernah saya tulis disini yang gambar latar Goglenya menghilang saat kita mengklik kotak pencariannya.

nah ini dia kodenya silahkan sobat copy dan tambahkan pada widget HTML/Java Script kemudian simpan di sidebar atau tambahkan pada navbar terserah sobat.



<form action='/search' id='searchform' method='get' style=' text-align:center;'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari disini&quot;;}' onfocus='if (this.value == &quot;Cari disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Cari disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<input type="submit" value="Submit" />
</form>

Maka hasilnya akan menjadi seperti ini






Oke semoga bermanfaat dan selamat mencoba.
read more...
1 komentar

Kamis, 19 Agustus 2010

Belajar Membuat Templet Sendiri

Post under di 05.32 Diposting oleh Yopi
Awalnya saya membaca cara membuat templet di mas Bahrul ulum tapi kenapa kok situs nya gak bisa dibuka lagi, daripada ilang ini ilmu mendingan saya taruh aja di postingan, biar gak hilang bagi temen-temen pemula yang ingin baca silahkan baca dan dipelajari sendiri ya... karena saya sendiri masih belajar dalam hal pembuatan templet daripada nanti salah ngasih tutornya, mending tanya saja sama para masternya. oh yaa... modal yang diperlukan untuk membuat templet ini tidak perlu software pembuat templet seperti Dreamwaver dan sebagainya cukup dengan notepad saja jangan lupa simpan atau save as file ini dengan nama dot html (.html) dan save as type nya all file, kemudian brows deh... dan silahkan dilihat hasilnya.



<html>

<head>

<title>Templet ku</title>
<style type="text/css">
/*------------------------------------------------
Theme Name: Template pertamaku
Theme URI: http://blogaku.com
Description: Ini Template pertama aku
created by <a href="http://blogaku.com/">blogaku</a> .
Author: Aku
Author URI: http://blogaku.com/
Date: 08 April 2010
----------------------------------------------- */

/*----Pengaturan layout blog mulai dari sini----*/

body {
width: 1000px
padding: 3px
background:#0ff;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#126A9B;
font-size:13px;
text-align: center;

}

#kotakblog {
width:1000px;
border:1px solid #000;
background:#0ff;
}
#topbar {
width:920px;
height:30px;
border:1px solid #000;
background:#aaa;
}
#header {
width:920px;
height:100px;
border:1px solid #000;
background: #c0c0c0;
}

#navigasi {
width:920px;
height:30px;
border:1px solid #000;background:#ccc;
}

#tembok-utama {
width:920px;
border:1px solid #000;background:#ddd;
}

#kotak-posting {
width:500px;
border:1px solid #000;background:#eee;
}

#isi-Posting {
width:400px;
border:1px solid #000;background:#000;
}

#ruang-Sidebar {
float: left
width:350px;
height:100px;
border:1px solid #000;background:#abc;
}

#ruang-Sidebar-top-besar {
width:303px;
border:1px solid #000;background:#ff0fff;
}

#ruang-Sidebar-kanan {
width:150px;
border:1px solid #000;background:#bbc;
float: left
}

#ruang-Sidebar-kiri {
width:150px;
border:1px solid #000;background:#ccd;
float: left
}

#footer-kaki {
width:920px;
height:50px;
border:1px solid #000;background:#00ffff;
}
/*---akhir CSS sampai disini yaaaa---*/
</style>
</head>

<body>
<div id="kotak blog">
<div id="topbar">isi topbar</div>
<div id="header"><img src="jilbab_41.jpg"></div>
<div id="navigasi">isi navigasi</div>
<div id="tembok-utama">

<div id="kotak posting">
<div id="isi-posting">isi postingan</div>
</div>

<div id="ruang-Sidebar">
<div id="ruang-Sidebar-top-besar">isi ruang-Sidebar-top-besar</div>
<div id="ruang-Sidebar-kanan">isi ruang-Sidebar-kanan</div>
<div id="ruang-Sidebar-kiri">isi ruang-Sidebar-kiri</div>
</div>
</div>
<div id="footer-kaki">isi footer-kaki</div>
</div>
</body>
</html>

special thanks buat mas Bahrul ulum.
read more...
0 komentar

Jumat, 23 April 2010

Cara membuat gambar yang mempunyai link

Post under , di 21.06 Diposting oleh Yopi
Hai sobat sudah lama nih gak membuat postingan coz bingung mau nulis apaan, cape kerja seharian mau nulis udah kecapean, tapi biarpun begitu kita harus tetap semangat menulis walaupun mungkin tulisan ini sudah sering di bahas, tapi gak ada salahnya jika kita bahas lagi.

Dulu sekali ketika awal-awal saya kenal dunia blog saya sempat tertarik dengan kode tukar dengan gambar, waktu itu saya belum tahu bagaimana cara membuatnya, namun seiring berjalannya waktu sayapun menjadi semakin pintar hehehe....

Gak kok saya masih nyubi, makanya trik yang saya bahas kali ini pun masih dikategorikan pemula, masih jauh dibandingkan dengan para master blog seperti kang rohman, oom, dan para master blog yang lainnya yang tidak bisa saya sebut satu persatu.


Oke daripada kelamaan kita langsung saja ke pokok bahasan, pertama-tama anda masuk ke tata letak==>tambah gadget==>tambah HTML/java scrip, ketik atau copy paste kode di bawah ini, kemudian simpan.

<a href="http://yopibloger.blogspot.com/"><img src="http://www.kaskus.us/images/smilies/fd_1.gif"></a>


Maka hasilnya akan seperti ini.
coba sobat klik gambar ini, kemanakah dia akan ngelink...?

Tukar link yuk






Untuk alamat link dan imejnya silahkan sobat ganti dengan alamat link sobat.
read more...
0 komentar

Sabtu, 03 April 2010

Cara memasukan gambar pada postingan dengan kode HTML

Post under , di 18.38 Diposting oleh Yopi
Dalam dunia informasi kehadiran gambar atau imej dapat membuat sebuah berita menjadi lebih menarik dan dapat lebih dipercaya, tapi apabila sebuah berita yang didalam nya tidak disertakan imej atau gambar maka berita tersebut akan dianggap berita bohong saja atau dalam dunia internet disebut hoax.

Bagi sobat blogger yang masih newbie, hanya sekedar share aja bagaimana memsukan gambar atau imej kedalam postingan dengan menggunakan kode HTML.

Ini dia caranya :

Sobat hanya perlu mengetikan kode seperti ini :

<img src="URL/alamat link imej">







O ya cara ini berlaku jika gambar atau imej sudah mempunyai alamat di internet, cara ini tidak berlaku jika imej anda masih tersimpan di file komputer sobat.

read more...
4 komentar

Jumat, 02 April 2010

Kode Warna HTML

Post under , di 19.50 Diposting oleh Yopi

#FFFFFF

#FFFFCC

#FFFF99

#FFFF66

#FFFF33

#FFFF00

#FFCCFF

#FFCCCC

#FFCC99

#FFCC66

#FFCC33

#FFCC00

#FF99FF

#FF99CC

#FF9999

#FF9966

#FF9933

#FF9900

#FF66FF

#FF66CC

#FF6699

#FF6666

#FF6633

#FF6600

#FF33FF

#FF33CC

#FF3399

#FF3366

#FF3333

#FF3300

#FF00FF

#FF00CC

#FF0099

#FF0066

#FF0033

#FF0000

#CCFFFF

#CCFFCC

#CCFF99

#CCFF66

#CCFF33

#CCFF00

#CCCCFF

#CCCCCC

#CCCC99

#CCCC66

#CCCC33

#CCCC00

#CC99FF

#CC99CC

#CC9999

#CC9966

#CC9933

#CC9900

#CC66FF

#CC66CC

#CC6699

#CC6666

#CC6633

#CC6600

#CC33FF

#CC33CC

#CC3399

#CC3366

#CC3333

#CC3300

#CC00FF

#CC00CC

#CC0099

#CC0066

#CC0033

#CC0000

#99FFFF

#99FFCC

#99FF99

#99FF66

#99FF33

#99FF00

#99CCFF

#99CCCC

#99CC99

#99CC66

#99CC33

#99CC00

#9999FF

#9999CC

#999999

#999966

#999933

#999900

#9966FF

#9966CC

#996699

#996666

#996633

#996600

#9933FF

#9933CC

#993399

#993366

#993333

#993300

#9900FF

#9900CC

#990099

#990066

#990033

#990000

#66FFFF

#66FFCC

#66FF99

#66FF66

#66FF33

#66FF00

#66CCFF

#66CCCC

#66CC99

#66CC66

#66CC33

#66CC00

#6699FF

#6699CC

#669999

#669966

#669933

#669900

#6666FF

#6666CC

#666699

#666666

#666633

#666600

#6633FF

#6633CC

#663399

#663366

#663333

#663300

#6600FF

#6600CC

#660099

#660066

#660033

#660000

#33FFFF

#33FFCC

#33FF99

#33FF66

#33FF33

#33FF00

#33CCFF

#33CCCC

#33CC99

#33CC66

#33CC33

#33CC00

#3399FF

#3399CC

#339999

#339966

#339933

#339900

#3366FF

#3366CC

#336699

#336666

#336633

#336600

#3333FF

#3333CC

#333399

#333366

#333333

#333300

#3300FF

#3300CC

#330099

#330066

#330033

#330000

#00FFFF

#00FFCC

#00FF99

#00FF66

#00FF33

#00FF00

#00CCFF

#00CCCC

#00CC99

#00CC66

#00CC33

#00CC00

#0099FF

#0099CC

#009999

#009966

#009933

#009900

#0066FF

#0066CC

#006699

#006666

#006633

#006600

#0033FF

#0033CC

#003399

#003366

#003333

#003300

#0000FF

#0000CC

#000099

#000066

#000033

#000000

#465584

#EEF2F7

#3A4F6C

#00D

#434951

#555

#777

#DFE6EF

#345487

#F5F9FD

#3860BB

#BCD0ED

#C2CFDF

#F0F5FA

#D1DCEB

#003

#900

#CCE9FD

#E4EAF2

#4C77B6

#DFE6EF

#EEF2F7

#F





read more...
0 komentar
Langganan: Postingan (Atom)