Zero Point: Tricks Blogging

Tampilkan postingan dengan label Tricks Blogging. Tampilkan semua postingan

Template Blogger Agar Menjadi Valid XHTML

Written By Unknown on Rabu, 30 Mei 2012 | 03.16

Rabu, 30 Mei 2012

Belajar Bareng Yuk Gimana caranya agar template blogger kita Valid XHTML di W3C. Sebelum melangkah jauh ada yang perlu kita ketahui bersama bahwa Valid XHTML hanya di halaman depan alias di mode Home bukan di Sub Halaman karna kita tahu bahwa widget di Blogger juga bermasalah seperti komentar, image, script iklan yang menggunakan php, jquery, Followers bawaan blogger yang penempatannya tidak benar dan masih banyak lagi.

Sebagai langkah percobaan mari kita gunakan template Minima setelah itu coba buka di New Tab http://validator.w3.org/, ketikkan alamat URL blog sobat di kolom address setelah itu klik tombol Check. setelah terlihat hasil eror "Errors found while checking this document as XHTML 1.0 Transitional!" jangan di tutup dahulu hmmm.. berapa Result error-nya...?? banyak ya...?? kita kurangi satu persatu yuk biar berkurang jumlah errornya.

1. Hapus Widget Penyebab Error
Masuk ke widget element laman hapus Widget Followers, Tenang aja nanti kita buat Widget Followers ini menjadi Valid tapi untuk sekarang silahkan hapus dulu saja, dan jangan lupa rubah juga arsip Blog Menjadi Flat list. Jangan lupa di save dan kembali lagi ke http://validator.w3.org/ yang sudah di berikan url sobat kemudian refresh lihat hasilnya apakah berkurang?

2. Rubah DOCTYPE
Cari kode di bawah ini
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Membuat Teks Area Dengan Style Berbeda

Written By Unknown on Senin, 07 Mei 2012 | 21.31

Senin, 07 Mei 2012

Sebelumnya telah dibahas mengenai pembuatan teks area secara default, untuk mengkostumisasi atau memberikan style yang berbeda dan menarik ada beberapa langkah pembuatannya dan tentu saja dengan adanya penambahan kode.

dibawah ini beberapa contoh teks area dengan kostumisasi menarik dengan style yang apik :

1. Teks Area Dengan Background Warna

2. Teks Area Dengan Background Gambar

Background dan ukuran besar kecilnya kolom teks area bisa kalian rubah
Semoga bermanfaat

Read More | komentar

Tricks Blogging

Highlight Teks Area Untuk Blogspot

Teks area merupakan suatu ruang untuk menyimpan teks atau tulisan dengan membentuk area baru. seperti kebiasaan orang, teks area biasanya digunakan untuk menyimpan kode-kode HTML atau teks agar menjadi pembeda dalam penyajian penulisan, untuk jelasnya perhatikan contoh ini.

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="15" name="txt" rows="50" style="height: 60px; width: 350px;" wrap="VIRTUAL">Semoga tulisan yang ada diblog ini bisa bermanfaat untuk para pembacanya dan bisa memberikan tambahan ilmu pengetahuan terutama dalam proses pembuatan teks area, terima kasih</textarea></div>
</form>
</div>

kode tersebut diatas adalah yang membentuk contoh teks area yang menggunakan tombol highlight.

Keterangan Elemen :

* <div align="center"> dan <p align="center"> : merupakan kode untuk mengatur posisi tombol highlight berada pada posisi tengah dan <p align="center"> untuk menempatkan kotak teks area pada posisi tengah, untuk customisasi sendiri bisa dirubah kesebelah kiri atau kanan dengan mengganti kata center dengan left atau right.

* style="height: 50px; width: 300px;" : untuk merubah ukuran panjang dan lebar teks area.

* <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> : keterangan ketika tombol highlight di klik, maka seluruh isi akan terpilih atau di blok.

N/B : apabila isi dari teks area panjang sedangkan kotak teks areanya kecil, nantinya teks area akan membentuk tombol scroll secara otomatis.

Untuk penambahan Style Teks Area yang lain, bisa melihat yang ini "Teks Area Dengan Background"

Semoga bermanfaat.

Read More | komentar

Tricks Blogging

Membuat Paragraf Text Indent di Postingan

Pada sebuah buku pasti sobat menjumpai tulisa yang pada paragraf pertamanya menjorok ke dalam. Apakah kita bisa menerapkannaya pada blog kita ? Tentu saja bisa….., seperti pada artikel yang saya buat ini. Pada Blogger maupun wordpress tidak ada seperti ini atau kebanyakan orang menyebutkan namanya Text Indent.

Tak usah kawatir cara membuatnya tidak terlalu susah, kita hanya menambahkan sebuah code Html di postingan kita dan secara otomatis teks yang kita buat pada tulisan pertamanya akan menjorok kedalam seperti pada postingan yang saya buat ini. Yang perlu sobat lakukan hanya mengcopy script Html di bawah ini dan pastekan di postingan sobat. pastikan postingan dalam mode Html apabila salah maka teks tidak akan menjorok ke dalam.

<p class="MsoNormal" style="text-align: justify; text-indent: 0.5in;">Tulis teks sobat disini....</p>

• text-align : peratan pada tulisan.
• text-indent : dalamnya kalimat yang menjorok kedalam.
Anda tidak perlu mengcopy lagi Htmlnya setiap kali anda ingin membuat sebuah paragraf baru sobat tinggal Enter dan secara otomatis akan membentuk sebuah paragraf baru yang menjorok kedalam. Gampang sobat bisa mencobanya.....

Semoga Bermanfaat

Read More | komentar

Tricks Blogging

Cara Mudah Membuat Scroll Pada Blog

Salah satu fungsi daripada membuat scroll adalah untuk menghemat space pada blog kita. Sehingga apabila kita akan membuat label ataupun widget berukuran terlalu besar sidebar blog berukuran terbatas kita bisa mengakalinya dengan membuat scroll box ini. Ok untuk lebih jelasnya kita langsung praktik aja gan..

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit Element
4. Klik Add Widget dan pilih HTML/Javascript
5. Copas salah satu cara dari kode berikut

Cara 1 :
<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;">Copy paste disini code yang ingin ditampilkan</div>

Cara 2 :
<div class="'rbbox'"><div style="'margin:0;"><Copy paste disini code yang ingin ditampilkan></div></div>

Cara 3 :
<div style="overflow: auto;background-color:#C7DFB5; margin: 0px auto; padding: 5px; height: 200px;width: 94%;text-align: left;"> Copy paste yang ingin ditampilkan </div>

Cara 4 :
<div class="'rbbox'"><div style="'margin:0;"><Copy paste yang ingin ditampilkan></div></div>

Semoga Bermanfaat

Read More | komentar

Tricks Blogging

Membuat Scroll Blog Archive

Dengan membuat scroll pada arsip blog, akan membuat panjang sidebar ke bawah tetap. Walau pada bulan tertentu banyak postingan atau sedikit arsip blog yang tampilannya herarki akan terlihat rapi dengan adanya scroll. Jika kita sudah menambahkan widget arsip blog dengan model herarki, langsung saja lakukan langkah selanjutnya.

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

6. Kode lengkapnya adalah seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

Kode : <div style='overflow:auto; width:ancho; height:200px;'> dan </div></div> adalah kode yang ditambahkan.
7. Angka 200 adalah tingginya, dan kita bisa ubah seseuai selera.
8. Simpan jika sudah selesai.

Semoga Bermanfaat

Read More | komentar

Tricks Blogging

Membuat Spoiler di Blogspot

Membuat Spoiler pada blog berfungsi untuk menyembunyikan atau untuk meringkas artikel, gambar, kode CSS atau kode javascripts supaya tidak memakan tempat pada post, untuk menyingkat teks atau kode scripts bisa juga dengan menggunakan fungsi scroll ataupun dengan mengunakan teks area.

Spoiler itu sendiri bisa ditempatkan pada blog post, sidebar, header maupun footer. coba perhatikan contoh dibawah ini :
Silahkan klik tombol Show :

Keterangan Spoiler

Untuk membuatnya, copy kode dibawah ini kedalam postingan atau sidebar :

Keterangan Spoiler
 
ISI SPOILER DENGAN TEKS ATAU SCRIPTS CODE

Keterangan Spoiler : merupakan judul dari spoiler itu sendiri
Show : Kalimat yang muncul pada tombol spoiler, bisa kalian ganti dengan kata buka/tutup
Isi Spoiler Dengan Teks atau Scripts Code : Merupakan tempat untuk mengisi dari spoiler tersebut

Semoga bermanfaat

Read More | komentar

Tricks Blogging

Membuat Tabel di Postingan 2

Simplicity Site : Sekarang kita sudah memahami cara membuat sebuah tabel dalam sebuah posting, tulisan ini merupakan kelanjutan dari cara membuat tabel di postingan 1, bagi yang belum mengetahui cara membuat tabel sebaiknya melihat caranya dengan meng-klik link tersebut. Dalam sebuah tabel kadang kita perlu menyatukan atau menggabungkan sebuah kolom atau baris untuk membentuk suatu susunan data yang sesuai, teratur dan rapih.

Waktu kita melakukan pengisan data pada tabel, kadang data yang harus diisi terdiri dari beberapa baris dalam beberapa kolom dengan 1 judul. Untuk kolom judul yang membawahi beberapa baris dan kolom, kita harus melakukan penggabungan 2 kolom atau lebih untuk membawahi baris-baris tersebut, sebagai ilustrasi seperti tergambar pada tabel dibawah ini :

Gabungan Kolom
Baris 2 - Kolom 1	Baris 2 - Kolom 2
Baris 3 - Kolom 1	Baris 3 - Kolom 2

dalam tabel tersebut menggambarkan 1 judul kolom (Perhatikan Gabungan Kolom) membawahi 2 baris kolom pertama dan 2 baris kolom kedua, untuk membuat itu kita perlu menambahkan keterangan perintah tambahan pada kode kolom pada kolom data berisi tulisan gabungan kolom dengan perintah colspan, seperti terlihat penggunaannya pada kode tabel dibawah ini :

 
 
Gabungan Kolom 
 
 
Baris 2 - Kolom 1 
Baris 2 - Kolom 2 
 
 
Baris 3 - Kolom 1 
Baris 3 - Kolom 2

colspan adalah perintah untuk menggabungan beberapa kolom menjadi 1, seperti dalam kode diatas yaitu kode <td colspan="2"> menggambarkan perintah untuk menggabungkan 2 kolom, jika ingin menggabung 3 atau 4 kolom, kalian bisa mengubah angka 2 didepan kode colspan dengan jumlah kolom yang akan digabungkan.

Setelah mengatahui cara menggabungkan kolom menjadi satu, bagaimana dengan menggabungkan 2 atau beberapa baris menjadi satu, caranya sama dengan menggabungkan kolom menjadi satu, hanya kode keterangan perintah yang dipakai adalah rowspan, seperti tergambar pada deretan kode tabel dibawah ini :

 
 
Gabungan Kolom 
 
 
Baris 2 - Kolom 1 
Baris 2 - Kolom 2 
 
 
Baris 3 - Kolom 2

dan hasilnya seperti ini :

Gabungan Kolom
Baris 2 - Kolom 1	Baris 2 - Kolom 2
	Baris 3 - Kolom 2

Dari kedua contoh penggabungan kolom dan baris diatas, kita sudah bisa membuat tabel dengan data-data yang lebih teratur dan rapih.

Selamat Mencoba dan Semoga Bermanfaat

Read More | komentar

Tricks Blogging

Membuat Tabel di Postingan 1

Tabel adalah suatu system cara untuk mengelompokkan sesuatu baik itu kata, kalimat, angka atau gambar agar lebih terperinci dan tampak rapi sehingga seorang pembaca menjadi lebih mudah memahaminya.
Untuk lebih jelasnya kalian bisa melihat tabel bahasa di bawah ini :

Indonesia	Inggris	Surabaya
Makan	Eat	Mangan
Minum	Drink	Ngombe
Tidur	Sleep	Turu
Main	Play	Dolen
Lihat	See/Look	Ndelok

Bagaimana teman-teman? kalian sudah mengerti kan tentang tabel. Kalau ada di antara kalian yang belum mengerti bagaimana cara membuat tabel sedangkan kalian ingin membuat tabel untuk mengelompokkan sesuatu di postingan kalian. Silahkan kalian ikuti langkah-langkah berikut.

Perintah dasar tag HTML untuk membuat tabel :

<table>......</table> Adalah Perintah untuk membuat tabel
<tr>.........</tr> Adalah Perintah untuk membuat baris
<td>.........</td> Adalah Perintah untuk membuat kolom

border, width, align, bgcolor Adalah Kode tambahan untuk pengaturan tebal garis border, lebar tabel, perataan teks dan warna background

1. Login ke akun blogger kalian.
2. Klik Posting lalu masukan kode di bawah ini dalam posisi Edit HTML


Indonesia Inggris Surabaya
Makan Eat Mangan
Minum Drink Ngombe
Tidur Sleep Turu
Main Play Dolen
Lihat See/Look Ndelok

3. Jika semuanya sudah rampung tinggal kalian klik Terbitkan Entri/Publish
Oh iyah kalian juga bisa membuat tabel ini pada gadget blog kalian

Semoga bermanfaat.

Read More | komentar

Zero Point

Template Blogger Agar Menjadi Valid XHTML

Written By Unknown on Rabu, 30 Mei 2012 | 03.16

Rabu, 30 Mei 2012

Membuat Teks Area Dengan Style Berbeda

Written By Unknown on Senin, 07 Mei 2012 | 21.31

Senin, 07 Mei 2012

Highlight Teks Area Untuk Blogspot

Membuat Paragraf Text Indent di Postingan

Cara Mudah Membuat Scroll Pada Blog

Membuat Scroll Blog Archive

Membuat Spoiler di Blogspot

Membuat Tabel di Postingan 2

Membuat Tabel di Postingan 1

Author Info

Followers

Categories

Written By Unknown on Rabu, 30 Mei 2012 | 03.16

Rabu, 30 Mei 2012

Written By Unknown on Senin, 07 Mei 2012 | 21.31

Senin, 07 Mei 2012

document.write(ultimaFecha);

document.write(ultimaFecha);

document.write(ultimaFecha);

document.write(ultimaFecha);

document.write(ultimaFecha);

document.write(ultimaFecha);

document.write(ultimaFecha);

Author Info

Followers

Categories