Cara Praktis membuat Scroll di Side Bar

Scroll itu bentuknya seperti di bawah ini teman-teman.
Agak mirip dengan Text are ya teman-teman, coba deh dibandingkan dengan Tex Area.
Tidak jauh beda kan... yang bikin beda tentu isinya toh.
Teman-teman sudah tahu fungsi scroll toh, kalau belum Royyan beri tahu ya...
Scroll itu berfungsi untuk menghemat tempat di Blog teman-teman.

Bagaimana cara membuatnya?

Tenang saja teman-teman, copy paste saja kode HTML di bawah lalu go... go... go...

Pasang di blog teman-teman.

<div style='overflow:auto; width:ancho; height: 200px;'> Kode HTML milik Teman </div>

Bagaimana dengan pemasangannya di blog teman-teman. 

Mudah koq.... seperti biasa ikuti langkah dibawah ini.

Untuk pemasangan Scroll di Side Bar ikuti langkah-langkah sebagai berikut :

1. Masuk ke Blogger.com
2. Klik Blog milik Teman-teman contoh Ar Royyan Dwi Saputra | Anak Sd Belajar Blog.
3. Pilih Menu Tata Letak / Layout
4. Tambah Gadget / Add a Gadget
5. Pilih HTML / JavaSript 
6. Copy Paste kode  HTML Scroll
7. Ganti Tulisan tebal berwarna merah dengan kode HTML milik teman-teman
8. Simpan / Save

Selamat mencoba teman-teman.

More about → Cara Praktis membuat Scroll di Side Bar

Spoiler agar loading lebih Cepat

Bentuk Spoiler seperti ini :

Teman-teman tinggal Klik tombol Klik spoiler diatas, maka isi dalam spoiler akan terbuka.
Fungsi utama spoiler itu sendiri bertujuan mengurangi beban page.
Jadi kalau blog teman-teman berisi foto-foto pribadi dan teman-teman maka penggunaan Spoiler sangatlah cocok.
Pada Spoiler di atas coba teman-teman klik saja.
Teman-teman akan melihat banyak gambar yang Royyan pasang di spoiler diatas.
Untuk mengembalikan seperti semula teman-teman klik lagi tombol klik.
Selamat mencoba.

Kode HTML membuat Spoiler seperti  di bawah ini teman-teman :

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

Masukkan Foto teman-teman disini

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

Salam Hormat Anak SD

More about → Spoiler agar loading lebih Cepat

Teks Area Bersorot untuk Tukeran Link

Kali ini Royyan ingin melanjutkan postingan terdahulu tentang Cara membuat Text Area. Salah satu fungsi Teks Area Bersorot adalah memudahkan pembaca untuk saling Tukeran Link.

Pembaca tinggal klik menu lalu copy paste code Link teman-teman untuk di tempatkan di Blog Pembaca.

Tampilan Teks Area Bersorot untuk Tukeran Link seperti di bawah ini teman-teman. Biasanya sih fasilitas ini di tempatkan di sidebar (maaf Royyan tidak menempatkan di Blog ini, sebab Royyan ingin mempertahankan agar blog ini tampil sederhana atau simple).

<a href="http://soal-matematika-smk.blogspot.com/">Anak SD Belajar Blog</a>

Cara membuat Teks Area Bersorot untuk Tukeran Link seperti diatas, teman-teman tinggal copy paste saja kode HTML di bawah ini.

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Klik terus Copy paste" type="button"> </div><div align="center"></div><p align="center"><textarea style="width: 205px; height: 19px;" name="txt" rows="105" wrap="VIRTUAL" cols="60"><a href="http://soal-matematika-smk.blogspot.com/">Anak SD Belajar Blog</a> /textarea></p></form></div>

Seperti biasa tulisan dengan huruf warna merah ganti dengan milik teman-teman.

Tukeran Link

Silakan mencoba Teks Area Bersorot untuk Tukeran Link seperti diatas ya teman-teman,  semoga berhasil.

More about → Teks Area Bersorot untuk Tukeran Link

Mesin Pencari di Postingan

Blog Tips

Masih seperti biasanya bagi teman-teman yang suka dengan pernak-pernik blog, kali ini Royyan mau posting agar di postingan kita ada Mesin Pencari.

Sepele tapi terkadang alat ini bermanfaat bagi pembaca blog teman-teman.

Nah ini dia kode HTML-nya :

<form action="http://soal-matematika-smk.blogspot.com/search" id="searchform" method="get" name="searchform">
<input id="s" name="q" type="text" value="" /> <input id="searchsubmit" type="submit" value="Cari Produk" /> </form>

Ganti tulisan berwarna merah dengan alamat blog teman-teman.
Fungsi alamat blog teman-teman adalah Pencarian hanya dibatasi pada blog teman-teman

Artikel blog teman-teman.
......................................
......................................
......................................
......................................

Atau teman-teman mau coba kode HTML dibawah ?

<form action="http://soal-matematika-smk.blogspot.com/search" method="get">
<input class="textinput" name="q" size="35" type="text" /> <input class="buttonsubmit" name="submit" type="submit" value="Cari yang Lain?" /></form>

Artikel blog teman-teman.
............................................................
............................................................
............................................................
............................................................

Selamat mencoba teman-teman.

More about → Mesin Pencari di Postingan

Cara Membuat Text Area

Silakan tulis disini :

Bagi teman-teman yang suka dengan pernak-pernik blog, kali ini Royyan mau posting bagaimana caranya Membuat Text Area.

Kalo pengertian text area, saya belum begitu paham.
Tapi bentuknya seperti diatas.

Bagaimana cara membuatnya?

Tenang saja teman-teman, copy paste saja kode HTML di bawah lalu go... go... go...

Pasang di blog teman-teman.

<p align="center"><textarea name="code" rows="7" cols="30"> Seperti biasa ganti dengan tulisan teman-teman</textarea></p>

Selamat mencoba teman-teman.

Cara Membuat Text Area

More about → Cara Membuat Text Area

Teks Berjalan di Blog melalui html di Blogger 2

Pada Postingan terdahulu Royyan sudah membahas tentang Teks Berjalan di Blog melalui html di Blogger 1 dengan Kode HTML sebagai berikut :

1. Kode HTML 1

<marquee align="Top" bgcolor="#FFFFFF" direction="left" height="30" loop="infinite" width="200">
Teks Berjalan di Blog melalui html di Blogger 1
</marquee>

Dengan hasil teks berjalan seperti ini :
Teks Berjalan di Blog melalui html di Blogger 1
Ternyata kode HTML teks berjalan memiliki beberapa variasi teman-teman.
Royyan coba kode HTML yang berbeda dari yang di atas ya,..................

2. Kode HTML 2
Oke teman-teman Royyan coba dengan kode HTML 2 ya.

<b><marquee align="center" direction="left" height="50" scrollamount="7" width="100%">
Teks Berjalan di Blog melalui html di Blogger 2
</marquee>

Hasil-nya seperti ini teman-teman :
Teks Berjalan di Blog melalui html di Blogger 2
3. Kode HTML 3
Sedang kode HTML teks berjalan dari Kiri ke Kanan sebagai berikut :

<MARQUEE align="center" direction="right" height="50" scrollamount="5" width="100%">
Teks Berjalan di Blog melalui html di Blogger 3
</MARQUEE>

Hasil-nya seperti ini teman-teman :
Teks Berjalan di Blog melalui html di Blogger 34. Kode HTML 4
Sedang kode HTML teks dengan latar berwarna Biru sebagai berikut :

<div align="left">
<span georgia="georgia" style="color: white; font-family: face;"><b><marquee behavior="alternate" bgcolor="BLUE" scrollamount="6" width="70%"> 
Teks Berjalan di Blog melalui html di Blogger 4
</marquee></b></span></div>

Teks Berjalan di Blog melalui html di Blogger 4

Selamat Mencoba salah satu kode diatas teman-teman.

More about → Teks Berjalan di Blog melalui html di Blogger 2

Link terbuka Otomatis

Link terbuka Otomatis

Ketika Blogging Royyan mendapati kode HTML tentang tutorial "Membuat link terbuka Otomatis".

Kode HTML-nya begini teman-teman :

<a href="URL blog teman-teman/"onMouseover="window.location=this.href"> Blog teman-teman </a>

Lalu bagaimana menerapkan dipostingan kita?

Seperti biasa caranya begini teman-teman :

1. Ketika Posting teman-teman masuk ke HTML jangan Compose
2. Copy paste kode HTML di bawah ini
3. Ubah Tulisan berwarna merah dengan tulisan teman-teman

<a href="http://soal-matematika-smk.blogspot.com/2012/11/tips-sukses-ujian-di-sekolah.html"onMouseover="window.location=this.href"> Tips Sukses Ujian di Sekolah </a>

Hasilnya sebagai berikut, coba letakkan kursor di Link dibawah ini.

Tips Sukses Ujian di Sekolah

Tapi hati-hati menggunakannya teman-teman, soalnya kalau digunakan secara tidak baik maka pembaca blog teman-teman merasa sebel atau terganggu karena kadang-kadang pembaca tidak mengharapkan link tersebut terbuka.
Selamat mencoba dengan hati-hati ya.....

More about → Link terbuka Otomatis

Kembali ke Halaman Atas

Kalau Blog teman-teman panjang, untuk membantu pembaca blog kita agar mudah kembali ke halaman atas, perlu tombol khusus.

Caranya bagaimana teman-teman ?

Caranya gampang koq.

Teman-teman ikuti langkah-langkah sebagai berikut :

1. Masuk ke Blogger.com
2. Klik Blog milik Teman-teman contoh Ar Royyan Dwi Saputra | Anak Sd Belajar Blog.
3. Pilih Menu Tata Letak / Layout
4. Tambah Gadget / Add a Gadget
5. Pilih HTML / JavaSript
6. Copy Paste kode HTML dibawah 
7. Simpan / Save
8. Jadi deh..........

<a href='#' style='display:scroll;position:fixed;bottom:10px;right:10px;' 

title='Kembali ke Halaman Atas'><img src='http://4.bp.blogspot.com/pup6v3XSXF4/UKEedRrhq5I/AAAAAAAAARo/9HJNmasttlk/

s1600/Kembali+ke+Halaman+Atas.JPG'/></a>

Teman-teman bisa mengganti tulisan yang berwarna merah dengan alamat dari image blog teman-teman.
Selamat mecoba.

Kembali ke Halaman Atas

More about → Kembali ke Halaman Atas

Cara Membuat Kotak Dalam Posting

Teman-teman, saat teman-teman membuat posting kadang-kadang teman-teman ingin menandai bagian tertentu dari posting yang bersifat penting.
Saya punya usul agar bagian tersebut diberi kotak,  agar pembaca mengetahui bahwa yang ada di dalam kotak adalah bagian penting dalam posting.

Seperti ini teman-teman :

Cara Membuat Kotak dalam Posting, untuk menandai bagian artikel yang penting bagi pembaca.
oleh Anak SD Belajar Blog

Caranya bagaimana?
1. Ketika Posting teman-teman masuk ke HTML jangan Compose
2. Copy paste kode HTML di bawah ini
3. Ubah Tulisan berwarna hitam tebal dengan tulisan teman-teman

<div style="border-bottom: #6c7a7d 1px inset; border-left: #6c7a7d 1px inset; border-right: #6c7a7d 1px inset; border-top: #6c7a7d 1px inset; margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span style="color: blue;">Cara Membuat Kotak dalam Posting, untuk menandai bagian artikel yang penting bagi pembaca.</span><br />
<span style="color: blue;"><a href="http://soal-matematika-smk.blogspot.com/" target="_blank">oleh Anak SD Belajar Blog</a></span></div>

Kalau berkenan copy paste seluruh kode HTML, soalnya ada link ke Royyan (he...he...he...)
Kalau tidak, cukup yang berwarna merah dan hitam tebal saja.
Selamat mencoba teman-teman.

Blog Tips

More about → Cara Membuat Kotak Dalam Posting

Pemasangan Scrolling Gadjet with Thumb

Untuk pemasangan Scrolling Gadjet with Thumb ikuti langkah-langkah sebagai berikut :

1. Masuk ke Blogger.com
2. Klik Blog milik Teman-teman contoh Ar Royyan Dwi Saputra | Anak Sd Belajar Blog.
3. Pilih Menu Tata Letak / Layout
4. Tambah Gadget / Add a Gadget
5. Pilih HTML / JavaSript
6. Copy Paste kode Scrolling Gadjet with Thumb yang sudah dibicarakan di postingan terdahulu.
7. Simpan / Save

Kemudian silakan lihat Blog Teman-teman deh .....

Untuk mudahnya saya sertakan gambarnya ya...

1. Masuk ke Blogger.com

2. Klik Blog milik Teman-teman contoh Ar Royyan Dwi Saputra | Anak Sd Belajar Blog.

3. Pilih Menu Tata Letak / Layout

4. Tambah Gadget / Add a Gadget

5. Pilih HTML / JavaSript

6. Copy Paste kode Scrolling Gadjet with Thumb yang sudah dibicarakan di postingan terdahulu

7. Simpan / Save

Selesai deh....

More about → Pemasangan Scrolling Gadjet with Thumb

Scrolling Gadjet with Thumb

Free Image

Senang rasanya kalau ada sesuatu yang free.
Bagi teman-teman yang suka dengan pernak-pernik blog, pasang saja gadget ini (maaf Royyan tidak pasang Gadget ini karena Royyan  suka template yang simple)
Apalagi kalau tinggal Copy paste.
Wuih... mumpung gratis, perlu di manfaatin nih.
Tapi terkadang ada beberapa situs yang bilangnya free tapi tanpa kita sadari kita meng-copy paste backlink ke situs mereka.
Mending kalau dapet link balik, kan jadi teman di dunia Maya.

Kalau Gadjet diatas kodenya seperti ini, Teman-teman tinggal copy paste.


<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>
<script type="text/javascript">
var speed = 3500;
var pause = 5500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
<small>
<a href="http://soal-matematika-smk.blogspot.com/" target="_blank">get this widget here</a></small>

Teman-teman kalau mau memberi Link ke Ar Royyan Dwi Saputra copy paste saja seluruh kode diatas.
Kalau temen-teman ogah memberi link ke Ar Royyan Dwi Saputra copy paste saja kode yang berwarna merah.

Untuk pemasangan Scrolling Gadjet with Thumb silakan klik DISINI.

More about → Scrolling Gadjet with Thumb

Angka 1 sampai 100 Bahasa Inggris

Sekedar berbagi Royyan postingkan Urutan Angka 1 sampai 100 Bahasa Inggris ya,...

Indonesia	Inggris
Satu	One
Dua	Two
Tiga	Three
Empat	Four
Lima	Five
Enam	Six
Tujuh	Seven
Delapan	Eight
Sembilan	Nine
Sepuluh	Ten

Sebelas	Eleven
Dua Belas	Twelve
Tiga Belas	Thirteen
Empat Belas	Fourteen
Lima Belas	Fifteen
Enam Belas	Sixteen
Tujuh Belas	Seventeen
Delapan Belas	Eightteen
Sembilan Belas	Nineteen
Dua Puluh	Twenty

Dua Puluh Satu	Twenty One
Dua Puluh Dua	Twenty Two
Dua Puluh Tiga	Twenty Three
Dua Puluh Empat	Twenty Four
Dua Puluh Lima	Twenty Five
Dua Puluh Enam	Twenty Six
Dua Puluh Tujuh	Twenty Seven
Dua Puluh Delapan	Twenty Eight
Dua Puluh Sembilan	Twenty Nine
Tiga Puluh	Thirty

Tiga Puluh Satu	Thirty One
Tiga Puluh Dua	Thirty Two
Tiga Puluh Tiga	Thirty Three
Tiga Puluh Empat	Thirty Four
Tiga Puluh Lima	Thirty Five
Tiga Puluh Enam	Thirty Six
Tiga Puluh Tujuh	Thirty Seven
Tiga Puluh Delapan	Thirty Eight
Tiga Puluh Sembilan	Thirty Nine
Empat Puluh	Fourty

 Empat Puluh Satu               Fourty One
 dan seterusnya

 Lima Puluh Satu                 Fifty One
 dan seterusnya

 Enam Puluh Satu                Sixty One
 dan seterusnya

 Tujuh Puluh Satu                Seventy One
 dan seterusnya

 Delapan Puluh Satu             Eighty One
 dan seterusnya

 Sembilan Puluh Satu            Ninety One
 dan seterusnya

 Seratus                              One Hundred

Kode HTML untuk membuat Kotak-kotak seperti diatas sebagai berikut :

<table border="5" style="width: 300px;"> 

<tbody>

<tr bgcolor="#f0f0f0"> 

<td align="center"><b>Indonesia</b></td> 

<td align="center"><span style="color: magenta;"><b>Inggris</b></span></td> 

</tr>

<tr>

<td>Satu</td> 

<td><span style="color: magenta;">One</span></td>

</tr>

<tr>

<td>Dua</td> 

<td><span style="color: magenta;">Two</span></td>

</tr>

<tr>

<td>Tiga</td> 

<td><span style="color: magenta;">Three</span></td>

</tr>

<tr>

<td>Empat</td> 

<td><span style="color: magenta;">Four</span></td>

</tr>

<tr>

<td>Lima</td> 

<td><span style="color: magenta;">Five</span></td>

</tr>

<tr>

<td>Enam</td> 

<td><span style="color: magenta;">Six</span></td>

</tr>

<tr>

<td>Tujuh</td> 

<td><span style="color: magenta;">Seven</span></td>

</tr>

<tr>

<td>Delapan</td> 

<td><span style="color: magenta;">Eight</span></td>

</tr>

<tr>

<td>Sembilan</td> 

<td><span style="color: magenta;">Nine</span></td>

</tr>

<tr>

<td>Sepuluh &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td> 

<td><span style="color: magenta;">Ten &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></td>

</tr>

</tbody></table>

Untuk menempatkan di Postingan blog teman-teman langkahnya  sebagai berikut :

Untuk pemasangan Iklan ikuti langkah-langkah sebagai berikut :

1. Masuk ke Blogger.com
2. Klik Blog milik Teman-teman contoh Ar Royyan Dwi Saputra | Anak Sd Belajar Blog.
3. Pilih Menu Tata Letak / Layout
4. Tambah Gadget / Add a Gadget
5. Pilih HTML / JavaSript
6. Copy Paste kode HTML diatas.
7. Simpan / Save

More about → Angka 1 sampai 100 Bahasa Inggris

Kembali dari Link tebuka Otomatis 1

Sudah Royyan bilangin, jadi ke halaman ini deh?

Untuk kembali lagi ya Letakkan Kuror diatas Link INI

More about → Kembali dari Link tebuka Otomatis 1

Kekurangan Facebook

Kalau teman-teman atau Kakak punya account Facebook, cobalah masuk ke Facebook dan amati.

Menurut saya ada tombol yang kurang dari Facebook.
Tombol itu adalah Tidak suka / unlike.
Tidak adil kalau kita hanya diarahkan oleh facebook untuk Suka / Like, Komentar / Comment dan Bagi / Share tanpa adanya pilihan untuk Tidak suka / unlike.
Bagaimana menurut  teman-teman atau Kakak?

Untuk lebih jelasnya lihat tampilan Facebook yang tidak ada tombol Tidak suka / unlike:
Kalaupun ada unlike itu berarti Batal suka....bukan tidak suka.

Ar Royyan Dwi Saputra likes a link.

October 20

Cara Menampilkan Youtube ke Blog | Ar Royyan Dwi Saputra

soal-matematika-smk.blogspot.com

Anak SD Belajar Blog

Unlike ·  · Share

• You like this.
• 

  
  

More about → Kekurangan Facebook