Cara Membuat Text Box Area Dengan Tombol Di Blog Read more: Cara Membuat Text Box Area Dengan Tombol Di Blog

                   Text Box Area berfungsi untuk memperlihatkan kode HTML atau Text, biasanya text box digunakan para blogger untuk menyimpan Kode HTML Bannernya pada Blogroll, Dengan tujuan agar pengunjung yang akan bertukar link dengan mudah mengcopy kode HTMLnya, kali ini saya akan memberikan tutorial pembuatan Text Area Dengan Tombol, Text Area ini dilengkapi dengan tombol untuk mendrag semua bagian kode HTL dengan tujuan agar pengunjung tidak perlu repot-repot untuk mendarg lagi, Berikut ini cara membuatnya.

Silahkan Ikuti Langkah-langkah berikut :

1. Silahkan login akun Blog anda.

2. Siapkan Postingan, Laman atau Gadget yang mungkin akan sahabat gunakan untuk membuat Text Box
3. Apabila sahabat sudah menentukan dan akan membuat Text Box silahkan Copy kode dibawah ini :

<!-- Text Box - http://dyan123.blogspot.com - Start -->
<form name="select_all"><textarea rows="2" cols="22" name="text_area">
SIMPAN KODE HTML/TEXT DISINI
</textarea><br/>
<input value="Select All" onclick="javascript:this.form.text_area.focus();this.form.text_area.select();" type="button" />
</form>

<!-- Text Box - http://dyan123.blogspot.com - End -->

4. Apabila Sahabat mencopy kode di atas di dalam postingan jangan lupa tempatkan pada Edit HTML bukan Compose Kecuali pada Post Option dipilih tampilkan HTML yang diketik

5. Ganti tulisan berwarna Kuning dengan kode HTML/Text yang akan sahabat tempatkan didalam Text Box
6. Setelah Selesai, Silahkan Simpan/Save

Semoga Artikel Yang Saya Buat Bisa Bermanfaat.

Read more »

Cara Membuat Posting Artikel Lebar Penuh

Menampilkan artikel/posting 1 halaman penuh tanpa sidebar caranya agak mirip dengan cara mengubah lebar posting yang pernah saya tulis sebelumnya. Tujuan membuat artikel atau posting dengan lebar halaman penuh pada artikel tertentu dengan menghilangkan sidebar bisa bermacam-macam. Ada yang bertujuan supaya loading halaman pada artikel tertentu menjadi lebih cepat, ada pula yang hanya untuk menghemat ruang karena tulisan/artikel yang panjang. Sebagai langkah awal dalam membuat artikel penuh ini, sebelumnya sobat harus mengetahui lebar halaman posting (content) pada template. Lebar content biasanya ditandai dengan kode #content-wrapper dan dibagi lagi menjadi 2 atau 3 bagian yaitu dengan kode #main-wrapper dan #sidebar-wrapper. Pada setiap template ada perbedaan kode, tapi coba aja dicari kode yang mirip atau sejenis.   

Contoh kode pada template Thesis : (1)

#content-wrapper {

.........

width:900px;

}

#main-wrapper {

.........

width:507px;

}

#sidebar-top {

.........

width:362px;

}

#sidebar-wrapper1 {

..........

width:160px;

word-wrap:break-word;

}

#sidebar-wrapper2 {

.........

width:182px;

}

#sidebar-bottom {

.........

width:362px;

}

Kalau kode ini saya sederhanakan menjadi 1 sidebar saja, jadinya seperti ini : (2)

#content-wrapper {

.........

width:900px;

}

#main-wrapper {

.........

width:507px;

}

#sidebar-wrapper {

.........

width:362px;

}

Nah untuk membuat lebar posting penuh tinggal menambahkan lebar (width) bagian #main-wrapper dan #sidebar-wrapper menjadi 507+362 = 869px. Dari lebar  #content-wrapper 900px berarti masih ada sisa 31px yang merupakan sisa ukuran margin,padding dan border.

Cara Membuat Artikel / Posting 1 Halaman Penuh :

1.     Login ke dashboard blogger

2.  Pada menu sidebar kiri tampilan antar muka blogger yang baru, pilih Template > Edit HTML > Lanjutkan dan centang kotak Expand Template Widget.

3.   Buat kode seperti dibawah ini dengan memasukkan link url artikel yang ingin ditampilkan secara penuh pada bagian yang berwarna merah, letakkan tepat diatas kode </head> pada template.

<b:if cond='data:blog.url == &quot;URL artikel yang ditampilkan penuh&quot;'>

<style>

#sidebar{display: none !important;}

#main-wrapper{width: 869px;}

</style>

</b:if>

4.  Maksud dari kode seperti diatas adalah bagian bagian #main-wrapper dilebarkan sedangkan bagian #sidebar-wrapper dihilangkan.

5.      Save / Simpan template anda.

Untuk contoh demonya sobat dapat melihat pada artikel Iklan Internet Murah Efektif Berkualitas Indonesia, dimana saya melebarkan posting dari 497px menjadi 667px dengan menghilangkan 1 sidebar yang berukuran 160px. Saya juga menyembunyikan widget tertentu pada halaman ini untuk mempercepat loading.

Demikian Cara Membuat Menampilkan Posting 1 Halaman Penuh pada artikel tertentu ini saya tuliskan untuk sobat yang ingin berkreasi membuat artikel yang tampil beda. Selamat mencoba yach..!!

Read more »

Cara Membuat Tabel Di Postingan Blogger/Blogspot

postingan blog kadang diperlukan dengan maksud untuk memperjelas materi tulisan/artikel atau untuk mempersingkat penjelasan. Pada panel posting blogger tidak tersedia fasilitas untuk membuat tabel sehingga kita perlu membuat tabel secara manual dengan menggunakan tag HTML tertentu. Dasar yang harus kita pahami dulu disini adalah bagaimana cara atau kode penulisan sebuah tabel didalam postingan. Pada tips blogging kali ini saya akan share bagaimana cara membuat tabel serta tag HTML kode penulisannya.

Perintah dasar tag HTML untuk membuat tabel :

Kode HTML	Keterangan
<table>...</table>	Perintah untuk membuat tabel
<tr>...</tr>	Perintah untuk membuat baris
<td>...</td>	Perintah untuk membuat kolom
border, width, align, bgcolor	Kode tambahan untuk pengaturan tebal garis border, lebar tabel, perataan teks dan warna background

Nah sekarang kita coba membuat tabel 1x3 ( 1 baris 3 kolom ), maka penulisannya seperti ini :

<table border="1">

<tr>

<td>Konten 1</td>

<td>Konten 2</td>

<td>Konten 3</td>

</tr>

</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1

Konten 2

Konten 3

Selanjutnya kita coba merubah kode dasar diatas tadi untuk mempercantik tampilan dengan perataan teks dan ukuran lebar tabel kita tentukan misalnya 450px, maka penulisannya menjadi seperti ini :

<table border="1" width="450">

<tr bgcolor="#F2F2F2">

<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>

</tr>

</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1

Konten 2

Konten 3

Kemudian kita coba lagi membuat tabel yang lebih banyak misalnya 2x3 (2 baris 3 kolom ) dengan format penulisan seperti ini :

<table border="1" width="450">

<tr bgcolor="#F2F2F2">

<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>

</tr>

<tr>

<td align="left">Tuliskan teks disini</td>

<td align="left">Masukkan script gambar dengan format seperti ini &lt;img border=&#039;0&#039; src=&#039; http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif&#039;/&gt;</td>

<td align="center"> Maka hasilnya akan seperti ini

<img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/></td>

</tr>

</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1	Konten 2	Konten 3
Tuliskan teks disini	Masukkan script gambar dengan format seperti ini <img border='0' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif'/>	Maka hasilnya akan seperti ini

trima kasih, selamat mencoba

Read more »