Friday, April 29, 2011

Kode-kode HTML

Kode-kode dasar HTML

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini
Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar

Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar

Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4<sub>2</sub></p>hasilnya seperti ini:
4₂

Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4<sup>2</sup></p> hasilnya seperti ini:
4²

Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf

Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
~~Belajar~~

Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar

Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar

Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar

Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:

Belajar

Membuat tabel border solid gunakan kode:

hasilnya seperti :

Text

Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:

Text

Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)

Membuat Komentar Admin Beda / Highlight Author Comment

Membuat Komentar Blogspot Layaknya Reply Komentar dari Admin

Sepertinya,sudah banyak ya gan yang memposting masalah bagaimana cara membuat komentar admin beda dengan komentar pengunjung ini.
Mungkin kali ini Pelajaran Blog hanya akan mengulas kembali dan memberikan ide agar tampilan komentar admin yang berbeda dengan komentar pengunjung nanti agar lebih menarik lagi.

Untuk pic preview-nya,seperti apa sih komentar admin yang beda dengan komentar pengunjung itu,sobat lihat gambar dibawah ini:

Kiranya sudah sangat jelas sekali ya gan,apa yang akan dibahas kali ini :D

Langkah Cara Membuat Highlight Author Comment / Membuat Komentar Blogger Admin Berbeda dengan Komentar Pengunjung

Ok,Pertama tentukan blog milik anda yang mana yang akan di modifikasi kotak komentar-nya agar beda dengan komentar pengunjung,dengan memilih Dasboard,lalu pilih Tata Letak / Rancangan blog terpilih tadi.

membuat komentar admin beda Highlight Author Comment.

Kedua,pilih tab Edit HTML,lalu seperti biasa contreng pada checklist tulisan Expand Widget Templates.

modifikasi kotak komentar beda admin dan berbeda.

Ketiga,pada barisan kode CSS sobat atau cari saja kode ]]></b:skin>,jika sudah ketemu,letakkan kode css berikut,tepat diatas kode tersebut.

.admin-pb-comments{
background:   url(http://2.bp.blogspot.com/_n7xseT2-HDU/TUOJMHKcmhI/AAAAAAAAArs/AxN8AGyHY6E/s1600/pelajaran%2Bblog%2Bbackground.jpg)  no-repeat;
border:1px solid #FF9966;
border-left:1px solid #EEEEEE;
border-right:1px solid #EEEEEE;
margin-left:0;
margin-right:20px;
padding:7px;
color:#ffffff;
}

Keempat,cari lagi kode berikut ini (gunakan Ctrl+F di keyboard sob):

dd class='comment-body'

Jika sudah ketemu,tepat diatasnya letakkan kode berikut:

<b:if cond='data:comment.author == data:post.author'>
<dd class='admin-pb-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>

Kelima,sekarang cari kode berikut:

<dd class='comment-footer'>

Jika sudah ketemu,tinggal sisipkan kode </b:if> tepat diatas kode <dd class='comment-footer'> tersebut.

Setelah itu,Simpan Templates blogger sobat dan cobalah isilah komentar untuk menguji berhasil tidaknya trik membedakan komentar admin dengan komentar pengunjung ini.

Semoga berhasil dan lebih semangat ngeblog ya gan :D

Klik tombol 'Buat Popular Post' di bawah ini jika anda merasa konten/postingan yang sedang anda baca sangat menarik dan bermanfaat bagi anda.

Membuat Jadwal Sholat pada Blog

Membuat Jadwal Sholat pada Blog: "

Yuk! belajar menambahkan element baru di blog kita.

Ya,jadwal untuk sholat.
Bagi yang muslim dan ingin meletakkan Jadwal untuk Sholat,ikuti
langkah-langkah berikut ini :

Silahkan kunjungi situs http://www.islamicfinder.org
Klik link yang bertuliskan Add new sevices to your site di halaman bagian bawah
Alihkan perhatian ke nomor pilihan ke dua. Klik menu Dropdown yang bertuliskan Select a Country
Klik nama negara, lalu klik Go.
Klik nama kota .
Klik tombol Generated Code.

Jika sudah mendapatkan kode,anda tinggal meletakkan kode HTML tadi kedalam halaman blog anda,tentunya dengan menambahkan element halaman baru dan pilih Add New Widget/Javascript.
Simpan.

Cara Menjebol / Membobol Rar - Password File Rar Recovery Mantab!!

Software Pembobol Password File Rar

Adalah RAR Password Recovery,sebuah nama software yang sudah menjadi superstar dalam dunia maya.

Cara menggunakan juga tidak terlalu ribet bahkan tinggal install saja dan sobat bisa langsung gunakan aplikasinya.

Sebenarnya ingin memposting panjang lebar masalah cara membobol password rar ini,tapi karena waktu yang tidak memungkinkan terpaksa saya hanya meberikan info link dan screenshotnya saja.

Untuk langkah dan caranya bisa dilihat dibanyak forum-forum yang membahas masalah membobol password rar,salah satunya yang sudah di posting agan-agan di www.indowebster.com,dll

Download RAR Password Recovery
(software pembobol file rar)

Mungkin jika waktu memungkinkan kita akan membahas software pembobol file yang lain dan mengatasi file selain rar seperti zip juga membuka file-file ber-ekstention unik seperti *.CHK,*.kgb,dll

Klik tombol 'Buat Popular Post' di bawah ini jika anda merasa konten/postingan yang sedang anda baca sangat menarik dan bermanfaat bagi anda.

Tools Pelacak / Melacak IP Adress

Tools Pelacak / Melacak IP Adress: "

Melacak IP? mo ngcrack ya mas? :)

ga,bcanda. :)

Untuk mendapatkan tools itu,kita bisa ngemanfaatin dari situs penyedianya aja yuk!

Check aja di :

Selamat mencoba ya.. :)

Menghias / Membuat / Menambahkan Emoticons pada Blog

Yuk! kita menghias blog dengan emoticons yang beragam.Artikel ini saya dapet dari berbagai sumber dan berbagai info sang master blog :

Kode-kode di bawah masing-masing emoticons yang tertera dibawah ini,adalah kode untuk mendapatkan karakter /emoticons tersebut.

<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif">

Cool khan?

Selamat berkreasi ya!

Belajar Membuat Navigasi Bar [Navbar Blogger] Menu Sederhana

Menu Navigasi Dalam Navigasi Bar (Navbar)

Pernahkah anda mengalami kesulitan untuk membuat menu navigasi seperti 'Home', 'About','Daftar Isi',Links dll?
Disini,kita akan belajar membuat navigasi bar (navbar) blogger menu sederhana,seperti kasus diatas.

Jadi,bukan hanya membuat sebuah navbar,melainkan membuat 'menu navigasi' di dalam navbar itu sendiri.
Bingung?

Contoh hasil dari kreasi navbar ini,bisa anda lihat seperti gambar di bawah ini [klik gambar untuk hasil yang lebih besar]:

Sedangkan jika anda ingin memastikan seperti apa sih hasil sebenarnya,silakan kunjungi situsnya langsung di SINI.
Bagaimana? tertarik untuk membuatnya?

Langkah Membuat Navbar Blogger Sederhana

Sesederhana judul artikel ini,penempatan barisan kode css maupun kode untuk navbarnya,sangat sederhana sekali.
Sekali lagi,tutorial membuat navbar ini hanya untuk blogspot dari blogger saja ya :p

Pertama,Pergilah ke Dashboard blogger anda,lalu pilih Tata Letak,selanjutnya seperti biasa pilih tab Edit HTML.
Selanjutnya,contreng tulisan Expand Widget Templates.
Lalu cari kode berikut:

</head>
[untuk membantu,carilah menggunakan keyboard dengan menekan tombol alt+F]

Setelah ketemu,letakkan kode css berikut persis di atas kode </head> tersebut.

<style type="text/css">
#pelajaranblognav img {
margin: 0px 0px -8px 0px;
vertical-align: middle;
}
#pelajaranblognav {
background-color: #222222;
width: 100%;
left: 0px;
text-align: center;
font-family: Arial, Tahoma, Verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}
#pelajaranblognav ul {
margin: 0px;
padding: 0px;
list-style: none;
color:white;
font-family:arial;
font-size:11px;
}
#pelajaranblognav a {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:visited {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:hover {
background: #222222;
color: green;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav li {
float: left;
margin: 0px;
padding: 0px;
}
#copyright a {
text-decoration: none;
font-family:arial;
font-size:11px;
}
#copyright {
color: black;
text-decoration: none;
float:right;
font-family:arial;
font-size:11px;
}
</style>

Jika sudah anda letakkan kodenya css-nya,sekarang cari lagi kode berikut:

<body>

Jika sudah ketemu,letakkan kode berikut persis di bawahnya.

<div id="pelajaranblognav">
<table border="0" bgcolor="#222222">
<tr>
<br/><ul><li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="http://pelajaran-blog.blogspot.com/">Belajar Blog</a></li>
<li><a href="http://cepat-terindex-google.blogspot.com/">Belajar Seo</a></li>
<li><a href="#">Links</a></li></ul>
<td>
<a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg" width="500" height="80"/></a>
</td>
<td>

<center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
<center><a href="

http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>


</td>

<td>
<center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
<center><a href="

http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro

"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>

</td>

</tr>
</table>
</div>
<div id="copyright">
Langganan <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"><b>RSS Artikel</b></a>
| Langganan <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"><b>RSS Komentar</b></a>
|  Buat <a  href="http://pelajaran-blog.blogspot.com/2009/11/belajar-membuat-navigasi-bar-navbar.html"  target="blank"><b>Navbar</b></a> Ini Di Blog Kamu
</div>

Setelah itu Simpan Template,dan lihat hasilnya sekarang :D

Keterangan:

Untuk tanda #,gantilah dengan url alamat yang ingin anda tuju.
Untuk http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro,gantilah dengan alamat iklan banner anda.
Untuk http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg,gantilah dengan url gambar banner anda.
Untuk http://url_blog_anda.blogspot.com/,gantilah dengan url blog anda.

Semoga bermanfaat dan modifikasilah sesuai selera anda masing-masing.
Goosd Luck Ya!

Tips Cara Membuat Blog Ringan Saat Loading

Blog Blogger Pemula

Sebagai blogger pemula,saya merasa senang mempunyai sebuah blog,dan sebisa mungkin saya menghias blog tersebut.
Bahkan hampir semua widget saya pasang pada blog tersebut,mulai dari belajar memasang jam,kalender pada blog sampai widget-widget yang sebenarnya saya tidak tahu manfaatnya.
Sampai tidak saya sadari,blog cantik saya tersebut membutuhkan kurang lebih 1 menit baru bisa tampil sempurna.
Secara logika,jika anda mengunjungi suatu blog dimana blog tersebut mempunyai masalah saat loading,apa yang anda lakukan?
Yes,anda akan segera menutup blog tersebut,apalagi blog yang anda belum tahu jelas statusnya.

Tips Trik Membuat Blog Lebih Ringan Loading

Pengunjung,disini menjadi peran utama,karena tanpa pengunjung,suatu blog komersil dibilang tak berarti.
Nah,cara membuat pengunjung akan berkunjung kembali,salah satunya adalah mudahnya akses blog saat tampil/loading,disamping kualitas isi blog tersebut.
Biasanya blog-blog yang sedikit mengalami masalah loading adalah blog bertema advertising,belajar seo,multimedia.
Lain menurut saya,pasti lain menurut anda,so bagaimana menurut anda? setuju?

Nah,jika anda setuju,untuk membius pengunjung agar selalu nyaman berkunjung,cobalah gunakan trik-trik berikut:

Gunakan widget yang sekiranya anggap anda penting saja.
Misal;Link/blogroll,Tag Cloud,Search,Label,Archive Blog,Stats.
Secara logika,pada setiap komputer sudah menyediakan seperti,jam,kalender.
Apakah sekiranya widget jam dan kalender pada blog anda diharapkan oleh pengunjung?
Usahakan content/isi blog berupa text.
Kurangi pemakaian gambar ,baik *jpg maupun berformat *swf alias flash yang berlebihan meskipun ukurannya cenderung lebih kecil.
Pakailah script kode yang mempunyai manfaat penting saja.
Misal;Google Analystic,dll.
Pengunjung,sebagian besar lebih suka blog yang rapi dan tidak awut-awutan.
Cobalah,bertema sederhana dan simple.

**Cara-cara diatas saya sarankan hanya untuk blog yang bersifat sosialis dan informatif,tidak berlaku untuk blog pribadi maupun hobby.
Semoga bermanfaat ya dan semoga tambah temen barunya :D

Form Widget untuk Pengunjung

Form Praktis untuk Pengunjung Blog

Sering kita alami,ketika ingin mengirimkan pesan kepada pemilik suatu blog/web lewat email.

Kendalanya biasanya,kita harus repot-repot untuk masuk ke account mail kita,baik itu Yahoo mail maupun Gmail.
Akibatnya,respon pengunjung menjadi kurang.

Yang akan kita bahas kali ini,yaitu tentang membuat form untuk pengunjung/visitor blog,yang berfungsi untuk memudahkan pengunjung mengirimkan pesan langsung ke email kita,tanpa pengunjung harus login dulu ke account mail mereka,gimana? praktis khan?

Untuk contohnya anada bisa lihat form ini,

Sekiranya sudah maksud khan? :D

Membuat Form untuk Pengunjung

Nah! sekarang saatnya kita menuju langkah pertama membuat form ini.
Adalah www.freedback.com,suatu situs yang menyediakan jasa ini.Ok! langsung aja..

Pertama,kunjungi situs ’www.freedback.com’

Klik Tulisan ’Create a Form’

Selanjutnya,isi form sesuai status anda

Klik ’Sign Up’

Pergilah ke email dan cek inbox,aktivasi mail dari ’www.freedback.com’

Lalu anda akan dihadapkan halaman ’Edit Form’ dari ’www.freedback.com’

Klik tulisan Add question,jika anda menginginkan form tambahan,anda bisa tulis "Pesan:","Message",maupun sebuah pertanyaan.

Ikuti dan dapatkan ’Kode HTML’ nya

Copy kode tersebut,dan letakkan pada halaman HTML Anda.

Test! dengan email anda sendiri dan Selesai !

Semoga bermanfaat ya.. :D

Membuat Tanda Tangan Online

Ingin tahu cara membuatnya?

Ya,ada cara praktis untuk membuat tanda tangan seperti diatas,bukan dari Paint da juga bukan dari Photosop.Lalu?

Membuat tanda tangan online pada blog

Untuk membuat bentuk tanda tangan diatas secara praktis,kita memakai jasa www.mylivesignature.com.
Tampilan halaman dari www.signature.com seperti ini :

Pertama,masuk situs www.mylivesignature.com
Pilih tulisan "Click Here To Start"
Lalu akan tampil sebuah halaman dengan 3 pilihan pilih "Using the signature creation wizard".
Masukkan Nama,nama ini untuk hasil gambar tanda tangan anda,kemudian "Next Step"
Ikuti petunjuk,dan sesuaikan sesuai selera anda
Jika anda sudah merasa cocok,klik tulisan "Want to use this signature?"
Akan ada 2 pilihan "Generate HTML code" dan "Generate BB code "
Pilih "Generate HTML code"
Selanjutnya ada 2 pilihan lagi,misal pilihan 1 pilih "Generate a code from my handwritten signature"
Copy kode tersebut dan letakkan pada Halaman HTML anda.
Selesai

Meletakkan Kode pada Akhir Artikel/Postingan

Untuk meletakkan kode tanda tangan Online dari www.mylivesignature.com ini,ikuti langkah berikut :

Pilih Dashboard
Lalu pilih Pengaturan
Pilih Format
Tuju Tulisan Templates Posting
Letakkan Kode dari www.mylivesignature.com tadi pada kotak tersebut.
Simpan Perubahan.
Selesai

Melihat Tampilan Tanda Tangan Online pada Artikel

Saat hendak posting artikel baru,anda akan melihat tanda tangan/Signature tersebut,tinggal tulis artikel anda diatas kode tersebut.

Sederhana khan?

Jika anda sudah selesai mengikuti langkah-langkah seperti diatas,memang pada artikel sebelumnya (sebelum anda membuat tanda tangan ini),tanda tangan tersebut belum tampil,jika anda akan menampilkannya,tinggal Edit artikel anda,dan letakkan kode tanda tangan tersebut dibawah artikel anda.

Mengatur Warna dan Huruf pada Blog

Untuk para blogger baru, sobat akan menikmati fasilitas baru dari www.blogger.com, yaitu sobat bisa mengatur jenis font (hurup) serta warna font dengan sangat mudah. Di bawah adalah langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan).

Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan :
(ini khusus untuk template "minima")

Page Background color -->
pengaturan warna background blog. Silahkan klik warna yang ada di sebelah
kanan yang di sukai
Text Color
--> pengaturan warna huruf dari posting-an
Link Color
--> pengaturan warna huruf yang di link
Blog Title Color
--> pengaturan
warna huruf judul Blog
Blog Description Color
--> pengaturan warna huruf deskripsi blog
Post Title
Color
--> pengaturan warna huruf judul posting-an
Border Color
--> pengaturan warna kotak yang mengelilingi judul blog, serta garis
pemisah
Sidebar Title
Color --> pengaturan warna
huruf judul yang anda di sidebar (kolom samping)
Sidebar Title
Color --> pengaturan warna
hurup yang ada di sidebar(kolom samping)
Visited link
Color -->
pengaturan warna huruf link ketika pengunjung mengarahkannya ke tulisan yang
mengandung link
Text Font
--> pengaturan jenis huruf,berlaku untuk hurup hasil dari posting-an
ataupun hurup yang ada di sidebar
Sidebar Title Font
--> pengaturan jenis huruf
untuk judul yang ada di sidebar serta tanggal postingan
Blog Title Font
--> pengaturan jenis huruf Judul blog
Blog Description Font
--> Pengaturan jenis hurup dekripsi blog
Post Footer
Font -->
pengaturan jenis huruf footer (contoh : posted by )
Klik " SAVE CHANGES" untuk
mengakhiri pengaturan. Selesai

Untuk template-template selain template "minima", pada dasarnya sama aja, hanya saja ada sedikit perbedaan, tapi itu tidak sulit.

Untuk mengetahui tulisan mana yang sedang di rubah oleh anda, anda cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.

Membuat Disable Right Click / Anti Klik Kanan

Membuat fungsi klik kanan nonactive/disable right click,sangat cocok memang untuk menjaga document atau memproteksi gambar yang ada di blog kita,agar tidak disalah gunakan oleh pihak lain.
Meski ada shortcut tertentu yang mewakili perintah-perintah right click,nggak ada salahnya anda mencoba kode di bawah ini :

<script>
<!--
//for legal,don't delete this warn.This code is created by pelajaran-blog.blogspot.com
var message="Maaf!Lagi nggak boleh Klik Kanan ya!";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>

Cukup menempatkan kode di atas diantara

<body> dan </body>

Untuk tes melihat hasilnya,Pilih Folder Option pada komputer anda,pilih View,kosongkan check box pada Hide Extensions For Known Filetypes pilih Ok.

Copy kode diatas kedalam Notepad,Save beri nama "coba"yang hasil filenya menjadi "coba.txt".
Ganti nama file tersebut menjadi "coba.htm",selanjutnya klik kanan.

Siip khan ?

Kode ini berfungsi baik,jika di akses di IE dengan Javascript posisi Enable.

Memanfaatkan Fungsi Scroll untuk Daftar Artikel

Beberapa hari nggak online/update blog,saat lihat komentar ada temen kita menanyakan sambil belajar bagaimana membuat fungsi scroll seperti pada sidebar seperti disamping blog ini.
Kira-kira komentar itu seperti ini :

mas, salam kenal. aku penasaran gimana cara buat kotak yang kayak the most popular post, membuat blog di blogger yang ada di kanan postingan itu lho. mohon bimbingannya.

Untuk itu mumpung lagi ada waktu,sekarang kita kita bahas menghias blog dengan memanfaatkan fungsi scrollbar ya..:)
Untuk lebih relevan,sebaiknya diletakkan pada sidebar.Untuk hasil contohnya seperti ini:

TENTUKAN JUDUL KOLOM

Untuk langkah pertama,pergilah ke Dashboard---->Tata Letak----->Edit html.
Selanjutnya cari kode : </head>
Jika sudah ketemu,tepat diatasnya,letakkan kode ini:

<style type='text/css'>
#fungsiscroll {
float: left;
width: 100%;
font-family:arial;
font-size:12px;
margin: 6px 0px 6px 0px;
padding:0px;
line-height: 18px;
display:;
}
#fungsiscroll p {
padding: 0px;
margin: 0px;
}
#fungsiscroll a:hover {
color: green;
padding: 0px;
}
#fungsiscroll a {
text-decoration:none;
color:black;
}
#fungsiscroll a img {
border: none;
margin: 0px;
padding: 0px 0px 15px 0px;
}
#fungsiscroll h2 {
color: #000000;
font-size: 14px;
font-family: Arial;
text-align:center;
color:white;
font-weight: bold;
margin: 0px 0px 7px 0px;
padding: 7px 5px 3px 13px;
letter-spacing:0em;
text-transform:normal;
background: #222222;
}
#fungsiscroll ul {
list-style-type:none;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#fungsiscroll li {
list-style-type: none;
margin: 0px 0px 5px 0px;
padding: 0px;
border-bottom : 1px dashed #ccc;
}
#fungsiscroll ul ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#fungsiscroll ul li li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
border-bottom:1px solid #ddd;
}
#fungsiscroll ul li ul li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
border-bottom:1px solid #ddd;
}
#l_fungsiscroll {
background: #FFFFFF;
float: left;
width: 135px;
margin: 0px;
padding: 9px 9px 0px 9px;
line-height: 20px;
display: inline;
border: 1px solid #C0C0C0;
}
#l_fungsiscroll p {
margin: 0px;
padding: 0px 0px 15px 0px;
}
#l_fungsiscroll a img {
border: none;
margin: 0px;
padding: 0px 0px 15px 0px;
}
#l_sidebar ul {
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#l_sidebar ul ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#l_fungsiscroll ul li li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
}
#l_fungsiscroll ul li ul li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
}
#r_fungsiscroll {
background: #FFFFFF;
float: right;
width: 135px;
margin: 0px;
padding: 9px 9px 0px 9px;
line-height: 20px;
display: inline;
border: 1px solid #C0C0C0;
}
#r_fungsiscroll p {
padding: 0px 0px 15px 0px;
margin: 0px;
}
#r_fungsiscroll a img {
border: none;
margin: 0px;
padding: 0px 0px 15px 0px;
}
#r_fungsiscroll ul {
list-style-type: none;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#r_fungsiscroll ul ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#r_fungsiscroll ul li li {
background: #FFFFFF url(images/icon.png) no-repeat top left;
padding: 0px 0px 5px 18px;
margin: 0px 0px 0px 0px;
}
</style>

Setelah itu simpan.

Lalu pada Tata Letak blog,tambah element baru dan pilih HTML/Javascript,lalu letakkan kode berikut:

<script type="text/javascript"></script>

<div id="fungsiscroll" class="sidebar section">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
<div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 120px">

<

ul>
<li>>>

<a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a><

/li>

<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>

<

/ul>

</div>


<div id="fungsiscroll" class="sidebar section">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
<div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 120px">

<

ul>
<li>>>

<a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a><

/li>

<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>

<

/ul>

</div>
</div>
</div>

<div id="fungsiscroll" class="sidebar section">
<h2 class="title" align="left">TENTUKAN JUDUL KOLOM</h2>
<div style="overflow:auto;width:95%;height:120px;">
<ul>

<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>
<li>>> <a href="http://BLOGYANGDITUJU">TEXT YANG AKAN TAMPIL</a></li>

</ul>
</div></div>

Lalu Simpan. Selesai.

**Jika anda ingin membuat satu kolom saja,tinggal hapus kode yang berwarna hijau di atas.
CSS,memang sangat membantu ya.. :)

Al-Qur'an dan Terjemahannya

Sebelum membuka link dibawah ini, bilamana Operating System pada PC Anda menggunakan Microsoft Windows, harap install dahulu Original Arabic Qur'an Fonts. Namun bila Anda menggunakan Operating System selain Microsoft Windows, silahkan copy secara manual font-fontnya, silahkan download filenya disini.

Perhatian: Khusus untuk membuka link-link pada menu Al-Qur'an dan Terjemahannya ini, sebaiknya menggunakan web browser Microsoft Internet Explorer, karena tampilan text Qur'annya terlihat lebih baik daripada menggunakan web browser lainnya.

1. SURAT 1. AL FAATIHAH

2. SURAT 2. AL BAQARAH

3. SURAT 3. ALI 'IMRAN

4. SURAT 4. AN NISAA'

5. SURAT 5. AL MAA-IDAH

6. SURAT 6. AL AN'AAM

7. SURAT 7. AL A'RAAF

8. SURAT 8. AL ANFAAL

9. SURAT 9. AT TAUBAH

10. SURAT 10. YUNUS

11. SURAT 11. HUD

12. SURAT 12. YUSUF