BOCAH WEB: HTML

Download Free Android Apps

Ads 728x90

Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts
Pnggunaan Tag Blogger Pada Template
October 19, 2017

PENGGUNAAN TAG BLOGGER PADA TEMPLATE


membuat-tata-letak-dengan-widget-section-


<b:section id=’sidebar’ class=’sidebar1′ showaddelement=’yes’> 
Coba perhatikan gambar! Section ini akan membuat semacam ruang. Bisa kita letakkan sebagai Main dan Sidebar. Kalau mau bikin 3 kolom, buatlah section Sidebar_Left, Main, dan Sidebar_Right. Misal dibawah Anda mau bikin Footer? Silahkan. Dibawah footer ada anaknya Footer1, Footer2, Footer3 juga bisa. Penggunaan ID dan Class bebas. Atribut showaddelement bisa yes atau no. Kalau yes, nanti akan ada tulisan “Tambahkan Widget” di setiap section bar.

format-penulisa-tag-widget-


<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’> 
Setelah kita membuat section bar, nanti kita tinggal tambahkan widget yang diinginkan. Kalau kita mau buat widget sendiri yaa gunakan saja HTML/JavaScript. Untuk ID biasanya akan otomatis diisi oleh saat kita menambah widget baru. Kalau Anda mau menambahkan atribut class sebagai kelompok CSS nantinya, iya silahkan. Locked disini berarti widgetnya tidak bisa di-drag (pindah posisi). Valuenya true atau false. Kalau Anda tidak mengisi atribut title, maka judul widget tidak akan muncul. Tag widget ini adalah child dari tag section, maka diluar section tidak bisa digunakan.

<b:includable id=’post’ var=’post’> 
Tag ini biasanya akan otomatis muncul di dalam tag widget. Saya asumsikan beberapa tag includable ini berfungsi untuk membuat baris pengaturan pada widget tersebut. Coba Anda buka menu Tata Letak, klik edit pada widget Blog Posts. Maka akan terbuka seperti gambar dibawah ini, kan?
menu-edit-widget--includable-tag
Nah, lalu coba klik juga edit pada widget HTML. Pasti tampilan baris pengaturannya berbeda. Seperti contoh format widget HTML diatas, dapat kita lihat hanya terdapat satu tag includable maindisana. Yang didalam tag includable main tersebut, ada <data:title/> dan ada <data:content/>. Kurang lebih seperti itu. Tag includable ini child dari tag widget, hanya bisa tampil setelah ada widget.

<b:include data=’top’ name=’status-message’/> 
Tag include seperti ini bisa dikatakan sebagai pemanggil. Atribut name hampir mirip fungsinya seperti atribut href yang valuenya merupakan suatu alamat. Jadi tag ini memerintahkan untuk menambahkan data tertentu. Value atribut yang digunakan, mestinya berhubungan dengan beberapa tag Blogger lain yang ada pada template atau yang dimengerti oleh sistem Blogger. Untuk beberapa tag include bisa juga tidak digunakan seperti misal <b:include name=’quickedit’/> lebih baik dihapus.

<b:loop values=’data:posts’ var=’post’> 
Tag ini fungsinya untuk melakukan perintah pengulangan. Sebagai contoh pada halaman beranda biasa Anda akan melihat beberapa konten artikel sekaligus kan? Seperti pada Beranda Javaone45 disana akan muncul 6 Artikel terbaru. Nah, di dalam source template sebenarnya kita hanya membuat satu kali susunan elemen saja. Lalu tinggal letakkan diantara tag looping ini.

<b:if cond=’data:post.url’> 
Pada template Blogger kita akan banyak sekali menggunakan tag jenis ini nantinya. Kalau Anda lihat pada bagian elemen widget Blog saja, pasti banyak dijumpai tag conditional. Untuk memahami bagaimana cara membacanya silahkan baca dulu Macam-macam Conditional Tag Blogger. Dengan adanya tag ini bisa saja kelihatan dalam satu template terdapat beberapa ID elemen yang sama. Kenapa bisa? Karena bisa jadi yang satu cuman tampil di halaman beranda dan satu lagi di halaman artikel.

<data:post.numComments/> 
Kalau yang ini mungkin sudah tahu kan fungsinya untuk apa? Seperti di penjelasan widget diatas, setiap tag berawalan <data: umumnya akan menampilkan isi yang sudah ada di database Blogger. Inilah yang sifatnya variabel. Karena datanya tidak ada pada template kita. Seperti beberapa postingan yang sudah kita tulis, seberapa banyak jumlah komentar, isi dari komentar, dsb. Semua data tersebut mesti dipanggil dengan perintah tag ini.

<link expr:href=’data:blog.homepageUrl + &quot;feeds/posts/default&quot;’ expr:title=’data:blog.title + &quot; – Atom&quot;’ rel=’alternate’ type=’application/atom+xml’/> 
Sebenarnya ini bentuk tag HTML biasa. Hanya saja untuk value dari atributnya menggunakan data: maka prinsipnya sama seperti tag data sebelumnya. Cuman lagi pada bagian atribut mesti ditambahkan expr: sebelum nama atributnya.

Contoh sebelum dan sesudah tag ini diterapkan pada template: 
<a expr:href=’data:blog.homepageUrl + &quot;p/about.html&quot;’ title=’Profil Admin Selengkapnya’> 
<a href=’http://www.javaone45.blogspot.com/p/about.html’ title=’Profil Admin Selengkapnya’> 
Dengan menggunakan tag jenis seperti ini, nantinya value atribut akan menyesuaikan dengan data yang ada pada blog.
Pemahaman Lengkap Tentang Tag Conditional
October 19, 2017
Apa itu tag conditional ? Suatu tag yang diguankan sebagai pembatas fungsi dalam melakukan suatu tindakan atau perintah, sehingga akan bekerja sesuai kondisi tertentu yang diinginkan. Secara umum formula atau rumus dasar tag conditional seperti berikut:


Bentuk 1

1
2
3
<b:if cond=' kondisi tampilan == halaman A '>
ISI KONTEN
</b:if>

Dalam bahasa lisan artinya:
Jika kondisi tampilan sekarang ini adalah kondisi halaman A maka baru boleh tampilkan isi konten. Jika bukan kondisi halaman A jangan tampilkan isi konten tersebut.  Contohnya, jika ada empat halaman kita ingin mengubah satu halaman saja, maka gunakan bentuk ini untuk mengapit perintah yang akan digunakan. Sehingga tiga halaman lain tidak akan ikut mengalami perubahan.

Bentuk 2

Coba lihat perbedaannya dari bentuk pertama hanya terletak pada tanda seru != ini saja, kalau yang pertama menggunakan tanda ==

Dalam bahasa lisan artinya:
Jika kondisi tampilan sekarang ini BUKAN kondisi halaman A maka baru boleh tampilkan isi konten. Jika kondisi tampilan benar halaman A jangan tampilkan isi konten. Atau perintah ini adalah kebalikan dari bentuk yang pertama. Contohnya, jika ada empat halaman kita ingin merubah tiga halaman sekaligus, maka gunakan bentuk ini untuk melakukan pengecualian perintah pada satu halaman yang tidak diinginkan tersebut.


Bentuk 3

Ini sudah agak lebih sulit. Bisa dikatakan ini semacam fungsi pilihan majemuk atau ganda. Yaitu dengan menambahkan tag <b:else> diantara tag <b:if>. Bedanya dengan bentuk yang pertama, conditional tag ini tentu lebih membatasi konten selain dari halaman yang diinginkan karna juga mencantumkan perintah jika kondisi nya tidak sesuai dengan perintah awal.

Dalam bahasa lisan artinya:
Jika kondisi tampilan sekarang adalah kondisi halaman A maka tampilkan isi konten A. Tapi jika bukan kondisi halaman A maka tampilkan konten halaman lainnya.


Bentuk 4
Bentuk tag ini adalah kebalikan dari tag 3 diatas, Secara formula hampir sama bahkan kegunaan dari tag conditional ini pun hampir sama , hanya pada saat kita menggunakan gabungan beberapa macam tag conditional sekaligus maka akan terlihat perbedaannya secara lebih detail, tag inilah yang sebenarnya harus kita gunakan bukan yang tag conditional ketiga.

Dalam bahasa lisan artinya:
Jika kondisi tampilan sekarang bukan kondisi halaman A maka tampilkan isi halaman lainya , tapi jika benar ini adalah tampilan kondisi halmaan A maka tampilkan isi konten A.

Penggunaan Tag Conditional Pada Blogger

Tag <b:if> kita akan melihat sebuah tampilan perbedaan yang signifikan , antara home page dan index page dari sebuah tampilan web

VS

Beberapa jenis tag Conditional Blogger

1. Halaman Beranda (Home Page)
<b:if cond=‘data:blog.url == data:blog.homepageUrl’>
Hasil dari tag
2. Halaman Pencarian (Index Page)
<b:if cond=‘data:blog.pageType == &quot;index&quot;’>
Hasil dari tag
3. Halaman Artikel (Item Page)
<b:if cond=‘data:blog.pageType == &quot;item&quot;’>
Hasil dari tag
4. Halaman Statis (Static Page)
<b:if cond=‘data:blog.pageType == &quot;static_page&quot;’>
Hasil dari tag
5. Halaman Tak Dikenal (Error Page)
<b:if cond=‘data:blog.pageType == &quot;error_page&quot;’>
Lihat hasil tag
6. Halaman Arsip (Archive Page)
<b:if cond=‘data:blog.pageType == &quot;archive&quot;>
Hasil dari tag .
7. Halaman Spesifik (URL Page)
<b:if cond=’data:blog.url == &quot;ALAMAT_URL&quot;>
Silahkan ganti ALAMAT_URL dengan yang sahabat inginkan. Misalnya, http://javaone45.blogspot.co.id

Tag Html Dasar
October 19, 2017
Beberapa Tag Html dasar yang penting dan kita harus pahami dalam pembuatan sebuah template website. kita ambil beberapa tag penting saja walaupun sebenarnya kita juga perlu mengenal semuanya. berikut beberapa tag html yang perlu kita pahami:

  • tag heading mulai dari <h1> <h2> <h3> <h4> <h5> <h6>
  • tag bentuk umum seperti <div> <span> <header> <nav> <footer>
  • tag dalam table <table> <td> <tr> <ul> <ol> <li> 
  • tag dalam paragrap <p> <br> <i> <u> <b> <pre> <center> <font> 
  • tag formulir <form> <input> <button> 

Tiga Elemen Yang Wajib Disertakan Dalam Membuat Template BLog
October 19, 2017
Tiga Elemen Dalam Truktur Template Blog
Setelah kita menyelesaikan pembuatan Tag Html dan desian Css ada beberapa hal yang wajib dipahamai setelah tahap ini, yaitu tiga elemen penting yang masing-maisng memiliki fungsi khusus didalam tag html , jika ketiga tag ini diabaikan bisa dipastikan template yang telah didesain tidak akan dapat diterapkan kedalam blog secara online



Ada tiga elemen penting yang wajib dipasang dalam desain template yaitu:
  1. b:skin
  2. b:section
  3. b:widget
Selain ketiga elemen tersebut masih ada dua elemen lagi yang memiliki peran penting dalam mengatur struktur template blog agar lebih maximal yaitu:
  1. widget Navbar
  2. widget Blog
Artikel ini hanya sekedar tambahan sebelum kita memulai proses pembuatan koding Html dan Css agar bisa diterapkan lebih maximal kedalam blog secara online ada variable Html lain yang wajib kita kuasai dan pahami sebagai pelengkap tutorial desian template sendiri


Kurang lebih ini.

Tag Html head dan body

Maka contoh format penulisan HTML yang diatas tadi, harus kita ubah menjadi:

Dengan bentuk seperti ini, nantinya template akan memanggil database yang ada pada hosting blog untuk menampilkan Judul dan Artikel pada blog kita. 

Ads 728x90