Kamis, 23 Desember 2010

Cara Membuat Spoiler Pada Blog

Postingan kali ini tutorial cara membuat spoiler pada blog. Apa spoiler itu? Lihat contoh berikut! Klik tab berikut!
DISINI LETAK KONTENT ANDA


<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != ''){ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
DISINI LETAK KONTENT ANDA</div></div></div></div></div>

Teks yang berwarna biru bisa anda ganti katanya sesuai selera misalnya seperti contoh diatas, begitu pula dengan kontentnya bisa diisi dengan banner, buku tamu, link teman dan lain lain! Untuk background warnanya bisa lihat kodenya diblog ini diatas dekat home ada kode warna nya
  • Jangan lupa simpan dan simpan lagi!
  • Lihat hasilnya!
Semoga bermanfaat!


Label:

diposting oleh Ghulam Ridho @ 17.08   0 Komentar

Membuat Background Pada Link Ketka Di sorot

http://img218.imageshack.us/img218/5907/background2cj.jpg
supaya blog kita lebih manarik dan keren kita buat setiap link memiliki gambar..!
sebagai DEMO dapat kamu lihat disini
dan langsung saja kita buat

cari code a:hover biar lebih cepat tekan CTRL + C kemudian tambahkan code berikut


{background-image:url(link gambar)}

sehingga menjadi seperti ini :
a:hover {background-image:url(link gambar)}

dan selamat mencoba semoga bermanfaat..!

Label:

diposting oleh Ghulam Ridho @ 02.46   0 Komentar

Membuat efek TAIL/ekor pada cursor blog

http://myscienceblogs.com/kids/files/2009/02/tail-lizard1.jpg
hari ini saya akan memberi tahu tetang bagaimana cara membuat TAIL/ekor pada mouse blog..!
script ini saya dapat dari Ghulam Blogerz...
langsung saja caranya :




1. login blog
2.masukkan code bertikut tepat diatas code <body>
<style type="text/css">
BODY {overflow-x: hidden;}
</style>

3. kemudian pasanggkan code berikut tepat di atas code kamu pasang di gadgets blog kamu

<script language="JavaScript1.2">
<!--

/*
Submitted by Marcin Wojtowicz [one_spook@hotmail.com]
Featured on JavaScript Kit (http://javascriptkit.com)
Modified by JK to be IE7+/ Firefox compatible
For this and over 400+ free scripts, visit http://javascriptkit.com
*/

var trailLength = 8 // The length of trail (8 by default; put more for longer "tail")
var path = "CUSOR GIF" // URL of your image

var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var i,d = 0

function initTrail() { // prepares the script
images = new Array() // prepare the image array
for (i = 0; i < parseInt(trailLength); i++) {
images[i] = new Image()
images[i].src = path
}
storage = new Array() // prepare the storage for the coordinates
for (i = 0; i < images.length*3; i++) {
storage[i] = 0
}
for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>')
}
trail()
}
function trail() { // trailing function
for (i = 0; i < images.length; i++) { // for every div/layer
document.getElementById("obj" + i).style.top = storage[d]+'px' // the Y-coordinate
document.getElementById("obj" + i).style.left = + storage[d+1]+'px' // the X-coordinate
d = d+2
}
for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind
storage[i] = storage[i-2]
}
d = 0 // reset for future use
var timer = setTimeout("trail()",10) // call recursively
}
function processEvent(e) { // catches and processes the mousemove event
if (window.event) { // for IE
storage[0] = window.event.y+standardbody.scrollTop+10
storage[1] = window.event.x+standardbody.scrollLeft+10
} else {
storage[0] = e.pageY+12
storage[1] = e.pageX+12
}
}

initTrail()
document.onmousemove = processEvent // start capturing

//-->
</script>

NB: code merah diganti dengan gambar..!
Semoga bermanfaat...!

Sumber : Ghulam Blogerz

Label:

diposting oleh Ghulam Ridho @ 02.39   0 Komentar

Rabu, 22 Desember 2010

Kode Warna Html

Di Ridho Bloggerz Menyediakan Kode Warna Silahkan Di gunakan Sebaik2nya :






Label:

diposting oleh Ghulam Ridho @ 23.53   0 Komentar

Membuat Style Border (Bingkai Pada Blog)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf0R-l9Cbnq7eIxVw9Lvs55EGHPySxnWOOHF9Fow-dNPr-7pofIVhIhM3yD5I4_gwwSs4S3d65j-d2oGzW2UZCWwO_4g4-bUgV0CHcCn0atmstMF-wYWxDHVHvzpVUwFH0Riu9iEruZBw/s400/WildStyle.jpg

Pernahkah anda melihat bagian tulisan pada blog orang lain yang ditonjolkan atau dibedakan tampilannya dari yang lain. Biasanya bingkai pada tulisan itu dibuat orang untuk menonjolkan letak-letak kode html didalam postingan, hal ini ditujukan agar sipembaca yang mungkin memiliki keperluan dengan kode itu dapat dengan mudah mencari letak kode tersebut. Tetapi bukan hanya untuk menonjolkan tulisan kode html atau tulisan biasa saja. Style border ini juga dapat digunakan untuk memberi bingkai pada elemen-elemen penyusun blog kita sebagai contoh untuk memberi bingkai pada elemen yang tersapat di sidebar samping saya ini.

Baiklah tidak usah memperbanyak basa basi lagi sekarang mari langsung saja kita ikuti tutorial membuat style border atau bingkai pada blog ini.

Sebelumnya perlu diketahui bahwa border yang dikenal pada blog iu ada 5 macam untuk lebih jelasnya silahkan lihat disini

Nah sekarang anda sudah tahu jenis-jenisnyakan sekarang mari kita bahas tentang cara memasangnya.caranya sangat mudah kok anda tinggal memasukkan kode ini disebelum tulisan atau kode yang ingin anda beri bingkai dan kemudian tutup dengan kode pada akhir kata yang ingin diberi bingkai. contoh cara penulisannya seperti ini :

<div style="background:#F2F2F2;border:3px dashed #000000; padding:5px;">
Misalnya tulisan yang berwarna merah ini adalah kata atau kode yang ingin anda tampilkan
</div>

dan hasilnya akan tampil seperti ini :

Misalnya tulisan yang berwarna merah ini adalah kata atau kode yang ingin anda tampilkan

keterangan :

1. kata tulisan #F2F2F2 yang berwarna biru tersebut adalah warna yang akan dipakai sebagai background atau latar belakang tulisannya dapat diganti dengan kode warna lain silahkan dicari (disini)

2. tulisan border:3px yang berwarna ungu itu artinya ketebalan style bingkai atau garis itu adalah sebesar tiga pixel anda dapat mengganti angkanya dengan angka lain yang lebih besar agar garis tepi atau bingkainya dapat terlihat lebih jelas

3. tulisan dashed yang berwarna abu-abu itu menandakan bahwa jenis bingkai yang dipakai adalah bingkai mode dashed anda dapat menggantinya dengan jenis bingkai lain Disini

4. tulisan #000000 yang berwarna hijau berarti menandakan warna bingkai hitam dapat diganti dengan warna lain (disini)

5. tulisan yang berwarna merah tersebut merupakan kata atau kode yang ingin diberi bingkai

6.sebelum memakai kode dotas copykan terlebih dahulu kode ini ke notepad dan kemudian baru pastekan kode ini dari notepad ke tulisan yang akan diberi bingkai

Label:

diposting oleh Ghulam Ridho @ 22.56   1 Komentar

Mengenal jenis-jenis Style Border

http://www.weebly.com/uploads/4/7/3/2/4732709/bingkai_emas.jpg

Sering kali kita melihat bagian tulisan atau elemen disidebar blog orang lain yang dibubuhi hiasan berupa bingkai di tepinya, bahkan pada sebahagian lainnya juga ada yang dihiasi berupa gambar belakang atau background sebagai latar belakang penulisannya.dan untuk masalah ini sudah ada beberapa orang yang menanyakan cara pemasangannya pada saya
Nah oleh karena itulah pada pembahasan ini saya tertarik untuk membahas tentang penggunaan style border atau bingkai pada blog ini, tetapi sebelum membahas mengenai cara pemakaiannya alangkah lebih baik kalau kita belajar untuk mengenal jenis-jenis style bordernya terlebih dahulu, iyakan ?

Pada umumnya jenis style border yang sering digunakan oleh para blogger ada 5 macam tampilan, yaitu sebagai berikut :

 
 
1.

dotted

2.
dashed

3.
double

4.
solid

5.
groove

6.
ridge

7.
inset

8.
outset


sekian dulu penjabaran jenis-jenis style border dari saya semoga bermanfaat dan jenis-jenis style border lainnya dapat segera saya tambahkan.untuk menda[atkan kode dan cara pemakaiannya lihat disini


Label:

diposting oleh Ghulam Ridho @ 22.46   0 Komentar

Selasa, 21 Desember 2010

Kode Smiley Facebook

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrAqKuL3PLxbHswdhGHkfTsfuS4LJUC-YOlQyUUPJcQbVfQGpB3Q07Ce8vE97XRr7yf3jLxiOiNFCg2HRuVFm8S9Nj7Ff1U1HDl-i6IgGM1m7Xwe8JUJNTWYxtX5UBA1MLpaPPOxbp_04/s400/facebook_smiley.gif
Sering chating dengan teman di facebook? pasti ada yang terasa kurang dibandingkan bila kita chating menggunakan yahoo messenger yang mempunyai banyak smiley (emoticon). Sebenarnya facebook juga mempunyai smiley yang cukup banyak hanya saja pengguna facebook banyak yang tidak tahu kode untuk menampilkan smiley tersebut. Mau tambah asyik ngobrol dengan teman di facebook silakan tambahkan kode-kode smiley facebook berikut :
Baca selengkapnya ยป

Label:

diposting oleh Ghulam Ridho @ 22.13   0 Komentar