Thursday, February 23, 2012

Membuat postingan bergaya majalah


Hello sobat....Ada hal menarik yang ingin aku share nech dengan sobat semua,, tentunya yang baca ini,,hehehehehe

Ada kalanya kita membuat postingan menjadi unik dengan membuatnya bergaya koran ataupun majalah. Kalau semua postingan bergaya majalah malah tidak wajar atau tidak etis. hehehehehehe

Sesuaikan dengan kebutuhan ajalah, biar kelihatan lebih menarik. Ini pasti merupakan kabar yang ditunggu teman-teman sastra yang suka posting cerpen ataupun artikel sejenis. yahh..semoga aja postingan ini bisa berguna dan membawa manfaat bagi semuanya,,,aminn. Cara yang mau saya share ini cukup mudah kok, hanya menambahi sedikit kode di postingan. Tertarik untuk membuat postingan model koran? yukkkk...langsung aja

Berikut adalah kode yang harus sobat sisipkan pada postingan, dan ingat,,,hanya pada mode HTML, bukan compose.

<style type="text/css">
#posting3kolom {
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;}
</style>
<div id="posting3kolom">ISI POSTINGAN</div>


Nah, sobat sudah tau kan caranya gemana buat tulisan model majalah/koran. Mudah bukan?? Itu angka yang saya kasih warna merah merupakan jumlah dari kolom,,misalkan angka berwarna merah tadi saya ganti menjadi 2. Hasilnya seperti yang sobat lihat sekarang ini. Sebagai tambahan saja, angka 10px merupakan jarak antar kolom, jadi sobat bisa nentuin juga berapa jarak antar kolomnya.


Sudah dulu ya postingan buat hari ini, mau mandi soalnya,,hehehee (keseringan posting malah ga pernah mandi,hehehhe)

Tak ketinggalan kata dari saya: Selamat mencoba, mudah-mudahan sukses

Membuat Daftar Isi Blog

Hai sobat,,ini ada sedikit tutorial untuk membuat tabel daftar isi dari blog yang kita miliki. Daftar isi ini sangat berguna untuk mempercepat pengunjung di blog kita mencari informasi yang mereka cari. Langsung aja yuuk..

Langkahnya cukup mudah kok, sobat tinggal mengcopy-paste kode di bawah ini pada widget HTML/Javascript maupun pada postingan yang pastinya dalam mode edit HTML. Berikut kodenya :

<div style="overflow:auto;width:250px;height:250px;border:0px solid #eee;padding:8px;margin:10px 0 0"><script src="http://script-daftar-isi-menoer.googlecode.com/files/scrip%20daftar%20isi%20menoer.txt"></script><script src="http://kamar3ventilasi.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>


Catatan:

  1. Sobat bisa ganti angka  berwarna biru dengan ukuran yang di kehendaki (width: lebar tabel daftar isi, height: tinggi dari tabel daftar isi ).
  2. Huruf yang berwarna merah bisa diganti dengan alamat feed blog sobat
Berikut adalah cara mengetahui feed dari blog sobat :

  1. Buka blog kita di browser Mozilla Firefox
  2. Lalu klik kanan di sembarang halaman blog kita
  3. Klik "View Page Info"
  4. Akan muncul jendela pop up ( Lihat gambar 1 )
  5. Klik Tab "Feed"
  6. Nah, pada halaman pop up itu akan muncul URL feed blog sobat ( Kalau memang blog sobat mendukung script RSS fed, tapi biasanya sudah di sediakan script RSS feed nya )
  7. Salin URL feed yang saya tandai dengan kotak berwarna biru ( Lihat gambar 1 )
  8. Paste pada kode Daftar Isi Blog di atas yang berwarna merah
  9. Selesai
Gambar 1


Semoga postingan ini bermanfaat dan selamat mencoba 

Wednesday, February 22, 2012

Drop down-down menu labels pada blogspot

Hai sobat blogger...Pa kabar nech? pasti baeg aja kan.. Setelah beberapa hari tidak posting,,ini saya kasih oleh-oleh sebuah tutorial yang bisa dikata bagus buat mempersimple tampilan Label pada blogspot supaya tidak mocar-macir kemana kemari,,hehehe
Kalau dibuat simple kan jadinya rapi...

Langsung aja deh, kasian kalo nungguen ceramah saya lama-lama..hahahha

Cekidot gannn...



Untuk menyesuaikan widget label Anda di Blogger yang akan ditampilkan sebagai menu drop-down:
1. Pertama, backup dulu template sobat. Untuk melakukannya, pergi ke Dashboard Blogger, Layout> Edit HTML> Download Template Lengkap

2. Pergi ke Layout> Edit HTML di dashboard Blogger sobat. Kali ini, jangan tandai  pada "Expand Template Widget" !


3. Cari kode berikut dengan CTRL +F untuk mempercepat pencarian (tidak harus persis seperti ini, untuk blog saya misalnya, Label1 disebut Label14):





<b:widget id='Label1' locked='false' title='Labels' type='Label'>

4. Selanjutnya ganti kode di atas dengan kode di bawah ini:


<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>

<select onchange='location=this.options[this.selectedIndex].value;' style='width:200px'>
<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

5. Save Template

Cukup mudah kan sobat blogger ^^, Semoga tutorial ini bisa bermanfaat ^^

Tuesday, February 14, 2012

Membuat Scroll Bar

Langsung saja sobat blogger,,soalnya saya sedang tergesa-gesa mau jalan-jalan,,ehhehhehe
Makanya saya buat tutorial yang tergolong singkat ini. Ke penjelasan aja langsung,,

Scroll bar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Mungkin anda pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog anda tidak seperti itu, di tips kali ini saya akan menjelaskan cara menghilangkan sesak tersebut dengan membuat scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang blog. Caranya adalah letakkan kode diantara kode scroll bar

Berikut adalah kode untuk membuat scroll bar:
KETERANGAN JUDUL
RUANG UNTUK MENULIS ATAU UNTUK MENEMPAKTKAN SCRIPTS KODE. BILA ISI DARI SCROLL-BOX MELEBIHI UKURAN KOTAKNYA, SECARA OTOMATIS TOMBOL SCROLL AKAN MUNCUL DENGAN SENDIRINYA.................RUANG UNTUK MENULIS ATAU UNTUK MENEMPAKTKAN SCRIPTS KODE. BILA ISI DARI SCROLL-BOX MELEBIHI UKURAN KOTAKNYA, SECARA OTOMATIS TOMBOL SCROLL AKAN MUNCUL DENGAN SENDIRINYA

<div align="center">
<table border="1" style="width: 250px;"><tbody>
<tr> <th colspan="100%" scope="col">KETERANGAN JUDUL</th> </tr>
<tr><td><div style="font-family: arial; font-size: 12px; height: 150px; overflow: scroll; width: 250px;">
<div style="overflow: hidden; padding: 0 px; text-align: center; width: 100%;">
RUANG UNTUK MENULIS ATAU UNTUK MENEMPAKTKAN SCRIPTS KODE. BILA ISI DARI SCROLL-BOX MELEBIHI UKURAN KOTAKNYA, SECARA OTOMATIS TOMBOL SCROLL AKAN MUNCUL DENGAN SENDIRINYA............RUANG UNTUK MENULIS ATAU UNTUK MENEMPAKTKAN SCRIPTS KODE. BILA ISI DARI SCROLL-BOX MELEBIHI UKURAN KOTAKNYA, SECARA OTOMATIS TOMBOL SCROLL AKAN MUNCUL DENGAN SENDIRINYA</div>
</div>
</td></tr>
</tbody></table>
</div>



Untuk mengubah lebar ganti angka setelah kode width: sesuai kebutuhan sobat, dan untuk mengubah panjang ganti angka setelah kode height: sesuai kebutuhan sobat. Mudah sekali bukan...


...::::Selamat mencoba dan semoga berhasil::::....

Membuat Kotak Tukar Link

Hai sobat blogger,,,setelah seharian td cuman di kamar aja, rada-rada meriang nech (ketimbang meringis mulu lbh mending meriang dikit,,hehehhe). Ketimbang cuma tiduran aja, lebih baik nyalain komputer. Cukup lama di depan komputer mau ngapain, akhirnya kepikiran juga buat postingan yang lumayan digemari oleh sobat-sobat blogger. Pasti sobat dah tau kan kalo saya mau posting apa? ( jelas dah tau,, orang aq udah kasih judul posting "membuat Link Exchange" gitu kok,,hehehhe . Wah,, masnya basa-basi mulu dari kemarin-kemarin....sabar sobat blogger,, sebentar lagi mulai kok,,Gak usah basa basi lagi, ketimbang jadinya basi malahan,,hihihihiw

Link Exchange atau biasa kita sebut dengan tukar link adalah salah satu motif widget penghias blog atau website yang walaupun sepele tapi mampu meningkatkan traffic site/blog dan page rank.

Langkah-langkahnya sebagai berikut:

1. Sobat harus desain dulu banner. Terserah mau buat pake apa, pake photoshop, corel draw, firework atau image ready . Ukurannya bebas, mau sehalaman penuh juga gak papa, Cuman kalo sehalaman penuh ntar nggak ada yang mau tukeran link...kwkakakwkk (formatnya suka-sukalah..GIF, JPG, BMP,dan PNG)

2. Kalo udah jadi upload banner mu DI SINI

3. Setelah ter-upload, setiap gambar pasti ada direct link (copy aja direct link dari banner yang kamu upload tadi

4. Lalu copy paste kode dibawah ini untuk gambar logo link anda:


<a href="http://www. kamar3ventilasi.blogspot.com /" onmouseover="window.location=this.href" target="_blank"><img alt="Menoer Babat Alas Ambarawa " border="0" src=" http://i1133.photobucket.com/albums/m584/menursaja/kamar3ventilasibadge.png " title="Menoer Babat Alas Ambarawa " /></a><br />

ganti kode yang berwarna Merah dengan URL blog sobat dan yang saya bikin BOLD ganti dengan link gambar/banner sobat, sedangkan yang berwarna Violet/Ungu ganti dengan Keterangan dari blog sobat.
Untuk kotaknya bisa sobat dapatkan di postingan "Kotak Area Cantik" (banyak pilihannya dari yang jelek sampe keren ada di sana) atau juga pilih yang di bawah ini saja

<textarea name="code" rows="3" cols="20" style="background:#BFFAFF; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> ISI DENGAN TEXT/KODE LOGO SOBAT </textarea>


5. Setelah kode gambar logo digabungin dengan kotak, tinggal sobat copy pastekan ke postingan atau ke widget sobat. Cukup mudah bukan langkah-langkahnya?


...::::Selamat mencoba dan semoga berhasil:::::....

Monday, February 13, 2012

Efek Gelap Terang pada Gambar

Pada saat blogger menulis suatu artikel, biasanya tidak terlepas dari image sebagai pelengkap artikel yang bertujuan untuk memberikan keterangan/penjelasan artikel atau sebagai pelengkap. Sebenarnya gambar/image pada postingan bisa diberikan sedikit efek tambahan untuk mempercantik tampilannya dengan memanfaatkan efek hover. Saat mouse pointer berada pada gambar maka akan terlihat suatu perubahan dimana gambar yang awalnya terlihat terang akan berubah menjadi gelap. Bagi sobat yang mau mencoba silahkan ikuti tips sederhana berikut ini.

1. Login ke blogger
2. Pilih rancangan, edit HTML
3. Centang expand template widget
4. Tekan Crtl-F dan cari kode ]]></b:skin>
5. Copy paste kode dibawah ini dan letakkan diatas kode ]]></b:skin>  tadi


Kode css terang menjadi gelap:
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

Kalau sobat mau merubah efek tersebut dari gelap menjadi terang, sobat tinggal membalikkan penempatan kodenya saja seperti di bawah ini:

Kode css gelap menjadi terang:
.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

6. Simpan dan coba jalankan untuk melihat hasilnya

Demikian tips sederhana untuk memberikan efek terang/gelap pada image postingan, semoga berguna dan bisa memberikan nuansa indah pada image postingan sobat

....:::Selamat mencoba dan semoga berhasil:::....

Membuat Tabel HTML

Hai sobat..cerita dulu ne yah. Semalam bagiku malam yang teramat panjang,,udah ujan, dingin, ada nyamuk pula yang ikut masuk kamar. Setelah semaleman tidur kurang begitu nyenyak, gara-gara nyamuk beterbangan,, ngaung nguing,,,plakk,,, plukkkk....plooookkk. Satu persatu nyamuk berjatuhan terkena jurus "sorak-sorak bergembira". Pasti sobat penasaran dengan nama jurusnya? hayooo..ngaku aja,,,hehhehe
Saya namain begitu karena tangan dipaksa bertepuk di antara nyamuk-nyamuk pembawa nyawa ( kalo ga bawa nyawa berarti mati donk,,hahaha)
Udahan ah ngelanturnya. To the point aja dah,,,cekidot gan ..

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Sebuah tabel mempunyai judul, tempat anda menjelaskan kolom/baris yang dilibatkan, baris untuk informasi, dan sel untuk setiap itemnya. Pada tabel berikut, kolom pertama berisi informasi header, setiap baris menjelaskan sebuah tag tabel HTML, dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi tag. Coba deh sobat copy paste kode dalam kotak area di bawah ini ke dalam postingan/ widget html.





Contoh di atas mendemontrasikan bagaimana membuat tabel dalam sebuah dokumen HTML.
 Elemen-element table

ELEMENT PENJELASAN
<table>...</table> Mendefinisikan sebuah table dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border
<caption>...</caption> Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah ditengah pada bagian paling atas tabel atribut align="bottom" dapat digunakan untuk menempatkan judul pada bagian bawah tabel.
Catatan: judul dapat diberi tag apa saja.
<tr>...</tr> Menspesifikasikan sebuah baris tabel dalam tabel. Anda dapat mendefinisikan atribut untuk seluruh baris: align (left, center, right). dan valign (top, middle, bottom).
<th>...</th> Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah.
<td>...</td> Mendefinisikan sebuah sel tabel. Secara default teks dalam sel ini ditampilka rata kiri, dan di tengah secara vertikal. Sel data tabel dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan isinya.

Atribut table

ELEMENT PENJELASAN
align={left|center|right} Alignment horizontal untuk sel
valign={top|middle|bottom} Definisi alignment vertikal dalam sel
colspan=n Jumlah n kolom sel diperlebar
rowspan=n Jumlah n baris sel diperlebar
nowrap Matikan wrapping dalam sel


Catatan: 
Atribut yang didefinisikan dalam ... atau ... akan menggantikan alignment default yang didefinisikan dalam ...

Salah satu manfaat dari penggunaan tabel adalah untuk merapikan postingan pada blog. Demikian sekilas tentang tabel HTML.

....::::Semoga berguna & selamat mencoba::::....

PERSIAPAN SEBELUM MENGAJAR | CINTAILAH PROFESI ANDA

  Bila seseorang sedang jatuh cinta, apa pun akan dilakukan untuk   mendapatkan cintanya. Tidak cukup waktu, energi, harta,   benda, bahkan ...