Cara Membuat Gambar Berjajar

Artikel ini akan membagi informasi mengenai Cara Membuat Gambar Berjajar di bloger. Mungkin dari sobat ada yang lagi mengalami kesulitan untuk membuat gambar agar berjajar seperti ini 

 

Cara Membuatnya yaitu dengan Rancangan > Tambah Gadget > pilih HTML/Java Script

<table>
<tr>
<td><img border="0" height="100" src="URL GAMBAR 1" width="100" /></td>
<td><img border="0" height="100" src="URL GAMBAR 2" width="100" /></td>
<td><img border="0" height="100" src="URL GAMBAR 3" width="100" /></td>
<td><img border="0" height="100" src="URL GAMBAR 4" width="100" /></td>
<td><img border="0" height="100" src="URL GAMBAR 5" width="100" /></td>
</tr>
</table>

Ket.
* border="0" > untuk mengatur ketebalan garis sebagai bingkai gambar. 
Anda juga bisa mengganti angka  0 dengan keinginan Anda sendiri.
* height="100" > untuk menentukan tinggi gambar. 
Anda juga bisa mengganti angka  100  dengan angka yang lain.
* src="URL GAMBAR 1" > untuk menentukan alamat gambar. 
Anda juga bisa mengganti  URL GAMBAR 1  dengan alamat gambar yang lain. 
* width="100" > untuk menentukan lebar gambar. 
Anda juga bisa mengganti angka  100  dengan angka yang lain.

Ok mudah kan ?!!
Selamat mencoba !!!

Read more »

Cara Membuat Daftar Isi Manual Sederhana Di Blog

pada blog saya  ini. saya akan membuatkan turorialnya Daftar isi pada blog agar lebih kelihatan cantik, saya gunakan pada index game di blog ini merupakan daftar isi manual yang sangat sederhana, dalam artian, setiap postingan kita tidak akan secara otomatis masuk kedalam list nya tetapi harus dimasukan secara manual, tidak seperti daftar isi sebelumnya pada postingan saya dengan judul daftar isi accordion part 1 yang secara otomatis memasukan postingan terbaru kedalam daftarnya. berikut tutorial cara membuat daftar isi manual sederhana.

Silahkan Ikuti Langkah-langkah berikut :

1. Silahkan login akun Blog Anda

2. Pilih menu Posting dan Pilih Edit Laman

3. Setelah itu pilih Tambah Laman / Laman Baru

4. Kemudian Pada Laman Pilih Edit HTML ( Bukan Compose )

5. Dan Copy dan kode di bawah ini :

<!-- Content - http://wizyuloverz.blogspot.com - Start -->

<div style="border: 0px solid #eee; height: 400px; overflow: auto; padding: 10px; text-align: center;">
<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<div style="text-align: center;">
<u><span style="font-size: large;"><b>.:DAFTAR ISI MANUAL:.</b></span></u></div>

<b><span style="font-size: large;"> </span></b>
<b><span style="font-size: large;">-- A --</span></b></div>
<ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- B --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- C --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- D --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- E --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- F --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- G --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- H --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- I --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- J --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- K --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- L --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- M --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- N --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- O --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- P --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>


<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- Q --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- R --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- S --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- T --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>


<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- U --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- V --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- W --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- X --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- Y --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>

<div style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">
<b><span style="font-size: large;">-- Z --</span></b></div><ul style="text-align: left;">
<li><a href="Masukan URL/Link Posting Disini" target="_blank">Masukan Judul Postingan Disini</a></li>
</ul>
</div>
<!-- Content - http://wizyuloverz.blogspot.com - End -->

6. Gantilah tulisan berwarna Hijau diatas dengan judul daftar isi yang sahabat inginkan
7. Sahabat bisa langsung menempatkan judul postingan dengan klik pada tulisan Masukan Judul Postingan Disini lalu pilih Change Lalu ganti Judul yang diinginkan jangan lupa sertakan Linknya
8. Sahabat juga bisa mennggantinya sebelum pindah ke compose dengan mengganti tulisan warna Kuning diatas dengan URL/Link postingan sahabat dan mengganti tulisan berwarna Biru dengan Judul Postingan sahabat.
9. Apabila sudah selesai, pilih Tayangkan Laman lalu pilih Tidak Ada Gadget kemudian Simpan Dan Terbitan

Terima Kasih dan selamat mencoba

Read more »

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 »