Membuat Text Area/Scroll Box di Blog

Saya buat posting ini soalnya ada temen blogger yang mau tau tips gimana cara membuat text area/scroll box. Sebelumnya apa itu text area? Text area adalah tempat untuk menaruh tulisan yang ingin dilihat pengunjung. Text area yang ini adalah versi yang berbeda, bukan berfungsi untuk memperlihatkan kode HTML. Sedangkan scroll box adalah scroll area yang isi text. Ok, ini dia caranya:

 Kopi kode berikut:

=======================================

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 550px;
height: 80px;
text-align: center; ">
ISI  TEKS YG ANDA INGINKAN
</div>

=======================================

Info:

- Angka yang diwarnai merah bisa diganti sesuai keinginan, ini berguna untuk mengganti lebar sempitnya text area/scroll box.

-Angka yang diwarnai biru bisa diganti dengan sesuai selera, ini berfungsi untuk mengganti tinggi pendeknya text area/scroll box.

- Angka yang diwarnai kuning bisa diganti sesuai kemauan, ini bertujuan untuk mengganti besar kecilnya garis pinggir text area/scroll box.

- Angka yang diwarnai pink bisa diganti sesuai keperluan, ini bermanfaat untuk mengganti tebal tipisnya garis pinggir text area/scroll box (semakin besar jumlahnya, semakin tipis garis pinggirnya. Bisa2 sampai gak kelihatan garis pinggirnya).

- Sedangkan tulisan center, bisa diganti dengan antara center, left atau right, ini berfungsi untuk membuat text ditengaj, rata kiri atau rata kanan.

Hasilnya akan menjadi =

ISI TEKS YG ANDA INGINKAN

Text area/scroll box ini juga berguna sebagai tempat membuat daftar link. Seperti contoh:

Riznovart
Google
Yahoo
MSN
Facebook
Twitter

Untuk membuat sebuah tulisan berisi alamat link secara manual (Kalau otomatis bisa dipakai dari Blogger, hightlight tulisan yang pengen di kasih link). Contohnya seperti ini, misalnya saya kasih alamat link http://www.riznovart.blogspot.com/. Hasilnya menjadi Riznovart Blog. Jadi ini kode HTML nya: 

================================================

<a href="http://www.riznovart.blogspot.com">Riznovart Blog</a>

================================================

Info:

- Tulisan yang berwarna merah adalah tempat menaruh alamat linknya. Dan harus berisi http:// kalau gak, alamat linknya gak bakal kebaca.

- Tulisan yang berwarna kuning adalah tulisan yang ingin dikasih alamat link alias tulisan yang ingin ditampilkan dengan alamat link yang ingin diberikan.

Sedangkan <br> atau <br/> berfungsi sebagai baris baru, kebanyakan orang bilangnya Enter.

Ok, demikian tips yang saya berikan. Semoga bisa bermanfaat bagi anda.

Membuat Tulisan Berjalan (marquee) di Blog

Mungkin anda pernah mengunjungi sebuah blog atau website yang terdapat tulisan berjalan dan dalam hati anda bertanya, bagaimana cara membuat tulisan berjalan seperti itu yah?

Untuk membuat tulisan berjalan itu sangat mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Kode HTML untuk membuat tulisan berjalan di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :

<marquee>Tulisan disini akan berjalan</marquee>

Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah :

bgcolor="warna" » Untuk mengatur warna background (latar belakang) teks

direction="left/right/up/down" » Mengatur arah gerakan teks

behavior="scroll/slide/alternate" » Untuk mengatur perilaku gerakan

Scroll » teks bergerak berputar

Slide » teks bergerak sekali lalu berhenti

Alternate » teks bergerak dari kiri kekanan lalu balik lagi

title="pesan" » Pesan akan muncul saat mouse berada di atas teks

scrollmount="angka" » mengatur kecepatan geraka, semakin besar angka semakin 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

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :

<marquee align="center" direction="left" height="200" scrollamount="2" width="30%"> marquee dari kanan ke kiri </marquee>

Contoh hasilnya :

marquee dari kanan ke kiri

ganti kata "left" dengan keinginan anda yaitu bisa : right,  up, down .

Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left"><font face="georgia" color="White"><strong><marquee bgcolor="red" width="70%" scrollamount="3" behavior="alternate"> </marquee></strong></font></div>

 

Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()" onmouseout="this.start()" . Dengan kode javascript tersebut, tulisan berjalan akan seketika berhenti apabila pointer mouse komputer pengunjung blog kita mengarah ke tulisan yang berjalan, dan akan berjalan kembali apabila pointer mouse dipindah ke tempat lain.

Contoh kodenya :

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

Contoh kode marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center"> 
<a href="http://riznovart.blogspot.com/2011/10/sejarah-musik-metal.html">SEJARAH MUSIK METAL </a>
<a href="http://riznovart.blogspot.com/2012/03/control-unit.html">CONTROL UNIT </a><br/> 
<a href=" http://riznovart.blogspot.com/2011/10/jenis-komputer-berdasarkan-processor.html/">Jenis2 komputer</a><br/> 
</marquee> 

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center"> 
<a href="http://riznovart.blogspot.com/2011/10/sejarah-musik-metal.html">SEJARAH MUSIK METAL </a>
<a href="http://riznovart.blogspot.com/2012/03/control-unit.html">CONTROL UNIT </a><br/> 
<a href=" http://riznovart.blogspot.com/2011/10/jenis-komputer-berdasarkan-processor.html/">Jenis2 komputer</a><br/> 
</marquee> 

Contoh hasilnya : SEJARAH MUSIK METAL
CONTROL UNIT
Jenis2 komputer
SEJARAH MUSIK METAL
CONTROL UNIT
Jenis2 komputer
Itu adalah beberapa contoh variasi kode marquee yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.

Cara memasang tulisan berjalan di blog

Bila anda bertanya, sesudah membuat kode marquee lalu untuk di pasang di blognya bagaimana? Tentu jawabannya ya terserah anda mau di pasang di mana. Namun, sebagai contoh berikut adalah cara memasang kode marquee di sidebar blogger.

1. Silahkan login ke blogger dengan akun anda.
2. Klik pada nama blog anda.
3. Klik menu Tata Letak
   
4. Klik Tambah Gadget
   
5. Klik pada widget HTML/Javascript
6. Pasanglah kode marquee yang telah anda buat sesuai degan yang Kang Rohman terangkan diatas.
7. Klik tombol Simpan
8. Selesai.

Membuat Spoiler di Blog

Sebagian orang pastinya sudah tahu apa itu spoiler, apalagi kalau sering bermain di forum. Spoiler sudah pasti sering digunakan. Lalu bagaimana kalau mau menerapkan atau membuat spoiler di blog? Sebelumnya kalau ada yang belum tahu apa itu spoiler. saya jelasin singkat saja. Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup. Contohnya bisa dilihat di bawah halaman ini.

Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu. Selain itu juga untuk menghemat tempat, ya karena buka tutup itu (spoiler). Lalu bagaimana cara membuat spoiler di blog? Langsung simak yang berikut ini.

Cara Membuat Spoiler di Blog
1. Login ke Blogger
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler:
=====================================================================

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan teks atau kode script (gambar atau video) di sini

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

=====================================================================
5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup.
6. Klik Publish atau Terbitkan Entri jika sudah selesai.

Contoh:

Cewek mainin burung:

Cara Membuat Blog Mudah dan Gratis di Blogspot

Blogspot atau blogger merupakan aplikasi blog gratis pertama yang pernah ada. Blogspot juga merupakan salah satu layanan google yang gratis untuk membuat blog. Selain itu, blogspot juga memberikan kemudahan bagi para penggunanya dalam menciptakan sebuah blog untuk berbagai keperluan. Dari blog pribadi hingga blog yang dibuat dengan tujuan bisnis sekalipun tetap diakomodasi dengan baik oleh blogspot. Wajar saja jika blogspot merupakan aplikasi blog yang paling banyak digunakan hingga saat ini.

Untuk membuat Blog Gratis di Blogspot, setidaknya dibutuhkan dua tahap hingga bisa menciptakan sebuah blog, yaitu:

• Membuat sebuah akun di blogger atau blogspot.
• Membuat blog itu sendiri di akun blogspot yang sudah dibuat.

Cara membuat Akun Blogspot (Blogger)

1. Silahkan kunjungi halaman www.blogger.com/start?hl=id yang akan menghantarkan Anda kehalaman depan blogger atau blogspot untuk membuat akun terlebih dahulu sebelum bisa membuat Blog Gratis di Blogspot.
2. Pada halaman depan blogspot tersebut ada tiga tempat untuk menuju proses pembuatan akun ataupun blog gratis nantinya. Bisa mengklik daftar pada pojok kanan atas
   
   
   atau dengan mengklik memulai diatas deretan contoh template.
   
   
   Namun dalam tutorial blogspot kali ini, direkomendasikan untuk memulai membuat sebuah blog Gratis di Blogspot melalui kotak masuk email dan password. Untuk itu, pastikan dulu Anda sudah membuat sebuah akun email di gmail.
   
   Jika sudah membuat email di gmail, maka tinggal masukkan alamat email di kolom email dan masukkan password email di tempat yang tersedia. Lalu klik "Masuk".
   
   
3. Maka tampilan selanjutnya akan seperti berikut:

4. Melengkapi isian seperti tertera pada gambar diatas:
   
   • Nama Tampilan: Nama tampilan ini adalah sekaligus sebagai nama Anda sebagai penulis Blog. Pada contoh gambar diatas, nama tampilan Andrean Wildan sekaligus akan menjadi nama akun blog.
   • Jenis Kelamin: Isi dengan jenis kelamin Anda.
   • Penerima Persyaratan: Centang Saya menerima Persyaratan dan Layanan. Jika sudah, klik "Lanjutkan".
5. Hingga tahap ini, pembuatan akun blog gratis di blogspot dengan judul Akun Blog Andrean Wildan sudah selesai dibuat.
   
   
   Namun, jika ada penawaran untuk menyambungkan profil akun blog Anda ke Google+ seperti gambar diatas, maka direkomendasikan untuk melakukan sinkronisasi. Klik "Memulai".
6. Tampilan selanjutnya adalah seperti berikut:
   
   Yang perlu Anda lakukan jika sudah membaca dan memahami pentingnya penyambungan ke profil Google+ adalah dengan mencentang persetujuan peralihan dan klik "Beralih Sekarang Juga".
   
7. Anda diminta untuk memasukkan sandi email di gmail sebagai verifikasi peralihan ke Google+.
   
   
8. Sekarang tampak akun blogspot Anda sudah ada foto profilnya seperti foto profil saat membuat email di Gmail sebelumnya. Foto tersebut akan selalu tampil disetiap layanan google yang kita gunakan dengan menggunakan akun email di gmail yang kita buat.
   
   

Selesai sudah tahap pembuatan akun blogger atau akun blogspot Anda. Selanjutnya mulai memasuki tahap cara membuat blog gratis di blogspot.

Cara Membuat Blog di Blogspot
Setelah Anda memiliki akun di blogspot, berarti sekarang Anda sudah bisa membuat blog di blogspot secara gratis. Hanya dengan menggunakan sebuah akun di blogspot ini, Anda tidak hanya bisa membuat blog gratis sebanyak satu buah, tapi bisa membuat beberapa blog yang kamu suka. Bisa blog personal yang berisi curhatan atau apa kumpulan celoteh Anda hingga blog dengan tema tertentu secam hobby yang Anda suka. Bahkan dalam tingkat lanjut, hanya dengan membuat blog gratis di blogspot, orang bisa berpenghasilan jutaan rupiah perbulan.

Berikut Cara Membuat Blog di Blogspot:

1. Klik "Blog Baru" seperti pada gambar terakhir diatas.
2. Setelah itu Anda akan mendapat tampilan untuk mengisi judul blog, alamat blog dan pilihan template (Tampilan Blog). Pada judul blog, Anda bebas mengisi dengan judul apa saja yang merujuk kepada isi blog Anda nantinya. Bisa blog personal, pendidikan, hobby, tutorial dan lainnya yang sesuai dengan isi yang ingin Anda tulis didalamnya.
   
   Pada pilihan alamat blog, ini perlu juga diperhatikan karena alamat blog inilah yang akan kita bagikan kepada umum agar bisa masuk ke blog kita. Untuk itu, carilah nama alamat blog yang juga sesuai dengan isi dan judul blog kamu. Namun terkatang nama alamat blog ini sudah dimiliki oleh orang lain. Dan jika alamat tersebut sudah ada di internet, maka tampilan akan seperti gambar dibawah saat diisi dengan nama alamat tersebut:
   
   
   Dan jika alamat yang kita masukkan unik atau belum ada di internet, maka tampilannya seperti berikut:
   
   
   Selanjutnya adalah memilih template atau tampilan blog. Dalam contoh ini memilih template "Picture Window". Lalu klik "Buat Blog!"
   
   
3. Blog selesai dibuat. Selanjutnya tinggal mengisi blog tersebut dengan tulisan, gambar, video ataupun lainnya yang Anda inginkan.
   
4. Dan ini tampilan blognya sebelum diisi dengan konten apapun. Baik tulisan, gambar, video atau lainnya.
   

Demikianlah cara membuat blog gratis di blogspot. Selanjutnya kita akan membahas cara membuat postingan di blogspot. Moga bermanfaat and happy blogging!