Kumpulan Kode HTML Untuk Blogspot,wordpress & mwb

Di bawah ini adalah kumpulan kode HTML yang biasa di pakai di blogspot,wordpress,mywapblog dll.(khusus mwb pastikan mode HTML sudah di aktifkan supaya kode bisa berjalan dg baik & tidak terjadi error). kode kode di bawah wajib anda ketahui:.

1. Membuat text link:
<a href="http://url tujuan">teks kamu disini</a>..
Hasil: teks kamu disini
Ket:

penulisan link/URL harus pakai http:// contoh http://cipulus.wordpress.com/

2. Membuat textarea:
<textarea cols="35" rows="2">isi text area
Hasil:
isi text area
Ket:

Agar tidak error,dalam penulisan isi text area antara kode >dan< harus tanpa spasi.

3. Menampilkan gambar:

<img src="http://url-gambar-kamu.jpg"/>
Ket:

Penulisan link/URL gambar harus pakai http:// contoh http://mazzipul.heck.in/files/hacking.jpg

4. Membuat Link dengan Gambar :

<a href="http://url tujuan"><img src ="http://url gambarmu"/></a>

5. Membuat Spoiler :
<div style="margin-bottom:<br /> 5px;"><br /> <div class="smallfont"<br /> style="margin: 2px;"><br /> <input value="Show" style="margin: 0px; padding:<br /> 0px; width: 60px; font-size:<br /> 12px;" onclick="if<br /> (this.parentNode.parentNode.<br /> getElementsByTagName('div')<br /> [1].getElementsByTagName('div') [0].style.display != '')<br /> { this.parentNode.parentNode.<br /> getElementsByTagName('div')<br /> [1].getElementsByTagName('div')<br /> [0].style.display = '';<br /> this.innerText = ''; this.value = 'hide'; } else { this.parentNode.parentNode.<br /> getElementsByTagName('div')<br /> [1].getElementsByTagName('div')<br /> [0].style.display = 'none';<br /> this.innerText = ''; this.value =<br /> 'show'; }" type="button"/> </div> <br /> <div class="alt2" style="border:<br /> 1px inset ; margin: 5px; padding:<br /> 1px;"><br /> <div style="display: none;"> <br /> Isi spoiler<br /> </div> <br /> </div> <br /> </div>
Hasilnya:

Isi spoiler

6. Membuat Paragrap dan baris baru:
Paragrap baru = <p/><br /> Baris baru = <br/>

7. Membuat text berwarna:

<span style="color:#ff0000">teks kamu disini </span>
Hasil:
teks kamu disini
Keterangan:

#ff0000(kode warna merah) bisa juga diganti dengan kata(misal:black,red dll).
Kode warna yang lainnya,bisa baca disini.

8. Membuat Teks Berbayang / Shadow:
<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 3px red }</style><font color="yellow"><b class="drop-shadow"><b>text berbayang</b></font></b>
Hasil:
text berbayang

9. Membuat Garis warna:
<hr color="red">
Hasil:

---

10. Membuat Warna Backgoround Halaman:
<div style="background:#88ffff"> menambahkan background teks</div>
Hasil:

menambahkan background teks

11. Membuat Teks Efek Stabilo:

<span style="background-color:<br /> #ffc1e0;">kalimat anda yang ingin di beri efek stabilo</span>
Hasil:
kalimat anda yang ingin di beri efek stabilo

12. Membuat background dan mewarnai teks:
<div style="background:#88ffff"> <font color="red">menambahkan background dan mewarnai teks</font></div>
Hasil:

menambahkan background dan mewarnai tek

13. Membesarkan text :
<span style="size:15">teks kamu disini </span><br />
Hasil:
teks kamu disini

Ket:Angka 15 bisa di ganti dg ukuran font yang di kehendaki.

14. Membuat Teks Berada di tengah:

<div style="text-align: center;"> Teks Rata Tengah </div>
Hasil:

Teks Rata Tengah

15. Membuat Teks berada di kanan:

<div style="text-align: right;"> Teks Rata Kanan </div>
Hasil:

Teks Rata Kanan

16. Membuat teks berada di kiri:

<div style="text-align: left;"> Teks Rata Kiri </div>
Hasil:

Teks Rata Kiri

17. Membuat Daftar / List:
<ul> <li>Item 1</li> <br /> <li>Item 2</li> </ul>
Hasil:

• Item 1
• Item 2

18. Membuat Teks Dicoret
<s>text di coret</s>
Hasil:
text di coret

19. Membuat Garis bawah pada teks:

<span style="text-decoration: underline;">teks anda </span>
Hasil:
teks anda

20. Membuat text italic/miring:
<i>text miring</i>
Hasil:
text miring

21. Membuat Tabel:
<table border="7"><br /> <tr> <td> baris 1 Kolom 1</TD> <td> baris 1 Kolom 2</TD> <td> baris 1 Kolom 3</TD> </TR> <br /> <tr> <td>baris 2 Kolom 1</TD> <td> baris 2 Kolom 2</TD> <td> baris 2 Kolom 3</TD> </Tr> <br /> </table>
Hasil:

baris 1 Kolom 1	baris 1 Kolom 2	baris 1 Kolom 3
baris 2 Kolom 1	baris 2 Kolom 2	baris 2 Kolom 3

Ket:

<tr> adalah banyaknya baris.

<td> adalah banyaknya kolom dalam satu baris.
Tabel diatas terdiri dari 2 baris, masing- masing baris 3 kolom.
Angka 7 pada border="7" merupakan besar kecilnya border tabel.

22. Membuat paragraf sedikit lebih ke dalam:
<blockquote> membuat paragraf sedikit lebih ke dalam, istilahnya indent.</blockquote>
Hasil:

membuat paragraf sedikit lebih ke dalam, istilahnya indent.

23. Menampilkan link ke email:
<a href="mailto:alamatemail<br /> Anda@yahoo.com">nama yang ditampilkan</a>
Hasil:
nama yang ditampilkan

24. Membuat text turun seperti dalam penulisan H2O:
penulisan H<sub>2O</ sub>
Hasil:
penulisan H2O

25. Membuat text ke atas/tanda pangkat,seperti pada 20^tahun:
Khusus 17^{tahun keatas}
Hasil:
Khusus 20^{tahun keatas}

26. Membuat Menu Tabel:
<div style="border:1px solid#ffffff; padding:1px;"> <br /> <div style="border:1px solid#ffffff; padding:1px;"> <br /> <table width="100%" border="1"><td bgcolor=black><div <br /> style="text-align:center;"><br /> <font color="white" <br /> size=5>=MENU=</font></table> <br /> <br /> <table width="100%" <br /> border="0"><br /> <tr><td width="50%" bgcolor="black" <br /> align="center"><a href="http://mazzipul.heck.in" class=""><font <br /> color="lime">LINK 1</font></a></td><td <br /> width="50%" bgcolor="black" align="center"><a href="http://mazzipul.heck.in" <br /> class=""><font color="lime">LINK <br /> 2</font></a></td><br /> <tr><td width="50%" <br /> bgcolor="black" align="center"><a href="http://mazzipul.heck.in" <br /> class=""><font color="lime">LINK 3 <br /> </font></a></td><td width="50%" bgcolor="black" <br /> align="center"><a href="http://mazzipul.heck.in" class=""><font <br /> color="lime">LINK <br /> 4</font></a></td></tr> <br /> </table> <br /> </div> </div> </div> <br /> <br />

Hasil:

=MENU=

LINK 1	LINK 2
LINK 3	LINK 4

sumber: http://blog.fulldesainer.com/2012/08/kumpulan-kode-html-untuk.html

Simple Dark Template Blogspot Responsive HTML5

Fitur :

1. Template dengan 2 kolom di home, 1 kolom sidebar kanan serta 1 kolom posting di kiri
2. Tampilan Versi Dekstop, Demo
3. Tampilan Versi Mobile, Demo
4. Valid HTML5 pada Home, check http://validator.w3.org/
5. Template responsive, menyesuaikan dengan segala layar, tidak perlu setting tampilan di Mobile. Check Responsive Test
6. Ferivikasi di Google Structured Data Testing Tool, Check Rich Snippets Testing Tool

Demo Simple Dark Blogger Template Responsive HTML5
DEMO SIMPLE DARK

Download Simple Dark Blogger Template Responsive HTML5
DOWNLOAD SIMPLE DARK

copy by: http://responsive-css.blogspot.com

Template SEO Friendly Terbaru - Elesis Template

Download Template SEO Friendly Terbaru - Elesis Template ~ Template yang blog saya gunakan ini menggunakan template buatan teman blogger saya bernama Darmawan Saputra. Dia membuat template blog ini sendiri dan memberinya nama Elesis Template. Dia sangat yakin bahwa template yang dia buat itu SEO friendly karena memenuhi kriteria-kriteria template SEO friendly. Karena itu saya tidak lagu lagi dan langsung memakai Elesis Template pada blog baru saya ini.

Sebelumnya saya itu menggunakan template bawaan blogger dan berusaha mengubahnya menjadi template blog SEO Friendly. Namun karena optimasi onpage yang kurang dan sulit, saya mencari template yang tampilannya saya sukai dan juga SEO friendly. Dan saya pun akhirnya tertarik dengan Elesis template ini, karena tampilan dan desain blog yang rapi dan tertata dengan baik.

Template Elesis ini mempunyai fitur-fitur seperti :

• Breadcrumbs (Terindex Google)
• Tapilan Elegant dan Simple
• Loading Halaman Cepat
• Memakai Heading  Tag yang Tertata Rapih
• Auto Read More (Menarik + Keren + Title Otomatis)
• Space iklan di Header kanan 728x90 (width=728px , Height 90px)
• 2 Menu Horizontal
• Cocok untuk semua Niche
• Tidak Memmbosangkan, dan
• Mudah di Edit

Dimana ada kelebihan pasti ada kekurangan, begitu juga dengan template Elesis ini. Kekurangan hanya terletak pada Meta Description atau deskripsi penelusuran. Karena menurut mas Darmawan membuat meta description secara manual lebih dari pada yang otomatis. Jadi setiap membuat postingan baru jangan lupa untuk memerikan deskripsi penelusuran.

Jika anda tertarik dengan Elesis  Template ini, silahkan download dengan percuma alias gratis. Tapi anda jangan  menghapus link credits yang berada di bagian paling bawah. Jadilah blogger sejati yang jujur dan bertanggung jawab. Untuk anda yang sudah tidak sabar lagi ingin memasang dan menggunakan template ini pada blog anda, berikut link demo dan download untuk Elesis Template ini:

• Demo Elesis Template = Blageziner
• Link Download Elesis = Download Elesis Template

Template Blogger SEO Friendly Metro Tema

Template SEO Friendly Metro UI ini sangat  inovatif, tampilannya seperti thema Windows 8 didesain khusus untuk Template Blogger. Templae SEO ini  ideal untuk blogger yang bertemakan teknologi, multimedia, hiburan, majalah, dan lain-lain. Namun menuru saya Template SEO Metro ini cocok untuk semua jenis tema Blogger.

Secara default, Template ini memiliki skema warna kehijauan. Namun, Anda dapat menyesuaikan Template  sesuai kebutuhan anda.

Fitur tambahan Template SEO Ini memilikiNomor navigasi halaman, Menu yang sangat Elegant, 4 kolom footer, dan masih banyak lagi.

Atau bisa juga anda melihat Koleksi Template Blogger SEO terbaru dari Blog SEO Killer, Baca artielnya

• Template Blogspot SEO friendly Videoism
• Template SEO Blogspot AndroidMag
• Template Blog Seo, Timeline Template

dan masih banyak lagi, lihat selengkapnya pada label Template SEO,

Tampilan Template SEO Friendly Metro

Fitur Lengkap Template Blogger SEO Friendly Metro Tema

• Nomor Halaman : Template SEO ini sudah dilengkapi dengan Nomor Halaman Navigasi yang sangat Elegant,
• Custom Header : Header dari Template ini seperti tampilan Windows 8 dan memiliki efek yang sangat efisien. Semua  header template ini berwarna-warni yang pasti akan memukau pengunjung Anda.
• SEO-Friendly : Template ini sudah di install Plugin SEO, yang pasti akan membantu Anda untuk meningkatkan Traffic Pengunjung  secara drastis.
• Feature Images AREA : Banyak pengguna template lain mengeluhkan slider yang memperlambat blog mereka. Namun Template ini telah menambahkan Tempat Images yang ditampilkan bukan di slider. namun hanya akan muncul pada homepage.

Bagaimana Cara mengedit LOGO Header ?

Pertama buatlah Gambar Logo untuk blog anda dengan ukuran Lebar 118px dan tinggi 62px, kemudian Upload melalui album Web Picasa atau pada Hostingan anda sendiri.
Selanjutnya Login ke Blogger.com  >> Pilih Menu Template >> Edit HTML >> Selanjutnya cari alamat URL gambar berikut dan ganti dengan URL  logo Anda.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDpGZyHJZ-X2IuCF4xnBbGyEGa2TW1-W5Ali8JzV9Yd_2Q26pgkPq2c24hYX34TYOLUGU7PvIE6lO8dnsuyJx59pJ-fETeC2bB_KfBqmpRKJalc_EN5RUi2L8SPy77B8dVxanwi5COtsk/s1600/metro.png

Bagaimana Cara Mengedit Menu Naigasi ?

Pada menu Template >> Edit HTML >> Cari Code Html berikut

<!-- Header Nav--><a class='mm_home' href='#'>Home</a><a class='mm_wishlist' href='#' id='wishlist-total'>Wish List</a><a class='mm_account' href='#'>My Account</a><a class='mm_checkout' href='#'>Checkout</a><a class='mm_account' href='#'>My Account</a>Main Navigation Menu :<ul id='nav'><li class='level0 first homelink'><a href='#'><span>Home</span></a></li><li class='level0 first homelink'><a href='#'><span>Desktop</span></a></li><li class='level0 first homelink'><a href='#'><span>Laptops</span></a></li></ul>

Download Template Blog SEO Friendly Terbaru Metro Tema

password : ganteng
Terima Kasih

copy by http://www.seo.trafikid.com/2013/09/metro-template-blog-seo-friendly-terbaru.html

Arti/Istilah Dasar Dalam Blog

Istilah istilah penting yang wajib di ketahui oleh para blogger . Tentang nama bagian bagian dari blog, fungsinya , bagaimana cara mengaturnya. Bagi blooger yang masih baru tutorial ini bisa sedikit membantu anda menjadi blogger yang hebat ... hehe...
Nah berikut ini Arti/Istilah Dasar Dalam Blog. Monggo di lanjut :

1. Blog
Blog merupakan kependekan dari Weblog yang merupakan bentuk aplikasi web yang menyerupai tulisan-tulisan pada sebuah halaman web umum.

2. Blogger
Sebutan bagi seseorang yang menulis di blog mereka

3. Blogging
Kegiatan - kegiatan yang dilakukan dalam dunia Blog

4. Blogroll
Merupakan fitur dari Blogger yang menampilkan Link - link tertentu sesuai yang mereka tambahkan. Fitur ini biasanya digunakan untuk Tukeran link sesama blogger.

5. Blogosphere
Istilah yang dipergunakan untuk menjelaskan dunia yang diciptakan oleh jaringan Blog.

6. Postingan
Suatu kegiatan oleh seorang Blogger untuk mengirimkan Artikel ke dalam Blognya.

7. Laman
Hampir sama dengan Postingan, tapi tulisan yang diketik di Laman, nantinya akan muncul tersendiri menjadi menu pada halaman Blog.

8. Komentar
Tempat yang dikhususkan untuk para pengunjung untuk memberikan komentar pada suatu postingan, bisa berupa saran, kritik, dan diskusi.

9. Komentar SPAM
Komentar yang ditulis semata-mata hanya untuk promosi atau memperoleh backlink dan komentar yang ditulis tidak bersangkutan dengan Postingan yang dibahas.

10. Traffic
Traffic adalah orang - orang yang mengunjungi blog kita atau yang biasa disebut dengan Pengunjung.

11. Anchor Text
Sebuah teks yang berisi link didalamnya, Misal : Ho-Ax Blogger

12. Backlink
Sebuah link yang terdapat pada blog lain yang menuju ke Blog kita.

13. Tata letak
Tata letak merupakan bagian dalam Blogger. Pada bagian ini berfungsi untuk menambahkan, menghapus atau mengatur letak Gadget/Widget dalam Blog.

14. Template
Suatu pola atau desain pada suatu Blog. Template ini berfungsi untuk mengatur tampilan blog.

15. HTML
Hyper Text Markup Language atau yang disingkat HTML ini adalah bahasa yang digunakan untuk membuat sebuah halaman web.

16. JavaScript
JavaScript adalah bahasa pemrograman yang khusus untuk halaman web agar halaman web terlihat lebih hidup.

17. SEO
Search Engine Optimization atau yang sering disebut SEO adalah sebuah usaha untuk mengoptimalkan sebuah situs agar mudah ditemukan/terindex oleh Mesin pencari seperti Google.

18. SERP
Merupakan kependekan dari Search Engine Result Page yang merupakan hasil pencarian terhadap mesin pencari (search engine). Misalnya Anda sedang melakukan pencarian di Google dengan menggunakan kata kunci yang Anda cari, kemudian akan muncul 10 hasil pencarian sesuai dengan kata kunci Anda tadi. Nah, Itulah yang dimaksud dengan SERP.

19. Keyword
Secara singkat, Keyword adalah Kata kunci. Yang merupakan kata/frasa yang diinput seseorang di mesin pencari (search engine). Contohnya, Anda mengetik di Google dengan menggunakan kata kunci "harga blackberry terbaru".

20. HomePage
Halaman utama/awal pada suatu web.

21. Header
Bagian paling atas halaman blog. Ini biasa digunakan untuk Menempatkan Judul dan Deskripsi Blog atau Logo Blog.

22. Sidebar
Kolom-kolom yang terdapat disisi blog. Biasanya digunakan untuk meletakkan Gadget/Widget tertentu.

23. Footer
Bagian paling bawah halaman blog.

24. Gadget
Kumpulan elemen atau fitur-fitur (gratis) yang sudah disediakan oleh Pihak Blogger.

25. Label
Label adalah sebuah kategori untuk mengelompokkan artikel (postingan) yang berhubungan yang telah terdapat di Blogger. Tujuan menampilkan label ini agar mempermudah pengunjung untuk menemukan Artikel yang sedang dicari.

26. Arsip
Merupakan gadget Blogger yang berfungsi untuk menampilkan terbaru berdasarkan hari, tanggal, bulan maupun tahun.

27. Favicon
Favicon merupakan singkatan dari Favorite Icon adalah sebuah ikon yang ditampilkan dengan logo sebuah web atau blog yang ditampilkan pada Address bar.

28. Followers
Gadget dari Blogger untuk mengikuti suatu blog.

29. CSS
CSS atau Cascading Style Sheet adalah salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

30. jQuery
Merupakan sebuah library JavaScript yang sangat ringkas dan sangat sederhana untuk memanipulasi komponen di dokumen HTML.

31. Feed
Feed sering disebut juga dengan Feed Web atau Feed News, adalah format data yang digunakan pada pengguna internet untuk berlangganan pada postingan suatu blog.

32. RSS
Merupakan singkatan dari Really Simple Syndication, adalah format yang digunakan untuk mengirimkan informasi dari sebuah web atau blog yang di update secara berkala.

33. XML
Merupakan singkatan dari eXtebsible Markup Language, adalah sebuah format teks sederhana yang diturunkan dari SGML, dan digunakan untuk memudahkan sindikasi informasi dengan menggunakan teknologi RSS.

34. Atom
Atom adalah sebuah format indikasi feed yang dikembangkan sebagai alternatif RSS. Atom memungkinkan seseorang mendapatkan update artikel dari sebuah web atau blog.

35. Ping
Ping merupakan singkatan dari Packet Internet Gopher, yaitu sebuah tool jaringan komputer yang digunakan untuk menguji apakah sebuah komputer atau hosting bisa dibuka di internet. Dalam dunia blogger, ping merupakan tindakan mengirimkan pesan jaringan ke suatu server untuk menginformasikan bahwa blog kita telah di update.

36. Pro Blogger
Seorang blogger profesional atau yang sudah berpengalaman dalam dunia Blogging.

37. URL
Merupakan singkatan dari Uniform Resource Locator, rangkaian karakter menurut format dan standar tertentu, yang digunakan untuk menunjukkan alamat link tertentu. Misal : http://ho-ax.blogspot.com/

38. Link
Alamat URL yang terdapat pada teks atau gambar.

39. Alexa Rank
Sebuah peringkat website yang dibuat oleh situs Alexa.com. Alexa Rank menampilkan peringkat website berdasarkan trafik pengguna internet yang memasang Toolbar Alexa pada browser mereka. Bila nilai angka pada Alexa Rank blog kita semakin kecil, maka akan semakin bagus.

40. PageRank
PageRank merupakan cara (algoritma) untuk memberikan peringkat pada halaman web yang mencerminkan seberapa penting halaman web tersebut dengan halaman web lainnya. PageRank digunakan pada mesin pencari (search engine) seperti Google. Skor PageRank berkisar antara 0 - 10. Bila nilai angkanya semakin besar, maka akan semakin bagus.

41. Domain
Domain adalah nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau email server pada jaringan komputer atau internet.

42. Hosting
Tempat atau jasa internet untuk membuat halaman website yang telah anda buat menjadi online dan bisa diakses oleh orang lain.

43. Plug-In
Sebuah modul program komputer atau alat yang berinteraksi dengan yang lain untuk menambahkan fungsi tambahan yang spesifik, atau mendukung format file yang spesifik.

44. Social Bookmarking
Suatu web untuk menyimpan, mengelola, dan berbagi alamat situs yang dianggap favorite.

45. Social Network
Layanan web yang menyediakan kumpulan cara yang beragam untuk mempermudah pengguna (user) untuk berinteraksi, seperti chat, email, video, blog dan Lain - lain.

46. Social Media
Sebuah media online, dengan para penggunanya bisa dengan mudah berpartisipasi, berbagi dan menciptakan isi meliputi blog, jejaring sosial, wiki, forum dan dunia virtual.

47. Black Hat SEO
Suatu teknik yang dipergunakan oleh seorang webmaster untuk mengoptimasi web atau blog mereka dengan cara ilegal yang melanggar peraturan (TOS) yang ditetapkan mesin pencari (search engine) seperti Google.

48. White Hat SEO
Suatu teknik yang dipergunakan oleh seorang webmaster untuk mengoptimasi web atau blog mereka dengan cara legal dan tidak melanggar peraturan (TOS) yang ditetapkan oleh search engine.

49. Duplicate Content
Konten hasil duplikasi (biasanya berupa teks/artikel) dalam sebuah situs atau blog.

50. Subscriber
Pengunjung yang berlangganan kepada suatu web atau blog, bisa melalui RSS Feed, Email ataupun Atom.

51. Niche Blog
Suatu kata/frase untunk topik atau subjek bahasan tertentu yang terfokus dan diminati oleh kalangan tertentu.

52. Dummy Blog
Merupakan situs atau blog yang bertujuan hanya untuk memperoleh backlink untuk blog utama.