Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
Textual description of firstImageUrl

Tag Kondisional Blogspot | Tata Letak | Fungsi SEO

Conditional Tag Blogspot

HTML Blogger Tag
Blogger Conditional tag used for identifying Blogger page types for very effective in designing, different layouts for different types (CSS or Javascript) or placing page-specific meta tags and other HTML SEO tecnique. Below are some of the common Blogger conditional tags formats that can help make every page on a blog Dynamic and SEO friendly.

Tag Kondisional Blogspot yaitu kode perintah HTML untuk pengaturan keterlihatan maupun pengaturan fungsi kode (element) yang ada di dalam tag tersebut dalam sebuah halaman blog. Blogger mempunyai beberapa halaman dengan spesifikasi kode tersendiri dan fungsi yang berbeda-beda. Namun terkadang HTML di dalam template blogger masih menggunakan 'multi purpose'. Yaitu penggunaan kode yang sama namun untuk fungsi berbeda. Untuk keperluan SEO blogspot kode HTML Tag kondisional ini wajib diketahui oleh webmaster. Ada banyak fungsi penggunaan tag kondisional ini khususnya pada template blog. Ketika kita mengedit template, kita akan sering menjumpai kode ini.

Jenis-jenis halaman
Mengenal fungsi dan jenis kondisional tag blogspot sangat penting karena kode-kode ini dapat bekerja pada halaman berikut :
1. Halaman Depan
2. Halaman Item
3. Halaman Arsip
4. Halaman Label Blog
5. Halaman Search
6. Halaman Error
7. Halaman Tertentu
8. Halaman Index

Fungsi Tag Kondisional
Conditional Tag Blogspot berfungsi sebagai tag data tata letak. Perlu anda ketahui bahwa sekarang tag kondisional blogger lebih sederhana dan lebih mudah digunakan. Kita bisa mengatur letak serta beberapa fungsi HTML di dalam template blogspot. Untuk itu kode ini akan sering kita jumpai dalam template. Maka, hal yang mendasar adalah mengetahui serta menggunakan fungsi kondisional tag berikut. Kita juga dapat memberikan fungsi yang berbeda dalam setiap halaman namun dalam satu kode HTML. Misalnya menampilkan perintah tertentu dan menyembunyikan perintah tertentu.

Kode-kode Tag Kondisional Blogspot
Jika anda ingin memberikan perintah dan fungsi pada tag blogspot, berikut daftarnya untuk anda :

1. Halaman Home

Versi Lama Versi Baru
<b:if cond='data:blog.url == data:blog.homepageUrl'>#</b:if> <b:if cond='data:view.isHomepage'>#</b:if>

2. Halaman Item / Posting

Versi Lama Versi Baru
<b:if cond='data:blog.pageType == "item"'>#</b:if> <b:if cond='data:view.isSingleItem'>#</b:if>
Item / Post 2
Versi Lama Versi Baru
<b:if cond='data:blog.pageType == "item"'>#</b:if> <b:if cond='data:view.isPost'>#</b:if>

3. Halaman Arsip

Versi Lama Versi Baru
<b:if cond='data:blog.pageType == &quot;archive&quot;'>#</b:if> <b:if cond='data:view.isArchive'>#</b:if>

4. Halaman Label Blog atau Kategori

Versi Lama Versi Baru
<b:if cond='data:blog.searchLabel'>#</b:if> <b:if cond='data:view.isLabelSearch'>#</b:if>

5. Halaman Pencarian

Versi Lama Versi Baru
<b:if cond='data:blog.searchQuery'>#</b:if> <b:if cond='data:view.isSearch'>#</b:if>

6. Halaman Error

Versi Lama Versi Baru
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>#</b:if> <b:if cond='data:view.isError'/>#</b:if>

7. Halaman Tertentu Saja

Versi Lama Versi Baru
<b:if cond='data:blog.pageType == &quot; alamat-posting &quot;'>#</b:if> <b:if cond='data:blog.pageType in {&quot;your page&quot;}'>#</b:if>

8. Halaman Index

Versi Lama Versi Baru
<b:if cond='data:blog.pageType == &quot;index&quot;'>#</b:if>#</b:if> <b:if cond='data:view.isMultipleItems'>#</b:if>


Fungsi Disable Conditions
Memungkinkan untuk menyembunyikan atau memilih untuk tidak diaktifkan pada kondisi tertentu, misalkan pada halaman depan tidak ingin ditampilkan maka kode penampilnya sangat mudah
Untuk menyembunyikan widget tertentu di halaman tertentu sangat mudah. Sebagai contoh menyembunyikan Popular Post di halaman homepage atau beranda, kodenya sebagai berikut:
<b:widget cond='!data:view.isHomepage' id='PopularPosts1'>
Fungsi Kondisi Ganda atau Multi Fungsi
Dikenal dengan fungsi In , And , Or
Textual description of firstImageUrl

Blogger Default Bisa Valid HTML5

Valid HTML5
Ternyata menggunakan Blogger Default Bisa Valid HTML5. Artinya dengan menggunakan widget, label, komentar, dan pernak-pernik lain bawaan blogger atau blogspot, blogger dapat Valid HTML5. Seperti kita tahu bahwa beberapa pernak-pernik bawaan blogger banyak mengandung eror. Seperi kotak komentar yang erornya banyak, Label blog, Kategori, bahkan yang ditakuti seperti navbar blogger.
Untuk kebanyakan blog Validasi Template Blogger memang dikesampingkan dengan alasan kurang memenuhi harapan si admin. Tapi bagi yang cinta validasi baik itu XHTML atau HTML5, Validasi perlu diusahakan walau sampai titik darah penghabisan :(
Saat blogwalking sejuta trik menemukan sebuah blog yang ternyata Valid HTML5. Tidak sekedar halaman depan atau home page saja. Tetapi blog tersebut lolos Valid HTML5 tiap artikel juga. Usut punya usut ternyata si admin menggunakan popup komentar blogger.
Untuk mengetahui blog yang sudah Valid HTML5 baik itu di halaman depan atau homepage maupun tiap artikel atau tiap posting, Berikut saya berikan nama blognya di Blog Mahesa Putra. Tidak seperti milik hendro prayitno yang menggunakan komentar Discus. Terus terang saya sendiri kurang familiar dengan komentar Discus ini. Bagaimana dengan sahabat?
Setelah melihat blog tersebut segera saya melakukan pengeditan template yang berfokus pada komentar blogger. Alhamdulillah dengan menggunakan template lama, saya juga berhasil membuat blog saya Valid HTML5 walaupun masih asal Valid. :D. Dan blog yang valid tiap postingnya adai di blog saya yang beralamat di :

http://ahmad-maryuki.blogspot.com/

Dengan begitu blogger default pun bisa Valid HTML5.Bagi sahabat yang menginginkan template blog Valid HTML5 bisa melihat pada artikel sebelumnya di :
Free Premium Blogger Template Valid HTML5
SEO Friendly Blogger Template Valid HTML5

Perhatian! Blog ini hanya untuk tutorial, Jadi untuk masalah Valid HTML5 bisa lihat hasilnya di posting tersebut.
Textual description of firstImageUrl

Curhat Tentang HTML 5

HTML5
Mohon maaf pada teman2 setia blog ini, yang lama sekali gak update dikarenakan banyak urusan di dunia nyata. hahaha. Nah posting kali ini berkaitan dengan penggunaan html 5 di blog. Sejuta trik blogger mau curhat tentang HTML 5. Bagi yang sudah master HTML 5 mohon pencerahannya.

Bagi para master penggunaan HTML 5 mungkin lebih mudah penggunaannya dibanding model sebelumnya. Tapi tidak bagi saya yang masih coba coba penggunaan HTML 5 sangat sulit sekali. Belum lagi kode yang masih baru. Nah berikut ini curhat tentang penggunaan template bassic HTML 5 di blog saya Status-Status Lucu

1. Di HTML 5, ternyata proses indeks ke google lebih cepat dari yang sebelumnya. Padahal metode yang digunakan dengan blog saya ini sama.

2. Di HTML 5, apabila kita memasukkan kode <div> yang diikuti css yang sama atau yang memiliki karakter sama, misal membuat 2 menu dengan css yang sama, apabila di cek di validasi V3 ternyata menjadikan eror karena mengandung duplikat atau kode yang sama. Padahal kode strukturnya sudah benar.

3. Blog yang menggandung HTML 5, kadang tidak bisa diterjemahkan ke dalam goolge terjemahan.

4. Untuk SEO jika menggunaan meta tag yang tidak benar, tenyata mempengaruhi posisi serp. Nah untuk no.4 ini perlu master-master yang menjawabnya.

5. Untuk HTML 5 pada masalah webmastertool, akan diindikasi tanpa masalah, padahal saya tidak memasukkan deskripsi, meta tag, autor, atau apalah itu, yang jelas blog masih tidak ada bawaan keyword dll, kok bisa-bisanya tidak ada masalah di webmaster tool. Padahal posting juga sudah belasan.

6. Untuk Masalah Validasi HTML 5, ternyata paling mudah dari semua pendahulunya. Dikarenakan penggunaan <div> yang sedikit sekali. Tapi untuk template yang bukan bawaan HTML 5, alitas modifikasi, masalah Validasi juga sama sulitnya. Jadi gunakan yang bawaan HTML 5 dan kita harus rela berkorban memotong beberapa fungsi yang banyak mengandung error.

7. Beberapa fungsi blogger yang menerapkan HTML 5 kadang bekerja lambat ataupun tidak berjalan. Seperti proses pengindeksan. Saya mencentang pada setting agar blog saya tidak terindeks ke google, tapi kenyataannya tetap terbaca oleh google. Nah untuk fungsi dan pengaturan yang lain kurang lebih seperti itu, seperti google frined connect yang berjalan agak lama dari biasanya.

Nah emang kalau curhat HTML 5 di sini banyak yang tidak tersampaikan. Bagi sobat yang mau membantu blog saya atau mengalami kejadian serupa dengan blog saya, mohon share di kotak komentar. Makasih.


Happy Blogging! by. Sejuta Trik Blogger

Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger

Dalam edit template sobat, perlu kita ketahui berapa ukuran atau lebar elemen-elemen yang ada di blog. Untuk mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger sejuta trik blogger ingin sharing ke teman-teman. Sharing dalam posting ini mudah-mudahan bisa membantu mengedit blog sahabat semua. Yuk mulai saja.
Landscaping company
1. Mengetahui Ukuran / Lebar header

#header-wrapper{
background: #ffffff;
width: 900px;
height: 160px;
font-size: 12px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
}

2. Mengetahui Ukuran / Lebar halaman Posting

#main-wrapper{
float:left;
width:590px;
margin:0px 0px 5px 0px;
padding:13px 10px 0px 10px;
overflow: hidden;
}

3. Mengetahui Ukuran / Lebar sidebar

#sidebar-wrapper{
float:left;
width:320px;
margin:13px 0px 5px 0px;
padding:0px;
line-height:19px;
display: inline;
}

Update : Banyak sekali kode sidebar yang bisa dipakai misal #rsidebar-wrapper{ atau #right-sidebar-wrapper{ dll, jadi disesuaikan saja.
4. Mengethui Ukuran / Lebar Footer
/* Footer
----------------------------------------------- */
#footer {
  width:950px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}



a. Untuk mengedit ukuran/lebar Halaman Blog
Cari kode di bawah ini:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

b. Untuk mengedit ukuran/lebar Halaman Posting
Cari kode di bawah ini:

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */
}

c. Untuk mengedit ukuran/lebar Sidebar Blog
Cari Code di bawah ini:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


d. Untuk mengedit ukuran Header Blog,
Cari Code di bawah ini:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}


e. Untuk mengedit ukuran Footer Blog
Cari Code di bawah ini:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Jika sahabat tidak menemukan kode seperti di atas, untuk mengetahui element seperti header, posting, sidebar dan lebar blogger, cukup mencari kode yang mirip dan ditunjukkan dengan width: (LEBAR) dan height:(TINGGI)

Dengan Mengetahui Ukuran Header, Posting, Sidebar, Footer & Lebar Blogger tentunya akan memudahkan sahabat mengganti dan mengedit blog dengan menyenangkan seperti slogan blog ini.
Happy Blogging! by. Sejuta Trik Blogger
Textual description of firstImageUrl

Pengertian HTML 5

HTML 5

HTML singkatan dari Hyper Tesk Markup Language adalah file teks atau file ASCII yang berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari sebuah halaman web. Didalam file HTML terdapat beberapa “tag” atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.
Salah satu kelebihan file HTML adalah cross platform, artinya file HTML dapat ditampilkan di beberapa Operating System (OS) yang berbeda dan memiliki tampilan yang sama walaupun saat pembuatannya menggunakan satu OS tertentu saja.
HTML telah melalui banyak revisi, dan untuk itu, sekarang HTML 5 sudah mulai dikembangkan dan digunakan.
HTML 5 ini dipublikasikan oleh HTML Working Group di tanggal 23 April, yang membebaskan developer ketika akan menulis aplikasi untuk system operasi yang spesifik

Kelebihan dan kekurangan HTML 5

Beberapa kelebihan yang dijanjikan pada HTML 5:
  • Dapat ditulis dalam sintaks HTML (dengan tipe media teks/html) dan XML.
  • Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.
  • Integrasi (’inline’) MathML dan SVG dengan doctype yang lebih sederhana.
  • Penulisan kode yang lebih efisien.
  • Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.

Elemen baru di HTML 5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:
  • section serupa seperti h1-h6.
  • article bisa berupa entri blog atau tulisan konten.
  • aside menyajikan konten pelengkap.
  • header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
  • footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
  • Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
  • yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas dan elemen terkait berkas multimedia lainnya.

Atribut baru di HTML 5

Dikenalkan pula beberapa atribut baru, seperti:
  • atribut media, ping pada elemen pranala,
  • autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input dan form
  • reversed pada elemen ol untuk urutan besar ke kecil.

Perubahan makna elemen

Ada beberapa elemen yang berubah makna, diantaranya:
  • Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk elemen i.
  • Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi.
  • Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.
  • dan lain-lain.

Elemen dan atribut yang tidak digunakan

Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5:
  • center,
  • font
  • strike, u, big
  • frame, frameset, noframes
  • acronym
  • longdesc
  • scope pada td

Contoh HTML 5

Contoh html5
Yang membedakan dari html biasa adalah:
  • Tidak perlu lagi memakai
  • Deklarasi adalah ‘case-insensitive’. Tidak harus huruf besar/kapital semua.

Browser yang Mendukung HTML
  • Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera 10)
  • Safari (mulai dari versi 3.1)
  • FireFox (Mulai dari FireFox 3 )
  • Google Chrome (Mulai dari versi 3)
  • Internet Explorer (Mulai dari versi 8 )
    Sumber : http://setiawanputu.blogspot.com/2010/07/pengertian-html-5-dan-elemen-elemennya.html