Cara Membuat Auto Select Di Textarea

Bismillah... pada postingan terdahulu saya sudah tulis tentang cara membuat text area, jika belum tau cara membuat text area silahkan sobat baca kembali, pada kesempatan ini saya akan share cara membuat text area dengan otomatis di block atau menurut bahasa lain Auto Select Textarea.

Oke Sobat! sekarang kita langsung ke cara membuat auto select di textarea, caranya mudah, sobat buat textarea seperti biasa, suapaya menjadi auto select sobat tinggal tambahkan kode Java Script di bawah ini.
Kode Auto Select
onclick="this.focus();this.select()"
Cara menambahkannya sobat tinggal masukan kode di atas ke dalam kode <textarea > sebagai contoh lihat dibawah ini
<textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly">
   contoh Text area
</textarea>

Contoh hasil dari Kode Textarea diatas

Auto Select Text Area

Oke itu sedikit info tentang autoselcet textarea, semoga bermanfaat dan menambah pengetahuan sobat dalam dunia HTML, Good Luck Happy Blogging

Cara Membuat According Dengan CSS dan JQuery

Bismillah.... di hari yang cerah ini semoga sobat masih semangat dalam dunia blog dan masih ingin berkreasi di dunia online via blog baik menggunakan CMS Blogger ataupun CMS WordPress atau CMS yang lainnya. pada postingan ini saya akan sedikit share cara membuat according dengan menggunakan CSS dan JavaScript JQuery.
Untuk membuat according sekarang ini tidak terlalu sulit karena sobat tinggal contek aja kode kodenya dari blog/web orang lain dan sobat tinggal terapkan di blog kita, bukan ngajarin yang tidak benar tapi daripada kita tidak berkreasi dan tidak bergerak sama sekali he he,mendingan kita ngembangin yang sudah ada, karena untuk berkreasi itu emang cukup sulit dan diperlukan skil yang tinggi.
Oke daripada bicara kesana kemari, mendingan kita langsung ke cara membuat Menu According, untuk membuat menu ini yang diperlukan adalah

    JavaScript Jquery silahkan sobat kunjungi situs Jquery nya di alamat http://jquery.com/
    CSS untuk mendesain tampilan Menu According
    Terakhir adalah Script HTML

Cara Membuat Readmore Dengan Thumbail

Jump Break Blogspot
Oke jika sobat males tiap posting harus klik jump break, itu ada cara lain yaitu dengan memakai java script, oke langsung saja jika sobat ingin memakai readmore otomatis caranya silahkan ikuti tutorial blog kali ini, langkah pertama sobat login ke blogger, langsung sobat menuju ke Edit HTML dalam Tab Design, setelah itu sobat cari kode seperti ini </head> , setelah ketemu sobat masukan CSS dan JavaScript di bawah ini di atas kode </head> .

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://bloggertutorial.googlecode.com/files/readmore%20thumbail.js' type='text/javascript'/>
<style>
.button {
        float:right;
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

.bigrounded {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.medium {
    font-size: 12px;
    padding: .4em 1.5em .42em;
}
.small {
    font-size: 11px;
    padding: .2em 1em .275em;
}
.orange2 {
    color: #fef4e9;
    border: 2px solid white !important;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#faa51a&#39;, endColorstr=&#39;#f47a20&#39;);
}
.orange2:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f88e11&#39;, endColorstr=&#39;#f06015&#39;);
}
.orange2:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f47a20&#39;, endColorstr=&#39;#faa51a&#39;);
}
</style>
Setelah itu sobat simpan/save template blog nya, tidak juga tidak apa apa, langkah selanjutnya sobat cari tag/kode yang mirip atau sama dengan ini tag <data:post.body/> setelah ketemu sobat ganti tag tersebut dengan kode di bawah.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='button orange2' expr:href='data:post.url'>Read More</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
Setelah proses instalasi selesai sobat klik Save dan lihat hasilnya. oke sobat sekian dulu tutorial blog Cara Membuat Readmore Dengan Thumbail Gambar, semoga bermanfaat. Good Luck, Happy Blogging.

Cara Mengganti Warna Background Dengan Tombol

Ganti background Blogspot
Oke sobat kita langsung saja ke TKP, untuk mengganti background blogger dengan warna cukup mudah dan gampang sobat tinggal ikuti saja postingan kali ini. tapi sebelumnya sobat harus mengenal dulu java sscript di bawah ini, biar sobat lebih gampang dalam merubahnya, untuk mengganti background blogger disini saya menggunakan script JavaScript, scriptnya saya ambil dari situs ini http://www.codebelly.com/ jika sobat penasaran silahkan sobat kunjungi situsnya di alamat tadi.
Code JavaSccript untuk merubah background
<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#000000';
function changeBG(whichColor){
document.body.style.background = backColor[whichColor];
}
</script>
Nah scriptnya cuma sedikit dan gampang di hapal, terus cara penerapannya sobat bisa menggunakan seperti di bawah ini
<a haref="#" onclick="javascript:changeBG(0)"></a>
Oke sobat itu kode dasarnya, jika sobat mau kembangkan silahkan kembangkan sendiri, jika sobat mau mencoba script yang di bawah juga tidak apa apa, bebas untuk di copy paste, cara penerapan script di bawah ini cukup mudah dan gampang sobat tinggal tambahkan gadget HTML/JavaScript terus copy code di bawah dan Paste di form HTML/JavaScript. sebelum ke kode sebaiknya sobat lihat contohnya gambarnya,

Warna Untuk Background Blog
Untuk scriptnya silahkan sobat copy di bawah ini.. jika masih ada kekurangan silahkan sobat modif sendiri.
<script language="JavaScript">
var backColor = new Array();
backColor[0] = '#000000';
backColor[1] = '#F0E68C';
backColor[2] = '#E0FFFF';
backColor[3] = '#008000';
backColor[4] = '#FF0000';
backColor[5] = '#87CEFA';
backColor[6] = '#FFDAB9';
backColor[7] = '#FFC0CB';
backColor[8] = '#E6E6FA';
backColor[9] = '#0C10F3';
backColor[10] = '#00FFFF';
backColor[11] = '#0000A0';
backColor[12] = '#800080';
backColor[13] = '#FFFF00';
backColor[14] = '#00FF00';   
backColor[15] = '#FF00FF';
backColor[16] = '#FFFFFF';
backColor[17] = '#C0C0C0';
backColor[18] = '#FFA500';
backColor[19] = '#800000';

function changeBG(whichColor){
document.body.style.background = backColor[whichColor];
}
</script>

<style>
.tomblf {
    display: inline-block;
    zoom: 1;
    vertical-align: baseline;
    margin: 0 1px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px/100% Arial, Helvetica, sans-serif;
    padding: 2em 2em 2em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.tomblf:hover {
   text-decoration: none;
}
.tomblf:active {
    position: relative;
    top: 1px;
}
.reds {
color: #000;
border: solid 1px #000;
background: #000;
}
.kuning {
color: #F0E68C;
border: solid 1px #F0E68C;
background: #F0E68C;
}
.birumuda {
color: #E0FFFF;
border: solid 1px #E0FFFF;
background: #E0FFFF;
}
.hijau {
color: #008000;
border: solid 1px #008000;
background: #008000;
}
.merah {
color: #FF0000;
border: solid 1px #FF0000;
background: #FF0000;
}
.warna5 {
color: #87CEFA;
border: solid 1px #87CEFA;
background: #87CEFA;
}
.warna6 {
color: #FFDAB9;
border: solid 1px #FFDAB9;
background: #FFDAB9;
}
.warna7 {
color: #FFC0CB;
border: solid 1px #FFC0CB;
background: #FFC0CB;
}
.warna8 {
color: #E6E6FA;
border: solid 1px #E6E6FA;
background: #E6E6FA;
}
.warna9 {
color: #0C10F3;
border: solid 1px #0C10F3;
background: #0C10F3;
}
.warna10 {
color: #00FFFF;
border: solid 1px #00FFFF;
background: #00FFFF;
}
.warna11 {
color: #0000A0;
border: solid 1px #0000A0;
background: #0000A0;
}
.warna12 {
color: #800080;
border: solid 1px #800080;
background: #800080;
}
.warna13 {
color: #FFFF00;
border: solid 1px #FFFF00;
background: #FFFF00;
}
.warna14 {
color: #00FF00;
border: solid 1px #00FF00;
background: #00FF00;
}
.warna15 {
color: #FF00FF;
border: solid 1px #FF00FF;
background: #FF00FF;
}
.warna16 {
color: #FFFFFF;
border: solid 1px #FFFFFF;
background: #FFFFFF;
}
.warna17 {
color: #C0C0C0;
border: solid 1px #C0C0C0;
background: #C0C0C0;
}
.warna18 {
color: #FFA500;
border: solid 1px #FFA500;
background: #FFA500;
}
.warna19 {
color: #800000;
border: solid 1px #800000;
background: #800000;
}
.warna20 {
color: #254117;
border: solid 1px #254117;
background: #254117;
margin-left:300px;
}

</style>
<div class="tomblf warna20" align="center">
<a class="tomblf reds" onclick="javascript:changeBG(0)"></a>
<a class="tomblf kuning" onclick="javascript:changeBG(1)"></a>
<a class="tomblf birumuda" onclick="javascript:changeBG(2)"></a>
<a class="tomblf hijau" onclick="javascript:changeBG(3)"></a>
<a class="tomblf merah" onclick="javascript:changeBG(4)"></a>
<br/>
<a class="tomblf warna5" onclick="javascript:changeBG(5)"></a>
<a class="tomblf warna6" onclick="javascript:changeBG(6)"></a>
<a class="tomblf warna7" onclick="javascript:changeBG(7)"></a>
<a class="tomblf warna8" onclick="javascript:changeBG(8)"></a>
<a class="tomblf warna9" onclick="javascript:changeBG(9)"></a>
<br/>
<a class="tomblf warna10" onclick="javascript:changeBG(10)"></a>
<a class="tomblf warna11" onclick="javascript:changeBG(11)"></a>
<a class="tomblf warna12" onclick="javascript:changeBG(12)"></a>
<a class="tomblf warna13" onclick="javascript:changeBG(13)"></a>
<a class="tomblf warna14" onclick="javascript:changeBG(14)"></a>
<br/>
<a class="tomblf warna15" onclick="javascript:changeBG(15)"></a>
<a class="tomblf warna16" onclick="javascript:changeBG(16)"></a>
<a class="tomblf warna17" onclick="javascript:changeBG(17)"></a>
<a class="tomblf warna18" onclick="javascript:changeBG(18)"></a>
<a class="tomblf warna19" onclick="javascript:changeBG(19)"></a>
</div>
Sobat simpan Script ini di gadget HTML/JavaScript. Oke Good Luck Happy Blogging