Cara Membuat Textarea

Textarea diperlukan dalam pembuatan blog atau website saat membuat text atau tulisan di dalam box. Hasil penulisan text di dalam Textarea tersebut akan ditulis tanpa merubah ukuran dari texarea itu sendiri (sebelumnya char width (cols) dan rows didefinisikan terlebih dahulu). Apabila text yang ditulis melebihi kapasitas ukuran textarea, maka textarea tersebut akan otomatis membuat scrollbar di sebelah kanan.



Dalam text area, penulisan kode HTML, CSS, atau script lain dapat ditulis tanpa perlu menggunakan entitas HTML atau dengan kata lain seluruh text, kode, dan script yang ditulis pada textarea akan tampil apa adanya setelah diposting.




Para blogger biasanya menggunakan textarea sebagai tempat untuk menyimpan kode HTML, CSS, atau script yang lain misalnya url download, script tukar link, script banner exchange, dan lain-lain. Berikut ini akan saya jelaskan cara membuat textarea pada blog jika suatu saat dibutuhkan untuk menempatkan atau menyimpan kode HTML. Cols berfungsi untuk mendefinisikan jumlah karakter ke samping yang akan ditampilkan pada textarea, Rows berfungsi untuk mendefinisikan jumlah baris pada textarea.



Contoh 1 : Penulisan text di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 :




Penulisan kode HTML :

<textarea cols="30" rows="4">Tulisan ini ada di dalam textarea </textarea>

Tampilan setelah diposting :

Tulisan ini ada di dalam textarea




Contoh 2 : Penulisan text di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 tetapi tulisan melebihi kapasitas textarea:



Penulisan kode HTML :

<textarea cols="30" rows="4">Tulisan ini ada di dalam textarea dengan ukuran char width 30 dan jumlah baris 4, perhatikan penulisan ini akan melebihi batas textarea sehingga secara otomatis akan tampil scrollbar di sebelah kanan. Untuk membaca sisa text yang tidak terlihat bisa dengan menggeser scrollbar tersebut.</textarea>

Tampilan setelah diposting :

Tulisan ini ada di dalam textarea dengan ukuran char width 30 dan jumlah baris 4, perhatikan penulisan ini akan melebihi batas textarea sehingga secara otomatis akan tampil scrollbar di sebelah kanan. Untuk membaca sisa text yang tidak terlihat bisa dengan menggeser scrollbar tersebut.





Contoh 3 : Penulisan text di dalam textarea dengan ukuran char
width 30 dan jumlah baris 4 dengan status readonly sehingga text yag berada di dalam textarea tidak bisa diedit setelah diposting.




Penulisan kode HTML :

<textarea cols="30" rows="4" readonly="readonly">Contoh penulisan text di dalam text area dengan status readonly, sehingga tulisan tidak bisa di-edit yg hasilnya seperti ini bla bla bla bla bla bla bla. bla.</textarea>

Tampilan setelah diposting :

Contoh penulisan text di dalam text area dengan status readonly, sehingga tulisan tidak bisa di-edit yg hasilnya seperti ini bla bla bla bla bla bla bla. bla.






Contoh 4 : Penulisan kode html di dalam textarea dengan ukuran char width 30 dan jumlah baris 4 dengan status text readonly untuk mencegah pengeditan setelah diposting:



Penulisan kode HTML :

<textarea cols="30" rows="4" readonly="readonly"> <a target="_blank" href="http://blogbelajarblogger.blogspot.com/"> <img border="0" alt="BELAJAR BLOGGER" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx_yN7_TAefol1_g9YfRK6qLLYNz1xyhvNNcxPe5x3F2Prn90PRhIWEglnaS23iuzqe4WhZG22oa0gACJDQPKEtA7CxuMth1SUzcKosHsgF4-zyD9y-uZJTchQOvUXEgg91d07zPTSqSyi/s1600/BELAJARBLOGGERWITH_ARDI.png" title="BELAJAR BLOGGER"/>< /a> </textarea>

Tampilan setelah diposting :

<a target="_blank" href="http://blogbelajarblogger.blogspot.com/"><img border="0" alt="BELAJAR BLOGGER" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx_yN7_TAefol1_g9YfRK6qLLYNz1xyhvNNcxPe5x3F2Prn90PRhIWEglnaS23iuzqe4WhZG22oa0gACJDQPKEtA7CxuMth1SUzcKosHsgF4-zyD9y-uZJTchQOvUXEgg91d07zPTSqSyi/s1600/BELAJARBLOGGERWITH_ARDI.png" title="BELAJAR BLOGGER"/></a>





Kode HTML pada contoh 4, jika tidak menggunakan textarea dapat juga ditulis dengan menggunakan entitas HTML seperti di bawah:



Penulisan kode HTML :

<p>&lt;a target=&quot;_blank&quot; href=&quot; http://blogbelajarblogger.blogspot.com/&quot;&gt; &lt;img border=&quot;0&quot; alt=&quot; Link Sukses&quot; src=&quot; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx_yN7_TAefol1_g9YfRK6qLLYNz1xyhvNNcxPe5x3F2Prn90PRhIWEglnaS23iuzqe4WhZG22oa0gACJDQPKEtA7CxuMth1SUzcKosHsgF4-zyD9y-uZJTchQOvUXEgg91d07zPTSqSyi/s1600/BELAJARBLOGGERWITH_ARDI.png&quot; title=&quot; BELAJAR BLOGGER&quot;/&gt;&lt;/a&gt; </p>




Tampilan setelah diposting :

<a target="_blank" href = "http://blogbelajarblogger.blogspot.com/"> <img border="0" alt="Link Sukses" src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx_yN7_TAefol1_g9YfRK6qLLYNz1xyhvNNcxPe5x3F2Prn90PRhIWEglnaS23iuzqe4WhZG22oa0gACJDQPKEtA7CxuMth1SUzcKosHsgF4-zyD9y-uZJTchQOvUXEgg91d07zPTSqSyi/s1600/BELAJARBLOGGERWITH_ARDI.png" title="BELAJAR BLOGGER"/></a>



Pada contoh 1 dan contoh 2, tulisan di dalam textarea masih bisa diedit, tetapi pada contoh berikutnya, tulisan di dalam textarea tidak bisa diedit (readonly).

Tambahan....textarea dengan background warna

Dengan sedikit modifikasi, Textarea ini dapat mengahasilkan bentuk yang lumayan cukup bagus dan mungkin disini yang membedakannya. Jika teman-teman tertarik untuk membuatnya, silahkan Copy Codescriptnya yang berada di dalam Textarea tersebut sesuai pilihan teman-teman.

Contoh Textarea Standar

<textarea cols="25" rows="3"> Contoh Textarea standar yang belum di modifikasi... </textarea>

• Contoh Textarea dengan Background Warna 1:

<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 7px 7px 7px 7px; background: none repeat scroll 0% 0% rgb(251, 239, 255); border-color: rgb(202, 61, 217); border-style: solid; border-width: 1px 1px 1px 20px; color: #ca3dd9; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 1 </textarea>

• Contoh Textarea dengan Background Warna 2:

<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 5px 5px 5px 5px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 2px inset rgb(204, 204, 204); color: white; line-height: 1.5em; padding: 0pt 7px;"> Contoh Textarea dengan Background Warna 2 </textarea>

• Contoh Textarea dengan Background Warna 3:

<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 10px 10px 10px 10px; background: none repeat scroll 0% 0% rgb(191, 250, 255); border-color: rgb(255, 233, 0) rgb(64, 255, 31) rgb(64, 255, 31) rgb(255, 233, 0); border-style: solid; border-width: 4px; color: red; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 3 </textarea>

• Contoh Textarea dengan Background Warna 4:

<textarea cols="20" name="code" rows="3" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0% rgb(255, 218, 175); border: 2px ridge rgb(127, 69, 0); color: #7f4500; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 4 </textarea>

• Contoh Textarea dengan Background Warna 5:

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(218, 255, 191); border: 2px dashed rgb(41, 95, 0); color: #295f00; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 5 </textarea>

• Contoh Textarea dengan Background Warna 6:

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(239, 0, 144); border: 3px dotted rgb(255, 239, 249); color: #ffeff9; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 6 </textarea>

• Contoh Textarea dengan Background Warna 7:

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(255, 0, 10); color: white; line-height: 1.5em; padding: 5px;"> Contoh Textarea dengan Background Warna 7 </textarea>

Mohon koreksi teman-teman jika saya salah memberikan informasi mengenai textarea di atas. Semoga bermanfaat.


sumber:

04.23 | 1 komentar | Read More

Mengenal CSS

Apa itu CSS?
CSS (Cascading Style Sheet) merupakan sebuah pengembangan dokumen yang mendukung HTML di dalam mendesain suatu website. CSS bukan merupakan bahasa pemrograman seperi java script, delphi, dan C+  melainkan sebuah desain yang berbasiskan scriptting yang di-embed (disisipkan) pada kode HTML.
CSS digunakan untuk mengelompokkan blok perintah yang terjadi berulang-ulang dengan membuat blok kategori sesuai kebutuhan sehingga akan membantu mempercepat dan mempermudah desain website. Dengan menggunaknan CSS,  kita tidak perlu mengulang-ulang kode yang sama karena sebelumnya telah dikategorikan berdasarkan kelompok masing-masing.

Penulisan CSS diawali dengan tanda "{" dan diakhiri dengan tanda "}" dan setiap deklarasi di dalam suatu sub categori harus diakhiri dengan tanda ";". Setiap blok kategori tersebut diawali dengan tanda '#' atau "." (titik) kecuali kode-kode yang telah umum dalam HTML seperi "p", "table", "h1...h6", "a", dan lain-lain.
Penulisan kode CSS ada dua cara, yang pertama disisipkan langsung di dalam kode HTML dan yang kedua adalah dengan menulis kode CSS tersebut pada file yang terpisah yang nantinya file CSS tersebut dipanggil dalam HTML. Penulisan code CSS pada file yang berbeda ini cara menyisipkan (memanggil) file CSS tersebut adalah seperti dua cara di bawah ini :

• <link rel="stylesheet" href="style.css" type="text/css" media="all" />
• <link rel="stylesheet" href="style.css" type="text/css" />

Style.css adalah nama file CSS yang nantinya harus diupload bersama-sama dengan file index. Penulisan CSS pada file yang terpisah akan lebih sederhana dan lebih memudahkan pembuatan suatu website. Pada saat membuat kode-kode CSS. Setiap blok kategori CSS sebaiknya diberi nama yang sesuai dengan desain website untuk memudahkan pengeditan nantinya, contoh :

• Blok kategori header diberi nama #header {......} atau .header {......}
• Blok kategori logo diberi nama #logo {......} atau .logo {......}
• Blok kategori artikel diberi nama #artikel{......} atau .artikel {......}
• Blok kategori footer diberi nama #footer {......} atau .footer {......}
• Blok kategori sidebar diberinama #sidebar {.......} atau .sidebar {......}
• Dan seterusnya (terserah anda)

Tanda {.......} maksudnya ada beberapa  kode di dalam tanda kurung tersebut yang disesuaikan dengan kebutuhan. Perbedaan penggunaan tanda pagar (#) dan titik (.) akan saya bahas pada potingan selanjutnya.
Penulisan kode CSS yang diawali dengan tanda pagar (#) nantinya akan disisipkan dalam kode HTML seperti di bawah: 

• <div id="header"> ........</div>, 
• <div id="footer">......</div>, 
• <div id="sidebar">......</div>, dan seterusnya, 

Sedangakan kode CSS yang diawali dengan tanda titik(.) akan disisipkan seperti ini :  

• <div class="header">......</div>, 
• <div class="footer">......</div>, 
• <div class="sidebar">......</div>, dan seterusnya.

Contoh Penulisan CSS yang disisipkan langsung dalam kode HTML:

---

• Setiap paragraph akan menggunakan huruf arial, warna merah ukuran huruf 12px, align left
• Setiap heading h1 akan menggunakan huruf bold, arial, warna biru, ukuran huruf 16px

Penulisan kodenya sebagai berikut :

<html>

   <head>
   <title>BELAJAR CSS DASAR</title>
   <style type="text/css">

   .style1 {
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
   color: #0000ff;
   }

   .style2 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #ff0000;
   }
  </style>
  </head>

 <body>
    <h1 class="style1">Judul 1</h1>
    <p class="style2">pargraph ke satu</p>
    <p class="style2">paragraph kedua</p>
    <p class="style2">pargraph ketiga</p>
    <h1 class="style1">Judul 2 </h1>
    <p class="style2">pargraph A </p>
    <p class="style2">paragraph B </p>
    <p class="style2">pargraph C </p>
    <p class="style2">&nbsp;</p>
  </body>

</html>

---

Tampilan setelah diposting :

Judul 1

pargraph ke satu

paragraph kedua

pargraph ketiga

Judul 2

pargraph A

paragraph B

pargraph C

Contoh lain :

<html>

  <head>
  <title>DASAR-DASAR CSS</title>
  <style type="text/css">
  .header {
            font-size: 18px;
            color: #FF0000;
            font-family:Arial, Helvetica, sans-serif;
            font-weight:bold;
    }
  .artikelatas {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 12px;
           color: #009900;
    }
  .artikelbawah {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
          color: #0033FF;
          font-style: italic;
    }
  #footer {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 10px;
          color: #00000;
          font-weight:bold;
    }

  </style>

  </head>
  <body>
          <p class="header">PENULISAN CSS</p>
          <p class="artikelatas">Paragraph ini mengunakan font arial dengan warna hijau </p>
          <p class="artikelatas">Ukuran font untuk pargraph ini 12 px</p>
          <p class="artikelatas">Font Family pada paragraph ini adalah arial, </p>
          <p class="artikelatas">Sedagkan judul heading1 (h1) menggunakan huruf tebal</p>
          <p class="artikelatas">Dengan font arial warna merah dan ukuranya 18px. </p>
          <p class="artikelbawah">Paragraph ini mengunakan font arial dengan warna biru </p>
          <p class="artikelbawah">Ukuran font untuk pargraph ini 14 px italic (miring) </p>
          <p class="artikelbawah">Font Family pada paragraph iniadalah arial, </p>
          <div id="footer">
               <p>Tulisan ini adalah terletak pada blok kategori Footer</p>
               <p>dengan Font-Family arial ukuran 8px warna hitam </p>
          </div>

</body>

</html>

---

Tampilan setelah diposting :

PENULISAN CSS

Paragraph ini mengunakan font arial dengan warna hijau

Ukuran font untuk pargraph ini 12 px

Font Family pada paragraph iniadalah arial,

Sedagkan judul heding1 (h1) menggunakan huruf tebal

Dengan font arial warna merah dan ukuranya 18px.

Paragraph ini mengunakan font arial dengan warna biru

Ukuran font untuk pargraph ini 14 px italic (miring)

Font Family pada paragraph ini adalah arial,

Tulisan ini adalah terletak pada blok kategori Footer
dengan Font-Family arial ukuran 8px warna hitam

---

Istilah Blok kategori adalah istilah saya sendiri untuk memudahkan pengertian khususnya bagi pemula yang baru atau sedang belajar CSS.

Tambahan :

• #00000 : Kode warna hitam
• #ff0000 : Kode warna merah
• #0000ff : Kode warna biru
• #0033FF : Kode Warna Hijau

Informasi mengenai kode warna dapat anda lihat pada postingan selanjutnya.
Semoga Bermanfaat.

03.45 | 0 komentar | Read More

Tips Mengganti Tulisan Posting Baru, Posting Lama, dan Home dengan GAMBAR / Kata unik

Terkadang seorang blogger yang memiliki sebuah blog yang dibangun dengan Blogspot, ingin merubah tulisan Posting Lama dengan kalimat atau gambar sendiri, merubah tulisan posting baru degan kalimat atau gambar sendiri, merubah tulisan home dengan kalimat atau gambar sendiri.

Tentu saja masing-masing merka memiliki alasan tersendiri. Namun kebanyakan beralasan untuk mempercantik tampilan (kalau perubahan tersebut menggunakan gambar) dan untuk mempermudah pengertian yang lebih tepat (kalau perubahan tersebut mengunakan kalimat).

Persiapan :

1. Sebelum melakukan perubahan, sebaiknya back-up terlebih dahulu template Anda sebagai antisipasi kalau-kalau terjadi error.
2. Gunakan Ctrl+F untuk memudahkan pencarian Kode HTML
3. Siapkan 3 gambar kalau perubahan akan menggunakan gambar kemudain upload gambar tersebut ke Picasa Album atau ke tempat lain misalnya photobucket.com, imageshack.com, tinypic.com, dan sebaginya.
4. Catat seriap URL dari gambar yang bersangkutan. 

1. Mengganti Tulisan Posting Lama

1. Login ke blogger.com atau draft.blogger.com 
2. Buka Tab Layout atau Tata Lelak atau Design
3. Pilih Tab Edit HTML kemudian tandai Expand Widget Templates.
4. Sebaiknya Back Up Dulu dengan cara meng-copas semua kode dalam kotak Editor pada Notepad atau dengan cara Anda sendiri.
5. Cari kode : <data:olderPageTitle/>  (gunakan Ctrl+F untuk memudahkan pencarian).
6. Ganti kode tersebut dengan tulisan Anda misalnya "Sebelumnya>>" tanpa tanda kutip, kalau dengan gambar ganti dengan kode <img src="URL gambar"/>
7. Click Save Template lalu lihat hasilnya.

2. Mengganti Tulisan Posting  Baru

1. Login ke blogger.com atau draft.blogger.com.
2. Buka Tab Layout atau Tata Lelak atau Design.
3. Pilih Tab Edit HTML kemudian tandai Expand Widget Templates.
4. Sebaiknya Back Up Dulu dengan cara meng-copas semua kode dalam kotak Editor pada Notepad atau dengan cara Anda sendiri.
5. Cari kode : <data:newerPageTitle/> (gunakan Ctrl+F untuk memudahkan pencarian).
6. Ganti kode tersebut dengan tulisan Anda misalnya "<<Sesudahnya" tanpa tanda kutip, kalau dengan gambar ganti dengan kode <img src="URL gambar"/>
7. Click Save Template lalu lihat hasilnya.

3. Mengganti Tulisan Home

1. Login ke blogger.com atau draft.blogger.com.
2. Buka Tab Layout atau Tata Lelak atau Design.
3. Pilih Tab Edit HTML kemudian tandai Expand Widget Templates.
4. Sebaiknya Back Up Dulu dengan cara meng-copas semua kode dalam kotak Editor pada Notepad atau dengan cara Anda sendiri.
5. Cari kode : <data:homeMsg/>  (gunakan Ctrl+F untuk memudahkan pencarian).
6. Ganti kode tersebut dengan tulisan Anda misalnya "Beranda" tanpa tanda kutip, kalau dengan gambar ganti dengan kode  <img src="URL gambar"/> (ada dua kode yang sama, dua-duanya harus diganti)
7. Click Save Template lalu lihat hasilnya.

Selamat mencoba, semoga bermanfaat.

03.32 | 1 komentar | Read More

Judul Blog Berjalan / bergerak

Belajar blogGer , NAH...sesuai dengan judul yang diatas aku ardi menerangkan sedikit ilmu yang ardi dapatkan dari pengalaman dari pengalaman . jika anda belum faham ardi  akan menerangkan dulu.

Judul blog berjalan?

judul blog kita terlihat berjalan di title bar browser anda untuk lebih mempercantik blog kita dan blog kita telihat menarik jika dikunjungi oleh orang lain :D 

contohnya klik di sini

Gimana pengen tau caranya?

Ardi akan kasih tau caranya . ni......!!!

1. Login ke blogger kemudian ke menu Layout ---> Edit HTML
2. Cari kode/script
   
   
   
   <title><data:blog.pageTitle/></title>
   
   
   
   
3. Ganti kode diatas dengan
   
   
   <b:include data='blog' name='all-head-content'/>
   
   <script language='JavaScript'>
   var txt="<data:blog.pageTitle/>";
   var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
   txt=txt.substring(1,txt.length)+txt.charAt(0);
   segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
   </script>
   
   
   

Catatan
text yang berwarna merah diatas adalah merupakan kecepatan pergerakanya jika kamu tambah angkanya maka pergerakanya akan lambat dan jika mengurangi angka maka pergerakanya akan semakin cepat

04.05 | 2 komentar | Read More

Efek Heart / hati Bertaburan Pada Blog

Pada perjumpaan kali ini Ardi ingin membicarakan tentang hati dan cinta.... Eh tapi jangan salah bukanya Ardi lagi jatuh cinta ama seseorang tapi saking jatuh cintanya ama ngeblog ardi buat efek Hati bertaburan yang kaya gini.. he.. hee.

Efek Heart(Hati) bertaburan ini cocok Buat Anda yang mempunyai blog bernuansa cinta, terlebih jika Anda membuat blog dengan content puisi cinta, novel cinta bahkan nasehat-nasehat tentang cinta.
UNTUK CONTOHNYA BISA DI LIHAT DI : KLIK SINI untuk melihat contohnya

Bicara soal cara pembuatanya trik yang kali ini cukup mudah dan tidak rumit... nah jika Ada ingin membuat efek cinta ini silahkan ikuti cara yang dibawah ini

Langkah pertama yang harus kamu lakukan adalah Log In ke Blogger lalu masuk menu Design kemudian masuk menu Edit HTML

Lalu taruh Code dibawah ini diatas code </body> atau kedalam tag <body>

<script src='http://sites.google.com/site/anasku2000/lovingheart.js'>
</script>

Nah jika Sudah Simpan dan lihat hasilnya

Sekian semoga bermanfaat bagi Anda dan selamat bercinta-cintaan dengan blog Anda

03.42 | 0 komentar | Read More

Cara Membuat Kotak Ngoceh sembunyi (Shout Box / buku tamu )

kali ini saya akan memberikan tips blogger buat anda ..
tipsnya adalah cara menghilangkan shoutmix/bikin buku tamu

gimana caranya ?? pantengin terus ya ..
sebelumnya, apa sih manfaatnya ?? manfaatnya = halaman blog anda tidak terlalu dimakan tempat oleh soutbox anda ( lebih mengurangi tempat aja )

sebelumnya, apa sih manfaatnya ?? manfaatnya = halaman blog anda tidak terlalu dimakan tempat oleh soutbox anda ( lebih mengurangi tempat aja )












 1.Log in www.blogger.com
2.Bila udah masuk dasbor > elemen laman > tambah gadget
3.Tambah gadget > HTML/javascript
4.Copas kode di bawah ini

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6rK-Tpu00TrarqObu1KTeAwENU3OC6RL1AS5W1FUTAS4sTs4OqXJoyhDFP1A7lHgOg5dwROIpeLFQ6gt5bvLY8RSqlk2mLYwvj19sYq-S6bBFvBWglbATRtX9NXaEf_wwXGctsKXrLZcg/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

taruh kode shoutbox mu disini!!

<br/>
ingin seperti ini ??<br/>
<a onmouseover="window.location=this.href" href="http://www.gudangnews.com/2011/05/cara-membuat-kotak-ngoceh-shout-box.html">di sini tempatnya!!</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

6.Jangan di isi judul ya,...
7.Simpan

semoga berhasil..!!

23.31 | 1 komentar | Read More

Cara Membuat Kotak Ngoceh (Shout Box)

Kotak ngoceh atau istilah lainnya shout box, Say Box, Tag Board, dan Chatter Box adalah suatu kotak yang berfungsi untuk mengirimkan pesan-pesan pendek, namun bisa juga berfungsi sebagai tempat ngobrol (chatting). Dengan shoutbox, kita juga bisa mempromosikan blog kita, misalnya nih, kita datangi blog orang yang menyediakan kotak ini kemudian kita kasih komentar atau cuma sekedar salam di shoutbox mereka, lalu yang punya blog akan melihat di shoutbox, biasanya meraka akan balas mengunjungi blog kita. Nha gitu ceritannya. Biasanya kotak ngoceh diselipkan kedalam halaman web/blog dengan bahasa java Script. Bagi kamu yang jago pemrograman java script mungkin bisa membuatnya sendiri dengan membuat kode-kode yang memusingkan kepala. Namun buat kamu yang nggak jago nggak usah kuatir karena sekarang ini banyak situs internet yang menyediakan layanan ini, salah satunya yaitu Shoutmix . Caranya adalah sebagai berikut :

1. Buka situs Shoutmix Kamu harus mendaftar di situs tersebut, cara daftarnya gampang kok.
2. Jika pendaftarannya berhasil kamu langsung disuruh milih type shoutbox yang disediakan, terserah kamu milih bentuknya yang gimana. Klik tombol Continue
3. Setelah itu kamu akan mendapat ucapan "Terima Kasih" :D lalu klik link Go to My Control Panel Now
4. Disitu kamu bisa mensetting terlebih dahulu shoutbox kamu, misalnya Style & Color, Date & Time, dan lain-lain.
5. Jika sudah selesai klik menu Get Codes
6. Jika kamu pingin menaruh shoutbox di blog kamu pilih "Place Shoutbox on Webpage"
7. Atur lebar dan tinggi shoutbox di kolom widht dan hight
8. Kemudian Copy kode yang ada di dalam kotak "generated Codes"
9. Login ke blogger.com lalu pilih Layout kemudian Add Page Elements
11. Tambahkan element HTML/Javascript.
12. Paste Kode yang telah kamu copy dari shoutbox.com tadi di kotak "Content" lalu simpan.
13. Jadi deh.....

 [ jika mau menyembunyiman Shout Box nya bisa baca ini turitorialnya : klik ini.

------------------------------- goodluck -------------- --

 

23.30 | 2 komentar | Read More

Bagaimana Cara Membuat teks berjalan - marquee ini tips nya

Membuat teks berjalan atau marquee bisa kita buat dengan maksud memperindah tampilan blog kita, teks berjalan ini bisa kita manfaatkan untuk memasang headline atau juga dapat kita gunakan untuk menjalankan link agar pengunjung langsung tertuju pada teks atau link tersebut karena tertarik perhatian dengan teks berjalan atau marquee. selain itu kita bisa menghemat tempat pada blog kita jika kita ingin menggunakan seperti blogroll, atau banner.

Efek dari teks marquee ini akan mampu membuat teks yang anda buat ini berjalan dari kekiri kekanan, dari atas kebawah dan begitu sebaliknya andapun bisa mengatur kecepatan daripada teks marquee tersebut. bagaimana untuk membuat teks marquee tersebut dibawah ini contohnya :



1.Marquee dari kiri kekanan :

<marquee direction="right" scrollamount="3">

Contoh Marquee dari kiri ke kanan

</marquee><p>

Hasilnya :




Contoh Marquee dari kiri ke kanan





2.Marquee dari kanan kekiri :

<marquee direction="right" scrollamount="3">


Contoh Marquee dari kiri ke kanan

</marquee><p>

Hasilnya :





Contoh Marquee dari kiri ke kanan





3.Marquee dengan gerak bolak-balik :

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

Contoh MARQUEE dengan Gerakan bolak-balik


</MARQUEE>

Maka hasilnya :




Contoh MARQUEE dengan Gerakan bolak-balik






4.Marquee dari bawah keatas :

<marquee direction="up" scrollamount="2″ height="50″ width="50%">

Contoh Marquee dari bawah keatas


</marquee><p>

Hasilnya :



Contoh Marquee dari bawah keatas





5.Marquee dari atas kebawah :

<marquee direction="down" scrollamount="2″ height="50″ width="50%">

Contoh Marquee dari atas kebawah

</marquee><p>

Hasilnya :




Contoh Marquee dari atas kebawah





6.Merquee dengan efek background :

<font color="white"><marquee direction="right" scrollamount="2" bgcolor="black">

Contoh Marquee dengan menggunakan background hitam dan warna font putih

</font></marquee><p>

Maka hasilnya :




Contoh Marquee dengan menggunakan background hitam dan warna font putih





Variasi lain dari teks marquee ini yaitu ketika mouse didekatkan pada teks tersebut maka teks tersebut akan berhenti dan kemudian akan berjalan lagi ketika mouse dijauhkan dari teks ini dapat dipergunakan untuk menjalankan link:

Contohnya :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">
Arahkan mouse anda kesini
</marquee>

Maka hasilnya :


Arahkan mouse anda kesini



Marquee dengan dalamnya terdapat link:

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


<a href="http://www.gudangnews.com/">Blogspot tutorial</a>

<a href="http://bestthemeblogger.blogspot.com/">Free blogger templates</a>

<a href="http://www.gudangnews.com/search/label/TEMPAT%20DOWNLOAD">Free software download</a>

<a href="http://www.gudangnews.com/search/label/ARTIKEL%20ANEH%20DAN%20UNIK">Info aneh dan unik</a>


</marquee>

Maka hasilnya :





Blogspot tutorial


Free blogger templates


Free software download


Info aneh dan unik








Hanya itu yang bisa saya tulis anda bisa berkreasi sendiri dengan yang lebih menarik sesuai dengan selera anda sendiri.

Keterangan :

BGCOLOR="warna" : Untuk mengatur warna background (latar belakang) teks



DIRECTION="left/right/up/down" : Mengatur arah gerakan teks



BEHAVIOR="scroll/slide/alternate" : Untuk mengatur tingkah laku teks yang dimaksud



Scroll : teks bergerak secara berputar




Slide : teks bergerak sekali lalu berhenti



Alternate : teks bergerak dari kiri kekanan lalu balik lagi (Wara-wiri)



SCROLLMOUNT="angka" : mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.



SCROLLDELAY="angka" : Untuk mengatur waktu tunda gerakan dalam mili detik



LOOP="angka|-1|infinite" : Mengatur jumlah loop



WIDTH="lebar" : Mengatur lebar blok teks dalam pixel atau persen

03.16 | 0 komentar | Read More

Cara Pasang kotak komentar facebook dibawah posting blog

Pasang kotak komentar facebook diblog, Kotak komentar facebook bisa kita pasang pada blog atau website kita, selain untuk memudahkan para pengunjung blog juga dapat meningkatkan trafik blog kita tersebut bagi yang  belum memasang dan ingin segera memasang kotak komentar facebook caranya di bawah ini :

1. Login terlebih dahulu ke facebook.com
2. Selanjutnya kunjungi www.apps.facebook.com/developer/setup untuk membuat aplikasi
3. Masukkan nama situs kamu dan URL blog pada lokasi pilih saja bahasa Indonesia dan klik "Buat aplikasi"
4. Akan terlihat informasi tentang aplikasi yang telah dibuat catatlah ID Aplikasi tersebut
5. Sekarang Login ke akun blogger kamu Silahkan Menuju Layout ( Rancangan )> Edit HTML dan check Expand Widget Templates. Cari kode berikut: <data:post.body> atau 
<div class="’post-header-line-1′/"> dan paste code berikut dibawahnya : Jika Pernah pasang readmore maka letakkan dibawah yang kedua <data:post.body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><a href='http://www.gudangnews.com/2011/05/cara-pasang-kotak-komentar-facebook.html' target='new'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaBE8zbTAO6KCnlMwQMF_BlLoP_6nfpvCic-hCKbpXmObVDV4gQeLTnRu2tV37tN0Y2VtKcdk_NaPfRXzPxIbUh0RJX0OzpWSNI_ewgq3B03S4IsBhPXfBx6ZasWN5aM5odn12XcsDbOM/s1600/Comments+FB.png'/></a></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;ID-Aplikasi&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://www.gudangnews.com/2011/05/cara-pasang-kotak-komentar-facebook.html' target='_blank' title='Facebook Comment'>Facebook Comment. </a></b></div> 

6. Rubahhlah ID-Aplikasi Kamu (teks yang di cetak merah) dengan ID aplikasi kamu tadi, simpan perubahan dan lihatlah hasilnya.
Ada kesulitan dalam memasang kotak komentar facebook dibawah posting silahkan tinggalkan komentar!

02.12 | 8 komentar | Read More

Tips Blogger | Memasang Spoiler Di Blog

Widget Spoiler adalah widget yang berfungsi untuk menyembunyikan tulisan atau gambar yang ingin dishare di dalam sebuah artikel postingan. Gambar atau tulisan baru akan muncul ketika pengunjung mengklik tombol yang ada pada spoiler tersebut.

Fitur spoiler biasanya banyak digunakan di website forum dan kini sudah bisa digunakan di Blogspot secara instan tanpa mengedit template Blog. Adapun kelebihan dari penggunaan widget spoiler adalah :

1). Load dari web atau Blog akan menjadi lebih ringan jika semua gambar diletakkan di dalam spoiler, karena pada saat load pertama gambar tidak akan ditampilkan sampai pengunjung sendiri yang akan melihatnya dengan mengklik tombol spoiler. 2). Akan lebih menghemat tempat ( space) di dalam halaman artikel kita.

Adapun pemasangan fitur spoiler di Blog sangatlah sederhana, tanpa perlu memodifikasi template Blog, cukup dengan menyisipkan saja kode-kode yang diperlukan di dalam artikel postingan.

Begini Caranya :

1). Untuk memunculkan spoiler sobat mesti menulis artikel lewat mode HTML bukan lewat mode Tulis yang biasa sobat lakukan, sobat boleh terlebih dahulu menulis dengan mode tulis biasa, namun setelah itu jika sobat ingin menyertakan spoiler sobat mesti pindah ke Mode HTML untuk menyisipkan kode-kode di bawah:

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Spoiler </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi spoiler...

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

2). Lalu kembali ke mode Tulis, lihat dan coba dulu fitur spoilernya sebelum menerbitkan postingan!

Contoh Spoiler :

Spoiler

SEMOGA BERMAAMFAAT,....

06.26 | 0 komentar | Read More

Cara Memasang Fitur Google Translator Pada Blog

Memasang fitur penerjemah atau translator merupakan hal yang penting juga bagi blog kita, kenapa? Karena dengan fitur ini akan membantu pengunjung blog kita yang berasal dari selain indonesia, dan tentunya dengan adanya fitur ini maka mereka akan merasa terbantu, selain itu juga hitung-hitung agar para bule bisa betah juga di blog kita. Untuk menampilkan fitur penerjemah atau translator di blog kita tidaklah sulit, karena kita bisa langsung menggunakan jasa Google Translate atau google terjemahan yang memang sengaja disediakan oleh pihak google untuk kepentingan publik. Selain itu, menariknya lagi google translate ini menyediakan lebih dari 10 bahasa di mana di dalamnya sudah termasuk 2 bahasa dunia, yaitu Arab dan Inggris. Bagaimana, tertarikkah anda?

Untuk memulai memasang fitur terjemahan di blog anda, dapat dilakukan melalui langkah-langkah berikut:

1 . Masuk ke akun Blogger Anda.

2 . Klik Tata Letak.

3 . Klik Tambah Gadget.

4 . Pilih HTML/JavaScript.

5 . Kunjungi situs Gadget Google Translate.

6 . Sesampai di halaman gadget google translate, silahkan pilih bahasa halaman blog anda. Apabila Blog anda menggunakan bahasa Indonesia, maka pilihlah Bahasa Indonesia:


7 . Selanjutnya pilih Setelan Opsional yang anda inginkan, pilih seluruh bahasa apabila yang ingin ditampilkan dalam pemilihan bahasa mencakup seluruh bahasa yang telah disediakan oleh google translate, dan pilih bahasa tertentu apabila anda hanya ingin menampilkan beberapa bahasa pilihan anda:


8 . Selanjutnya anda dapat langsung mengkopi kode HTML yang tersedia untuk memulai menampilkan fitur penerjemah di blog anda. Kopi Kode tersebut, lalu paste-kanlah di halaman Gadget HTML/JavaScript yang tadi (Langkah 4).




9 . Selanjutnya jangan lupa untuk mengklik tombol Simpan.

10 . Selesai...



Silahkan untuk melihat tampilan blog anda.

Bisa dilihat contoh  di blog saya ini .

01.40 | 0 komentar | Read More

Mengganti Icon Adress Bar (Favicon)

favicon adalah icon yang berada di adress bar. Default favicon dari blogger adalah huruf "B" berwarna orange. Beberapa orang ingin mengganti favicon tersebut sesuai keinginannya. Dan berikut tutorial untuk mengganti default favicon blogger dengan favicon keinginan Anda.

</head>

4. Jika sudah ketemu letakkan kode berrikut diatas kode </head>



<link href=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpmllcv07DOaPrsC98YirE0ggOcnNDgYshZ9lN4F6M_UJipcoJuJnipk1DD8Xiqu4zC0v-eTI_FnC23ydShFouJMqOwnId-BiUnNGSul7IZOIuV5MwUdDhZer-H_YMqoeWlx1q_mKOnC4/ 'rel='SHORTCUT ICON'/>




Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpmllcv07DOaPrsC98YirE0ggOcnNDgYshZ9lN4F6M_UJipcoJuJnipk1DD8Xiqu4zC0v-eTI_FnC23ydShFouJMqOwnId-BiUnNGSul7IZOIuV5MwUdDhZer-H_YMqoeWlx1q_mKOnC4/ dengan alamat favicon Anda.

5. Klik save.



Selamat bereksperimen

02.39 | 0 komentar | Read More

Menampilkan Status Yahoo di Blog

Menampilkan status Offline/Online Yahoo Messenger. Hal ini berfungsi untuk mengetahui jika anda sedng online atau offline. Tapi bagi yang belum punya Account Yahoo ya buat dulu lah,. Dengan tanda seperti itu kan nanti pengunjung blog anda akan bisa langsung berinteraksi langsung dengan anda, dengan begitu kan nanti para penggemar setia dan pengunjung blog anda jadi tambah sayang kepda anda. Tak kenal maka tak sayang, he..he..

Contohnya seperti ini, jika status kamu offline maka gambarnya akan seperti ini :



Jika kamu sedang online, maka gambar akan berganti seperti ini





Cara buatnya sangat gampang anda tinggal copy script berikut ini trus kamu pasang di sidebar blog anda, berikut tutorialnya :

1. Masuk ke blog anda.
2. Klik tab Layaout di bagian atas.
3. Klik “Page Element” trus “Add page elements –HTML/Javascript”
4. Copypaste kode beikut .

<a href="http://messenger.yahoo.com/edit/send/?.target=ardiantainyoman@rocketmail.com">


<img src="http://opi.yahoo.com/yahooonline/u=ardiantainyoman@rocketmail.com/m=g/t=2/l=us/opi.jpg" border="0" alt="Status YM" /></a>

ardiantainyoman@rocketmail.com = ganti dengan account yahoo messenger anda

2 = Ganti dengan nomor pilahanmu. Pilih angka dari 0-16 (ini tampilan gambar)

t=0




t=1



t=2



t=3



t=4



t=5



t=6




t=7



t=8



t=9



t=10



t=11



t=12




t=13



t=14



t=15



t=16










dan terakhir klik SAVE

02.04 | 0 komentar | Read More

Menghilangkan Navigasi Bar

Navigasi Bar thu miliknya Blogger/Blogspot. Letaknya dibagian atas.Namun beberapa Blogger ada yang kurang nyaman bila di blognya ada tampilan navigasi bar-nya,.,yahhh lagi lagi sebell,., ga ga ga

Tapi tenang,.,.ada caranya kok,. buat ngilangin thu navisagi bar . Gini caranya :

1. Musti login dulu ke blogger.
2. Masuk tata letak, kemudian edit HTML.
3. Kemudian ceklist/centang Expand widget trus copy-paste kode berikut :

#navbar-iframe {

height:0px;

visibility:hidden;


display:none

}

Letakkan seperti di bawah ini

-----------------------------------------------------

Blogger Template Style Sheet

Name: NewFangled XML

Designer: Erica - Templates For You


Modified from: Free CSS Templates

URL: templatesfree.blogspot.com / freec.org

Date: 5 Jun 2010

Updated by: ardi - Templates For You

Enhanced by: eBlog Templates

Date: 8/14/2010

URL: http://www.gudangnews.com

------------------------------------------------------ */

#navbar-iframe {


height:0px;

visibility:hidden;

display:none

}



OK,.,.???? gampangkan,.,,.,?? Selamat mencoba

01.40 | 0 komentar | Read More

Cara Bikin Read More pada bloger

Wahhh,.,. udah banyak ni yang bikin tutorial read more atau baca selengkapnya,.,.Dan ini merupakan salah satunya dari sekian banyak tutorial read more.

caranya :

• Login dulu keblogger, nah setelah login kan masuk di menu dasbor.
• Klik tata letak, trus pilih edit HTML, cek list/centang expand widget.
  
• Sekedar tambahan sebelum mengedit template alangkah lebih baiknya template di backup terlebih dahulu.
  
• Copy-paste kode berikut di bawah tag </head> atau tepatnya diatas kode } ]]></b:skin>

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

• Kemudian cari kode <p><data:post.body/></p>gimana udah ketemu kan?? selanjutnya copy-paste kode berikut tepat dibawahya.
<b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> Read More..</a> </b:if>
Catatan : kata read more bisa diganti dengan baca selengkapnya atau terserah deh.
• Trus setiap kali posting masuk edit HTML, masukan kode berikut
  <span class="fullpost">dibawah posting yang akan dipotong, dan kode </span>di akhir postingan.

contoh :
Ini adalah awal berita yang ingin saya potong karena terlalu panjang
kalo postingan muncul semua, oleh karena itu saya perlu memotong berita
sampai disini saja.<span class="fullpost"> Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul
pada saat post page atau link read more.. diklik </span>

Dan ini Hasilnya :
Ini adalah awal berita yang ingin saya potong karena terlalu panjang
kalo postingan muncul semua, oleh karena itu saya perlu memotong berita
sampai disini saja Read More...

Selamat mencoba he he he

01.32 | 0 komentar | Read More

Cara Bikin Postingan

Jika sudah berhasil membuat blog, maka langkah selanjutnya adalah mengisi Blog dengan Tulisan atau Artikel. Ini merupakan pekerjaan dan tujuan utama kita Ngeblog. Coz...tujuan utama dari Ngeblogkan buat mengisinya dengan berbagai tulisan atau gambar and terserah deh sengihnampakgigi.

Eh jangan lupa siapin minuman minum dan camilan ...kalo perlu sambil dengerin musik :music: seperti aku klo lagi ngeblog ga ga ga gelakguling. Ntar kan mau nulis artikel, biar kga' kelaperan. Kan kalo kelaperan konsentrasi bisa buyar... Berikut langkah-langkahnya :

Login Ke Blogspot

Pertama kita login dulu ke Blogspot, berikut ini cara login ke Blogspot klik disini untuk masuk, Nah thu kan ada kotak dialog :

Username: diisi dengan alamat email saat mendaftar di bloger.

Password: password pada saat mendaftar.

Remember me cek list(centang) jika ingin mengingat username dan password pada PC.


Klik pada tombol SIGN IN yang akan dibawa menuju Form atau layar Dashboard. Dashboard thu panel buat mengakses berbagai fungsi yang mengatur segala sesuatu yang berhubungan dengan blog seperti Post, Settings, dan Layout.

Bikin Posting di Blogspot

Dari Dashboard Blogspot ini kita bisa mulai membuat artikel klik new post untuk membuat artikel. Atau bisa dilihat pada gambar ini,



Buat bikin artikel di Blogspot selain menggunakan editor ini, kita juga bisa menggunakan berbagai tools lain yang dibuat oleh pihak ketiga, pada pronsipnya semua tools ini sama. Beberapa tools yang biasa digunakan adalah BlogJet, MS FrontPage, ScribeFire.

01.17 | 0 komentar | Read More