Cara Mengganti navigasi Home, Previous Dan Next Page menjadi Angka

Mungkin sobat sudah bosan melihat Navigasi Home, Previous dan Next bawaan template.
dan untuk itu saya akan membagi 3 model bentuk Navigasi angka editan saya.

Tutorial I :

Pada Dashboard, Pilih Template
Klik Edit HTML
Cari Kode ]]></b:skin>
Copy paste script dibawah ini dan letakkan tepat di atas kode ]]></b:skin> tersebut

• Script untuk Navigasi berwarna merah

.showpageArea{float:center; color:#FF0000; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea:hover{float:center; color:#FF0000; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea a{color:white}
.showpageNum a:hover,.showpage:hover{background:white; border:1px solid #FF0000;color:#FF0000!important}
.showpage{margin:0}
.showpage:hover a{color:#FF0000!important}
.showpagePoint{background:white; border:1px solid #e8e8e8; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpagePoint:hover{background:white; border:1px solid #FF0000; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8; border-radius:5px; color: white; text-shadow:0 1px 1px black; background:#FF0000; margin:0 2px 0 0; padding:5px 12px}

•  Script untuk Navigasi berwarna Ungu

.showpageArea{float:center; color:#7B00FF; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea:hover{float:center; color:#7B00FF; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea a{color:white}
.showpageNum a:hover,.showpage:hover{background:white; border:1px solid #7B00FF;color:#7B00FF!important}
.showpage{margin:0}
.showpage:hover a{color:#7B00FF!important}
.showpagePoint{background:white; border:1px solid #e8e8e8; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpagePoint:hover{background:white; border:1px solid #7B00FF; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8; border-radius:5px; color: white; text-shadow:0 1px 1px black; background:#7B00FF; margin:0 2px 0 0; padding:5px 12px}

•  Script untuk Navigasi berwarna Biru

.showpageArea{float:center; color:#0022FF; font-size:12px; text-shadow:0 1px 1px #000000; margin:10px 0}
.showpageArea:hover{float:center; color:#0022FF; font-size:12px; text-shadow:0 1px 1px #000000; margin:10px 0}
.showpageArea a{color:#FFFFFF}
.showpageNum a:hover,.showpage:hover{background:#FFFFFF; border:1px solid #0022FF;color:#0022FF!important}
.showpage{margin:0}
.showpage:hover a{color:#0022FF!important}
.showpagePoint{background:#FFFFFF; border:1px solid #e8e8e8; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpagePoint:hover{background:#FFFFFF; border:1px solid #0022FF; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8; border-radius:5px; color: #FFFFFF; text-shadow:0 1px 1px #000000; background:#0022FF; margin:0 2px 0 0; padding:5px 12px}

Tutorial II :

Masih Pada menu edit HTML tadi
Cari kode </body>
Copy Paste kode script dibawah ini dan letakkan tepat diatas kode </body>

<!-- Start PageNavi by Dido Borneo -->
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord='Prev';
var downPageWord='Next';
</script>
<script type="text/javascript" src="https://sites.google.com/site/didopalangkaraya/project/PageNavi3.js"></script>
<!-- End PageNavi by Dido Borneo -->

Silahkan sobat ganti kata-kata Prev dan Next diatas apabila sobat ingin berkreasi

"Semoga Bermamfaat"

[ Baca Selengkapnya ]

Textarea dan contoh tampilannya

• Textarea Model biasa

Textarea Model biasa

<textarea cols="20" rows="2">Masukkan teks sobat disini</textarea>

• Textarea dengan huruf berwarna

Textarea dengan huruf berwarna

<textarea cols="20" rows="2" style=" color:#0022FF;">Masukkan teks sobat disini</textarea>

• Textarea dengan border solid

Textarea dengan border solid

<textarea name="code" cols="20" rows="2" style="border:5px solid #FF0000; ">Masukkan teks sobat disini</textarea>

• Textarea dengan border solid dan radius

Textarea dengan border solid dan radius

<textarea name="code" cols="30" rows="2" style="border:5px solid #FF0000; border-radius: 8px; ">Masukkan teks sobat disini</textarea>

• Textarea dengan border solid dan huruf berwarna

Textarea dengan border solid dan huruf berwarna

<textarea cols="30" rows="2" style="border:5px solid #FF0000; color:#0022FF;">Masukkan teks sobat disini</textarea>

• Textarea dengan background berwarna

Textarea dengan background berwarna

<textarea name="code" cols="30" rows="2" style="background:#00FF00;">Masukkan teks sobat disini</textarea>

• Textarea dengan background, border dan huruf berwarna

Textarea dengan background, border dan huruf berwarna

<textarea name="code" cols="30" rows="2" style="background:#00FF00; border:5px solid #FF0000; color:#ff6347; text-align:center;">Masukkan teks sobat disini</textarea>

• Textarea dengan Tombol Pilih semua

Textarea dengan Tombol Pilih semua

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Pilih semua"> </div><div align="center"></div><p align="center"><textarea style="width: 300px; height: 144px" name="txt" rows="100" wrap="virtual" cols="55">Masukkan teks sobat disini</textarea></p></div></form>

• Textarea Terblok Semua saat Dilewati cursor

Textarea Terblok Semua saat Dilewati cursor

<div>
<form name="Dido Blogger"><div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" rows="100" style="height: 50px; width: 300px;">Masukkan teks sobat disini</textarea></form>
</div> 

•  Text Area Yang Tidak Bisa Dihapus

Text Area Yang Tidak Bisa Dihapus

<div align="center"><textarea rows="2" cols="35" onclick="this.focus(); this.select();" readonly="">Masukkan Teks sobat Disini</textarea></div>

Keterangan :

• cols (kolom)  :  jumlah kolom atau lebar textarea
• rows (baris)   :  jumlah baris atau tinggi textarea
• untuk membuat textarea lebih menarik tampilannya, sobat bisa berkreasi sendiri dengan merubah jenis garis dan model bentuk dari border nya
  sebagai contoh dari jenis model dan bentuk border silahkan sobat lihat pada postingan saya sebelumnya disini dan juga disini (klik aja)

[ Baca Selengkapnya ]

Efek-efek pada Gambar

Efek Gambar bergetar

 
script kodenya :

<center><marquee align="center" behavior="alternate" direction="right" scrollamount="18" width="200px"><img src="Alamat URL Gambar Sobat" style="width: 190px;" /></marquee></center>

Cara Pemasangan :

• Pada Menu Tata Letak, Klik Tambahkan Gadget
• Pilih Edit HTML/Javascript
• Copy Paste script Diatas kedalamnya

Efek Gelap ke Terang

Tutorialnya :

• Pada Dashboard, pilih Template
• Klik Edit HTML
• Cari kode ]]></b:skin> ( Tekan CTRL+F untuk mempermudah pencarian ).
• Copy paste kode script di bawah ini dan letakan tepat di atas kode ]]></b:skin>

img {
filter:alpha(opacity=70); -moz-opacity:0.7; opacity: 0.7;
}
img:hover { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity 1.0;
}

Efek Terang Ke Gelap :

Cara Peletakkannya sama seperti diatas

Kode scriptnya :

img {
filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;
}
img:hover { filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;
}

Efek Gelap ke Terang berfungsi untuk membuat efek gambar akan menjadi terang jika Cursor diarahkan,  dan akan menjadi gelap ketika cursor dijauhkan, begitu sebaliknya pada efek Terang Ke Gelap

Untuk efek-efek lain pada blog, silahkan klik disini untuk menuju postingan saya terdahulu

[ Baca Selengkapnya ]

Membuat bingkai pada Tulisan atau Posting

Dalam pembuatan bingkai tulisan atau postingan, Biasanya digunakan 3 jenis model seperti border, text area dan kotak scroll (overflow).
Berikut saya akan membagikan cara untuk pembuatan 3 jenis model tersebut :

Border

border atau garis yang mengelilingi tulisan yang fungsinya untuk memperindah tampilan dan juga sebagai pembatas tulisan.

Contoh border :

Isi Teks Anda Disini

Kodenya :

<div style="border: 3px solid #FF0000; margin: 5px 0px; padding: 10px; width: auto; height: auto; background-color:#ABABAB; text-align: left; font color:#1AFF00;">Isi Teks Anda Disini</div>

Keterangan:

• Border: 3px solid #FF0000; = Tebal garis border jenis solid 3px dengan kode warna border #FF0000
• Margin: 5px 0px; = Margin atas-bawah 5px dan margin kiri-kanan 0 px.
• Padding: 10px; = Jarak tulisan ke border adalah 10px.
• Perintah width: auto; height: auto; = agar lebarnya(width) mengikuti lebar kolom yang tersedia dan tinggi(height) mengikuti tulisan yang ada didalamnya.
  Untuk Perintah auto, sobat bisa menggantinya dalam bentuk pixel, misalnya: 100px.
• background-color:#ABABAB; = warna latar/gambar belakang tulisan dengan kode warna #ABABAB;
  silahkan ganti kode #ABABAB dengan none atau hapus saja perintahnya apabila ingin tanpa warna latar.
• text-align: left; = bentuk rata kiri.
• ganti sesuai selera dengan perintah right (Rata Kanan), center (Rata Tengah), atau justify (Rata kiri-kanan)
• font color:#1AFF00; = Warna Huruf  menggunakan kode #1AFF00

Textarea

Textarea atau kotak yang melingkupi daerah text itu berada.
Pada perintah dalam textarea tidak menggunakan width dan height melainkan memakai rows (baris) dan cols (kolom) untuk lebar dan tinggi.
Penggunaan kode rows dan cols efeknya akan sama dengan overflow,
yaitu jika text melebihi area baris dan kolom , maka akan dibuatkan scroll dan disembunyikan.

Contoh textarea :
Isi Teks Anda disini
Kodenya :

<textarea rows="5" cols="50">Isi Teks Anda disini</textarea>

Keterangan :

• rows="5" cols="50" artinya 5 baris dan lebar 50 kolom (tulisan yang melebihi 5 baris dan 50 kolom akan disembunyikan dan diberikan scroll)

• Untuk melihat contoh model textarea lainnya silahkan sobat baca di postingan saya yg lain Klik disini 

Overflow

Overflow artinya tulisan yang melebihi media yang tersedia.
Perintah dalam overflow, yaitu scroll, hide, dan auto.
 
Keterangan

• scroll = tulisan yang melebihi media akan dibuatkan scroll.
• hide = tulisan yang melebihi media akan disembunyikan.
• auto = tulisan yang melebihi media akan dibuatkan scroll dan sisanya akan disembunyikan.

Contoh :

Isi Teks Anda disini

Kodenya :

<div style="overflow:auto; border: 5px solid #FF0000; margin: auto; padding: 3px; width: 95%; height: 100px; background-color:#ABABAB; text-align: justify; font color:#1AFF00;">Isi Teks Anda disini</div>

Keterangan:

• Jika tulisan tersebut melebihi lebar 95% dari lebar container dan tinggi melebihi 100px maka akan dibuatkan scroll dan sisanya akan disembunyikan.

Catatan :
Perintah-perintah pada overflow sama dengan perintah pada border.

Untuk pemberian warna silahkan sobat lihat pada kode generator warna atau memasang generator warna pada blog sobat sendiri yang pernah saya posting sebelumnya disini

[ Baca Selengkapnya ]

Jenis-jenis Garis Border

Border Solid

Border Dotted

Border dashed

Border double

Border groove

Border Ridge

Border Inset

Border Outset

Keterangan :

Jenis-jenis border diatas saya buat dalam contoh penulisan teks berbingkai seperti kode dibawah ini :

<div style="border: 7px solid #FF0000; margin: 10px 0px; padding: 10px; width: auto; height: auto; text-align: center; font color:#00FF08;">Teks tulisan kita</div>

• 7px adalah nilai tebal dari border
• solid adalah jenis garis border
• Teks Tulisan kita adalah Teks yang kita beri border

Fungsi-fungsi kode border :

• Dotted = garis titik-titik
• Solid =  garis lurus
• Double = garis lurus double
• Border-top = garis bagian atas
• Border-bottom = garis bagian bawah
• Border-left = garis bagian kiri
• Border-right = garis bagian kanan

Catatan :
Untuk ukuran ketebalan border saya sarankan menggunakan ukuran diatas 2 px agar bentuk garis bordernya terlihat jelas

[ Baca Selengkapnya ]