Tampilkan postingan dengan label blog. Tampilkan semua postingan
Tampilkan postingan dengan label blog. Tampilkan semua postingan

Sabtu, 21 Desember 2013

Paragraf Dua Kolom Dalam Posting Blog

Paragraf Dua Kolom Dalam Posting Blog - pada ulasan kali ini akan memberikan tutor tentang cara membuat dua kolom paragraf dalam posting blog. untuk paragraf seperti ini tidak terlalu rumit hanya saja memerlukan beberapa script untuk membuatnya. bagi saya dulunya baru pertama kali menggunakan metode seperti ini mungkin terasa asing tetapi sekarang sudah tidak lagi. untuk membuat paragraf dua kolom dalam
postingan, caranya cukup mudah saja. Anda hanya perlu menggunakan selector CSS yaitucolumn-count dan column-gap kemudian anda padukan dengan tag HTML biasa seperti <div>atau <span>. Fungsi dari membuat paragraf dua kolom dalam postingan ini adalah membuat kesan indah dan rapi, selain itu juga untuk menghemat ruang teks yang ada supaya bisa di manfaatkan untuk menampung isi yang lainnya.

Cara membuat paragraf dua kolom dalam postingan ini sangat simple dan scriptnya pun menurut saya pribadi sangat mudah untuk di pahami, Berikut tutorial cara membuat paragraf dua kolom dalam postingan, silahkan simak dan perhatikan dengan baik!

1. Copy dan pastekan script berikut ini di dalam halaman menu posting/edit posting blog anda.
<div style="background-attachment: scroll; background: #f0f0f0;
-moz-column-count: 2; -moz-column-gap: 25px; -webkit-column-count: 2;
-webkit-column-gap: 25px; -o-column-count: 2; -o-column-gap: 25px;
column-count: 2; column-gap: 25px; height: auto;
width: auto; padding: 10px">

Masukkan teks anda di sini!

</div>

2. Ganti tulisan "Masukkan teks anda di sini!" dengan tulisan yang anda inginkan dan selesai.

Maka hasilnya kurang lebih akan terlihat seperti berikut ini :
Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger mania. Senang bisa bertemu dengan anda, saya selaku admin simpleteori mengucapkan terima kasih atas kunjungan anda. Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger mania. Senang bisa bertemu dengan anda, saya selaku admin simpleteori mengucapkan terima kasih atas kunjungan anda. Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger mania. Senang bisa bertemu dengan anda, saya selaku admin simpleteori mengucapkan terima kasih atas kunjungan anda.

Itulah ulasan tentang Paragraf Dua Kolom Dalam Posting Blog semoga bisa menjadikan tutor yang cukup bermanfaat dan menambah ilmu yang bisa menjadi pelajaran yang baik di dunia maya ini.
ReadFull Article ..
Diposting oleh di Tidak ada komentar:
Label: , , , , ,

Sabtu, 07 Desember 2013

Cara Membuat Tabel di Blog 2

Beberapa waktu lalu saya sempat menulis tentang cara membuat tabel diposting. Mungkin ada sobat yang kurang jelas mengenai tutorial dan cara modifikasinya berikut ini adalah lanjutan yang mungkin akan sedikit membantu kita dalam belajar.

Sekilas tentang tabel.
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.

Cara membuat tabel.
Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">
 <tr>
  <td>Cell 1 - Baris 1 Kolom 1</td>
  <td>Cell 2 - Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 3 - Baris 2 Kolom 1</td>
  <td>Cell 4 - Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 5 - Baris 3 Kolom 1</td>
  <td>Cell 6 - Baris 3 Kolom 2</td>
 </tr> 
</table>

Hasil:
Cell 1 – Baris 1 Kolom 1Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1Cell 6 – Baris 3 Kolom 2

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.

Mengatur lebar dan tinggi tabel.
Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.
Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.
 
<table border="1" width="75%">
<tr>
 <td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
 <td>Baris 1 Kolom 1</td>
</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>

Hasil:
Baris 1 Kolom 1Baris 1 Kolom 1
Baris 2 Kolom 1Baris 2 Kolom 2
Baris 3 Kolom 1Baris 3 Kolom 2

Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.

Menggabungkan kolom pada tabel
Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.
Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.
 
<table border="1" width="75%">
 <tr>
  <td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td>
 </tr>
 <tr>
  <td style="width:50%">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>

Hasil:
Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1Baris 2 Kolom 2
Baris 3 Kolom 1Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.
 
<table border="1" width="75%">
<tr>
 <td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td>
 <td>Baris 1 Kolom 2</td>
</tr>
<tr>
 <td>Baris 2 Kolom 2</td>
</tr>
<tr>
 <td>Baris 3 Kolom 1</td>
 <td>Baris 3 Kolom 2</td>
</tr>
</table>

Hasil:
Gabungan Baris 1&2 pada Kolom 1Baris 1 Kolom 2
Baris 2 Kolom 2
Baris 3 Kolom 1Baris 3 Kolom 2

Mengatur jarak kolom pada tabel
Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.

<table border="1" width="75%" cellpadding="8">
 <tr>
  <td style="width:50%;">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:
Baris 1 Kolom 1Baris 1 Kolom 2
Baris 2 Kolom 1Baris 2 Kolom 2

Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<table border="1" width="75%" cellspacing="8">
 <tr>
  <td style="width:50%">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:
Baris 1 Kolom 1Baris 1 Kolom 2
Baris 2 Kolom 1Baris 2 Kolom 2

Membuat titel pada tabel.
Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.
Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.

<table border="1" width="75%">
<caption>Disini adalah titel tabel ini</caption>
 <tr>
  <th style="width:50%;">Header Kolom 1</th>
  <th>Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:
Disini adalah titel tabel ini
Header Kolom 1Header Kolom 2
Baris 1 Kolom 1Baris 1 Kolom 2
Baris 2 Kolom 1Baris 2 Kolom 2

Membuat background pada tabel
Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.
Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

<table style="background:#ffc" width="75%" border="1">
 <tr>
  <th style="background:red;width:50%;">Header Kolom 1</th>
  <th style="background:red;">Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:
Header Kolom 1Header Kolom 2
Baris 1 Kolom 1Baris 1 Kolom 2
Baris 2 Kolom 1Baris 2 Kolom 2

Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px.
Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px.
Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0.

<table cellpadding="0" cellspacing="0" style="background:#ffc" width="75%" border="1">
...
</table>
Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.
<table style="border-collapse:collapse;background:#ffc" width="75%" border="1">
 <tr>
  <th style="background:red;width:50%;">Header Kolom 1</th>
  <th style="background:red;">Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:
Header Kolom 1Header Kolom 2
Baris 1 Kolom 1Baris 1 Kolom 2
Baris 2 Kolom 1Baris 2 Kolom 2

Pada link berikut ini kita akan membuat contoh tabel dengan CSS baik itu dengan atribut style (inline) maupun internal dan eksternal CSS.
ReadFull Article ..
Diposting oleh di Tidak ada komentar:
Label: , , , , ,

Rabu, 06 November 2013

Content adalah Pondasi Utama Blog yang Sukses


Pondasi berarti dasar, landasan yang anda gunakan untuk menaruh bangunan blog anda. Tanpa adanya pondasi, anda tidak akan bisa memiliki sebuah blog. Nah, pondasi ini biasanya berupa content, dan content itu berupa artikel. Tanpa adanya artikel, apakah anda bisa bayangkan apa yang anda pasang di blog anda? Cuma gambar? Atau rekaman video saja? Anda tetap memerlukan barisan kalimat untuk berkomunikasi dengan pengunjung anda. Anda perlu memikat pengunjung dengan kata-kata yang membius.  

Tak bisa anda sangkal, artikel mempunyai arti penting untuk blog anda. Diantaranya: 

Artikel bisa membawa antrian pembaca dan memberikan backlink untuk blog anda. Semakin bagus artikel yang anda tulis, semakin banyak orang yang ingin membacanya. Dalam sebuah blog, anda bebas mengeluarkan segala pemikiran dan uneg-uneg anda. Ide-ide segar dan kreatif pun biasanya muncul dari sebuah blog. Maka, hanya artikel yang bisa membuat ide-ide dan pemikiran anda keluar dan dibaca publik. Meski anda punya audio visual, anda tetap memerlukan untaian kalimat untuk mengeluarkan isi kepala anda. 

 Artikel yang anda posting tidak akan pernah hangus. Pembaca akan selalu 
memilih topik mana yang paling mereka sukai. Jadi, meski anda sudah menulis  topik tersebut bertahun-tahun lalu, pembaca masih bisa membacanya. Pengunjung anda akan mudah menemukan pemikiran anda di arsip blog. Dan, kekuatan ini yang bisa melipatgandakan pengunjung tanpa peduli waktu. Kadang, tanpa anda sangka,komentar posting artikel lama justru jauh lebih banyak dari pada artikel terbaru. 

Artikel sangat memudahkan anda dalam SEO (search engine optimization). Elemen yang diperiksa saat spider search engine datang ke blog anda adalah teks,bukan gambar atau grafik. Dengan menulis artikel, pasti akan membantu aspek SEO blog anda.  

Anda bisa mendaftarkan setiap artikel yang anda posting di kategori-kategori yang berbeda. Dan, anda pun bisa menghubungkan satu artikel dengan artikel yang lain, termasuk ke dalam content terbaik anda. Jadi, setiap hari pengunjung mudah mengakses postingan anda. 

 Artikel tidak memiliki tanggal kadaluwarsa. Meski anda memposting artikel hari ini, dalam waktu satu tahun ke depan pun, artikel anda tetap relevan dan populer. Maka penting untuk membuat artikel yang tidak mudah lekang “dimakan” waktu.  

Artikel adalah kunci ajaib yang mampu membuka keran traffic anda. Selama anda bisamenciptakan pondasi artikel yang bagus, anda bisa menarik traffic sesuka anda. 
ReadFull Article ..
Diposting oleh di Tidak ada komentar:
Label: , , , , , ,

Sabtu, 02 November 2013

Pasang Tool Gadget Encode Decode di Blog

Bagi yang senang otak atik blog tentu akan selalu berhubungan intim dengan yang namanya kode, baik itu HTML, css ataupun Javascript. Untuk Mas Bro sekalian ini ada sebuah Tool Gadget yang aku rasa penting dipasang pada blog yaitu Tool Gadget Encode /Decode (Converter HTML).

Seperti yang kita tahu dan yang selama ini kita lakukan, ketika kita akan memposting suatu kode HTML/Javascript atau mengedit kode CSS template tentu saja ada beberapa kode yang harus di parse atau di convert terlebih dahulu agar kode tersebut bisa terlihat atau berjalan dengan baik apabila ingin dipasang di dalam postingan. Daripada kita bolak balik membuka situs penyedia jasa Encode / Decode (Convert) akan lebih baik kalau kita pasang sendiri Tool Gadget ini di dalam blog kita. Tool Gadget ini adalah buatan Mbah Gugel dan setelah aku pasang di blog ini ternyata tidak membuat load blog menjadi lama, jadi jangan khawatir apabila anda ingin memasang tool ini di dalam blog.

Langkah-langkahnya sebagai berikut
  1. Silahkan anda menuju ke link berikut ini gmodules
  2. Lalu editlah beberapa option untuk merubah tampilan gadgetnya sesuai dengan selera Mas Bro sekalian,
  3. Ambil kode Tool Gadget dengan klik "Dapatkan Kode",
  4. Jika sudah, maka tool Gadget ini bisa anda tempatkan di dalam postingan atau bisa ditempatkan pada sidebar.



Demikian cara Pasang Tool Gadget Encode/Decode (Convert HTML) di Blog, semoga informasi ini bisa membuat blog anda lebih lengkap.

Kalau kesulitan pasang Tool Gadget diblog, di parse saja kode anda disini :

ReadFull Article ..
Diposting oleh di Tidak ada komentar:
Label: , , , , , ,
Langganan: Postingan (Atom)