-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet
Tampilkan postingan dengan label text area. Tampilkan semua postingan
Tampilkan postingan dengan label text area. Tampilkan semua postingan

Membuat Textarea dengan tampilan menarik

Demonya bisa dilhat disini

    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :

/* Textarea CSS#
----------------------------------------------- */
textarea.css3area {
background:-moz-linear-gradient(left, #051547, #253dee, #051547, #253dee, #051547);
border: 0px solid transparent;outline: none;
border: 5px solid;
border-color: #051547 #999 #999 #051547;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;
-moz-box-shadow:
-1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;-webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 10px #555;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
padding: 5px 5px 2px;
margin: 20px 10px;-o-transition: all 1s ease-out;
height:200px;
width: auto;
margin-right: 5px;
color: #fff;
}
textarea.css3area:hover {
background:-moz-linear-gradient(left, #253dee, #051547, #253dee, #051547, #253dee);
border-color: #999 #888 #888 #999;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
text-shadow: 1px 1px 1px #aaa;
color: #fff;
box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
-moz-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
-webkit-box-shadow: -1px -1px 1px #533801, 1px 1px 1px #533801, 1px 1px 20px #222;
height:200px;
width: auto;

}

Untuk cara memanggilnya :

<textarea class="css3area" cols="60" row="90">Masukkan teks nya disini kaw an.........Masukkan teks nya disini kawan.........Masukkan teks nya disini kawan.........Masukkan teks nya disini... </textarea>
Read More Sabtu, 03 Desember 2011 0 komentar

Membuat Random Post Berjalan

membuat random post berjalan
Masih ingat? dulu kita sudah belajar membuat recent post yang berjalan layaknya headline atau running teks. Kali ini kita akan belajar membuat seperti itu tapi bukan recent post (tulisan terbaru) tapi random post. Judul tulisan (postingan) secara random akan ditampilkan dengan format running teks, bukan itu saja juga akan ditampilkan jumlah komentar yang ada pada postingan itu.

Dengan memasang Random Post berjalan ini manfaatnya adalah untuk meningkatkan page view blog karena tulisan-tulisan yang sudah agak lama yang kita posting dapat diklik lagi dan dibaca. Selain itu juga tidak banyak menyita banyak tempat. Langsung saja kita praktekan bersama.

Cara Membuat Random Post Berjalan
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<!-- Alphabetical/chronological Post Title Listing with comment count Start -->
<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="1">');
var i;
for (i = 1; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title + "</a> | ";
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
var pList = "</a>" + "<a href="+ href + '">' + pTitle;
document.write(pList);
document.write(pComment);
document.write('</a></li>');
}
document.write('</marquee>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://loxside.blogspot.com
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json"
type="text/javascript"></script>
<!-- Alphabetical Post Title Listing End -->

5. Ganti http://loxside.blogspot.com dengan URL blogmu sendiri dan 1 adalah kecepatan berjalannya.
6. Simpan jika sudah selesai.
Read More 0 komentar

Membuat Text Area Keren 2

Melanjutkan posting saya sebelumnya tentang Membuat Text Area Keren. Berikut kode masing-masing text area.

1. <textarea cols="30" name="area" rows="2" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: #7FFF00; border: 2px ridge #0000FF; color: black; line-height: 1.5em; padding: 5px;">isi teks atau kode disini</textarea>

2. <textarea cols="30" name="area" rows="2" style="background: #FOF8FF; border: 2px double #ffaf; color: darkgreen; line-height: 1.5em; padding: 5px;">isi teks atau kode disini</textarea>

3. <textarea cols="30" name="area" rows="2" style="background: #A9A9A9; border: 2px dotted #006400; color: darkmagenta; line-height: 1.5em; padding: 5px;">isi teks atau kode disini</textarea>

4. <textarea cols="30" name="area" rows="2" style="background: #FF1493; border: 2px dashed #FFD700; color: lime; line-height: 1.5em; padding: 5px;">isi teks atau kode disini</textarea>

5. <textarea cols="30" name="area" rows="2" style="background: #87CEFA; border: 2px groove #FF0000; color: snow; line-height: 1.5em; padding: 5px;">isi teks atau kode disini</textarea>

6. <textarea cols="30" name="area" rows="2" style="background: #D2B48C; border: 2px inset #008000; color: yellow; line-height: 1.5em; padding: 5px;">isi teks atau kode disini</textarea>

7. <textarea cols="30" name="area" rows="2" style="background: #ADFF2F; border: 2px outset #00008B; color: darkred; line-height: 1.5em; padding: 5px;">isi teks atau kode disini</textarea>

8. <textarea cols="30" name="area" rows="2" style="-moz-border-radius: 10px; background: #FFFF00; border-left: 20px solid #4B0082; border: 1px solid #FF00FF; color: red; line-height: 1.5em; padding: 5px;"> isi teks atau kode disini</textarea>

9. <textarea cols="30" name="area" rows="2" style="-moz-border-radius: 20px; background: #FF69B4; border-bottom: 5px solid #008000; border-left: 4px solid #0000CD; border-right: 4px solid #FFFF00; border-top: 4px solid #FF0000; color: black; line-height: 1.5em; padding: 5px;"> isi teks atau kode disini </textarea>

Semoga Bermanfaat...
Read More 0 komentar