Showing posts sorted by relevance for query HTML. Sort by date Show all posts
Membuat Header HTML dengan Notepad
kali ini saya akan membahas mengenai Membuat Header menggunakan kode
HTML . sebenarnya untuk belajar HTML itu sangatlah mudah asal kita hafal
semua kode dan untuk apa kode itu.. baik mari simak ulasannya tentang
Membuat Header menggunakan kode HTML :
Ketikan codingan dibawah ini dengan Notepad anda:
<html>
<head>Membuat Header<head>
<h1>Header 1</h1> (Besar)
<br/
<h2>Header 2</h2> (Sedang)
<h3>Header 3</h3> (Kecil)
silahkan anda coba sendiri di notepad dan hasil editan anda akan menjadi seperti ini ..
Ketikan codingan dibawah ini dengan Notepad anda:
<html>
<head>Membuat Header<head>
<h1>Header 1</h1> (Besar)
<br/
<h2>Header 2</h2> (Sedang)
<h3>Header 3</h3> (Kecil)
silahkan anda coba sendiri di notepad dan hasil editan anda akan menjadi seperti ini ..
Untuk Newbie seperti kita ada Baiknya kita mengetahui daleman sebuah
web. Maksud dari daleman adalah dibalik kecantikan dan kebagusan sebuah
web hanyalah sebuah tulisan dan kita harus tau tag tag beserta fungsi
fungsinya.. makanya disini saya masih menggunakan notepad ++ sebagai
sebuah software pembangun yang sederhana. Sekian dari saya semoga
bermanfaat..
Cara membuat LINK dengan Notepad
kali ini saya akan membahas tentang Cara membuat link dengan HTML. HTML paling sering dan paling dasar dalam mempelajari Codingan web. Sebenarnya sudah banyak sekali Software untuk membuat web dan yang paling familiar adalah Adobe Dreamweaver. Tapi kali ini kita akan membuatnya dengan Notepad. Berikut Tutorialnya :
1. Buka notepad
2. Tulislah seperti di bawah ini :
<html>
<head>Cara membuat Link</head>
<body>
<p> Belajar Membuat Link Dengan Notepad</p>
<a href="url">Text</a>
</body>
</html>
Contohnya :
<a href="http://bit.ly/bro4ther/">BRO4THER</a>
Hasilnya :
BRO4THER
3. Simpan dengan format .html
Sekian Dari Saya semoga bermanfaat :)
Cara membuat Table HTML dengan Notepad
Hai sobat kali ini saya akan Membuat table nih. Pertama tama Buka laptop bikin kopi siapin udut dan tutup kembali laptopnya hehe.. Oke langsung saja ke TKP Dan disini saya hanya menggunakan sebuah applikasi bawaan windows yaitu notepad..
Silahkan kalian ketikan script di bawah ini :
<html>
<head>
<title>Tableku</title>
</head>
<body>
<table width="200" border="1">
<tr>
<td>My Table</td>
</tr>
</table>
</body>
</html>
Maka hasilnya akan seperti :
Selamat table anda sudah jadi Untuk kedepannya saya akan memposting
bagaimana cara membedakan kolom dan baris didalam table tunggu ya ! ;)
Semoga bermanfaat..
Download Notepad ++
Hai kali ini saya akan memberitahukan sebuah software untuk membuat web dan mengedit file yang berformat xml java dsb . Pertama kali saya tahu ada software ini dari tempat pkl saya karena saya sekolah smk jurusan multimedia Tidak disangka saya diberi software ini olehpembina disana dan alhamdulillah saya sudah bisa sedikit 2 dalam menggunakannya. karena dalam menggunakan ini anda harus tahu kode html yang anda inginkan .
Notepad ++ adalah software untuk menyunting text , kode pemrograman dan sebagainya yang berjalan di OS windows. Bahasa pemrograman yang didukung oleh notepad ++ ini adalah :
Action Script
Java script
Html
XML
Java
Visual Basic
Dan lain lain..
.
Untuk
mendownload notepad ini silahkan Klik DISINI!
Cara Memindahkan Navbar dari atas ke bawah di blogger
Selamat Siang sobat, Bagaimana Hari anda? Saya harap menyenangkan :) . Untuk postingan Kali ini saya akan membahas
tentang memindahkan navbar yang biasanya berada di atas halaman Blog menjadi di
bawah halaman. Berikut Tutorial Cara memindahkan Navbar dari atas ke bawah :
1. Login blogger
2. Pilih Template
3. Pilih EDIT HTML
1. Login blogger
2. Pilih Template
3. Pilih EDIT HTML
4. Cari kode ]]></b:skin>
5. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
5. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
#navbar-iframe {
position: fixed;
right: 0px;
bottom: 0px;
left: 0px;
}
position: fixed;
right: 0px;
bottom: 0px;
left: 0px;
}
6. Simpan
Mudahkan? Sekian dari saya Terima Kasih sudah Berkunjung :)
Cara Membuat Gambar Membesar Saat disentuh Mouse
Hai sobat, apa kalian pernah melihat blog atau Gambar yang Membesar Saat disentuh Mouse. Dalam dunia blogging fitur seperti ini disebut dengan nama Image Zoom Effects. Fitur yang satu ini biasa digunakan dalam toko online. Berikut ini Cara Membuat Gambar Membesar Saat disentuh Mouse
]]></b:skin>
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
- Masuk ke Blogger
- Pilih Template > Edit HTML.
- Cari kode ]]></b:skin>
- Kalau sudah ketemu, letakkan kode berikut tepat di atas kode
]]></b:skin>
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
- Simpan
Cara membuat Widget Blogroll Show Hide
Blogroll adalah kumpulan link ke beberapa blog lain.
Blogroll biasanya ditempatkan di baris samping (sidebar) homepage. Pada
tutorial kali ini saya akan berbagi cara membuat blogroll dengan mode
show-hide, sehingga akan lebih menghemat tempat.
Berikut cara membuat Widget Blogroll Show Hide :
- Login ke blogger, Pilih Tata Letak.
- Klik Add a Widget dan pilih HTML/Javascript.
- Lalu letakkan kode berikut :
<div class="widget-content"><div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Link Sahabat'; }" value="Link Sahabat" style="margin: 0px; padding: 5px; width: 100%; font-size: 14px; background: none repeat scroll 0% 0% blue; border-radius: 8px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h4>Link Sahabat</h4></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">
<div style="text-align: center;"><a href="http://alamatblog.com/" target="_blank">Text</a></div>
<div style="text-align: center;"><a href="http://alamatblog.com/" target="_blank">Text</a></div>
</div></div><div style="text-align: right;"><font size="0.1">Widget by <a href="http://wadahtutorial.blogspot.com/" target="_blank">Tutorial Blog</a></font></div></div></div></div></div></div> - Keterangan :blue : Warna background, silakan diganti sesuai keinginan Anda.width: 270px; height: 200px; : Ukuran lebar dan tinggi widget, sesuaikan dengan sidebar Anda.<a href="http://alamatblog.com/" target="_blank">Text</a> : Ganti dengan Link yang anda inginkan
- Terakhir klik Save.
Sekian tutorial tentang Cara membuat Widget Blogroll Show Hide. Semoga Bermanfaat :)
Sumber : http://www.wadahtutorial.blogspot.com/
Sumber : http://www.wadahtutorial.blogspot.com/
Cara Mengubah Blog Nofollow menjadi DoFollow
Hai kawan , kali ini saya akan memberitahukan kepada kawan apa yang saya tahu . Sebenarnya semua blog yang baru atau pertama kali di buat adalah no follow dan sekarang kita akan mengubahnya menjadi Dofollow . Baik tanpa panjang lebar saya akan menjelaskan Cara mengubah blog no follow menjadi dofollow :
- Log in ke blogger anda
- pilih tab template
- edit html
- centang expand template widget
- cari kode : <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
- ubah menjadi : <a expr:href='data:comment.authorUrl'><data:comment.author/></a>
- cari lagi kode : <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
- ubah lagi menjadi : <a expr:href='data:backlink.url'><data:backlink.title/></a>
- Simpan
Pengertian PHP
Apa kalian pernah mendengar kata PHP?
Pasti pengertian anda tidah jauh dari Pemberi Harapan Palsu kan.. haha.. tetapi PHP ini aslinya adalah bahasa pemrograman . PHP atau Programming Hypertext Processor adalah salah satu dari banyaknya bahasa pemrograman ang biasa digunakan untuk pembuatan web. Bahasa pemrograman ini di desain untuk membuat halaman web *dinamis atau bergerak . PHP tidak terlalu jauh dengan HTML karena untuk membuat website sederhana bahasa inilah yang biasa digunakan. Pada saat ini PHP lah yang paling sering digunakan untuk membuat sebuah website , Blog dan sebagainya
Cara menampilkan Navbar yang hilang di blogger
Banyak
sekali template yang kita download tidak menggunakan navbar pada template itu sendiri, karena mungkin mengganggu tampilan atau supaya terlihat pro, tetapi navbar tersebut tidaklah dihilangkan melainkan disembunyikan, tetapi saya
menyarankan untuk memunculkan kembali navbar blogger tersebut dengan
cara menghapus kode yang membuat navbar blogger tersebut tersembunyi dan
agar tidak di banned oleh google nantinya, karena telah melanggar TOS
(aturan-aturan) blogger.
kita harus mengikuti
peraturan yang ditentukan oleh Blogger yaitu Term Of Services (TOS).
salah satunya adalah harus menggunakan Navbar Blogger pada tampilan blognya.
caranya sangat mudah.
1. Login ke Blogger.
2. Pilih Tata Letak
3. Pilih Edit HTML
4. setelah itu cari kode seperti
#navbar-iframe{display:none;height:0;visibility:hidden;}
5. Hapus kode tersebut.
6. Selesai.
Cara Membedakan baris dan kolom Di table HTML
Kali
ini saya akan memposting cara membedakan kolom dan baris di dalam suatu
table.. Mengapa? mungkin kalau dilihat itu memang itu adalah hal yang
sangat mudah dan tak berarti dalam membedakannya.
tag untuk kolom adalah <td>
tag untuk baris adalah <tr>
its that so simple tetapi kalau banyak mungkin pusing juga -__-
nih saya kasih gambarannya :
tag untuk kolom adalah <td>
tag untuk baris adalah <tr>
its that so simple tetapi kalau banyak mungkin pusing juga -__-
nih saya kasih gambarannya :
Terima kasih semoga bermanfaat..
Cara memasang music di blogger
Hai sahabat Kali ini saya akan membahas mengenai Cara memasang musik di blogger atau di Blogspot anda.. Pernahkan kalian berkunjung ke blog yang ada musiknya . Ini adalah salah satu cara agar pengunjung dapat merasa nyaman dan betah berlama lama berada di blog kita. tapi patut anda garis bawahi jika koneksi internet atau mungkin modem pengunjung anda lambat atau "ngelagh" lalu membuka blog yang bermusik ini maka secara otomatis koneksi internetnya akan lama.
Kita akan membuatnya menggunakan SCM Music Player.Widget gratisan yang banyak manfaatnya ..
Baik tanpa panjang x lebar sama dengan luas mari simak penjelasanya :
1 . Buka http://scmplayer.net/ atau klik link diatas
2 . Choose Skin disini anda akan memilih dalam bentuk tool bar berwarna apa yang kalian inginkan
3 . Masukan song Title dan song urlnya (Song url anda bisa dapatkan di youtubea4shared dll)
4 . Setting sesuai keinginan anda
5 . Copy kodenya dan anda paste di add gatget => HTML java Script
6 . Selesai
Cara menampilkan Navbar Blogger
Hai sobat, kali ini saya akan memberi tau cara menampilkan navbar. Biasanya didalam Template yang biasa kita download Navbar akan di Hide oleh pembuat template tersebut. Berikut Tutorialnya :
- Login ke Blogger.
- Pilih Template Lalu Edit HTML
- Cari kode yang mirip seperti berikut
#navbar-iframe{display... - Hapus kode tersebut
- Simpan
Cara Membuat Text Area Di blogspot
hay sobat, pada kesempatan kali ini saya akan berbagi tentang Cara Membuat Text Area Di blogspot. Dengan menggunakan Highlight All akan lebih
memudahkan mengcopy kalimat/kode script yang ada di dalam text area. Oke tanpa panjang lebar lagi berikit tutorial Cara Membuat Text Area Di blogspot
- Login ke blogger
- Pilih tata Letak
- Add gadget
- pilih HTML/JavaScript
- Copy kode dibawah ini :
<div>
<form name="copy">
<div align="center">
<textarea cols="20" name="txt" rows="4" style="height: 80px; width: 180px;" wrap="VIRTUAL"><a href="http://mylifeextended.blogspot.com/" rel="dofollow" target="_blank">Berbagaimacam Cara</a></textarea></div>
</form>
</div>
<form name="copy">
<div align="center">
<textarea cols="20" name="txt" rows="4" style="height: 80px; width: 180px;" wrap="VIRTUAL"><a href="http://mylifeextended.blogspot.com/" rel="dofollow" target="_blank">Berbagaimacam Cara</a></textarea></div>
</form>
</div>
Silahkan ganti tulisan yang berwarna biru dengan tulisan/ kode script yang anda inginkan.
Semoga bermanfaat :)
Cara membuat Navbar Blog menjadi AutoHide
Hay sobat, Dipostingan kali ini saya akan membahas tentang cara membuat navbar blog menjadi auto hide. Navbar auto hide adalah navbar yang Otomatis sembunyi dan akan muncul ketika kursor mouse diarahkan . Berikut Tutorialnya :
1. Login ke Blogger
2. Masuk ke tata letak, kemudian edit HTML
3.Cari Code seperti ini ]]></b:skin> (untuk mempermudah pencarian ketik ctrl+F)
4. Lalu Diatas Code ]]></b:skin> masukan kode seperti dibawah ini :
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
5.Simpan
Mudah bukan? Selamat mencoba, Terima kasih telah berkunjung :)
