OPTIMIZING TEHCNOLOGY: Blogging Tutorial

Cara Membuat Atau Menampilkan Title Postingan Yang Berkaitan 7

Jumat, Januari 22, 2010

Seringkali mungkin anda menemukan blog pada blogspot yang hanya menampilkan judul-judul postingan biasanya terletak dibawah artikel atau postingan yang saat itu sedang dibuka. Judul-judul postingan yang dimaksud diatas lebih dikenal luas oleh para blogger dengan istilah related posts atau artikel-artikel yang berkaitan. Disebut artikel berkaitan sebab mereka tampil berdasarkan label atau category yang sama.

Tujuannya agar para visitor yang berkunjung lebih mudah meloncat dari satu halaman ke halaman yang lain dan yang lebih penting lagi adalah mereka juga bisa mengetahui hal apa saja yang anda tulis berkaitan dengan category tertentu dan yang pasti blog anda akan lebih mudah terindeks oleh mesin pencari. Menarik bukan ? Tertarik untuk membuatnya ? Okelah kalau begitu, . . Simak cara membuat related posts atau cara membuat artikel terkait berdasarkan label atau category di blogspot berikut ini :

Login ke Blogger → Dashboard → Tata letak → Edit Html, kemudian beri tanda centang di bagian sudut kanan atas kolom notepade.
Cari kode <data:post.body/>
Jika blog anda menggunakan fungsi read more, akan ada 2 kode seperti di atas, pilih yang pertama dari atas.
Copy kode berikut dan letakan persis dibawah kode di atas :

<b:if cond='data:blog.pageType == "item"'><div class='similiar'><div class='widget-content'><h2>Artikel Terkait :</h2><div id='data2007'/><br/><br/><script type='text/javascript'>var homeUrl3 = "<data:blog.homepageUrl/>";var maxNumberOfPostsPerLabel = 1;var maxNumberOfLabels = 10;maxNumberOfPostsPerLabel = 100;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement('ul');var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i < maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {alturl = entry.link[k].href;break;}}var li = document.createElement('li');var a = document.createElement('a');a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l < json.feed.link.length; l++) {if (json.feed.link[l].rel == 'alternate') {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k<20; k++) label = label.replace("%20", " ");var txt = document.createTextNode(label);var h = document.createElement('b');h.appendChild(txt);var div1 = document.createElement('div');div1.appendChild(h);div1.appendChild(ul);document.getElementById('data2007').appendChild(div1);}}}function search10(query, label) {var script = document.createElement('script');script.setAttribute('src', query + 'feeds/posts/default/-/'+ label +'?alt=json-in-script&callback=listEntries10');script.setAttribute('type', 'text/javascript');document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = "<data:label.name/>";var test = 0;for (var i = 0; i < labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length <= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel < maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div></div></b:if>
Setelah itu klik simpan.

Penting : Setelah sobat menggunakan fungsi di atas, lakukan verifikasi terhadap label atau category di setiap postingan sobat sebelumnya, agar kiranya artikel yang di tampilkan benar-benar sesuai dengan thema masing-masing postingan.

Selamat Mencoba

Sekedar ingin meramaikan habitat mesin pencari dengan key word "cara membuat readmore" atau "cara membuat baca selengkapnya" pada postingan blog di blogspot, sekaligus menjawab pertanyaan dari sobat blogger tentang cara membuat readmore atau baca selengkapnya pada postingan blog di blogspot yang masuk ke facebook saya, maka saya sengaja membuat postingan ini meski saya tau bahwa trik ini sudah tersebar luas bagai virus di mesin pencari (sebenarnya postingan ini cuma trik SEO).

Namun yang akan saya berikan disini bukan read more biasa, anda tidak perlu untuk masuk ke pengaturan format dan meletakan template postingan blog, anda hanya perlu menulis sesuka hati, sebanyak anda mampu dan fungsi readmore akan berfungsi secara otomatis.

Lebih lanjut silahkan simak tutorialnya di bawah ini :

Log in ke dashboad dengan akun google kamu, pilih blog yang hendak dipasang readmore dan klik Pengaturan → Edit Html, beri tanda centang pada Expand Template Widget yang terletak di sudut kanan atas notepad.
Temukan kode </head> [tips : Control + F dan masukan kode yang mau dicari]

Letakan kode script dari kang Jaloe berikut ini dibawah kode </head>

<script type='text/javascript'>
var thumbnail_mode = "no-
float" ; summary_noimg =
430; summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120; </
script> <script src='http://
rizqi.moehamed.googlepages.com/
read-moreotomatis.js'
type='text/javascript'/>
Setelah itu cari kode ini <data:post.body/>
Hapus kode di atas, kemudian ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType !
= "item"'> <div
expr:id='"summary"
+ data:post.id'><data:post.body/
></div> <script type='text/
javascript'>createSummaryAndThumb
("summary<data:post.id/
>");</script> <span
class='rmlink'
style='float:right;padding-
top:20px;'><a
expr:href='data:post.url'> read
more “<data:post.title/
>”</a></span> </b:if>
<b:if cond='data:blog.pageType
==
"item"'><data:post.body/
></b:if>
Kemudian klik Save Template

Silahkan buat postingan baru untuk melihat hasilnya.

Sebagaimana yang pernah dijelaskan mengenai tahap awal memahami kode html, maka kitapun dapat menarik kesimpulan bahwa html-lah yang berperan penting untuk menyusun tampilan dan memberikan informasi yang dapat kita lihat pada aplikasi browser sebuah komputer, baik berupa warna, tataletak, style, ukuran, jenis font, tautan (link), dan masih banyak lagi. Namun disamping kode Html, masi terdapat beberapa bahasa pemograman lainnya seperti PHP, CSS, XHTML (versi html yang lebih tinggi), Java Script dan lain sebagainya yang juga berperan dalam menerjemahkan informasi kepada users melalui sebuah aplikasi browser yang dijalankan pada perangkat yang kompatible semisal PC, handphone, PDA, dLL.

Salahsatu contoh yang akan dibahas pada postingan kali ini adalah kode jenis <marquee> (kenapa harus <marquee> ? Karna saya juga masi dalam tahap belajar bro) yang tidak lain juga merupakan 1 dari sekian banyak kode Html dan merekapun memiliki fungsi sendiri-sendiri yang nantinya diterjemahkan oleh browser sesuai dengan instruksi dari si programer.

Ada banyak hal yang bisa dilakukan untuk membuat fungsi kode html marquee lebih variatif, tentunya juga harus dibubuhi dengan kode html lainnya yang mendukung efek dari kode html <marquee>. Kemudian juga ada kode CSS yang memberikan sentuhan style yang elegan.

Ohya, perlu sobat ketahui secara default, teks atau obyek seperti gambar dan lain sebagainya yang telah di format kedalam kode html <marquee> sudah memiliki arah (dari kanan ke kiri), style dan kecepatan standar apabila formatnya hanya seperti ini :
<marquee>teks atau obyek lain berada disini</marquee>
Hasilnya :
teks atau obyek lain berada disini

Biar ga ribet, kita hanya akan menggunakan "teks" sebagai objek dalam experimen ~~bom nuklir~~ berikut ini :D

Menampilkan arah teks dari kiri ke kanan

Menampilkan arah teks dari kiri ke kanan

Kode :

<marquee direction="right">Menampilkan arah teks dari kiri ke kanan</marquee>

Menampilkan kecepatan dari gerakan teks

Menampilkan kecepatan dari gerakan teks

Kode :

<marquee scrollamount="20">Menampilkan kecepatan dari gerakan teks</marquee>

Ket : 20 adalah tingkat kecepatan, sobat dapat mengubahnya sesuai selera.

Menampilkan gerakan bolak-balik pada teks

Menampilkan gerakan bolak-balik pada teks
Kode :

<marquee behavior="alternate">Menampilkan gerakan bolak-balik pada teks</marquee>

Menampilkan warna sebagai background pada teks

Menampilkan warna sebagai background pada teks

Kode :

<marquee bgcolor="00ff00">Menampilkan warna sebagai background pada teks</marquee>

Ket : Kode #00ff00 adalah kode CSS yang menentukan warna pada background teks, ini juga dapat di ubah. Kalau ga mau repot dengan lambang angka-angkanya, bisa ditulis jenis warnanya tapi dengan bahasa inggris. Misalnya, untuk warna biru (#ff0000) langsung ditulis aja "blue"

Menampilkan lebar jalur teks yang bergerak

Menampilkan tinggi jalur teks yang bergerak

Kode :

<marquee height="30px">Menampilkan tinggi jalur teks yang bergerak</marquee>

Ket : Angka 30px merupakan tinggi dari tempat jalur kemunculan teks

Menampilkan lebar tempat kemunculan teks

Menampilkan lebar tempat kemunculan teks
Kode :

<marquee width="200px">Menampilkan lebar tempat kemunculan teks</marquee>

Ket : angka 200px merupakan nilai dari lebar tempat kemunculan teks. Untuk alternatif lain, Sobat juga bisa angka pixel dengan nilai persentase.
Untuk lebih jelasnya tentang cara menentukan nilai persentase, silahkan klik di sini.

Sekedar mengingatkan yah, pada penjelasan diatas, saya menggunakan teks sebagai objeknya. Jadi sobat yang baik hati dan tidak sombong dan rajin menabung bisa menggunakan objek lain seperti gambar, url, banner dan lain sebagainya. Yasudah, sampai disini jika ada yang kurang jelas dan jika ingin diperjelas, silahkan keluhannya di cantumkan pada kotak komentar !!

Happy Blogging

Merasa bingung dengan judul diatas ? Hehe,.. Yasudah, ga usah dipikirin judulnya mau gimana dan harus bagaimana, terus terang saya juga bingung nih... menentukan judul yang paling tepat untuk artikel ini, bukan apa apa sih,,,,,,tapi karena saya jadi terinspirasi dari cara membuat teks berjalan yang dikasi sama Om Google, akhirnya terpikir oleh saya untuk mencoba mengeksplorasi fungsi dari tags HTML yang menjadi power dari teks berjalan tersebut. Dan perlu sobat ketahui bahwa trik ini adalah bukan saya yang pertama kali menemukannya, akan tetapi saya mengetahuinya dari berbagai experimen yang saya buat sendiri, Makanya saya bingung alias ga tau bahasa di internetnya apa. Terserah mau dibilang kebetulan atau semacamnya,, asal jangan kepikiran kalau saya telah mengklaim sebagai orang yang pertama menemukan trik

tersebut. Ok !! (Haduhhh Rud, emang trik apaan sih ??) nah, untuk lebih jelasnya silahkan sobat lihat demonya di sini.

Bagaimana ? Jika tertarik untuk membuatnya, maka ikutilah langkah-langkah berikut ini :

Siapkan beberapa buah URL foto atau gambar yang nantinya mau ditampilkan pada slide
Selanjutnya, masuk ke dasbor, klik tata letak, pilihlah lokasi yang tepat untuk widget ini, klik tambahkan widget → html / java script.
Pada kolom notepad, masukan kode html yang telah diformat seperti berikut :

<marquee>
<img src="lokasi url image 1">
<img src="lokasi url image 2">
<img src="lokasi url image 3">
<img src="lokasi url image 4">
<img src="lokasi url image 5">
<img src="lokasi url image 6">
</marquee>
Dan seterusnya...........

Diatas jelas terlihat bagaimana sobat harus memasukan URL yang sebelumnya telah disiapkan.
Langkah selanjunya, klik simpan dan lihatlah hasilnya !!

Note: Kode html yang membuat pergerakan pada teks berjalan adalah : <marquee> teks berjalan </marquee>
teks berjalan

Kemudian sedikit sentuhan, saya mencoba mengganti teks dengan URL gambar dan hiper link. Sebenarnya masih banyak lagi yang dapat kita lakukan dari tag html, namun semua tergantung kemampuan kreatifitas kita sendiri. Tunggu artikel selanjutnya yang akan membahas bagaimana cara memformat kecepatan, arah, baground dan lain lain, juga akan dibahas bagaimana cara pengaplikasian tag html seperti yang ada pada contoh simple diatas. Selamat berkreasi !!

Merasa asing dengan judul diatas ? Tidak masalah, sebab anda bisa mengetahuinya dengan hanya melihat tampilannya pada kolom pengisian alamat pada browser anda, letaknya ada di sebelah kiri kolom pengisian alamat atau adress bar. Jelas di situ terlihat sebuah gambar berukuran kecil yang menandakan Identitas atau ciri khas sebuah blog atau website, dan seni kreatif saya anggap sebagai nilai tambah.

Tak terelakan lagi, sebagian besar blogger pasti sudah tau tentang cara ini, bahkan mungkin lebih mahir dari seorang spesies bertulang belakang seperti Saya.. Hehe, dan buat master blogger apabila ada kekeliruan dalam artikel ini, mohon di luruskan yah !! Ok ! Baiklah, Saya rasa pembahasan di atas sudah cukup. Mari kita lanjutkan dengan menyimak tutorial simple cara membuat ~~bom atom~~ fafIcon :

Untuk Icon, buatlah sebuah gambar atau logo dengan ukuran kecil menggunakan software photosop atau software desinge apa kek, oh ya Anda juga bisa menggunakan foto ~~bokep~~ diri anda atau hewan peliharaan anda. Hehehe.....
Icon yang sudah jadi lalu kemudian di host / upload pada situs hosting image gratis (hidup gratis) seperti di situs ini atau bisa juga di situs itu atau di situs sana tapi bukan berarti di situs ini ga bisa atau gratis loh !! (sekali lagi, hidup kegratisan) tapi saya tidak memaksa anda untuk meng-host di sini atau di sana, sebab di tempat ini juga bisa atau di tempat sana atau klik di sini atau terserah anda mau di mana saja asal bukan di dalam koper. Kemudian kopi kode URL dari imege kamu tadi yg udah di upload
Paste kode Url tadi kedalam kode html di bawah ini : ceptan !!
<link href='http://Url_image_kamu' rel='SHORTCUT ICON'/>

nah,... Abiezt itu, silakan copy kembali keseluruhan kode seperti di atas yang sudah ditambahkan dengan Url image kamu
Kemudian log in ke dashboard, klik "tata letak" blog yang hendak di buatkan faficon, klik "Edit Html" dan langsung masuk ke dalam kandang html template blog kamu, temukan kode berikut :

]]></b:skin>

</head>

kalau udah nemu, masukan kode favIcon yang udah Anda buat tadi letakan persis di bawah kode

</head>
Klik "simpan" dan lihat hasilnya

.. Ok ! Met mencoba....

Tujuan utama tabel adalah menyajikan informasi data pada bidang datar. Dalam lingkup internet, unsur yg membangun sebuah tabel adalah tags html. Tidak hanya itu, kemampuan tags html tabel juga difungsikan untuk mendesain layout tambahan, sebab html memiliki kemampuan tata letak. Pengaplikasiannyapun entah itu dalam membangun website atau blog, bahkan saat ini html tabel juga di gunakan sebagai skin pada situs friendster versi mobile sebagai tata letak yang di bubuhi dengan kode css atau JavaScript. jadi singkatnya semua itu menggunakan jenis tags html yang sama.

Sebelumnya saya juga pernah menulis artikel tentang cara membuat postingan tabel dengan html yang memungkinkan kita untuk memahami dasar-dasar dari tiap-tiap tags html dalam membangun sebuah tabel. Dan di sini adalah kelanjutan dari pokok pembahasan pada artikel kemarin.

Memang pada awalnya akan terasa sulit dengan tags yang begiu rumit, tetapi setelah Anda mengikuti tutorial ini, Anda akan melihat bagaimana mereka tidak seburuk yang sedang Anda pikirkan saat ini, he...he....

Sebagai dasar, yg harus diketahui adalah tag <table> yang di lanjutkan dengan tag <tr> dan <td>. Meskipun ada bermacam-macam tag lain dalam html tabel, tapi ini adalah dasar-dasar utama (sangat penting) untuk membuat sebuah tabel dengan html.

<table> adalah tag untuk mengawali sebuah tabel
<tr> adalah elemen baris tabel
<td>adalah elemen sel atau kolom dlm tabel

DASAR TAGS TABEL

Berawal dari tabel berikut sbg dasar.

baris 1 kolom 1	baris 1 kolom 2
baris 2 kolom 2	baris 2 kolom 3

Kode html :

<table border="1">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<tr>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>

Atribut border tabel dapat di atur ketebalannya, ini terkait dengan cellspadding, cellspacing dan width.

baris 1 kolom 1	baris 1 kolom 2
baris 2 kolom 1	baris 2 kolom 2

Kode html :

<table border="1"cellpadding="5"cellspacing="5"width="100%">
<tr>
<td width="20%">baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<tr>
<td width="20%">baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>

Selain pada table, atribut seperti cellpadding |cellspacing | width dapat juga di tambahkan pada tag tr dan tr dan Anda menetapkan setiap lebar, tebal dalam kolom tabel.

Width dapat di tntukan dengan pixel (px) atau persentase (%), menentukan nilai width dgn (px) akan lebih tepat, sedangkan (%) tergantung lebar halaman. Contoh, jika lebar halaman 1000px maka untuk membuat lebar tabel (width) 1/2 dari itu adalah 50%, demikian dan seterusnya.

ELEMEN HEADHER DALAM TABEL
Memasukan kolom headher pada tabel akan menampilkan isi headher sedikit berbeda dengan isi di bawah baris kolom headher tersebut. Tag th adalah kuncinya, bagaimana cara memformatnya ? Perhatikan cara penempatan tag th berikut ini :

kolom headher 1	kolom headher 2
baris 2 kolom 1	baris 2 kolom 2

kode html :

<table border="1"cellpadding="5"cellspacing="5"width="100">
<tr>
<th>kolom headher 1</th>
<th>kolom headher 2</th>
</tr>
<tr>
<td width="20%">baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<tr>
</table>

COLSPAN KOLOM

Membuat kolom span pada tabel anda dapat memakai atribut span.

kolom headher
baris 2 kolom 1	baris 2 kolom 2

Kode html :

<table border="1"cellpadding="5"cellspacing="5"width="100%">
<tr>
<th colspan="2">kolom headher</th>
</tr>
<tr>
<td width="20%">baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>

ROWSPAN

Dengan atribut rowspan, memungkinkan kolom span berada di antara beberapa baris tabel.

kolom headher		kolom baris 1
kolom headher	kolom baris 2

Kode html :

<table border="1"cellpadding="5"cellspacing="5"width="100%">
<tr>
<th rowspan="2">kolom headher
<th>
<td>kolom baris 1</td>
</tr>
<tr>
<td>kolom baris 2</td>
</tr>
</table>

KOLOM SPASI (CELLSPACING)

Atribut cellpadding dan cellspacing memungkinkan kita menyesuaikan spasi pada tabel. Cellspacing mendefinisikan lebar batas, cellpadding mewakili jarak antara kolom-kolom tabel dan konten di dalamnya.

baris 1 kolom 1	baris 1 kolom 2
baris 2 kolom 1	baris 2 kolom 2
baris 3 kolom 1	baris 3 kolom 2

Kode html :

<table border="1"cellspacing="10">
<tr>
<th>baris 1 kolom 1</th>
<th>baris 1 kolom 2</th>
</tr>
<tr><td>baris 2 kolom 1</td><td>baris 2 kolom 2</td></tr>
<tr><td>baris 3 kolom 1</td><td>baris 3 kolom 2</td></tr>
</table>

CONTOH LAIN

Intinya adalah, rowspan span untuk beberapa baris sedangkan colspan untuk beberapa kolom.

kolom 1	kolom 2	kolom 3
baris 1 sel 1	baris 1 sel 2	baris 1 sel 3
baris 1 sel 1	row 2 sel 2	row 2 sel 3
baris 3 sel 1

Kode html :

<table border="1">
<tr>
<th>kolom 1</th>
<th>kolom 2</th>
<th>kolom 3</th>
</tr>
<tr><td rowspan="2">baris 1 sel 1</td>
<td>baris 1 sel 2</td><td>baris 1 sel 3</td></tr>
<tr><td>row 2 sel 2</td><td>row 2 sel 3</td></tr>
<tr><td colspan="3">baris 3 sel 1</td></tr>
</table>

PEWARNAAN

Penerapan warna dapat di lakukan dengan kode CSS, bukan saja warna, tapi anda juga dapat menerapkan CSS lain seperti lebar tabel, tingi tabel, tatalelak tabel, dimensi kolom, dan mungkin kreasi lain yang sedang anda pikirkan saat ini.

Judul Tabel

HEADHER TABEL	sel tabel 1
HEADHER TABEL	sel tabel 2

Kode html :

<table border="1"cellpadding="5"cellspacing="5"width="100%"><tr><th style="color:#ff0000;background-color:#00ffff;"rowspan="2">HEADHER TABEL</th><td>sel tabel 1</td></tr><tr>Judul Tabel<td>sel tabel 2</td></tr></table>

Nah, gimana ? Cukup simple kan ?

Pada postingan html tutorial kali ini, saya akan mencoba memberikan metode memasukan / memposting tabel dengan menggunakan kode html, bmgn cara memformat tag-tag html agar browser internet dapat menampilkannya dalam bentuk tabel ?
~~sudalah, males cuap-cuap tau~~ Baiklah, untuk menjawabnya lebih lanjut pahami penjelasan
berikut :

Perhatikan baik-baik bentuk -bentuk tabel di berikut ini dan pahami penjlasnnya, jika tidak demikian, maka siasialah anda yang sudah terlanjur nyasar di situs ini, ckckck..

BENTUK PERTAMA (KOLOM VERTIKAL)

baris pertama

baris kedua

baris ketiga

Kodenya seperti ini :

<table border="1">
<tr><td>baris pertama</td></tr>
<tr><td>baris kedua</td></tr>
<tr><td>baris ketiga</td></tr>
</table>
BENTUK KEDUA ( KOLOM HORIZONTAL)

kolom pertama kolom kedua kolom ketiga kolom keempat

kodenya seperti ini :

<table border="1">
<tr><td>kolom pertama</td>
<td>kolom kedua</td>
<td>kolom ketiga</td>
<td>kolom keempat</td>
</tr>
</table>

MENGKOBINASIKAN KE-DUA BENTUK (VERTIKAL & HORIZONTAL)

baris pertama, kolom 1	baris pertama, kolom 2	baris pertama, kolom 3
baris kedua, kolom 1	baris kedua, kolom 2	baris ketiga, kolom 3
baris ketiga, kolom 1	baris ketiga, kolom 2	baris ketiga, kolom 3

Kodenya seperti ini :

<table border="1">
<tr><td>baris pertama, kolom 1</td>
<td>baris pertama, kolom 2</td>
<td>baris pertama, kolom 3</td>
</tr>
<tr><td>baris kedua, kolom 1</td>
<td>baris kedua, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
<tr><td>baris ketiga, kolom 1</td>
<td>baris ketiga, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
</table>

Penjelasan :

Kode yang berupa angka "1" adalah nilai ketebalan tabel. Bisa di ganti dengan yang lebih besar tau..!! hehe..

Perhatikan dan pahami cara penempatan tag demi tag, saya rasa tidak perlu lagi untuk menjelaskan cara menambahkan kolom pada tabel, karena saya yakin jika anda telah memahaminya, penjelasannya akan sia-sia. Maka dari itu kita beralih saja untuk bagaimana cara melakukan sedikit sentuhan variasi pada tabel. Deal ?

SENTUHAN VARIASI

Tata letak
Penempatan tabel pada kolom postingan dapat Anda atur dengan cara mengganti kode <table border="1"> dengan kode <table align="center"border="1">

KET :
Posisi atau letak tabel dapat di atur dengan merubar kode center.
center → tengah
right → kanan
left → kiri

MASUKAN WARNA

Jika tabel ingin kelihatan lebih variatif, ubahlah warna pada bagian background kolom tabel, misalkan Anda ingin mengubah background pada kolom headher, maka kode <tr> di ganti dengan kode <tr bgcolor="#kode warna">

bisa juga pada kolom lainnya, caranya sama seperti di atas, yaitu tinggal mengganti tag (tr) dengan (td) pada backgroun kolom yang hendak di warnai.
Jadi, jika ingin mengubah seluruh warna background tabel, maka kodenya seperti ini : <table bgcolor="#kode warna">

Sedangkan untuk mengubah warna teks dalam kolom, gunakan saja ~~sikat gigi yg lama~~ kode seperti biasa, seperti ini : <font color="#kode warna">teks disini</font>

Cara meletakan kode untuk variasi dari penjelasan di atas seperti di bawah ini :

contoh teks berwarnah	contoh background berwarnah	baris pertama, kolom 3
baris kedua, kolom 1	baris kedua, kolom 2	baris ketiga, kolom 3
baris ketiga, kolom 1	baris ketiga, kolom 2	baris ketiga, kolom 3

Kodenya seperti berikut :

<table border="1">
<tr><td><font color="#ff0000">contoh teks berwarnah</font></td>
<td bgcolor="#ff0000">contoh background berwarnah</td>

<td>baris pertama, kolom 3</td>
</tr>
<tr><td>baris kedua, kolom 1</td>
<td>baris kedua, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
<tr><td>baris ketiga, kolom 1</td>
<td>baris ketiga, kolom 2</td>
<td>baris ketiga, kolom 3</td>
</tr>
</table>

Nah, untuk mengubah ukuran font dan warna font, misalkan pada kolom headher tabel, kodenya seperti ini :

<font color="#kode warna"face="arial" size="8">teks di sini</font>

KET :
"arial" adalah jenis font.
"8" adalah ukuran font.

Cara penempatannya sama seperti biasa. Seperti pada cara mewarnai teks dalam kolom.

Sebenarnya masi banyak bentuk lain yang dapat di hasilkan jika anda sebelumnya pernah membaca dan memahami tutorial html pada postingan saya yang lalu. Tinggal bagaimana Anda dapat memaksimalkan daya kreatifitas Anda dalam pemformatan kode html. Do You Know ?? Buat Aku, ini mengasikan sekaligus memusingkan, hehe...

Saya yakin, Anda akan lebih mudah memahaminya jika langsung di praktek.
Happy Blogging !!

Menindak lanjuti postingan saya tentang cara menulis kode html beberapa waktu lalu, maka sengaja saya buat lagi sebuah tutorial tentang html, nah, jika kamu masi merasa belum memahami apa yang di maksud dengan html, saran saya mending kamu ~~tutup browser kamu~~ klik di sini dan jangan kilik disin karena emank ga bisa di klik, hehe..(kenNa Dehc...)

Ga enak juga ya basa-basi mulu ? ya udah, mari kita berpindah ke topik. Sebenarnya ada banyak cara atau metode tertentu dalam memformat kode-kode html agar dapat di terjemahkan oleh browser internet. Dan berikut ini adalah salahsatu cara diantara beberapa cara tersebut.

Teks dengan background warna :

Bagiku kesederhanaan adalah sebuah kesempurnaan

Kodenya seperti ini :

<div style ="background:#ff4500;">Bagiku kesederhanaan adalah sebuah kesempurnaan
</div>
Kalau mau menambah variasi seperti ini :

Bagiku kesederhanaan adalah sebuah kesempurnaan

Kodenya seperti ini :

<div style="background:#ff4500;border:2px dotted#0000ff;padding:15px;">Bagiku kesederhanaan adalah sebuah kesempurnaan</div>

KET :
border = garis tepi
dotted = jenis border
padding = jarak antara border dengan teks
#ff4500 = kode warna background, bisa kamu ganti sesuka hati.
Teks dengan background gambar

Dia jauh, sangat jauh..... Walau jauh, naluriku dapat beresonansi dari getaran jiwanya & membiaskan spektrum rindu yang begitu besar

Kodenya seperti ini :

<div style="background:url (http://alamat gambar) no-repeat;">Dia jauh, sangat jauh..... Walau jauh, naluriku dapat beresonansi dari getaran jiwanya & membiaskan spektrum rindu yang begitu besar
</div>

Jika ingin melihat contoh lain teks dengan background gambar sudah ada pada salahsatu postingan saya. Silakan lihat dengan klik di sini
Adapun variasi dengan tambahan seperti berikut:

Dia jauh, sangat jauh..... Walau jauh, naluriku dapat beresonansi dari getaran jiwanya & membiaskan spektrum rindu yang begitu besar

Kodenya seperti berikut :

<div style="background:url (http://alamat gambar);width:180px;height:250px;padding:15px;">Dia jauh, sangat jauh..... Walau jauh, naluriku dapat beresonansi dari getaran jiwanya & membiaskan spektrum rindu yang begitu besar</div>

KET :

width:250px adalah lebar kotak,
height:350px adalah tinggi kotak.
Padding:15px adalah jarak antara teks dengan garis tepi.

Angka yang terdapat di belakang kode (px) di atas dapat di sesuaikan dengan keinginan kamu.

Oh ya, jika ingin menampilkan teks ke tengah, tambahkan kode <center> sebelum penulisan tag atau kode html, dan jangan lupa untuk meng-non aktifkan efek dari kode tersebut, maka tambahkan kode </center> setelah penulisan kode html yang membangun sebuah background.

Gunakan daya kreatifitas anda untuk mengembangkan bentuk variasi lain dengan mengkombinasikan kode-kode yang telah saya jelaskan di atas atau pada postingan sebelumnya.

Sampai di sini jika ada yang di sampaikan, silakan cantumkan di kotak komentar, keseluruhan postingan di atas di buat dengan menggunakan hp (handphone), maka dari itu jari saya udah cuapek ngetiknya, hehe..

SELAMAT BERKREASI !!!

Artikel tentang cara memasukan tabel ke dalam postingan akan menyusul jika emank saya lagi mood untuk menulis (tapi entah kapan), so, sering-sering mampir yahc ...!! Dan perlu yang perlu untuk di garis bawahi adalah bahwa sayapun masi belajar, olehnya itu sekali lagi, masukan atau saran atau kritik atau testimonial saudara-saudara atau apa kek terserah yang penting bisa membangun, silakan di sampaikan pada kolom komentar di bawah. Deal... ??

Assalamu'alaikum..wr..wb..!!!
Sebelumnya saya ucapkan terimakasih kepada sobat blogger, Mas Hary yang telah sudi bertanya melalui chat box tentang cara membuat menu utama seperti yang anda lihat pada menu utama blog ini. Dari pertanyaan tersbut, saya kemudian terinpirasi untuk membuat postingan tutorial tentang cara membuat menu utama dengan tampilan image sebagai tautan. Ini hanyalah trick sederhana yang saya buat hanya sekedar iseng (ga nyangka bakal ada yang simpati, hehe..). Dan untuk mempertanggung jawabkan perbuatan saya ~~terhadap anak orang~~ itu, maka di buatlah postingan tutorial ini (kalimatnya ko mirip sblumnya ?).

Ok !! Langsung aja, pertama-tama anda klik blogger.com, dan sign in ke dashboard → edit layout → Edit html.
Jangan lupa ~~memakai helm~~ untuk mem-back Up template anda sebelum di edit. Kalau sudah, tidak perlu mengklik expand template widged.

Silakan anda cari kode berikut ini :

<div class='list_menu'>
<b:section id='topmenusection' maxwidgets='1' showaddelement='no'>
<b:widget id='LinkList1' locked='false' title='Top Menu' type='LinkList'/>
</b:section>

Ganti tulisan showaddelement='no menjadi showaddelement='yes

kemudian, ganti angka 1 pada tulisan maxwidgets='1 dengan angka jumlah widged yang anda inginkan muncul pada sidebar element headher.
Dan jangan lupa untuk mengganti kode true dengan false

Kalau sudah, klik simpan dan masuk ke edit layout, sekarang anda dapat menambahkan widged pada element headher. Gunakan kode di bawah ini untuk membuat menu utama :

Silakan di kopas (kopy paste) !!

<center><table border="0">
<tr>
<td><a href="URL menu pertama/"><img border="0" alt="judul menu pertama" src="URL image menu pertama"/>
</a></td>
<td><a href="URL menu kedua/"><img border="0" alt="judul menu kedua" src="URL image menu kedua
"/></a></td>
<td><a href="URL menu ketiga"><img border="0" alt="judul menu ketiga" src="URL image menu ketiga"/>

</a></td>

<td><a href="URL menu keempat"><img border="0" alt="judul menu keempat" src="URL image menu keempat"/></a></td>

</tr>
</table></center>

KETERANGAN :

Ganti setiap tulisan yang berwarnah hijau sesuai petunjuk yang telah di jelaskan di tiap-tiap bagian.
Untuk image yang nantinya akan anda digunakan sebagai link pada menu, silakan gunakan kreatifitas anda sendiri dalam mendesinge, file image bisa berupa jpg, gif, png, flash, dan sebagainya..
Beberapa image yang sudah jadi lalu di simpan di situs hosting gratis seperti photobucket.com dan sebagainya. Copy URL tiap-tiap image yang telah anda simpan dan selipkan pada URL image menu seperti yang telah di jelaskan di atas.
Jika anda ingin menambahkan menu yang lebih banyak, tinggal menambahkan kode : <td><a href="URL menu "><img border="0" alt="judul menu " src="URL image menu "/></a>

sebelum :
</td>

</tr>
</table></center> :

SELESAI, SELAMAT MENCOBA !!

Jika ada yang kurang jelas, sikakan cantumkan pada kotak komentar !!

RALAT !!!
Berhubung karena kemarin pada blog ini, template beserta alamatnya sudah di up date, jdi contoh navbar yg di bhas pd artikel di atas dapat di lihat klik di sini. Mohon ma'af jika kurang berkenan..

Sebelum kita belajar lebih lanjut mengenai cara memasukan kode html pada postingan blog, marilah kita ~~ke toko semen~~ meluangkan waktu sejenak untuk memahami penjelasan sederhana berikut ini :

HTML ( Hyper Text Markup Language) merupakan kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.
Termasuk aplikasi browser pada phonsel GSM.

HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks ditampilkan menjadi tebal seperti: Tampil Tebal, maka penulisannya dilakukan dengan cara: <b>Tampil Tebal</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut.

Markup / Tanda
Secara garis besar, terdapat 4 jenis elemen dari HTML:

Structural : tanda yang menentukan level atau tingkatan dari sebuah teks contoh, <h2>Rudy</h2> akan memerintahkan browser untuk menampilkan "Rudy" sebagai teks tebal berukuran besar yang menunjukkan sebagai Heading 2.
Presentational : tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut contoh, <b>boldface</b> akan menampilkan ''bold''. Tanda presentational saat ini sudah mulai digantikan oleh Cascading Style Sheets atau CSS dan tidak direkomendasikan untuk mengatur tampilan teks.
Hypertext : tanda yang menunjukkan pranala / tautan ke bagian dari dokumen tersebut atau pranala ke dokumen lain. Contoh, <a href="http://www.rudyarea.co.cc/">THE SIMPLE BLOG</a> akan menampilkan THE SIMPLE BLOG sebagai sebuah hyperlink ke URL http://www.rudyarea.co.cc
Jadi, jika pranala / tautan THE SIMPLE BLOG di klik, otomatis Anda akan di bawa ke halaman URL tersebut.
Elemen widget yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis horizontal (<hr>).

Selain markup ''presentational'' , markup yang lain tidak menentukan bagaimana tampilan dari sebuah teks. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan dan sebagai gantinya digunakan Cascading Style Sheets.

World Wide Web (WWW) atau singkatnya Web adalah suatu ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). WWW sering dianggap sama dengan Internet secara umum, walaupun sebenarnya ia hanyalah bagian daripadanya.

Hiperteks dilihat dengan sebuah program bernama penjelajah web yang mengambil informasi (disebut "dokumen" atau "halaman web") dari server web dan menampilkannya, biasanya di sebuah tampilan komputer. Kita lalu dapat mengikuti pranala di setiap halaman untuk pindah ke dokumen lain atau bahkan mengirim informasi kembali ke server untuk berinteraksi dengannya. Ini disebut surfing atau berselancar dalam bahasa Indonesia. Halaman web biasanya diatur dalam koleksi material yang berkaitan yang disebut situs web.

HyperText Markup Language (HTML) adalah sebuah ''bahasa markup'' yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), singkatnya HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.

Contoh dokumen html yang sudah jadi saat ini ada di depan anda, yaitu template blog ini, dan berbagai variasi / warna teks pada artikel blog.

Semoga bermanfaat !!
Power by Wikipedia.

Bagi Anda yang sering ngeblog menggunakan hp (handphone), alangkah baiknya jika anda memahami tutorial berikut ini. Ini adalah cara sederhana untuk menampilkan postingan blog dengan variasi teks yang bermacam-macam.

KODE SIMBOL :

Cara memasukan simbol pada postingan blog dengan notasi atau kode html

Dengan notasi berupa angka

Notasi / karakter	Bentuk simbol
©	©
ª	ª
«	«
¬	¬
®	®
°	°
±	±
²	²
¶	¶
»	»

-------------

Dengan notasi / kode berupa teks

Notasi / karakter	Bentuk simbol
©	©
®	®
<	<
>	>
&	&
"	"
	Spasi
±	±

TEHKNIK SIMPLE MENULIS SCRIPT

<u>underline</u> teks bergaris bawah

<b>bold</b> teks tebal

<i>italic</i> teks miring

<s>slash</s> ~~teks bergaris tengah~~

Buat garis :

kodenya : <hr>

Buat garis berwarna :

Kodenya : <hr color="#0000ff">

#0000ff adalah kode warna garis, anda juga bisa menggantinya sesuai kehendak.

<h2>teks berukuran besar</h2>

teks berukuran besar

<tt>teks bergaya mesin ketik</tt>

teks bergaya mesin ketik

<blink>teks berkedip</blink> teks berkedip

<font color="#ffff00">teks berwarna kuning</font> teks berwarna kuning

ket: kode warna dapat di ganti dengan hanya menuliskan nama warna dengan bahasa inggris, jadi tanda pagar (#) harus di hapus.

Dalam penulisan nomor atau angka yang berurutan, gunakan kode seperti berikut :

<ol><li>contoh teks pertama<li>contoh teks kedua<li>contoh teks ketiga<li>contoh teks keempat<li>contoh teks kelima</li></ol>

Hasil :

contoh teks pertama
contoh teks kedua
contoh teks ketiga
contoh teks keempat
contoh teks kelima

Sedangkan dalam pemberian tanda bullet yang berurutan, ganti kode "ol" diatas dengan kode "ul", maka hasilnya seperti berikut :

<ul><li>teks dengan tanda bullet</li></ul>

hasil penulisan :

teks dengan tanda bullet

Perlu di ketahui dan di ingat, kode-kode di atas dapat dapat di gabungkan untuk menghasilkan bentuk yang lain asalkan di format dengan benar, misalnya seperti berikut :

<i><b>contoh teks miring tebal</b></i>

Hasil penulisan :
contoh teks miring tebal

Perhatikan baik-baik cara meletakan di awal dan akhir format penulisan teks beserta kodenya perhatikan cara penempatan kode yang berupa garis miring ( / )

Contoh lain :

<font color="#ff0000><i><b>teks tebal miring berwarnah merah</i></b></font>

hasil penulisan :
teks tebal miring berwarnah merah

SELAMTAT BERKREASI !!

Arsip Blog

Cara Membuat Atau Menampilkan Title Postingan Yang Berkaitan 7

teks berukuran besar

Publisher

Followers

Category