Cara Membuat Kotak Script Keren Di Blog - Assalamualaikum sobat yang lagi belajar ngeblog.... Oke, disini saya akan menjelaskan
cara membuat kotak script dengan menggunakan scroll. Caranya sangat mudah sekali untuk membuat kotak script ini.
Kotak script biasanya digunakan untuk memasukkan kode-kode script di dalam postingan, agar terlihat rapi dan tidak memakan banyak tempat. Kotak script juga bisa diberi warna di bagian backgroundnya, dan juga border yang berbentuk kotak bisa diatur bentuknya. Ada yang berbentuk kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll, dan lain-lainnya. Selain itu dapat pula diberi warna pada bagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya. Kali ini saya akan postingkan dengan lengkap deh :D
Cara Membuat Kotak Script Keren Di Blog
Cara Pertama *
Simak langkah langkahnya berikut ini :
1. Harus login terlebih dahulu ke
Blogger
2. Setelah itu, klik Entri Baru
3. Lalu copy script di bawah ini dan pastekan di HTML
<div style="border: 3px #eeeeee solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 100px; width: 450px;
text-align: left;">
.Ganti Tulisan Ini Dengan Script Yang Akan DiShare.</div>
4. Lalu klik Compose
5.
Ganti tulisan yang berwarna merah dengan kode yang di inginkan
6. Selesai sudah caranya untuk membuat kotak script. Mudah bukan? ^_^
Berikut ada beberapa macam bentuk kotak scriptnya ^_^
tidak scroll
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Anda Di Sini
</div>
tidak scroll
<div style="border: 2px #610B38 dashed; padding: 10px;
background-color:#57AA52; tex>t-align: left;"> Kode Script Anda
Disini</div>
tidak scroll
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
overflow: auto; height: 100px; width: 520px;
text-align: left;">
.kode script disini.</div>
tidak scroll
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;
background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999;
padding: 10px; t-align: left;">
Kode Script Anda
Disini</div>
tidak scroll
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;
background-color: #f3f3f3; border-left: 5px solid #2288dd;
border-radius: 10px; padding: 10px; t-align: left;">Kode Script Anda
Disini</div>
tidak scroll
<div style="border: 3px #5f200e double; padding: 10px;
background-color: #82CAFA; text-align: left;"> Kode Script Anda
Disini</div>
tidak scroll
<div style="border: 2px #1B1A76 dotted; padding: 10px;
background-color:#c2c2c2; text-align: left;"> Kode Script Anda
Disini</div>
tidak scroll
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;
background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff;
padding: 10px; t-align: left;">Kode Script Anda
Disini</div>
tidak scroll
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;
background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff;
padding: 10px; t-align: left;">Kode Script Anda
Disini</div>
tidak scroll
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;
background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa;
padding: 10px; t-align: left;">Kode Script Anda
Disini</div>
tidak scroll
<div style="border: 2px #006400 inset; padding: 10px;
background-color: #d5839f; text-align: left;"> Kode Script Anda
Disini</div>
tidak scroll
<div style="border: 3px #FF0000 outset; padding: 10px;
background-color: mediumturquoise; text-align: left;"> Kode Script
Anda Disini…….</div>
versi scroll
<div style="border: 3px #FF0000 outset; padding: 10px; background-color: mediumturquoise;
overflow: auto; height: 50px; width: 450px;
text-align: left;"> Kode Script Anda Disini…….</div>
versi scroll
<div style="border: 3px #000000 solid; padding: 10px;background-color: deeppink;
overflow: auto; height: 50px; width: 450px;
text-align: left;">
.kode script disini.</div>
versi scroll
<div style="border: 3px #1780dd Double; padding: 10px;background-color:crimson;
overflow: auto; height: 50px; width: 450px;
text-align: left;">
.Klik Disini.</div>
versi scroll
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px;
overflow: auto; height: 50px; width: 450px;
t-align: left;">Kode Script Anda Disini</div>
versi keren nih ^_^
untuk versi keren di atas ini.,,. di bawah ini kodenya
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
<textarea cols="20" name="txt" rows="4" style="height: 100px; width: 200px;" wrap="VIRTUAL">masukkan script anda disini</textarea></div>
Keterangan penting :
1. Anda bisa mengatur tinggi dan lebar kolomnya ~>> height adalah tinggi kolom ~>> width adalah lebar kolom . , . , . ,
2. Anda bisa mengganti warna background
kotak scriptnya ~>>
background-color #000000 ~>> #000000 itu adalah kode warna,,,, anda bisa menggantinya kog ^_^ langsung klik saja Kode Warna
Cara Ke Dua **
Ikuti Langkah-langkahnya sebagai berikut:
1. Pilih Template (Jangan Lupa Setiap hendak melakukan Edit Template biasakan melakukan Pencadangan/Backup terlebih dahulu).
2. Masuk Edit HTML.
3. Cari kode ]]></b:skin> dengan menggunakan CTRL+F
4. Letakkan kode di bawah ini di atas kode ]]></b:skin>
.alert {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #CCCCCC;
border: 1px solid #000000;
border-left: 7px solid #000000}
- Untuk selera warna, anda bisa mengganti nya kode yang berwarna biru diatas dengan kode warna yang sobat inginkan... silahkan klik Kode Warna untuk memilih warna yang sobat inginkan.
- Lihat di Pratinjau Template dulu, Apabila tidak error silahkan simpan template anda.
- Agar penulisan Script dibawah ini menjadi mudah dan tidak usah menghapal atau di tulis ulang ketika hendak membuat posting.
<div class="alert">
Letakkan Kode Script Anda disini!
</div>
Selanjutnya ikuti Langkah-langkahnya sebagai berikut :
- Masuk Ke menu Setelan >>> Pos dan Komentar.
- Letakkan Kode diatas tadi di Templat Entri.
Kemudian Klik Simpan Setelan. di pojok kanan atas berwarna orange..
Untuk Mencobanya silahkan Buat Posting Baru maka Script diatas akan selalu muncul pada saat kita buat postingan. dan jika tidak dikehendaki bisa di hapus kok.
Selesai sudah
Cara Membuat Kotak Script... Lengkap kan kode kode nya diatas?? :D
Mudah kan cara membuatnya ? semoga artikel kali ini sangat bermanfaat bagi sobat blogger dirumah ^_^
bila ada kesulitan silahkan anda berkometar di bawah ini . . . tidak usah malu - malu :D malu bertanya sesat di jalan lho /ketawa
Pelajari juga Cara Membuat Anyaman Dari Foto Dengan Photoshop dan Cara Membuat Tagline Foto Facebook Terlihat Menyatu dan juga artikel terkait lainnya di bawah ini...
Sekian dan terima kasih.. Wassalamu'alaikum wr. wb /bye
f G t 
