Cara Membuat Text Area dan Textbox Area Berfasilitas Select All

ika Anda pernah membaca posting/artikel tentang Text Area, mungkin Anda juga pernah mendengar tentang Textbox Area?

Text Area dan Textbox Area mempunyai fungsi yang sama yaitu sebagai tempat menyimpan data dalam bentuk text maupun kode HTML/Javascript, baik di dalam postingan maupun di sidebar blog. Manfaat lain dari Text Area maupun Textbox Area adalah untuk menghemat halaman posting agar tidak terlalu panjang.

Perbedaan antara Text Area dan Textbox Area adalah dari sisi tampilan dan kode-kode HTML/Javascript yang digunakan. Berikut ini contoh dari text area dan textbox area :

Text Area:

Textbox Area:

KLIK "SELECT ALL" UNTUK MELAKUKAN COPY PASTE

Adapun Cara Membuat Text Area dan Textbox Area Berfasilitas Select All adalah masukan kode di bawah ke dalam posting atau sidebar blog Anda. Berikut ini kodenya:

1. Text Area:
<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width:200px; height:30px;" name="txt"> disini tempat memasukkan kode / text anda</textarea></p></form> 

2. Textbox Area:
<style
type="text/css"> .codebox{ border: 2px solid #04D43A;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
-moz-border-radius-bottomleft:12px;
-moz-border-radius-bottomright:12px;
background:#06CDEB; padding:5px;}
.codebox2{ background:#836E2C; padding:10px } </style>
<div class="codebox"> <div class="codebox2"><center><b>KLIK &quot;SELECT ALL&quot; UNTUK MELAKUKAN COPY PASTE</center></b></a></div>
<form style="font-family: monospace; font-size: 8pt;"
name="copy"><center><input value="Select All"
onclick="javascript:this.form.txt.focus();this.form.txt.select();"
type="button"/></center>
<textarea dir="ltr" cols="200px" name="txt" rows="30px"
style="width: 100%;">disini tempat memasukkan kode / text anda</textarea>
</form></div> 

Keterangan:

* Width/Cols adalah lebar Text Area/Textbox Area;
* Height/Rows adalah tinggi Text Area/Textbox Area;
* disini tempat memasukan kode / text anda, disitulah tempat Anda menyimpan text atau kode HTML/Javascript;
* Untuk menyimpan kode HTML/Javascript dalam Text Area/Textbox Area, terlebih dahulu harus di PARSE. Untuk mengetahui cara melakukan Parse kode HTML/Javascript silahkan klik disini.

>>>>>>>> Selamat Mencoba, Semoga Sukses!!! <<<<<<<<

Cara Menampilkan Komentar Terbaru

Pada prinsipnya tampilan komentar terbaru sama dengan tampilan posting terbaru.Bedanya, pada widget ini yang ditampilkan adalah beberapa komentar yang baru masuk. Gunanya adalah untuk mengetahui dengan cepat apa dan siapa saja pengunjung yang baru saja meninggalkan komentar. Jadi anda tidak perlu lagi mencari-carinya secara manual satu persatu di bawah posting. Nah, cara untuk menampilkannya cukup mudah. Anda hanya perlu melakukan beberapa langkah di bawah ini:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.

2. Klik Tambah Gadget.

3. Kemudian cari dan kliklah widget Feed.

4. Begitu halaman feed ini terbuka, maka masukkanlah alamat (URL) feed komentar blog anda pada kotak yang telah tersedia. Jika belum tahu alamat URL Feed ini anda bisa lihat Cara Mengetahui Alamat Feed Komentar. Setelah itu klik LANJUTKAN.

5. Maka akan tampil halaman seperti ini

Isilah kotak judul sesuai dengan nama yang anda inginkan. Misalnya: Recent Comments, Komentar Terbaru,  dan sebagainya. Selanjutnya pilihlah berapa jumlah judul posting baru yang ingin anda tampilkan. Maksimal adalah 5 komentar. Kemudian centanglah ketiga kotak kecil di bawahnya jika anda setuju dengan pengaturan yang ditawarkan. Jika sudah kliklah SIMPAN. Tunggulah hingga proses selesai.

6. Sekarang anda sudah dapat melihat hasilnya. Sebagai contoh tampilannya akan tampak seperti ini:

7. Jika ingin komentar terbaru ini berada di bawah halaman posting, maka widget ini juga bisa anda drag langsung ke bawah halaman posting blog. Selamat mencoba dan semoga berhasil!

Cara Memasang Widget Posting Terbaru

Selain telah memasang Arsip Blog, Kategori, Daftar Isi, maka ada satu widget lagi yang sangat membantu pengunjung untuk menelusuri tulisan yang ada di blog anda, yaitu widget Posting Terbaru. Sesuai namanya, widget ini akan menampilkan maksimal 5 judul posting terbaru anda. Jika adan ingin memasangnya anda bisa ikuti beberapa langkah berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.

2. Klik Tambah Gadget.

3. Kemudian cari dan kliklah widget Feed.

4. Begitu halaman feed ini terbuka, maka masukkanlah alamat (URL) feed blog anda pada kotak yang telah tersedia. Jika belum tahu alamat URL Feed ini anda bisa lihatCara Mengetahui Alamat Feed Blog. Setelah itu klik LANJUTKAN.

5. Maka akan tampil halaman seperti ini

Isilah kotak judul sesuai dengan nama yang anda inginkan. Misalnya: Recent Post, Posting Terbaru, Tulisan Terbaru, Artikel Terbaru, dan sebagainya. Selanjutnya pilihlah berapa jumlah judul posting baru yang ingin anda tampilkan. Maksimal adalah 5 posting. Kemudian centanglah ketiga kotak kecil di bawahnya jika anda setuju dengan pengaturan yang ditawarkan. Jika sudah kliklah SIMPAN. Tunggulah hingga proses selesai.

6. Sekarang anda sudah dapat melihat hasilnya. Sebagai contoh tampilannya akan tampak seperti ini:

7. Jika ingin posisi posting terbaru ini berada tepat di atas halaman posting, maka widget ini juga bisa anda drag langsung ke atas halaman posting blog. Selamat mencoba dan semoga berhasil!

Membuat Buku Tamu "Tersembunyi"

Kalau kamu ga tau lagi mau taruh buku tamu kamu di mana, buat aja buku tamu kamu "tersembunyi", dan kalau diklik akan langsung terlihat.
Contohnya kamu bisa lihat di bagian sebelah kanan layar kamu, dan klik tab yang berwarna hijau tersebut. Dan buku tamu itu akan bergerak keluar, sehingga yang tadinya tidak kelihatan akan jadi terlihat.

Caranya:

1. Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:

4. 1. <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/AVvXsEi2bcCQYuc-QN_EErSMUtIKTlNsXlPok7VWwdEwJTfP1w21ofww2vDNeEjub6JRdPEwZQ6bEHrCj8XbfROjsTyylOT-y6lHCelTbtn2PcuDQR1mD18rtR92iMzAsAVK3zw9lIDhEuieAvnQ/') 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">
      
      <!-- Ganti ini dengan kode buku tamu kamu -->
      
      <br/>
      Mau punya buku tamu seperti ini?<br/>
      Klik di
      <a href="http://infotentangblog.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">
      sini (Info Blog)
      </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>

      1. Pada kode di atas, cari kode <!-- Ganti ini dengan kode buku tamu kamu --> dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya,
      2. Kamu juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah kamu.
      3. Selamat mencoba!

      Catatan: di kode di atas aku pasang backlink ke post ini, kalau kamu mau berbaik hati, tolong backlink-nya jangan dihapus, ya! :D

Membuat Tanda Tangan di Blog

Menampilkan ciri khas atau identitas diri bisa menggunakan berbagai cara. Selain nama blog, favicon di address bar dan seabreg cara dan ciri khas lain, sebuah tanda tangan, selain membuat ciri khas super khusus dan pasti berbeda dengan yang lain, dia juga mampu ditampilkan sebagai alat untuk mempermanis gaya atau style blog.

Membuat sebuah tanda tangan selain bisa dilakukan sendiri dengan membuatnya menggunakan berbagai software seperti Adobe Photoshop, Corell Draw dan yang lain, bisa juga dibuat dengan memanfaatkan situs pemberi layanan gratis membuat tanda tangan. Berbagai gaya dan variasi tanda tangan bisa kita ciptakan dengan cara yang sangat mudah. Cara ini merupakan yang paling gampang dan bisa dilakukan semua blogger tanpa kecuali. Keahlian menggunakan software pembuat gambar tak diperlukan lagi dan yang jelas waktu membuatnyapun amat singkat. Mau coba?

Silahkan klik link di bawah ini dan sampeyan dapat segera mempunyai tanda tangan yang bisa diletakkan diberbagai sudut blog. He ... he ... semua sudut mo dipenuhi boleh juga ~! Ha ... biar ramai kaya' pasar malam!!!

http://mylivesignature.com/

Langkah Pembuatan Tanda Tangan

• Setelah klik link di atas maka sampeyan akan melihat halaman mylivesignature.com. Cari dan klik link Proceed yang terdapat di sebelah kiri tengah halaman.
• KLIK Using the signature creation wizard.
• Tuliskan Teks yang akan dibuat menjadi sebuah tanda tangan, kemudian KLIK button Next Step
• Tunggu hingga berbagai bentuk tanda tangan terlihat. Jika belum ada yang cocok bisa pilih berbagai jenis huruf yang tersedia dengan klik pilihan yang disediakan melalui button yang ada. Setelah ada satu pilihan yang paling pas dan cocok dengan selera, berikan tanda kemudian KLIK button Next Step.
• Pilih ukuran yang tepat dan kembali KLIK button Next Step.
• KLIK pada kode warna untuk merubah background color (Click to change the background color) atau bisa memilih transparent dengan memberi tanda (klik) pada pilihan background transparan.
• KLIK pada text color (Click to change the the text color) untuk memilih warna tanda tangan.
• KLIK button Next Step.
• Pilih sudut kemiringan tanda tangan dan lanjutkan kembali denganKLIK button Next Step.
• Pada langkah ini bisa dilakukan klik kanan pada gambar kemudian "SAVE image" selanjutnya upload di image hosting. Sampeyan bisa juga klik Want to download this signature? kemudian setelah URL tanda tangan dicopy langsung upload di image hosting. Atau klikWant to use this signature? kemudian klik Generate HTML codedan lanjutkan kembali dengan klik Generate a code for my handwritten signature.
• Ambil dengan copy kode HTML yang tersedia dalam box.Contoh Kode HTML:
  
  <a href="http://www.mylivesignature.com" target="_blank"><img src="http://signatures.mylivesignature.com/54488/383/C9D62899FC43CCD15F6560899A516E00.png" style="border: 0 !important; background: transparent;"/></a>

Jika tanda tangan diupload sendiri di file hosting, gunakan URLnya dalam sebuah tag image seperti di bawah ini:

<img src="URL tanda tangan" width="..." height="..." style="border:none;" />

Membuat Widget Burung Twitter Terbang Di Blog

Berikut cara dan script untuk membuat burung-burung twitter berterbangan di halaman blog kalian. Jika Burung Tweet itu di klik, maka akan membuka akun twitter yang kita miliki. Bahkan, jika kita men-scroll page, maka Burung Tweet pun akan terbang berubah posisi.

Keren Kan? Begini cara buatnya..

1. Login Ke Blogger >> Rancangan >> Tambah Widget >> HTML/Javascript
2. Masukkan Kode ini :

<script type=”text/javascript” src=”http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js”></script>
<script type=”text/javascript”>
var birdSprite=”http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png”;
var targetElems=new Array(“img”,”hr”,”table”,”td”,”div”,”input”,”textarea”,”button”,”select”,”ul”,”ol”,”li”,”h1″,”h2″,”h3″,”h4″,”p”,”code”,”object”,”a”,”b”,”strong”,”span”);
var twitterAccount = “http://twitter.com/techgyo”;var tweetThisText = “Twitter – techGyo http://www.techgyo.com/”;tripleflapInit();
</script>
<a id=”theBird” href=”http://twitter.com/akuntwitterkamu” target=”_blank” style=”display: block; position: absolute; width: 64px; height: 64px; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; z-index: 947; left: 0px; top: 587px; background-position: 0px 0px; background-repeat: no-repeat no-repeat; “></a>
<a id=”theBirdLtweet” href=”http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.techgyo.com/” target=”_blank” title=”tweet this” style=”position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 30px; z-index: 951; left: 49px; top: 583px; display: none; opacity: 0; background-position: -64px 0px; background-repeat: no-repeat no-repeat; “></a>
<a id=”theBirdLfollow” href=”http://twitter.com/techgyo” target=”_blank” title=”follow me” style=”position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 20px; z-index: 952; left: 54px; top: 613px; display: none; opacity: 0; background-position: -64px -30px; background-repeat: no-repeat no-repeat; “></a>

3. Ganti tulisan yang di cetak tebal berwarna biru (akuntwitterkamu) menjadi ID twitter punyamu kemudian save dan jadi deh, burung-burung tweet akan beterbangan di blogmu

Selamat Mencoba

Tutorial Dasar CSS

Setelah saya menjelaskan tutorial tentang HTML, tentunya tidak lengkap jika tanpa CSS. Sebenarnya CSS itu apa?, kegunaanya untuk apa?, dan apa keuntungan memakai CSS?, Oleh karena itu marilah kita simak tutorial dasar CSS yang akan saya berikan kepada anda sekalian.

Apa itu CSS? 
CSS (Cascading Style Sheets) adalah bahasa pemograman website yang sederhana yang digunakan untuk mempermudah pengelolahan sebuah website atau blog. Umumnya CSS digunakan pada web / blog yang berbasis HTML atau XHTML, walaupun begitu CSS masih bisa digunakan untuk semua jenis document berbasis XML(Extensible Markup Language). Apa itu XHTML atau XML? akan kita bahas di artikel yang berbeda.

Apa Kegunaannya? 
Berbeda dengan HTML yang harus mengetik secara terpisah untuk mengatur sebuah tampilan, CSS hanya cukup menuliskan 1 kali untuk mengatur tampilan suatu halaman. Bayangkan jika kamu ingin mengganti setiap warna huruf atau warna atau hal - hal lainnya kamu harus menulis kode / script di setiap halaman yang berbeda .Hal tersebut tidak akan menjadi kendala jika hanya 1, atau 2 halaman web, tapi jika anda mempunyai 100, atau 1000 halaman web. Pemakaian HTML tentunya menjadi sangat tidak praktis.

Untuk blog tersendiri, pemakaian CSS adalah sebuah dasar dari tampilan blog yang profesional. Tanpa CSS maka akan sangat sulit untuk mendukung tampilan blog, dimulai dari tampilan background, header, sidebar, footer, atau jenis serta warna tulisan.

Apa Keuntungannya?
Bahasa CSS / CSS programming adalah bahasa web yang paling ringan dan mudah di baca oleh Search engine. Karena bahasa CSS yang ringan maka loading blog pun akan semakin cepat, dan jika dilihat dari kecepatan internet di Indonesia, tentunya CSS menjadi pilihan yang sangat tepat. Selain itu Google telah menyampaikan akan memberikan bonus posisi search pada blog / web yang ringan dan tentunya tampil secara profesional. 

Sebelum kita ke tahap selanjutnya, sebaiknya kamu membaca Tutorial HTML Untuk Pemula, karena  jika kamu tidak mengerti HTML maka kamu tidak akan bisa CSS. Oh, yah satu lagi yang perlu diingat saya akan mengajarkan CSS untuk blog, walaupun dasarnya sama dengan web, tapi saya khususkan untuk blog.

Dasar- Dasar CSS

Sama dengan HTML yang mempunyai tatanan dan cara penulisan, CSS pun begitu.

Dasar Aturan Pertama

Dalam CSS terdapat 2 bagian yang terpisah yaitu selector dan dan deklarasi. Bisa dilihat yang tunjuk dengan tanda panah biru adalah selector dan tanda panah merah adalah deklarasi. Perlu di ingat juga setiap deklarasi harus di awali dengan tanda kurung kurawal { dan harus di akhiri pula dengan tanda kurung kurawal }.

Dasar Aturan Kedua

Di dalam deklarasi masih terdapat 2 bagian terpisah yaitu property dan value, dalam hal ini anda bisa melihat yang ditunjuk dengan tanda panah hijau adalah property dan yang ditunjuk dengan tanda panah hitam adalah value. 

Dasar Aturan Ketiga
Pada CSS, jika jumlah property lebih dari satu maka harus diakhiri dengan tanda ";" (Tidak termasuk tanda petik) dan jika terdapat property yang lebih dari 1 harus dipisahkan dengan tanda , Cth penulisan CSS yang benar :

Bisa dilihat setiap property dipisah dengan ";" jadi fungsinya adalah sebagai pemisah statment agar tidak tercampur (kacau), dan coba dilihat juga bahwa property font-family mempunyai value lebih dari satu yaitu verdana, georgia, arial;, sehingga harus dipisahkan dengan tanda coma "," (Tidak termasuk tanda petik).

Dasar Pemasangan CSS Dengan HTML

Telah saya katakan bahwa CSS dan HTML tidak terpisahkan, oleh karena itu penulisan CSS tidak akan jauh - jauh dari HTML.

Inside Head Code
Maksudnya adalah CSS berada Di antara kode <b:skin><![CDATA[/* dan ]]></b:skin>, sebagai contoh silahkan anda lihat contoh berikut :

Outside Head Code

Maksudnya adalah CSS berada di antara kode ]]></b:skin> dan </head>, seperti contoh di bawah ini :

Biasanya kode seperti css outside harus dituliskan di antara <style type='text/css'> dan </style>.

Untuk sekarang saya sarankan anda mengerti berbagai dasar aturan CSS, karena pada nantinya saya akan membahasnya lebih lanjut dari kode - kode yang lazim dipakai maupun , penulisan CSS yang lebih baik lagi.

Ohh iya, saya ingatkan sekali lagi anda harus membaca Tutorial Belajar HTML Dasardan kuasilah dasar - dasar HTML, maka menguasai CSS pun hanya seperti membalikan telapak tangan. 

Mengganti Judul Blog Dengan Logo Sendiri

Sudah sebulan sejak terakhir kali saya mengupadate blog ini, entah kenapa ternyata blog ini masih cukup ramai dikunjungi oleh para pembaca yang budiman. Ternyata banyak yang meminta saya membuat tutorial semacam ini, oleh karena itu saya membuat Tutorial tentang " Cara mengganti judul blog dengan logo sendiri ". Baiklah tanpa berlama - lama lagi langsung saja kita baca tutorial di bawah ini

Langkah Pertama / First Step

• Seperti biasa silahkan ke tata letak - edit html.
• Silahkan klik download template lengkap untuk menanggulangi kesalahan pada pengeditan template.

Langkah Kedua / Second Step

• Cari kode yang serupa / mirip kode yang berwarna biru di bawah ini yang biasanya terletak di atas kode header.

<div id='nama'> 
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul blog (Header)' type='Header'/>
</b:section>
</div>

• Lalu cari kode css, Cth: nama dari kode html tersebut dengan menekan ctrl+F, maka akan keluar kotak.
• Ketikan #nama ( ingat tambahkan # di depan nama ).
• Maka anda akan menemukan kode yang mirip seperti di bawah ini. 

#nama {
width:450px;
height:150px;
float:left;
}

• Lalu tambahkan kode css berikut sehingga menjadi :

#nama {
width:450px;
height:150px;
float:left;

background:url(alamat url gambar/ logo yang ingin anda masukkan) no-repeat;padding:20px 20px 0 0

}

• Lalu save

Keterangan :
Kode yang harus anda temukan tidaklah harus sama mirip seperti width 450px, height 150px, karena di setiap blog mempunyai ukuran masing - masing yang tentunya berbeda - beda. 

Langkah Ketiga / Third Step

• Silahkan copy kode di bawah ini 

#hidd{
display:none;
} 

• Letakkan kode tersebut tepat di atas kode ]]></b:skin>
• Lalu save.

Langkah Keempat / Fourth Step

• Cari kode seperti di bawah ini :

<div id='nama'> 
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul blog (Header)' type='Header'/>
</b:section>
</div>

• Lalu masukkan kode html berikut hingga menjadi 

<div id='nama'>  

<div id='hidd'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul blog (Header)' type='Header'/>
</b:section>
</div> 
</div> 

• Lalu save.

Keterangan :
Pemasangan kode merah di dalam kode biru bertujuan untuk membuat judul asli tidak terlihat, sehingga pada nantinya logo kita lah yang terlihat. 

Jika anda tak mau bersusah payah mengganti judul blog dengan css anda bisa menggunakan cara mudah lainnya yang saya tuliskan di artikel ini, akan tetapi biasanya hasilnya tidak semaksimal dengan menggunakan kode CSS, dan saran saya terkhir adalah baca dan ikutilah semuanya, tidak usah anda pikir pusing - pusing karena itu akan mengacaukan kosenstrasi anda dalam membaca tutorial ini.