Jelas in Blog

Tag Kondisional Halaman Kesalahan/Error Page Halaman kesalahan atau error page adalah halaman yang salah atau tidak ditemukan. Artinya URL itu tidak ada atau bisa jadi pernah ada lalu dihapus atau dipindahkan.

Tag kondisionalnya adalah seperti ini:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'> OBJEK  </b:if>

Tutorial selengkapnya mengenai penerapan tag kondisional ini bisa Anda baca pada artikel Cara Membuat Error Page Blogger.

Tag Kondisional Halaman Muka/Homepage Halaman muka/homepage adalah tipe halaman murni, yang masih bersih dari cabang URL seperti ini:

http://nama_blog.blogspot.com

Tag kondisionalnya adalah seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'> OBJEK </b:if>

Tag Kondisional Halaman Item
Halaman item adalah tipe halaman yang akan selalu berakhir pada nama berkas, seperti ini:

http://nama_blog.blogspot.com/2011/08/lorem-ipsum.html

Tag kondisionalnya adalah seperti ini:

<b:if cond='dat…

Membuat "error page" atau "404 - Page Not Found" ternyata mudah karena Blogger sudah menyertakan fitur ini di setting-an dashboard. Tapi jika Anda ingin halamannya disesuaikan dengan keinginan Anda maka perlu melakukan beberapa penyesuaian tentunya. Membuat gaya atau style error 404 ini menggunakan Conditional Tag juga (kata orang sudah jago desain template), contoh tag adalah seperti berikut ini,

Sebelumnya saya sudah menerbitkan artikel "Pasang Formulir Kontak/Contact Form Blogger". Artikel kali ini akan memberikan tiga CSS untuk gaya widget formulir kontak blogger Anda. Adapaun cara menerapkannya dalam template blogger dapat Anda baca pada bagian akhri tulisan ini.


01CSS form contact Style #1
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message { padding: 9px; border: solid 1px #E5E5E5; outline: 0; font: normal 13px/100% Verdana, Tahoma, sans-serif; background: #FFFFFF; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; } #ContactForm1_contact-form-email-message { width: 245px; height: 150px; line-height: 150%; } #ContactForm1_contact-form-su…

Sekarang para pengguna blogspot tidak perlu bersusah-susah mencari cara bagaimana cara memasang formulir kontak atau contact form untuk blog. Sebab, Blogger telah meluncurkan sebuah widget baru (dari beberapa widget baru yang ada) yaitu Formulir Kontak atau Contact Form.

Bagaimana menambahkan Formulir Kontak ke blog? Mudah sekali. Login ke akun Blogger> Tata Letak> Tambah Gadget> Gadget Lainnya. Lalu pilih gadget Formulir Kontak.

Berikan nama yang cocok, dan klik simpan untuk menambahkan gadget ini. Selesai.

Fitur Blogger Contact Form:
Form bergaya AJAX Google UI.Mengirim pesan teks sederhana langsung ke email.Dukungan kostumasi CSS.Pesan akan dikirim langsung ke kotak masuk Anda.Tidak memakai layanan pihak ketiga.Pesan teks biasa tanpa lampiran (attachment). Widget ini mendukung kostumasi CSS, oleh karena itu artikel yang akan datang akan membahas penerapan CSS untuk menambah gaya formulir kontak agar lebih cantik.

Selamat belajar :)

Penting menandai komentar admin blogger agar pengunjung dapat membedakan mana komentar admin dan mana yang bukan. Mungkin Anda pernah melihat ada yang menggunakan penanda dalam bentuk gambar di sudut bertuliskan "Admin", dan ada sebagian yang lain menggunakan jQuery.

Kali ini kita hanya akan menggunakan sebuah elemen dengan background sederhana yang diatur melalui CSS. Loadingnya tentu lebih ringan jika dibandingkan menggunakan gambar. Selain itu tentu cara ini sangat mudah, pemula pun dapat melakukannya.

Bagaimana cara menandai atau membedakan komentar Admin? Ikuti langkah-langkah berikut.

Temukan baris kode berikut.

<b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if>
Letakkan elemen berikut setelah baris kode di atas.

<span cl…

Sebenarnya blogger sudah memiliki fitur readmore atau baca selengkapnya. Saat Anda selesai menulis artikel Anda dapat menekan tombol "Insert jump break" untuk memotong artikel menjadi dua bagian. Bagian inilah yang akan terlihat di halaman indeks, sedangkan bagian sisanya akan terbuka setelah Anda mengelik link Readmore atau Baca selengkapnya.

Selain cara tersebut, kita juga dapat membuat readmore dengan mengambil cuplikan atau potongan paragraf pertama artikel dalam beberapa kalimat. Jadi tidak menggunakan jump break seperti yang disebutkan di awal. Dua hal berbeda dengan fungsi yang sama.

Temukan <data:post.body/>
Ganti dengan ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div class='post-snippet' expr:data-snippet='data:post.snippet'/> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quo…

Ini adalah kode html dan css paling dasar atau paling minimal untuk sebuah template blogspot. Maksudnya begini, cukup copy-paste semua kode ini pada template editor blog kemudian upload maka jadilah blog anda. Simple. Sangat simple, namun tentu tampilannya pun masih belum jelas. Posisi semua elemen akan berjejer dari atas ke bawah. Sidebar letaknya belum di kanan atau di kiri. Warnanya masih hitam dan putih. Pokoknya sederhana sekali. Boleh dikata tidak ada bentuknya. Hanya teks saja. Jadi anda tidak perlu menulis kode yang panjang-panjang untuk membentuk halaman postingan. Cukup dengan baris kode,

<b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section>
baris kode lainnya akan di-generate otomatis saat anda selesai meng-upload-nya. Jadi, kode yang simple ini nanti akan menjadi panjang setelah diuunggah.

Kode HTML paling dasar blog<…

Menambahkan tooltip ke dalam struktur template akan menambah daya tarik pembaca mengeksplorasi halaman web kita. Apa itu tooltip ? Tooltip adalah deskripsi pembantu saat seseorang menyorot link (hover) atau gambar yang sudah disertai tooltip didalamnya, sehingga deskripsi link atau gambar akan muncul.

Cara membuat tooltip menggunakan CSS Login ke dashboard blogger Anda (pastilah hehe)
Klik Edit HTML
Temukan tag ]]></b:skin>
Lalu letakkan CSS berikut diatas tag ]]></b:skin>


.jlb-tooltip { outline: none; cursor: help; position: relative; text-decoration: none; border-bottom: 1px dotted #000; } .jlb-tooltip span { margin-left: -999em; position: absolute; color: #000; } .jlb-tooltip:hover span { font-family: Trebuchet MS, Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 0px 0px 9px #0000…