Laman

Sunday, December 27, 2009

MEMBUAT TEXT MENU BAR BERJALAN




Menu judul atau title bar ini letaknya ada di atas dan di pojok kiri pada browser milik sobat. Jika ingin title bar tersebut nampak berjalan,sobat bisa tambahkan kode script seperti di bawah ini:

<script language="JavaScript">
var txt=" SELAMAT DATANG ";
var kecepatan=200;var segarkan=null;function bergerak(){ document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>


CARA MEMASUKKAN KODENYA:
  • Yang pasti login dulu ke blog sobat.
  • Klik tata letak.
  • Pilih edit html.
  • Cari kode </head.>
  • Jika sudah ketemu masukkan kode diatas tadi tepat di atas kode </head.>
  • Yang bisa sobat edit:
    Kata SELAMAT DATANG bisa dirubah sesui keinginan sobat.
    Nilai kecepatan semakin tinggi semakin lambat jalannya.
    Supaya kata yang berjalan tidak berhimpitan beri spasi pada sebelum atau sesudah kata SELAMAT DATANG.
  • Pratinjau dulu kemudian simpan
  • Lihat hasilnya.

Tuesday, December 22, 2009

CARA MEMBUAT SPOILER DI BLOG



Fungsi dari spoiler ini adalah untuk menampilkan (show) atau menyembunyikan (hide) image maupun text pada halaman posting atau bisa juga di letakkan pada sidebar. Untuk menghemat tempat biasanya para blogger menyiasati dengan menggunakan spoiler tersebut. Bagi sobat yang ingin membuat spoiler dan belum tahu caranya bisa ikuti cara ini:

Di bawah ini adalah kode yang bisa sobat gunakan untuk membuat spoiler:
<div id="spoiler"><div><input style="margin: 10px; padding: 0px; height:60px; font-size: 50px; font-weight:bold;" value="OPEN" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div') ['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')
['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')
['hide'].style.display= 'none'; this.innerText = ''; this.value = 'CLOSE'; } else {
this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display= ''; this.innerText = ''; this.value = 'OPEN'; }" type="button"/><div id="show" style="border: 5px; solid red; margin 5px; padding: 2px; display: none; width: 90%;">
Sobat bisa memasukkan text atau alamat gambar di sini.
<br>
<img src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png"a>
</div><div id="hide"></div></div></div>

Ganti yang berwarna merah dengan text atau alamat gambar sobat.
Di bawah ini adalah hasil dari kode-kode di atas.
Silahkan diklik untuk melihat hasilnya.



Thursday, December 17, 2009

MEMBUAT RECENT POST DI BLOGGER



Untuk sobat yang ingin membuat recent post di blogspot rasanya tidak perlu repot lagi,karena blogspot sendiri sudah menyediakan sarana ini untuk para blogger. Guna dari recent post ini adalah untuk menampil artikel terbaru,bahkan sobat bisa menampilkan 10 dari artikel terbaru.

Untuk sobat yang baru memulai bikin blog dan belum tahu bagaimana cara membuat recent post bisa ikuti cara di bawah ini:
  • Login ke blog sobat.
  • Pilh tata letak.
  • Tambahkan Gadget.
  • Jika pada pop up halaman pertama tidak muncul recent post,sobat klik pada link yang bertuliskan Gadget lainnya. Maka akan muncul beberapa gadget,pilih dan klik gadget yang betuliskan recent posts yang gambar iconnya seperti di bawah ini.
    Photobucket
    Setel Gadget.
  • Beri judul atau tetap dengan judul yang ada yaitu Recent posts.
  • Atur ketinggian,jika yang ingin ditampilkan kurang dari 10 mungkin bisa dikurangi.
  • Number of posts to display : ini jumlah recent post yang ingin sobat tampilkan,bisa 10 atau bisa kurang.
  • Display Posts data : jika ingin menampilkan tgl-bln-thn beri tanda centang.
  • Show a summary of your blog posts? : jika ingin sebagian isi artikel ditampilkan beri tanda centang.
  • Summary Length : ini jumlah huruf yang ingin sobat tampilkan,bisa ditambah bisa dikurangi.
  • kliksimpan.
  • Lihat hasilnya.

Wednesday, December 16, 2009

MEMASANG BUKU TAMU DENGAN SHOUTMIX


Untuk mempererat hubungan antara pengunjung dan pemilik blog alangkah indahnya jika si pengunjung bisa meninggalkan jejak untuk sekedar bersalam sapa. Untuk hal yang satu ini biasanya si pemilik blog memasang shoutbox atau buku tamu pada blog mereka. Saya ingin sedikit berbagi dengan sobat yang belum tahu bagaimana cara memasang buku tamu tersebut. Kali ini kita memasang buku tamu dengan menggunakan shoutmix.
    Caranya :
  • Masuk ke www.shoutmix.com.
  • Dari halaman ShoutMix klik create shoutbox.
  • Isi kotak yang tersedia:
    Shoutbox informationShoutbox ID : Nama ID sobat.>
    Choose passsword : Masukkan password.
    Retype password : Ulangi masukkan password yang sama.
    Contact information
    Name : Nama sobat.
    Email : Masukkan alamat email sobat.
  • Beri tanda ceckbox pada kotak kecil.

  • Klik Continue
    Tunggu sampai proses loading selesai,sobat akan di bawa ke halaman setting. Sesuaikan dengan keinginan sobat.
  • Untuk mengambil kodenya pada kolom Quick Start klik Get codes.
    Jika sudah terbuka halaman baru sobat bisa menyesuaikan ukurannya sesui dengan template sobat. Kemudian ambil kodenya,kopi dan paste. Bisa disimpan pada notepad terlebih dahulu.

    Untuk memasukkan kodenya.
  • Login ke blog sobat.
  • Pilih tata letak.
  • Tambahkan Gadget.
  • Pilih HTML/JAVAScript.
  • Masukkan kode yang sobat ambil tadi ke bagian konten.
  • Klik simpan.
  • Lihat hasilnya.

SMOGA BERHASIL

Saturday, December 12, 2009

PASANG GOOGLE TRANSLATE DI BLOG


Mungkin diantara sobat ada yang ingin pasang google translate di blog,siapa tahu ada pengunjung blog yang butuh penterjemah,sehingga kita tidak perlu lagi menyewa seorang guide. Sobat bisa pasang translate ini disebar.
Caranya:
  • Login dulu ke blog sobat
  • Pilih tata letak
  • Tambahkan gadget
  • Pilih HTML/JAVAScript
  • Masukkan kode di bawah ini pada bagian konten

    <div id="google_translate_elemen"></div><script>
    function googleTranslateElementInit() {
    new google.translate.TranslateElement({
    pageLanguage: 'id'
    }, 'google_translate_element');
    }
    </script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


  • Klik simpan

Friday, December 11, 2009

MEMBUAT MENU DROP DOWN


Untuk menghemat tempat pada halaman template terutama pada bagian sidebar, yang biasa digunakan untuk meletakkan berbagai link atau sejenisnya. Kadang kita perlu meringkas agar tidak memenuhi halaman pada sidebar.

Salah satu cara untuk meringkas tersebut kita bisa menggunakan sebuah menu,yang di sini kita bisa memanfaatkan menu Drop Down. Meskipun pembuatannya cukup sederhana namun bagi para blogger ini sangat bermanfaat.
  • Untuk membuatnya login dulu ke blog sobat.
  • Pilih tata letak.
  • Tambahkan Gadget
  • Pilih HTML/JAVAScrip
  • Masukkan kode di bawah ini pada bagian konten

    <select name="menu"oncange="window.open(this.option[this.selectedIndex].value;">
    <option value=0 selected>JUDUL MENU</option>
    <option value="http://URL/" >Judul artikel 1</option>
    <option value="http://URL/" >Judul artikel 2</option>
    <option value="http://URL/" >Judul artikel 3</option>
    </select>
  • Ganti yang warna merah dengan alamat link sobat.
  • Klik simpan

Lihat perubahan pada blog sobat,jika benar hasilnya akan terlihat seperti di bawah ini:

Sunday, December 6, 2009

CARA MEMBUAT LINK OTOMATIS


Fungsi dari link otomatis ini sebenarnya tidak berbeda dengan link-link yang pernah saya posting sebelumnya.
Kenapa kita sebut dengan link otomatis,karena tanpa kita klik link ini akan terbuka dengan sendirinya. Kita tinggal mengarahkan mouse di atas link tersebut,maka link akan membuka halaman baru.

Jika pada link sebelumnya kita membuatnya seperti ini <a href="http://alamat">keterangan</a> maka pada link otomatis ini kita tinggal menambahkan kode: "onmouseover="window.location=this.href".
Jika kita gabungkan maka hasilnya seperti di bawah ini:
<a href="http://alamat"onmouseover="window.location=this.href">keterangan</a>

Contoh link otomatis:
<a href="http://activekita.blogspot.com/2009/11/cara-membuat link.html"onmouseover="window.location=this.href">Cara membuat link</a>

Di bawah ini adalah hasil dari penulisan link di atas,jika ingin mengetahui hasilnya coba arahkan mouse di atas link tersebut di bawah ini:

Cara membuat link

Cara membuat link
Cara membuat link warna-warni
Membuat link dalam satu halaman
Cara membuat link otomatis
Membuat link untuk download

Sunday, November 29, 2009

MEMBUAT LINK UNTUK DOWNLOAD



Bagi sobat yang ingin berbagi file untuk dapat didownload oleh sobat yang lain bisa menggunakan beberapa layanan untuk upload file yang sobat punya. Diantaranya sobat bisa menggunakan jasa layanan dari www.SnapDrive.net. Bagaimana cara membuat link untuk download ini,langsung saja menuju ke www.snapdrive.net.
  • Klik register.
  • Jika sobat ingin yang gratis beri tanda pada Free.
Isi formulir,semua kolom wajib diisi. Masukkan email yang valid karena sobat akan diminta untuk mengaktifkan account.
  • Username : nama untuk login.
  • password : isikan password.
  • Confirm password : ulangi password.
  • First Name : nama pertama sobat.
  • Last name : nama ke dua sobat.
  • Country : nama negara.
  • Postcode : masukkan kode pos.
  • Gender : jenis kelamin.
  • Data of Birth : masukkan tgl bln thn lahir.
  • Comfirmation code : masukkan kode yang tertera.
  • Preference : pilih sesuai keingian.
  • klik Register.

Untuk konfirmasi buka email sobat.Jika sudah ada kiriman email klik link yang akan membawa sobat ke halaman semula.
  • Klik OK.
  • Login dengan username dan password sobat.
  • Pilih upload.
  • Klik browse.
  • Pilh file yang mau di upload dari komputer sobat.
  • Beri tanda pada Agree to terms of service.
  • Klik tombol upload file.
  • Tunggu sampai proses selesai.
  • Setelah sukses pada halaman congratulations,clicking here.
  • Pada file yang sudah terupload klik detail.
  • Kemudian klik HTML Code.
  • Copy dan paste kode yang ada,bisa di copy pada notepad dulu..
Misal sobat mendapatkan kode seperti ini:

<a href="http://www.snapdrive.net/files/621065/xxxnamafilexxx.zip">namafile.zip</a>

Letakkan kode tersebut ke blog di mana terserah yang sobat inginkan. Kata namefile.zip bisa kita ganti. Misal dengan kata download,maka hasilnya akan seperti ini:
<a href="http://www.snapdrive.net/files/621065/xxxnamafilexxx.zip">Download</a>
Pada postingan sobat akan muncul:
Download

SELAMAT MENCOBA

Cara membuat link
Cara membuat link warna-warni
Membuat link dalam satu halaman
Cara membuat link otomatis
Membuat link untuk download

Friday, November 27, 2009

MENGGANTI BACKGROUND TEMPLATE/BLOG

Jika ingin mengganti background template pada blog ada dua pilihan yang masing-masing caranya hampir sama. Sobat tinggal pilih mengganti dengan background warna atau dengan gambar/image. Jika ingin mengganti dengan warna sobat tinggal masukkan kode warna menurut selera sobat.

sedangkan untuk gambar sobat harus siapkan alamat gambar/image yang sudah terupload ke tempat hosting di mana sobat menyimpan gambar/image.Dengan ukuran gambar cukup kecil saja. Jika sobat belum jelas bagaimana cara memasukkan kode warna dan alamat gambar/image bisa ikuti cara di bawah ini:

Untuk mengganti background warna pada template klasik:
  • Masuk ke blog sobat.
  • Pilih tata letak.
  • Klik edit HTML.
  • Untuk antisipasi backup template dulu.
  • Cari kode css seperti di bawah ini:
    body { background:#fffff;

    margin:0;

    color:#333333;

    font:x-small Georgia Serif; font-size/* */:/**/small;

    font-size: /**/small;

    text-align: center;

    Ganti kode yang berwarna merah dengan kode warna yang sobat inginkan,misal dengan warna kuning kodenya seperti ini: #FFFF33.

    Maka hasilnya:

    body { background:#FFFF33;

    margin:0;

    color:#333333;

    font:x-small Georgia Serif; font-size/* */:/**/small;

    font-size: /**/small; text-align: center;

    Agar pengunjung tidak susah untuk membaca sesuaikan warna backround dengan warna tulisan sobat.

  • Jika sudah klik save.
  • Lihat hasilnya.

Untuk mengganti background gambar/image pada template klasik:
    Misal di sini saya punya alamat gambar:

    http://i761.photobucket.com/albums/xx252/darma_bucket/batik.jpg

    Dengan ukuran seperti ini:

    ccs

    Maka tambahkan alamat tersebut pada kode di atas,hingga hasilnya seperti di bawah ini:

    body { background:#ffffff url('http://i761.photobucket.com/albums/xx252/darma_bucket/batik.jpg');

    margin:0;

    color:#333333;

    font:x-small Georgia Serif;

    font-size/* */:/**/small; font-size: /**/small;

    text-align: center;


Untuk mengganti background pada template baru:
  • Masuk ke blog sobat.
  • Pilih tata letak.
  • Klik edit HTML.
  • Untuk antisipasi backup template dulu.
  • Beri tanda centang pada expand template widged.
  • Cari kode css seperti di bawah ini:
    body { background:$bgcolor;

    margin:0;

    font:x-small Georgia Serif;

    color:#333333;

    font-size/* */:/**/small;

    text-align: center;

    Tambahkan alamat gambar pada kode warna merah,hasilnya seperti di bawah ini:

    body { background:$bgcolorurl ('http://i761.photobucket.com/albums/xx252/darma_bucket/batik.jpg');

    margin:0;

    font:x-small Georgia Serif;

    color:#333333;

    font-size/* */:/**/small; font-size: /**/small;

    text-align: center;

  • Simpan template
  • Lihat hasilnya

Thursday, November 19, 2009

CARA MEMBUAT BLOGROLL



Blogroll ini bisa digunakan sebagai salah satu alternatif untuk menaruh link yang berjumlah banyak agar tidak terlalu nampak memanjang ke bawah. Sebenarnya di dalam blogroll ini bisa saja kita menaruh gambar. Tapi untuk saat ini mari kita coba dulu bagaimana cara memanfaatkan blogroll tersebut untuk menaruh beberapa link. Sobat tinggal memasukkan beberapa link yang biasanya berada di sidebar maupun footer,sehingga kita bisa sedikit menghemat tempat.

Sebenarnya cara ini sudah umum digunakan,tetapi tidak ada salahnya utnuk membantu para sobat yang baru belajar bikin blog untuk sama-sama belajar di sini.

Langkah pertama siapkan dulu link yang ingin sobat masukkan.
Di bawah ini yang berwarna hijau adalah contoh link yang sudah kita masukkan. Ganti link tersebut dengan alamat link milik sobat.
Biar lebih mudah sobat bisa mengedit menggunakan notepad. Jika sudah siap masuk ke blog sobat,klik tata letak tambahkan elemen halaman atau gadget kemudian pilih HTML/javascript. Setelah itu masukkan kode yang sudah siap ke gadget yang akan ditambahkan.

    <div style="overflow:auto;width:250px;height:450px; padding:10px; border:3px solid #336633; background:#ff9999;">

    <a href="http://activekita.blogspot.com/2009/07/cara-membuat-blog_16.html"><b>1. Cara membuat blog</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/07/cara-memperlebar-halaman- template.html"><b>2. Memperlebar halaman template</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2010/02/cara-membuat-read-more-di- blogger.html"><b>3. Cara membuat read more di blogger ( fitur baru )</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/07/membuat-gambar-foto- animasi.html"><b>4. Membuat gambar/foto animasi</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/08/membuat-text-berjalan-atau- marquee.html"><b>5. Membuat text berjalan atau marquee</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/08/menambah-dan-membagi-elemen- header.html"><b>6. Menambah dan membagi elemen header</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/08/membuat-read-more-versi- baru.html"><b>7. membuat read more versi baru</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/08/navbar-menghilang.html"><b>8. Navbar menghilang</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/09/cara-sembunyikan-navbar.html"><b>9. Cara sembunyikan navbar</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/09/membuat-gambar-melayang-dipojok.html"><b>10. Membuat gambar melayang dipojok</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/09/cara-membuat-link-warna-warni.html"><b>11. Cara membuat link warna-warni</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/09/membuat-link-dalam-satu-halaman -blog.html"><b>12. Membuat link dalam satu halaman</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/10/membuat-footer-multi-kolom- blogger.html"><b>13. Membuat footer multi kolom blogger</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/10/kurangi-blog-berat-loading-lambat.html"><b>14. Kurangi blog berat loading lambat</b></a>
    <br/>
    <br/>
    <a href="http://activekita.blogspot.com/2009/10/menambah-sidebar-di-kanan-kiri.html"><b>15. Menambah sidebar di kanan dan kiri</b></a>
    <br/>
    <br/>
    </div>
Di bawah ini adalah hasil dari link-link di atas yang telah kita masukkan.



Semoga bermanfaat.

Sunday, November 15, 2009

MEMBUAT TULISAN/TEXT LINK BERKEDIP

Untuk menarik perhatian bagi pengunjung blog banyak cara yang dilakukan oleh para pemiliknya. Mungkin salah satunya meletakkan tulisan berkedip atau link yang berkedip,dengan harapan pengunjung melirik tulisan atau link tersebut dan mengkliknya.

Jika sobat ingin membuat bisa melakukan dengan cara yang cukup sederhana. Sobat tinggal tinggal mengawali dengan kode <blink> dan tutup dengan kode </blink>

Misalnya:

  • Dengan menggunakan tulisan atau text:

    <blink> BERKEDIP-KEDIP AAHH...</blink>

    Maka hasilnya:

    BERKEDIP-KEDIP AAHH...

  • Dengan menggunakan link:

    <blink><a href="http://activekita.blogspot.com/2009/11/cara-membuat link.html"target="_blank">CARA MEMBUAT LINK</a></blink>

    Maka hasilnya:

    CARA MEMBUAT LINK

    SEMOGA BERMANFAAT

  • Sunday, November 8, 2009

    CARA MEMBUAT LINK



    Untuk mengarahkan pengunjung situs atau blog ke situs yang lain kita memerlukan sebuah tautan atau yang biasa di sebut dengan link.

    Cara membuat link ini rasanya tidak asing lagi bagi pemilik blog,bahkan menurut mereka untuk bisa membuat link tersebut hukumnya wajib.

    Dilihat dari fungsinya link ini ada beberapa macam. Cara membuat link pun berbeda beda,tapi pada dasarnya sama yaitu untuk mengarahkan situs atau halaman yang akan terbuka pada halaman yang kita inginkan.

    • Link terbuka pada window atau tab yang sama:
    • <a href="http://alamat">keterangan</a>

      Misal: <a href="http://activekita.blogspot.com">Klik di sini</a>

      Alamat dan keterangan bisa kita ganti sesui yang kita inginkan. Maka hasilnya: Klik disini

      Jika kita mengarahkan link ini ke situs lain maka blog kita akan tertimpa dengan situs tersebut. Tapi jika di arahkan ke blog kita maka akan terbuka halaman baru pada windows yang sama.

    • Link terbuka pada windows atau tab baru:
    • <a href="http://alamat"target="_blank">Keterangan</a>

      Kita tambahkan target="_blank" setelah alamat.

      Misal: <a href="http://activekita.blogspot.com"target="_blank">Klik di sini</a>

      Maka hasilnya: Klik di sini

      Jika kita mengarahkan link ini ke situs lain maka akan terbuka windows atau tab baru tanpa menimpa blog kita.

    • Link dengan menggunakan gambar atau image:
    • <a href="http://activekita.blogspot.com" target="_blank"><img src="http://i761.photobucket.com/albums/xx252/darma_bucket/garudajpn1-1.png"></a>

      Hasilnya:

    • Link dengan memunculkan judul:
    • <a href="http://activekita.blogspot.com"target="_blank" title="BELAJAR NGEBLOG YUK">Lihat di sini</a>

      Maka hasilnya: Lihat di sini.

      Jika kita mengarahkan mouse ke link akan muncul sebuah judul.


    SEMOGA BERMANFAAT

    Cara membuat link
    Cara membuat link warna-warni
    Membuat link dalam satu halaman
    Cara membuat link otomatis
    Membuat link untuk download

    Monday, November 2, 2009

    CARA DAFTAR BLOG ATAU WEB SITE KE GOOGLE



    S
    elainYahoo dan MNS untuk saat ini Google merupakan search angine yang paling banyak di gunakan. Kali ini kita akan membahas bagaimana cara mendaftarkan blog kita ke mesin pencari google tersebut. Ini salah satu upaya agar blog kita dikenali oleh google melalui kata kunci di search angine.

    Untuk sobat yang baru mengawali bikin blog mungkin cara ini perlu kita praktekkan. Yang perlu di ingat ini merupakan salah satu alternatif agar blog kita bisa cepat terindek oleh mesin pencari google. Karena masih banyak cara untuk lebih mengoptimalkan blog kita pada mesin pencari. Untuk hal yang satu itu bisa ditanyakan pada webmaster yang memang sudah pakarnya mengenai seo.

    Untuk memdaftarkan blog sobat ke google bisa ikuti langkah-langkah di bawah ini:

      2. Masukkan alama url sobat.
      3. Isi komentar sesuai tema blog.
      4. Masukkan kode.
      5. Klik tambahkan url.
    Jika berhasil akan muncul:
      Google Information for Webmasters
      Thank you
      Your site URL has been successfully added to our list of URLs to crawl. Please note that we do not add all submitted URLs to our index, and we cannot make any predictions or guarantees about when or if they will appear.
      6. Kemudian klik google webmaster tool.
      7.Setelah terbuka jendela baru masukkan alamat email beserta pasword.
      8. Selamat Datang di Alat Webmaster. Untuk memulai... Klik tambahkan situs.
      9. Masukkan alamat url.
      10. klik lanjutkan.
      11. Kasih cawang dan klik verifikasi situs ini.
      12. Salin meta tag di bawah, dan tempel di beranda situs. Meta tag harus berada pada bagian <head>, sebelum bagian <body> pertama.
      Contoh meta tag:
      <meta name="google-site-verification"content="IYxxxnQuzml2rnmmHjuv9m1VmrxxxxptiFfvWtPWzPo" />
      13.Cara meletakkannya:
      *Login ke blog sobat.
      *Pilih Tata letak.
      *Klik edit HTML.
      *Copy dan masukkan tag tersebut pada bagian <head> sebelum bagian <body>.
      14. Kemudian kembali ke Google webmaster tool.
      15.Kirim peta situs.
      16 Pada alamat url tambahkan atom.xml.
      Misal: http://activekita.blogspot.com/atom.xml
      17. Klik mengirim peta situs.
    Selesai.

    Tuesday, October 27, 2009

    CARA MEMBUAT TEXT AREA




    K
    enapa disebut dengan text area,jika kita artikan secara sederhana kurang lebih adalah tempat atau area untuk meletakkan text.Text area ini berbentuk box atau kotak.Mungkin ada yang bertanya kenapa harus meletakkan text ke dalam area tersebut.

    Jika sobat pernah menulis atau posting kode html tapi ketika sobat upload ternyata postingan tersebut tidak muncul sesuai dengan yang sobat inginkan. Nah..inilah fungsi dari text area tersebut,untuk memunculkan kode html yang memang tidak terbaca sewaktu kita upload. misal kode untuk tukar link atau apa saja yang menggunakan bahasa atau kode html agar mudah kita copy.

    Pada dasarnya kita bisa meletakkan text apa saja ke dalam area tersebut.Mungkin ini gambaran secara sederhana mengenai text area. Dan untuk membuatnya sobat bisa lihat cara-cara di bawah ini:


    Text atau link di atas jika kita tulis apa adanya tidak akan muncul dalam postingan,untuk memunculkannya harus kita letakkan ke dalam text area tersebut. Cara membuatnya kita harus menulisnya seperti di bawah ini:

    <p align="center"><textarea name="code" rows="2" cols="40"><a
    href="http://www.activekita.blogspot.com"target="_blank">BELAJAR NGEBLOK YUK</a></textarea></p></textarea></p>

    Contoh lain dari text area:

    <p align="center"><textarea name="code" rows="4" cols="50" style="background-color:green; color:blue;">TEXT AREA INI POSISI DI TENGAH DENGAN TINGGI "4" DAN MEMPUNYAI LEBAR "50" BACKGROUND BERWARNA HIJAU DENGAN TEXT BIRU</textarea></p>

    Di bawah ini adalah hasil dari kode di atas:


    SEMOGA BERMANFAAT

    Friday, October 23, 2009

    BEDA PPC DENGAN PTC

    Kenapa masih banyak yang pada bingung untuk membedakan antara PPC dengan PTC,padahal cuma beda P sama T saja. Mungkin karena perbedaannya yang satu ini kita jadi sering ke bolak-balik arti. Sebanarnya ini sedikit berbahu pengalaman pribadi..he..he..he..jadi malu mengingatnya.maluUntuk mengingatkan lebih baik kita posting aja.

    Nich..!! biar ingat!

    PPC (Pey Per Clik) atau dibayar per kliknya. Pengiklan untuk jenis ini membutuhkan jasa website atau blog untuk memasarkan produk mereka. Apakah mereka menyewa blog kita...? jawabnya tidak,karena mereka tidak akan membayar kita jika tidak ada yang klik iklan mereka. Lantas siapa yang membayar kita...? Tentunya mereka,tapi dengan syarat ada pengunjung yang klik atau membeli produk iklan di blog kita. Lalu siapa yang di untungkan...? Jika blog kita ramai pengunjung dan banyak yang klik iklan berarti sama-sama di untungkan. Kalau tidak ada yang klik berarti buntung. Lebih buntung lagi kalau iklan kita klik sendiri,sudah tidak dapat untung malah account kita kena tendang alias di non aktifkan.


    Lantas apa itu PTC (Pay To Clik)...? Kalau ini kita boleh klak-klik iklan sepuasnya,malahan dengan klik itu kita dibayar.Untuk ikut jenis ini tidak perlu punya website atau blog. Kita tinggal login ke situs penyedia layanan,klik semua iklan yang di sediakan. Biasanya agar valid untuk membuka halaman sampai selesai dibutuhkan waktu kurang lebih 30 detik. Semakin banyak iklan yang di klik semakin puas PTC menyiksa jari kita,dengan imbalannya pendapatan kitapun akan lebih juga.


    INGAT....INGAT....TINGG..!!

    Sunday, October 18, 2009

    CARA MENGGANTI FAVICON BLOGGER

    S
    eperti yang sering kita lihat,sudah banyak sobat blogger yang telah mengganti favicon pada blog mereka. Untuk saat ini tidak ada salahnya jika saya ingin sedikit berbagi sama sobat yang belum mengerti bagaimana cara mengganti icon tersebut. Icon ini letaknya berada di samping kiri pada alamat url milik sobat.

    Di bawah ini adalah gambar favicon yang sudah diganti dan yang belum diganti:




    Untuk membuatnya sobat harus siapkan dulu gambar iconnya,kemudian upload ke tempat hosting milik sobat dan ambil alamat url nya.Untuk upload file sobat bisa menggunakan layanan pada www.photobucket.com atauwww.geocities.com atau di mana saja,karena layanan ini banyak tersedia di internet.

    Contonya sebagai berikut:
    Misalnya kita punya alamat seperti ini:

    http://i761.photobucket.com/albums/xx252/darma/xxxxxxxxxx.gif

    Tambahkan sedikit kode hingga hasilnya seperti di bawah ini:

    <link href="http://i761.photobucket.com/albums/xx252/darma/xxxxxxxxxx.gif" rel="shortcut icon"/>
    Selanjutnya:
    • Login ke blog sobat.
    • Klik tata letak.
    • Edit HTML.
    • Cari kode </head>
      Letakkan alamat favicon yang sobat punya di atasnya,hingga hasilnya sebagai berikut:

      <link href="http://i761.photobucket.com/albums/xx252/darma/xxxxxxxxxx.gif" rel="shortcut icon"/>
      </head>


    • Klik simpan template.
    • Lihat hasilnya.

    Wednesday, October 14, 2009

    MENAMBAH SIDEBAR DI KANAN DAN KIRI



    S
    ebelum menambah kolom sidebar yang perlu kita perhatikan adalah pada bagian di bawah ini:

    Outer-wrapper=660px;

    Header-wrapper=660px;
    Footer-wrapper=660px;
    • Sekarang masuk ke blog sobat.
    • Klik tata letak.
    • Edit html.
    • Jangan beri centang pada Expand widged template.
    Cari kode seperti di bawah ini:

    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
    width: 660px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 410px;
    float:right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    #sidebar-wrapper {
    width: 220px;
    float: $startSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

    Outer-wrapper ini merupakan sebuah bingkai di mana main wrapper dan sidebar berada,termasuk header dan footer berada di dalamnya.

    Jika ingin menambah satu sidebar berarti kita harus menambah pula lebar dari bingkai tersebut.Misalnya kita ingin menambah satu sedebar dengan lebar yang sama dari sedebar sebelumnya,kita tinggal cloning dan menambahkan nilai sidebar tersebut pada Outer-wrapper= 660+220=880.

    Kemudiann kasih nama sidebar tersebut dengan nama yang berbeda.Agar lebih mudah membedakannya kita beri nama sidebarbaru-wrapper,hingga hasilnya sbb:

    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
    width: 880px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    }

    #main-wrapper {
    width: 410px;
    float:$endSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    #sidebar-wrapper {
    width: 220px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    padding:5px;

    #sidebarbaru-wrapper {
    width: 220px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    padding:5px

    Untuk warna merah adalah hasil cloning dari sedebar-wrapper yang kita beri nama sidebarbaru-wrapper,sedang warna biru tambahan sela agar font tidak terhimpit bingkai sidebar. warna orange dimana letak sidebar berada.

    Jangan lupa ganti juga nilai lebar dari:
    header-wrapper= 880px;
    footer-wrapper= 880px;

    Setelah mengganti kode-kode angka dan memberi nama sidebar tersebut,kemudian tarik ke bagian bawah pada kode template sobat. Temukan kode seperti di bawah ini:

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </div>

    Letakkan kode dibawah ini tepat atasnya:

    <div id='sidebarbaru-wrapper'>
    <b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
    </div>


    Hingga hasilnya sebagai berikut:

    <div id='sidebarbaru-wrapper'>
    <b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
    </div>


    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </div>

    • Klik pratinjau.
    • Jika di rasa sudah sesuai klik simpan template.

    Sunday, October 4, 2009

    KURANGI BLOG BERAT LOADING LAMBAT



    S
    ebenarnya apa maksud judul yang membingungkan ini....
    Banyak para blogger yang suka menghias blognya dengan bermacam pernak-pernik dan accesoris.
    Sebenarnya dengan accesoris dan pernak-pernik yang pas blog akan terlihat cantik dan menarik.Tetapi apa yang terjadi ketika blog kita buka,di situ akan terasa berat dan cukup lama waktu loadingnya,yang terkadang membuat kita sedikit jengkel. Apalagi yang kita buka blog milik orang lain,tahu sendiri...

    Dari judul di atas maksudnya adalah bagaimana cara mengurangi berat pada blog kita.

    Sebenarnya berat blog ini bisa juga terjadi karena penulisan kode css kita yang kurang pas,dalam artian bukan berarti salah.Untuk itu kita perlu mengeditnya.

    Jika kode css sudah terlanjur banyak dan malas untuk mengedit tidak perlu khawatir,karena ada jasa yang suka rela dan senang hati bersedia membantunya. Masuk saja ke alamat http://www.csscompressor atau ke http://www.cssdrive.com di sini kode css kita akan di compress yang nantinya dapat mengurangi beban blog kita.

    Caranya:
    • Kemudian masuk ke blog sobat.
    • Pilih tata letak.
    • Klik edit html.
    • Kasih tanda centang pada Expand widget.
    • Cari kode yang akan kita compress,letaknya antara </b:skin> dan ]]></b:skin>
    • Untuk jaga-jaga copy kode yang akan kita kompress kemudian simpan di notepad.
    • Paste juga pada tempat pengompressan pada alamat di atas.
    • Untuk compressor mode pilih normal.
    • Untuk comments handling pilih Don't strip any comments.
    • Klik compress it.
    • Ganti kode css sobat dengan kode yang sudah terkompres.
    • Klik pratinjau.
    • Jika sudah aman klik simpan.

    Dari hasil compress tersebut kita bisa pelajari cara penulisan kode css yang pas.

    Semoga bermanfaat.

    Saturday, October 3, 2009

    MEMBUAT FOOTER MULTI KOLOM BLOGGER



    D
    engan satu kolom footer rasanya masih kurang,ini yang sering dirasakan bagi mereka yang suka mempercantik blognya dengan berbagai pernak-pernik. Bagi saya sendiri footer ini sangat berguna yang saya anggap fungsinya hampir sama dengan sidebar.

    Yang sering saya lihat diberbagai blog mereka senang menggunakan footer dengan tiga kolom,sebenarnya ini tergantung selera masing-masing orang. Bagaimana cara membuatnya
    di sini akan kita bahas bersama.

    Biasanya beda template ukuranya berbeda-beda pula,agar ukuranya sesuai dengan template yang sobat miliki di sini ukuranya kita buat persen (%),sehingga kita tidak terlalu kebingungan mengganti ukuranya.
    Untuk membuatnya mari kita lihat langkah-langkah di bawah ini:

    • Login ke blog sobat.
    • Klik tata letak.
    • Pilih edit HTML.
    • Jangan kasih centang pada expand widget.
    • Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atasnya,hingga posisinya sebagai berikut:

      /* footer_wrapper
      ---------------------------- */
      #footer_wrapper{
      width: 100%;
      position: relative;
      float: left;
      background:#ff69b4;
      border: px solid #ff0000;
      padding:%;
      }

      #footer_wrapper1{
      float:left;
      width:30%;
      margin:1px;
      background:#7cfc00;
      padding:1%;
      }

      #footer_wrapper2{
      float:left;
      width:30%;
      margin-top:1%;
      margin-bottom:1%;
      background:#7cfc00;
      padding:1%;
      }

      #footer_wrapper3{
      float:left;
      width:30%;
      margin:1%;
      background:#7cfc00;
      padding:1%;
      }

      ]]></b:skin>
    • Kemudian tarik ke bawah pada bagian body temukan kode sebagai berikut:

      <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
      </div>
    • Jika sudah ketemu letakkan kode di bawah ini di atasnya hingga posisinya sebagai berikut :

      <div id='footer_wrapper'>
      <b:section class='footer' id='footer_wrapper1'/>
      <b:section class='footer' id='footer_wrapper2'/>
      <b:section class='footer' id='footer_wrapper3'/>
      </div>

      <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
      </div>

    • Dan lihat hasilnya pada tata letak,untuk mencoba tambahkan gadget.

      Catatan: Kode yang berwana merah adalah kode yang asli sedang yang hitam adalah kode yang ditambahkan.
    Sebenarnya cara membuat multi kolom pada footer hampir sama dengan menambah atau membagi kolom header,jika sobat ingin tahu bisa lihat di sini.

    Semoga bermanfaat.

    Wednesday, September 30, 2009

    MEMBUAT LINK DALAM SATU HALAMAN BLOG




    S
    ebuah link biasanya di gunakan untuk mengarahkan alamat ke halaman lain atau ke postingan lain. Bagaimana jika kita ingin link tersebut mengarah pada satu halaman atau satu postingan,disini kita akan coba membahasnya.

    Link dalam satu halaman ini biasanya disebut dengan anchor link. Kita bisa mengarahkan link tersebut ke atas,ke tengah atau ke bawah. Biasanya digunakan untuk postingan yang panjang dengan sub-sub halaman atau menggunakan beberapa bab.

    Sesuai dengan namanya (Anchor link) untuk membuat link ini kita butuh yang namanya anchor name dan juga link name. Untuk lebih jelasnya mari kita sama-sama mencoba.

    • Pertama kita buat dulu anchor name:

      <A NAME="BAB 1"> BAB 1 </A>

    Pada anchor name inilah nantinya link kita akan mengarah,tepatnya satu baris di bawah tempat kita meletakkannya. Sebagai contoh anchor name ini akan saya letakkan tepat dibawah judul postingan ini.

    Sebagai catatan untuk tulisan BAB 1 yang berwarna merah boleh diganti dengan tulisan apa saja,sedang BAB 1 yang berwarna biru boleh dihilangkan.

    • Kedua yang harus kita buat adalah link name:

      <a href="#BAB 1"> kembali ke atas</a>

    Link name ini kita gunakan untuk mengarahkan di mana anchor name tadi diletakkan,dan sebagai contoh link name ini akan saya letakkan di bawah postingan.

    Catatan lagiii...: Untuk tulisan BAB 1 pada link name harus sama dengan anchor name.Untuk tulisan kembali ke atas boleh dirubah dengan kata apa saja,asal bukan kata-kata yang jorok sengihnampakgigi.
    Misal: Kembali ke atas, ketengah atau bawah karena fungsinya untuk keterangan saja. Untuk melihat hasilnya silahkan klik Kembali ke atas.
    kembali ke atas

    Cara membuat link
    Cara membuat link warna-warni
    Membuat link dalam satu halaman
    Cara membuat link otomatis
    Membuat link untuk download

    Sunday, September 13, 2009

    CARA MEMBUAT LINK WARNA-WARNI


    Dalam membuat blog kita pasti ingin kelihatan menarik dan penuh warna. Bagaimana jika link kita nampak warna-warni ketika mouse di arahkan ke link tersebut, hhmmm...tentu nampak menarik.Terus bagaimana membuatnya..?
    • Login keblog sobat
    • Pilih tata letak
    • Edit HTML
    • Cari kode </body>
    • Letakkan kode ini diatasnya:
      <script src='http://sites.google.com/site/darmasites/my-forms/rainbow.js'/>
    • Simpan
    • Lihat hasilnya


    Cara membuat link
    Cara membuat link warna-warni
    Membuat link dalam satu halaman
    Cara membuat link otomatis
    Membuat link untuk download

    Saturday, September 12, 2009

    MEMBUAT GAMBAR MELAYANG DIPOJOK



    M
    ungkin para sobat pernah atau bahkan sering melihat gambar dipojok halaman blog yang terlihat seperti melayang meskipun scroll bar diarahkan kemanapun. Gambar ini akan tetap diposisi dimana tempatnya berada. Gambar yang sobat lihat tersebut biasa disebut dengan gambar melayang atau float image.Jika blog sobat ingin dihiasi gambar seperti tersebut dan belum tahu caranya bisa ikuti langkah-langkah dibawah ini:

    1. Login ke blog sobat

    2. Pilih tata letak

    3. Klik edit HTML

    4. Cari kode ]]></b:skin>

    5. Letakkan kode di bawah ini diatasnya,hingga posisinya sebagai berikut:

    #gambar {
    position:fixed;_position:absolute;bottom:0px; left:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression (document.documentElement.scrollLeft+ document.documentElement.clientWidth -
    offsetWidth);
    }

    ]]></b:skin>

    Perhatikan gambar yang dicetak tebal: bottom bisa sobat ganti dengan top sedang left bisa sobat ganti dengan right.

    bottom= bawah
    top = atas
    left = kiri
    right = kanan

    6.Kemudian cari kode </body>

    7. Letakkan kode dibawah ini diatasnya:

    <div id="gambar">
    <a href="http://activekita.blogspot.com">
    <img border="0" src="http://i761.photobucket.com/albums/xx252/darma_bucket/th_garudajpn.png"/></a>
    </div>

    Tulisan warna merah ganti dengan alamat blog sobat. Warna biru ganti dengan alamat gambar sobat,bisa berupa gambar apa saja. Untuk mencoba sobat boleh memakai alamat gambar diatas.

    8. klik simpan

    9. Lihat hasilnya

    10. selesai

    Wednesday, September 9, 2009

    Al Quran Online - Quran Audio - Terjemahan Bahasa Indonesia







    بِسۡÙ…ِ ٱللهِ ٱلرَّØ­ۡÙ…َÙ€ٰÙ†ِ ٱلرَّØ­ِيمِ

    "Dengan Nama Alloh yang maha pengasih, lagi maha penyayang"



    Belajar Mengaji Al Quran Online / Membaca Al-Qur'an Audio Online dengan Terjemahan Bahasa Indonesia dan Recitations










    Saya upload posting Al Quran Online - Quran Audio - Terjemahan Bahasa Indonesia ini untuk para Blogger Indonesia Muslim yang ingin belajar mengaji Al quran dengan

    Sunday, September 6, 2009

    CARA SEMBUNYIKAN NAVBAR



    P
    ada postingan yang lalu saya pernah membahas tentang bagaimana cara menghilangkan navbar dengan segala resikonya,lihat di sini. Untuk postingan kali ini ada alternatif lain bagaimana agar navbar tersebut tidak menghilang sama sekali,tapi cukup dengan menyembunyikannya.

    Maksud dari menyembunyikan adalah jika nanti pointer mouse kita arahkan keatas dimana letak posisi dari navbar,maka navbar tersebut akan muncul kembali. Jika sobat tertarik dengan cara ini,silahkan ikuti langkah-langkah di bawah ini:
    • Login ke blog sobat
    • Pilih tata letak
    • Klik Edit HTML.
    • Cari kode ]]></b:skin>
    • Letakkan kode dibawah ini diatasnya.

      #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
      #navbar-iframe:hover {opacity:1.0;filter:alpha(Opacity=100,FinishedOpasity=100)}
    • Hingga hasilnya sebagai berikut:

      #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
      #navbar-iframe:hover {opacity:1.0;filter:alpha(Opacity=100,FinishedOpasity=100)}

      ]]></b:skin>
    • Simpan.
    • Lihat hasilnya.
    • Selesai.

    Thursday, September 3, 2009

    RAHASIA KEKUATAN UNTA

    "Maka apakah mereka tidak memperhatikan unta bagaimana dia di ciptakan?..."

    Tidak diragukan lagi bahwa semua kekuatan makhluk,dengan kemampuan mereka,menunjukkan kekuatan dan pengetahuan tak terbatas dari Pencipta mereka.Allah mengungkapkan hal ini dalam berbagai ayat Al Qur'an,mengisyaratkan bahwa segala sesuatu yang Dia ciptakan sebenarnya adalah sebuah tanda,yaitu lambang dan peringatan.

    Dalam surat Al Ghasiyaah ayat ke-17,Allah merujuk kepada hewan yang akan kita pelajari dan pikirkan dengan seksama,yaitu unta.

    Pada bagian ini,kita melihat makhluk hidup yang ditunjukkan Allah dalam ungkapan Al Qur'an, "Tidakkah mereka memperhatikan unta; bagaimana mereka diciptakan?"

    Yang menjadi unta"makhluk hidup istimewa" adalah struktur tubuhnya,yang tidak terpengaruh oleh kondisi alam yang keras sekalipun.Tubuhnya memiliki beberapa keistimewaan,yang memungkinkan unta bertahan hidup berhari-hari tanpa air dan makanan,dan mampu mengangkut beban ratusan kilogram selama berhari-hari.

    Ciri-ciri unta ini membuktikan bahwa hewan ini diciptakan khusus untuk kondisi iklim kering,dan bahwa ia disediakan untuk melayani manusia. Ini adalah tanda-tanda ciptaan yang nyata bagi orang-orang yang berakal.

    "Sesungguhnya pada pertukaran malam dan siang itu dan pada yang diciptakan Allah di langit dan di bumi,benar-benar terdapat tanda-tanda (kekuasaan-Nya) bagi orang-orang yang bertakwa,"(QS.Yunus,10:6)!

    DAYA TAHAN YANG LUAR BIASA DARI LAPAR DAN HAUS




    Unta dapat bertahan hidup tanpa makanan dan air selama delapan hari pada suhu 50c. Pada masa ini ,ia kehilangan 22% dari keseluruhan berat badannya. Sementara manusia akan sekarat jika kehilangan air setara dengan 12% berat badan,seekor unta kurus dapat bertahan hidup kendatipun kehilangan air setara dengan 40% keseluruhan berat badan. Penyebab lain kemampuannya bertahan terhadap haus adalah adanya mekanisme yang memungkinkan unta meningkatkan suhu tubuh dalamnya hingga 41c.

    Dengan demikian, ia mampu meminimalkan kehilangan air dalam iklim panas yang ekstrem di gurun pasir pada siang hari. Unta juga mampu mengurangi suhu tubuh dalamnya hingga 30c pada malam dingin di padang pasir.

    Unta mampu mengkonsumsi air hingga 30 liter, yaitu sekitar sepertiga dari berat badannya,dalam waktu kurang dari 10 menit. Disamping itu,unta memiliki struktur selaput lendir dalam hidungnya yang seratus kali lebih besar dari yang ada pada manusia. Dengan selaput lendirnya yang besar dan melengkung,unta mampu menyerap 66% kelembapan yang ada di udara. (*)

    Friday, August 28, 2009

    MENGHILANGKAN NAVBAR



    M
    enghilangkan navbar merupakan salah satu keinginan banyak para blogger. Mungkin para blogger ingin blognya terlihat seperti yang lain tanpa ada navbar diatasnya.Hal ini bisa saja dilakukan tapi ada yang perlu di perhatikan.

    Sebenarnya google menyediakan nasbar ini gunanya untuk mempermudah login ke blogger atau sebagai jalan untuk melihat blog lain.Bisa juga untuk menandai blog yang melanggar TOS seperti mengandung SARA atau pornografi untuk dilaporkan ke pihak blogger.

    Sebelum menghilangkan pikirkan terlebih dahulu,sebab resiko yang di tanggung cukup berat juga yaitu akan di tutupnya account kita di blogger. Sayangkan...?! Walaupun sekarang ada isu yang berkembang bahwa pihak blogger memperbolehkan tanpa resiko apapun. Keputusan ada ditangan sobat. Jika menurut sobat navbar itu tidak mengganggu dan menguntungkan biarkan saja nampak di atas.Tapi jika sobat masih ingin menghilangkan mungkin ini cara yang bisa sobat gunakan,tapi resiko ditanggung sendiri ya...!
    fikir
    • Login ke blog sobat
    • Klik tata letak (Layout)
    • Klik edit HTML
    • Carikode ]]></b:skin>
    • Letakkan kode berikut diatasnya #navbar{display:none }
    • Hingga hasil kodenya sebagai berikut:
      #navbar{display:none
      }
      ]]></b:skin>
    • Klik simpan template
    • Lihat hasilnya
    • selesai
    Jika mau memunculkan lagi tinggal hapus kodenya. menarimenari

    Saturday, August 22, 2009

    MEMBUAT READ MORE VERSI BARU

    J
    enis read more ini kita beri judul read more versi baru karena telah ada versi read more sebelumnya. Jika ingin tahu versi sebelumnya coba sobat lihat disini.

    Meskipun jenis read more versi ini agak berbeda dengan versi sebelumnya,akan tetapi kegunaannya sama.
    Kalau Versi sebelumnya kita harus menunggu beberapa saat untuk membuka,tapi dengan read more versi baru ini sobat tinggal klik tidak begitu lama lanjutan halaman postingan akan terbuka. Sobat tinggal pilih yang mana tergantung selera.

    Untuk membuat read more ini kita harus menambahkan beberapa kode pada kode template yang sobat miliki.

    Kode apa saja yang harus ditambahkan lihat langkah-langkah dibawah ini:

    1.Login di blogger dengan id sobat.
    2.Pilih tata letak.
    3.Klik edit HTML.
    4.Download template lengkap terlebih dahulu.
    5.Beri tanda centang pada Expand template widget.
    6.Cari kode <head/> kemudian letakkan kode di bawah ini tepat diatasnya.Hingga
    hasil kodenya seperti ini:


    <script type='text/javascript' src='http://sites.google.com/site/darmasites/javascript/Readmore.js'/>


    <head/>

    Untuk diketahui bahwa kode yang berwarna merah adalah kode tambahan,sedang yang hitam adalah kode asli.

    7.Cari kode <div class=post-body' atau <p><data:post.body/></p>

    Tambahkan kode dibawah ini hingga hasilnya seperti berikut:

    <div class='post-body' expr:id='"post"+data:post.id'>
    <b:if cond='data:blog.pageType == "item"'>
    <p><data:post.body/></p>
    <b:else/>
    <style>#fullpost {display:none;} </style>
    <p><data:post.body/></p>
    <span id='showlink'>
    <p><a expr:onclik='"javascript:showFull(\"post-" + data:post.id + "\");"'
    href='javascript:void(0);'>[+/-] selengkapnya...</a></p>
    </span>
    <span id='hidelink' style='display:none'>
    <p><a expr:onclik='"javascript:hideFull(\"post-" + data:post.id + "\");"'
    href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>
    </span>
    <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")
    </script>
    </b:if>
    <div style='clear: both;'/> <!--clear for photos floats-->
    </div>
    </div>

    ....rest of template code ....

    8.Klik simpan.
    9.Setelah tersimpan klik pengaturan.
    10.pilih menu format.
    11.Masukkan kode dibawah ini pada kotak kosong yang bertuliskan Template posting.

    <span id="fullpost">

    </span>

    12.Klik tombol simpan setting.
    13.Selesai.

    Cara posting pastikan pada Edit HTML jangan pilih Compose,maka akan nampak kode dibawah:

    <span id="fullpost">



    </span>

    Cara meletakkan artikel:

    Disini tempat meletak artikel yang akan ditampilkan pada awal posting

    <span id="fullpost">

    Disini tempat meletakkan artikel kelanjutannya atau seluruhnya

    </span>


    Jika ingin tanpa read more tinggal hapus kodenya saja.

    Moga berhasil !

    Friday, August 14, 2009

    MENAMBAH DAN MEMBAGI ELEMEN HEADER MENJADI BEBERAPA KOLOM

    Di sini saya ingin berbagi untuk sobat yang ingin membagi elemen header menjadi beberapa kolom. Sobat bisa menaruh daftar isi,iklan,link atau apa saja yang sobat suka. Jika satu kolom header yang tersedia dirasa masih kurang cukup untuk menambahnya sobat bisa ikuti beberapa langkah dibawah ini:

    Disini kita akan coba menambah 4 kolom dibawah header yang nanti hasilnya akan terdapat 1 kolom penuh(100%) dan 4 kolom dari hasil pembagian (25% x 4). Selanjutnya kita masih bisa menambahkan lagi menjadi beberapa kolom.

    Langkah-langkahnya:

    1. Login ke blog sobat pilih tata letak kemudian klik edit html.
    2. Jangan kasih tanda centang pada expand template widget.
    3. Cari kode ]]></b:skin> dan letahkan kode dibawah ini diatasnya.

    Hingga hasilnya seperti kode dibawah ini:

    #under_header{
    float:left;
    width:100%;
    }
    #under_header1{
    float:left;
    width:25%;
    }
    #under_header2{
    float:left;
    width:25%;
    }
    #under_header3{
    float:left;
    width:25%;
    }
    #under_header4{
    float:right;
    width:25%;
    }
    ]]></b:skin>
    4. Kemudian cari kode:

    <div id='header-wrapper'>
    <b:section class='header'id='header'maxwidget="1'showaddelement="no">
    &ltb:widget id='header1'locked='true'title='nama blog sobat(header)'
    type='header'/>
    </b:section>
    </div>

    5. Jika sudah ketemu letakkan kode dibawah ini tepat dibawahnya hingga hasilnya sbb:

    <div id='header-wrapper'>
    <b:section class='header'id='header'maxwidget="1'showaddelement="no">
    <b:widget id='header1'locked='true'title='nama blog sobat(header)'
    type='header'/>
    </b:section>
    </div>


    <div id='under_header'>
    <b:section class='header' id='underheader' preferred='yes'/>
    </div>

    <div id='under_header1'>
    <b:section class='header' id='underheader1' preferred='yes'/>
    </div>

    <div id='under_header2'>
    <b:section class='header' id='underheader2' preferred='yes'/>
    </div>

    <div id='under_header3'>
    <b:section class='header' id='underheader3' preferred='yes'/>
    </div>

    <div id='under_header4'>
    <b:section class='header' id='underheader4' preferred='yes'/>
    </div>

    6. SIMPAN TEMPLATE kemudian klik tata letak. Jika yang nampak seperti pada gambar dibawah ini berarti kerja sobat sudah betul.



















    Jika sobat ingin menambahkan lagi kolom yang sejajar dengan elemen tadi,sobat tinggal menambah(sisipkan)kode pada poin 3 dan 5.

    Yang perlu sobat perhatikan pada poin 3 pada kode terkhir harus pada posisi right:

    #under_header5{
    float:right;
    width:25%;
    }

    Tapi jika sobat ingin menambahkan beberapa kolom dibawahnya sobat perlu menambah kode dibawahnya lagi.

    Ini adalah penambahan beberapa kolom dibawahnya:

    #under_header1{
    float:left;
    width:25%;
    }
    #under_header2{
    float:left;
    width:25%;
    }
    #under_header3{
    float:left;
    width:25%;
    }
    #under_header4{
    float:right;
    width:25%;
    }
    #under_header5{
    float:left;
    width:33.33%;
    }
    #under_header6{
    float:left;
    width:33.33%;
    }
    #under_header7{
    float:right;
    width:33.33%;
    }
    #under_header8{
    float:left;
    width:50%;
    }
    #under_header9{
    float:right;
    width:50%;
    }
    #under_header10{
    float:left;
    width:100%;
    }

    Tambahkan juga kode pada poin 4 #under_header{ dengan menambah urutan angka-angka kodenya


    <div id='under_header'>
    <b:section class='header' id='underheader' preferred='yes'/>
    </div>

    <div id='under_header1'>
    <b:section class='header' id='underheader1' preferred='yes'/>
    </div>

    <div id='under_header2'>
    <b:section class='header' id='underheader2' preferred='yes'/>
    </div>

    <div id='under_header3'>
    <b:section class='header' id='underheader3' preferred='yes'/>
    </div>

    <div id='under_header4'>
    <b:section class='header' id='underheader4' preferred='yes'/>
    </div>

    <div id='under_header5'>
    <b:section class='header' id='underheader5' preferred='yes'/>
    </div>

    <div id='under_header6'>
    <b:section class='header' id='underheader6' preferred='yes'/>
    </div>

    <div id='under_header7'>
    <b:section class='header' id='underheader7' preferred='yes'/>
    </div>

    <div id='under_header8'>
    <b:section class='header' id='underheader8' preferred='yes'/>
    </div>

    <div id='under_header9'>
    <b:section class='header' id='underheader9' preferred='yes'/>
    </div>

    <div id='under_header10'>
    <b:section class='header' id='underheader10' preferred='yes'/>
    </div>

    Gambar dari Hasil penempatan kode-kode diatas:






    Friday, August 7, 2009

    MEMBUAT TEXT BERJALAN ATAU MARQUEE



    M
    ungkin ada sobat yang berminat memasang text berjalan atau marquee pada blognya. Saya ingin berbagi sama sobat yg belum tahu saja.Bagi yang sudah tahu silahkan bernostalgia. Text berjalan ini dalam bahasa HTML biasa disebut dengan marquee atau bahasa jawanya Markun. He..he..! "maaf pak markun bercanda." Bahasa apaan tu..? yang jelas Ingrislah.

    Tag yang kita gunakan adalah:

    <marquee>text yang kita inginkan</marquee>

    text yang kita inginkan

    Ini standart marquee agar berjalan dari kanan ke kiri.Kemudian kita bisa mengembangkannya dengan menambah beberapa astribut:

    BGCOLOR=warna
    DIRECTION=Mengatur arah gerakan (left,right,up.down)
    BEHAVIOR=karakter gerakan (scrol,slide,alternate)
    scrol(teks bergerak berputar)
    slide(teks bergerak sekali lalu berhenti)
    alternate(teks bergerak dari kiri ke kanan lalu balik)
    TETLE=pesan muncul saat mouse berada di atas teks
    SCROLLAMOUNT=mengatur kecepatan gerakan
    SCROLLDELAY=mengatur tenggang waktu
    LOOP=mengatur jumlah

    Sekarang langsung saja kita pratekkan:

    Dari arah kiri ke kanan

    <marquee direction="right" >dari kiri ke kanan</marquee>

    dari kiri kekanan

    Arah bolak-balik

    <marquee behavior="alternate" >arah bolak balik</marquee>

    arah bolak-balik

    Dari kanan ke kiri dengan kecepatan "15"

    <marquee direction="right" scrollamount="15" >dari kanan ke kiri dengan kecepatan 15</marquee>

    dari kanan kekiri

    Arahkan mouse text berhenti

    <marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">arahkan mouse teks berhenti</marquee>

    arahkan mouse text berhenti

    Jika ingin turun atau naik tinggal ganti direction="down" atau "up"

    <marquee direction="down" width="100%" height="100">dari atas ke bawah</marquee>

    dari atas ke bawah

    Dengan latar belakang warna

    <marquee width="50%" bgcolor="orange">dari kanan ke kiri</marquee>


    dari kanan ke kiri


    <div align="left"> <span style="font- family:georgia;"<>marquee scrollamount="3" behavior="alternate" width="70%" bgcolor="red">dengan warna</marquee></span></div>


    dengan warna


    Dengan gambar atau foto

    <marquee scrollamount="3" scrolldelay="10" width="50%" height="10%"><img src="http://picasion.com/pic12/001e4f5663e28f41208c938e9c7da3cf.gif" /></div></marquee>





    Silahkan dicoba

    Monday, July 20, 2009

    MEMBUAT GAMBAR / FOTO ANIMASI



    create avatarMungkin ada beberapa sobat yang ingin menambah gambar atau foto animasi ke blog mereka. Sebenarnya untuk menambahkan gambar atau foto bergerak ke blog tidak begitu sulit. Karena ada beberapa layanan yang menyediakan jasa seperti ini, misalnya :

    www.slide.com
    www.flickr.com
    www.picasion.com

    Disini saya akan mencoba menggunakan layanan www.picasion.com. Dimana pada layanan online ini sobat tidak perlu login. Tinggal memasukan beberapa gambar atau foto sobat yang nantinya akan bergerak sesuai urutan yang sobat inginkan.
    Mari langsung saja kita mulai:
    • Masukkan alamat www.picasion.com ke browser sobat.
      Masukkan gambar atau foto sobatdari mulai urutan 1(pertama).

    • Kemudian sobat bisa menentukan ukuran juga kecepatannya (tenggang).
    • Setelah itu klik create animation,gambar atau foto sobat sudah langsung terupload.
    • Kemudian copy paste alamat url dan code html nya ke notepad.
    • Setelah itu save this animation.



    Sekarang sobat tinggal upload gambar tersebut ke blog sobat:
    • Masuk ke blog sobat dan pilih layout(tata letak).
    • Klik tambah gadget.
    • Kemudian pilih gambar yang bertuliskan HTML/Java Script.
    • Masukkan code HTML saja yang telah sobat copy paste tadi ke halaman conten.
    • Sebelumnya sobat bisa merubah ukuran juga title nya.
    • Jika sudah tinggal save.
    • Letakkan gambar tersebut ke tempat yang sobat suka .
    • Kemudian save.
    • Lihat blog sobat.
    Silahkan mencoba..!

    Friday, July 3, 2009

    CARA MEMBUAT READ MORE





    W
    aktu kita melakukan beberapa postingan di halaman muka,jika kita tampilkan semua maka postingan akan terlihat memenuhi halaman. Tentu kita ingin terlihat ringkas serta proses membuka halaman tidak terlalu lama. Bagaimana meringkas halaman rersebut? Salah satu caranya dengan menggunakan read more. Mungkin sobat sudah banyak yang tahu mengenai cara penggunaannya.
    Untuk para sobat yang belum tahu bisa ikuti langkah-langkah berikut di bawah ini :

    Masuk ke blog sobat
    Pilih tata letak (layout) kemudian klik edit html
    Untuk antisipasi download template lengkap terlebih dahulu atau copy dan paste code template ke notepad kemudian save.Ini jika terjadi kesalahan sobat bisa mengembalikan lagi code tersebut.
    Beri tanda centang pada "expand template widged"

    Cari code dibawah ini:

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

    Jika sudah ketemu hapus dan ganti dengan code seperti dibawah 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>


    Kemudian klik menu simpan template

    Selanjutnya
    Klik pengaturan
    Klik format
    Lihat area text yang kosong,isi dengan text dibawah ini:


    <span class="fullpost">

    </span>


    Klik Simpan pengaturan


    Cara posting artikelnya: pastikan pada posisi menu edit HTML. Pada posisi ini akan nampak kode:

    <span class="fullpost">

    </span>


    Masukkan artikel awal sebelum kode <span class="fullpost">
    dan artikel sisanya sesudah <span class="fullpost">
    dan sebelum kode </span>


    misal:

    Postingan yang diringkas <span class="fullpost">
    postingan selengkapnya </span>


    Selamat mencoba..!!!