Addin asep AREA87: 06/13/13

Div Style Kotak Area Blog

Pada postingan ini saya akan berbagi tentang beberapa kode untuk membuat Div Style Kotak Area Blog Langsung saja Sob, berikut kodenya :

Kode :

<div style="border: 2px solid blue;"> <div style="border: 3px solid red;"> <div align="center"> Tulis Text Disini</div> </div> </div>

Hasilnya :

Tulis Text Disini

Kode :

<div style="border: 4px solid yellow;"> <div align="center"> <span style="color: coral;">Tulis Text Disini</span></div> </div>

Hasilnya

Tulis Text Disini
Kode :

<div style="border: 3px double #ff0000; padding: 5px;"><div align="center">Tulis Text Disini</div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border: 3px double #0000ff; padding: 5px;"><div style="border: 2px solid #0077ff; padding: 5px;"><div align="center">Tulis Text Disini</div></div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border-color: lime; border-style: dotted; border-width: 2px; margin: 1px; padding: 1px;"><center>Tulis Text Disini</center></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border-style:inset;border-width:5pt;border-color:black" align="center">Tulis Text Disini</div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="background: #bbddff; border: 5px outset#c0c0c0; margin: 0px; padding: 5px;"><div align="center">Tulis Text Disini</div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border: 2px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 4px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 2px solid#220000;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="background-color: #44ccff;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></div></div></div></div></div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border: 3px solid#2222ff;"><div style="background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/linerbn.gif'); border: 0px; margin: 2px; padding: 2px;"><div style="background-color: #cccccc;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border: 1px solid#001100;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#00aa00;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#001100;">
<div align="center"><span style="color: red;">Tulis Text Disini</span></div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>

Hasilnya :

Tulis Text Disini

Sepertinya segitu dulu Sob,

Silakan dicoba dan semoga berhasil...

Tutorial kali ini saya akan coba berbagi tentang cara Membuat Text Area dengan tombol Highlight All. Dengan menggunakan Highlight All akan lebih memudahkan mengcopy kalimat/kode script yang ada di dalam text area.

Untuk membuatnya cukup mudah, silahkan copy kode dibawah ini :

<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: 80px; width: 180px;" wrap="VIRTUAL">http://addinaseparea87.blogspot.com/" rel="dofollow" target="_blank">Tutorial Blog Addin asep AREA87</textarea></div>
</form>
</div>

Silahkan ganti tulisan yang berwarna biru dengan tulisan/ kode script yang anda inginkan. hasilnya akan seperti dibawah ini :

Sekian penjelasan singkat mengenai cara Membuat Text Area dengan tombol Highlight All.
Semoga bermanfaat . . .

Efek Daun Berjatuhan di Blog

Efek daun jatuh ini juga menambah daya tarik buat pengunjung blog, trik ini menggunakan kode javascript, jadi sedikit memperberat loading blog.
Sebaiknya jangan tambahkan efek ini kalau di blog sobat sudah menggunakan efek video slide, pemutar music mp3 online atau penggunaan script animasi yang lain. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript.

Berikut Cara Membuat Efek Daun Berjatuhan :

Login ke dashboard blogger anda.
Klik Template > Edit HTML.
Lalu klik Proceed dan centang Expand widget template.
Cari kode </head> pada template dengan menggunakan Ctrl+F.
Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head>.
<script src='http://wadah-tutorial.googlecode.com/files/leaf.js' type='text/javascript'/>
Save template anda dan lihat hasilnya.

Segitu aja Sob, selamat mencoba Membuat Efek Daun Berjatuhan di Blog.

Memberi Efek Hujan Salju di Blog

Tutorial singkat kali ini tentang Memberi Efek Hujan Salju di Blog. Efek ini akan sangat bagus jika ditampilkan pada background(latar belakang) blog berwarna gelap. jika background blog sobat berwarna terang atau mungkin putih, maka efek hujan saljunya akan tidak jelas malah mungkin tidak terlihat.

Langsung aja sob, berikut tutorialnya :

Login ke dashboard blogger sobat.
Pilih Layout > Add gadget > HTML/JavaScript.
Letakkan script dibawah ini pada gadget.
<script src='http://wadah-tutorial.googlecode.com/files/snow.js.txt' type="text/javascript"></script>
Save dan lihat hasilnya.

Sekian dulu tutorial tentang Memberi Efek Hujan Salju di Blog.

Memberi Efek Taburan Hati di Blog

Kali ini saya akan berbagi salah satu cara untuk mempercantik blog, yaitu dengan memberi efek taburan hati pada sebuah blog,

Untuk menerapkan efek ini pada blog ada dua cara, pertama lewat edit template, yang kedua lewat gadget, silakan anda pilih cara mana yang menurut anda lebih nyaman.

Cara yang pertama melalui edit template :

Pada dashboard blogger klik Template > Edit html
Beri centang pada Expand Template Widget
Cari kode </body> lalu letakkan script efek di atas kode </body>, berikut script-nya:
<script src='http://wadah-tutorial.googlecode.com/files/hearts.js' type='text/javascript'/>
Terakhir klik Save Template.

Untuk cara kedua melalui Gadget :

Pada dashboard klik Tata Letak > Add a gadget > HTML/JavaScript.
Letakkan script dibawah ini pada gadget.
<script src='http://wadah-tutorial.googlecode.com/files/hearts.js' type='text/javascript'/></script>
Lalu klik Simpan / Save.

Selesai,,, silakan lihat hasilnya pada blog sobat.

Memberi Efek Taburan Bintang di Blog

Kali ini saya akan membahas mengenai cara Memberi Efek Taburan Bintang di Blog. Sebenarnya efek ini sama saja dengan efek taburan hati dan Efek Daun Berjatuhan, hanya tampilannya saja yang berbeda dan juga kode script-nya.

Untuk menerapkan efek ini pada blog bisa melalui edit template, ataupun lewat gadget, silakan anda pilih cara mana yang menurut anda lebih nyaman.