Depot Belajar Blogspot | belajar nge-blog di blogger | blog tutorial

Cara Mengganti Favicon

2010-04-01T17:17:00.000+07:00

Favicon adalah gambar icon yang ada pada address bar, dapat diganti dengan icon yang lain. Secara default favicon blogger adalah huruf B. menggantinya cukup mudah saja.
ikuti langkah berikut.

Cara membuat favicon:
1. Buatlah gambar (JPG, GIF, ICO dll) dengan ukuran kira -kira 24X24 Pixel sampai dengan 32X32 Pixel.
2. upload gambar tersebut ke photobucket atau ke tempat penyimpanan yang lain. Setelah di upload dapatkan alamat penyimpanan file tersebut 'http://'
3. Setelah itu Masuk ke LAY OUT Blogger.
4. Klik HTML.
5. Cari kode </head>
6. Tempatkan kode ini:
<link href='http://' rel='SHORTCUT ICON'/>
sebelum kode </head>
7. Simpan template.
8. Selamat belajar dan semoga bermanfaat.

Membuat Tombol PopUp Window

2010-03-31T11:55:00.000+07:00

Tombol PopUp window sesuatu yang unik dan juga menarik. Berfungsi memunculkan window baru dimana kita menempatkan alamat yang akan dituju setelah kita mengklik tombol PopUp tersebut. Contoh:

Dengan memasukkan kode berikut ini:
<di style="text-align: center;"><form onsubmit="window.open('http://prastathom.blogspot.com','popupwindow','scrollbars=yes, width=550,height=550');return true"><input value="CLICK TOMBOL POPUP WINDOW" type="submit"></form></div>

alamat link dapat diganti sesuai dengan keinginan kita. Begitu pula dengan lebar/width dan tinggi/height dapat disesuaikan. Untuk value nya pun dapat diganti juga .
Oke selamat belajar..

Cara membuat tulisan berjalan/Marquee

2010-03-29T18:06:00.000+07:00

Tulsan Marquee merupakan tulisan yang dapat berjalan sendiri dengan fungsi sebagai pengumuman, kata sambutan atau untuk memperindah tampilan blog saja.
Dengan tulisan bergerak dapat menarik perhatian pengunjung, dengan demikian apabila kita menuliskan tulisan yang penting maka pengunjung dapat segera mengetahui artikel atau link ke artikel tersebut.

Beberapa Kode untuk mendapatkan tulisan Marquee antara lain:
1. Marquee bergerak dari kiri ke kanan

marquee/tulisan berjalan dari kiri ke kanan

Kode:
<marquee align="center" direction="right" height="200" scrollamount="2" width="30%">

marquee/tulisan berjalan dari kiri ke kanan

</marquee>

2. Marquee Bolak-balik

marquee bolak-balik

Kode:
<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">

marquee bolak-balik

</MARQUEE>

3. Marquee diam jika ditunjuk dengan mouse

Tunjuk dengan mouse tulisan ini

Kode:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

Tunjuk dengan mouse tulisan ini

</marquee>

4. Marquee Hyperlink, diam jika Kita tunjuk

Prastathom

Depot Belajar

Full Music

Kode:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">

<a href="http://prastathom.blogspot.com" target="new">Prastathom</a><br/>

<a href="http://depotbelajar.blogspot.com" target="new">Depot Belajar </a><br/>

<a href="http://zon4music.blogspot.com" target="new">Full Music </a><br/>

</marquee>

Selamat Belajar dan semoga bermanfaaat

Cara membuat Scroll bar

2010-03-28T19:40:00.000+07:00

Fungsi dari Sroll bar yaitu kita dapat menyimpan Text, kode atau link agar tidak terlalu panjang dalam tampilannya.

ISI SESUAI KEINGINAN, BISA BERUPA TEXT ATAU KODE ATAU BERUPA LINK.
contoh:
Prastathom
studioprastathom
zon4music
fokuselektronika
depotbelajar

Untuk membuat hal seperti di atas butuh script yang relatif pendek.

Kode scriptnya sebagai berikut:
<div style="background-color: white; height: 135px; margin: 0px auto; overflow: auto; padding: 5px; text-align: left; width: 85%;">

ISI SESUAI KEINGINAN, BISA BERUPA TEXT ATAU KODE ATAU BERUPA LINK.

</div>
Isi dapat disesuaikan dengan keperluan , Warna dapat diganti sesuai keinginan kita. Begitupula dengan ukuran Width/lebar dan height/tinggi tinggal dirubah saja.

Cara Membuat Text Area

2010-03-28T11:36:00.000+07:00

Text area merupakan area untuk menampilkan text yang baru. Berfungsi sebagai daerah/ruang baru dalam blog sehingga memudahkan bagi pengunjung untuk meng-copy text atau kode yang kita tuliskan di dalam kotak area tersebut.
Ada beberapa Text Area yang bisa kita buat antara lain:
1. Text Area Standard.
2. Text Area yang dapat diatur ruang dan kolomnya.
3. Text Area untuk Password.
4. Text Area Bergaris putus-putus.
5. Text Area Klik Auto Blok.
6. Text Area dengan Tombol Blok.

1. Text Area Standard.
<textarea>Tulisan yang akan diisi dalam kotak area</textarea>
hasilnya berupa tampilan

2. Text Area yang dapat diatur ruang dan kolomnya.
<textarea cols="20" rows="5">Tulisan yang akan diisi di kotak area</textarea>
Hasilnya berupa tampilan:

3. Text Area untuk Password.
<input type="password" value="Tulisan menjadi tidak tampak" />

Hasilnya berupa tampilan:

4. Text Area Bergaris putus-putus.
<textarea cols="20" rows="5" style="border: 2px dashed ;"> Tulisan dalam kotak area</textarea>
Hasilnya berupa tampilan:

5. Text Area Klik Auto Blok.
<textarea rows="5" cols="25" onclick="this.focus(); this.select();">Tulisan dalam kotak area </textarea>
Hasilnya berupa tampilan:

6. Text Area dengan Tombol Blok.
<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Tulisan dalam kotak area</textarea></p></div></form>

Hasilnya berupa tampilan:

Cara membuat Read More

2010-03-27T10:50:00.002+07:00

Untuk membuat Read more ,kita ketik/tulis artikel kita kemudian kita potong untuk membuat read more pada edit HTML dengan kode:


Untuk memudahkan kita tidak menuliskan
 pada setiap postingan, maka kita dapat melakukan langkah sebagai berikut:
1. Pergi ke halaman Pengaturan.
2. Kemudian klik Format.
3. Di bagian format carilah Template entri. Kemudian ketik kode
 di dalam kotak.
4. Klik tombol simpan template.
5. Maka setiap postingan akan muncul kode tersebut pada saat kita akan posting. Dapat dilihat pada Edit HTML.
Ketik artikel yang akan kita tulis sebelum kode  kemudian secara keseluruhan tulis artikel sesudah kode tersebut.

Fungsi dari Read More adalah mempersingkat tampilan Postingan. Sehingga yang tampil di halaman hanya sebagian saja kemudian kita klik read more tersebut maka secara keseluruhan kita dapat membaca artikel tersebut secara keseluruhan. Baca Selengkapnya..atau Selanjutnya.. pengganti Read more dapat kita ganti dengan cara:
1. Pergi ke halaman Tata Letak/Lay Out.
2. Setelah halaman Tata Letak kemudian kita Klik Edit pada Posting Blog.
3. Selanjutnya akan muncul halaman window baru, maka akan tampak tulisan read more atau baca selengkapnya. Nah ..itu bisa bisa kita ganti sesuai keinginan kita.
4. Klik simpan.
5. Selesai

Apabila menggunakan Template hasil download an atau bukan template minima dari Blogger , maka dapat menggunakan kode CSS , langkahnya sebagai berikut:
1. Masuk/log in ke akun blogger.
2. Di halaman Dasbor klik Tata letak.
3. Sampai pada halaman Tata letak , kemudian Klik HTML.
4. Centang pada kotak "expand template widget"
5. Mencari Kode CSS sebagai berikut :
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
6. Kemudian kopi kode berikut:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
Letakkan tepat di bawah kode no.5 tadi.
7. Klik Simpan/Save Template.
8. Selesai dan selamat belajar.

....Learn More...

Cara Membuat Hyperlink

2010-03-26T11:13:00.003+07:00

Ada beberapa Kode yang dapat kita pergunakan untuk membuat Hyperlink. Antara lain
1. Kode yang berfungsi sebagai link terbuka di Tab yang sama.
<a href="http://depotbelajar.blogspot.com">
depotbelajar.blogspot.com</a>
Contoh :

depotbelajar.blogspot.com

2. Kode yang berfungsi sebagai link yang muncul di Tab yang berbeda.
<a href="http://depotbelajar.blogspot.com" target="_blank">depotbelajar.blogspot.com</a>

Contoh:
depotbelajar.blogspot.com

3. Kode yang berfungsi sebagai link dengan gambar. Terbuka di Tab yang sama.
<a href="http://depotbelajar.blogspot.com/"><img src="http://i1002.photobucket.com/albums/af146/prastathom/ptto.jpg" border="0" alt="prastathom"/></a>
Contoh :

4. Kode Link dengan gambar dan muncul di Tab yang berbeda/baru.
<a target="_blank" href="http://prastathom.blogspot.com/"><img alt="prastathom.blogspot.com" src="http://i1002.photobucket.com/albums/af146/prastathom/ptto.jpg" border="0"/></a>

contoh:

Cara membuat Read More 1

2010-03-25T11:07:00.001+07:00

Read more berfungsi membuat artikel di halaman utama tidak tampil secara keseluruhan, tetapi hanya sebagian saja. Sehingga Artikel yang tampil di halaman utama tidak tampil terlalu panjang.
Secara HTML bisa di tambahkan perintah :


Untuk secara keseluruhan setiap kita postingan, langkahnya sebagai berikut:

1. Buka LAYOUT kemudian EDIT HTML.
2. Berilah tanda centang pada cek box "expand widget template".
3. Carilah kode berikut ini :
<p><data:post.body/></p>
4. Setelah ditemukan , gantilah kode tersebut dengan kode berikut ini :
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>
Tulisan Read More dapat dirubah, misalnya dengan Learn More atau Baca selengkapnya.
5.Simpan hasil pengeditan.
6. Kemudian pilih menu Setting kemudian pilih Formatting
7. Pada kotak Post Template isilah kode berikut ini:
<span class="fullpost">

</span>
8. Kemudian Simpan/save.
9. Ketika memposting ada dua pilihan compose(tulis) dengan Edit Html. Maka pilihlah Edit HTML. Maka secara Otomatis akan tampak kode :
<span class="fullpost">

</span>
10. Pada saat membuat artikel, letakkan artikel yang akan ditampilkan di halaman utama di atas kode: <span class="fullpost"> sementara sisa secara keseluruhan posting dapat diletakkan diantara kode : <span class="fullpost"> dan </span>
11. Selamat belajar dan mencoba. Semoga bermanfaat.

Cara Promosi Blog

2010-03-24T03:24:00.000+07:00

Cara Promosi Blog mempunyai banyak cara antara lain mendaftarkan di :

infogue.com
lintasberita.com

bagi anda yang mempunyai postingan berbahasa Inggris dapat memanfaatkan document hosting site dari luar, seperti:

• http://www.scribd.com
• http://www.issuu.com
• http://www.docs.google.com click share > Publish as webpage
• http://www.prezi.com
• http://www.calameo.com
• http://www.docstoc.com
• http://member.thinkfree.com/member/goLandingPage.action
• http://www.loosestitch.com
• http://www.live-documents.com/
• http://wwww.mixedink.com/main.php
Tapi khusus social bookmark yang ini, postingan anda harus diubah dulu kedalam bentuk file pdf .Anda dapat menggunakan https://createpdf.adobe.com/ untuk menconvert file word ke pdf.

Daftar Alamat situs Warna untuk Blog

2010-03-24T02:53:00.001+07:00

Untukbelajar warna, anda dapat dengan mengunjungi situs yang menyediakan daftar warna secara lengkap beserta kodenya.

1. http://www.colorschemer.com/online.html colorschemer.com
2. http://colorblender.com/ colorblender.com
3. http://www.colorhunter.com/ colorhunter.com
4. http://www.colorjack.com/sphere/
5. http://gmazzocato.altervista.org/colorwheel/wheel.php
6. http://pourpre.com/colordb/?l=eng
7. http://www.colourlovers.com/
8. http://www.ficml.org/jemimap/style/color/wheel.html

Ini adalah red

Ini adalah green

Ini adalah Blue

Daftar Warna untuk kode HTML

2010-03-23T02:54:00.000+07:00

Daftar Kode Warna HTML dapat dilihat selengkapnya di wikipedia/daftar warna
<p><span style="background:#ffffff">white</span></p>

Putih= #ffffff

#000000 #000000

red #ff0000

green #008000

blue #0000ff

Cara membuat DropDown menu

2010-03-20T22:43:00.001+07:00

Membuat Dropdown menu yang mudah dengan cara:
1. Login Blogspot.
2. Klik Tata Letak.
3. Klik Tambah Gadget --> Javascript/HTML --> dan masukkan kode berikut ini:
<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Menu DropDown</option>
<option value="Link 1">Teks 1</option>
<option value="Link 2">Teks 2</option>
</select>
Untuk menu Link 1, 2 dapat ditambah dengan 3, 4 dan seterusnya.
4. Save. Setelah disimpan dapat melihat hasilnya.

Untuk membuat Dropdown menu type Open New Window dapat dengan cara mengganti kode:
<select onChange="document.location.href=this.options[this.selectedIndex].value;">

Dengan Kode berikut ini:
<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

1.

2.

Cara menghilangkan tanda obeng Blogspot

2010-03-20T05:59:00.000+07:00

Bagi yang ingin menghilangkan tanda obeng di Blogspot. Maka caranya adalh sebagai berikut:
1. Klik Tata letak/ Lay out.
2. Klik Edit HTML.
3. Centang kotak Expand widget template.
4. Carilah kode ]]></b:skin> (gunakan Ctrl+f untuk memudahkan proses pencarian).
5. Kemudian Copy kode berikut ini :

.quickedit{
display:none;
}

6. Paste tepat di atas kode ]]></b:skin>
7. Simpan Template.
8. Selamat Belajar . Semoga berhasil dan bermanfaat.

Cara Posting Kode HTML

2010-03-20T05:24:00.000+07:00

Untuk menerbitkan Entri kode HTML .
1. Berkunjunglah ke centricle.com
2. Masukkan kode HTML yang akan dijadikan postingan.
contoh :
copy paste kode di bawah <body> :
<style type='text/css'>
#navbar-iframe {display:none;}
</style>
kode HTML dan CSS yang berwarna hijau.
3. Ada 2 pilihan. Encode dan Decode. Maka klik Encode untuk mendapatkan hasil kode HTML yang akan diposting. Kemudian copy-paste pada postingan/Entri baru.
4. Pratinjau untuk melihat hasil postingan.
5. Setelah cocok segera terbitkan entri untuk melihat hasil dari postingan dengan kode HTML atau Javascript.
6. Selamat belajar dan semoga bermanfaat.

Depot Belajar dan Berbagi

2010-03-19T04:38:00.000+07:00

Depot Belajar Blogspot adalah tempat belajar cara membuat Blog beserta tips dan triknya. Secara garis besar merupakan Depot=>Gudang belajar dari para senior dan berbagi.