Z-PLATE.NET : Java Script

Tampilkan postingan dengan label Java Script. Tampilkan semua postingan

Cara Membuat Handscroll Image Di Blog

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillahirrahmnirrahim... sesuai dengan judul diatas yaitu Cara Membuat Handscroll Image Di Blog, sebelum ke tutorial sebaiknya sobat mengetahui apa itu Handscroll, Handscroll kalo di terjemahkan ke dalam bahasa kita (Bahasa Tercinta Indonesia) hand = Tangan sedangkan Scrool = Gulir atau Geser,, kalo inging melihat contohnya coba sobat klik link di di bawah ini.

Contoh HandScroll klik disini

Hand Scrol Image

Untuk membuatnya sangat gampang sekali, sobat tinggal copy vaste kode di bawah ini.

Langkah pertama sobat login ke blogger terus masuk ke area Template terus klik edit HTML

Setelah itu sobat cari kode </head> terus copy kode di bawah ini dan vaste kode tersebut diatas kode </head>

<script src="https://handjava.googlecode.com/svn/tangan.js"></script>
<style>
#scroller1, #scroller2, #scroller3 {
height: 200px;
border: 4px solid white;
padding: 10px;
margin: 0;
float: left;
overflow: auto;
}
#scroller1, #scroller3 {
width: auto;
float: none;
}
#handle {
height: 172px;
width: 50px;
float: left;
}
.box, .box2, #box {
margin: 10px;
float: left;
display: inline;
width: 300px;
height: 150px;
overflow: hidden;
border: 3px solid white;
}
#box {
float: right;
}
.nojs {
color: black;
font-weight: 700;
padding: 20px;
border: 3px solid red;
margin: 10px;
background: white;
text-align: center;
font-size: 1.4em;
}
body.js .nojs { display: none; }
</style>

Langkah selanjutnya sobat cari kode </body> terus copy kode di bawah ini dan vastekan diatas kode </body>

<script>
handScroller({className:'box'});handScroller({className:'box2'},{controls:{className:'box2'}});handScroller(document.getElementById('scroller1'),{styles:{overflow:'hidden'}});var handle=document.createElement('div'),scroller=document.getElementById('scroller2');handle.id='handle';scroller.style.overflow='hidden';scroller.parentNode.insertBefore(handle,scroller.nextSibling);scroller.style.overflow='hidden';scroller.style.width='828px';handScroller(handle,{controls:scroller,mousewheel:'y'});handScroller(document.getElementById('box'));handScroller(document.getElementById('scroller3'),{styles:{overflow:'hidden'}});
</script>

Terus save template sobat, langkah terakhir upload photo sobat terus masukan dalam postingan supaya poto tersebut bisa bergulir dengan mouse, sobat modif sedikit script image nya dengan kode di bawah ini.
<div class="box">
<img alt="An image" src=url-gambar-sobat.jpg" />
</div>

Oke deh... saya rasa postingan pada kesempatan ini di cukupkan sampai disni semoga berhasil, Good Luck Happy Blogging

Computer Internet Java Script TAG Tutorial Blog

Cara Menyisipkan Formulir Google Doc di Blog

Z-PLATE at 13.37.00 0

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bimillahirrahmanirrahim.... dalam postingan terdahulu saya telah membahas Cara Membuat Formulir Registrasi di Google Doc, pada kesempatan ini saya akan posting tentang Cara Menyisipkan Formulir Google Doc di Blog.

Jika sobat belum tau cara membuat formulir di google doc, sobat bisa baca baca pada artikel yang berjudul Cara Membuat Formulir Registrasi di Google Doc, jika formulir sobat sudah siap di online kan sekarang saatnya sobat menyisipkan formulir tersebut pada blog atau web sobat, cara menyisipkannya pun sangat gampang.

Langkah pertama untuk menyisipkan formulir ke dalam blog yaitu sobat harus login dulu ke google doc.

Setelah sobat login, langkah selanjutnya pilih formulir/form yang akan sobat sisipkan.

seperti contoh/gambar di bawah saya akan menyipskan Formulir yang bernama test, setelah formulir tebuka terus geser kursor sobat ke bawah, terus klik tombol kirim yang berada di bawah.

Cara menyisipkan Formulir di Blog

Setelah di kirim nanti akan muncul tampilan seperti di bawah ini, terus soabt pilih tombol sematkan

pilih tombol sematkan

Setelah itu akan muncul script HTML terus sobat copy kode nya, jika sobat ingin menyesuaikan ukurannya dengan ukuran blog. sobat bisa ganti dulu ukuran lebar dan tingginya pada kotak di bawah.

Setelah itu, buka blog sobat dan buat page / postingan baru terus pastekan atau Ctrl + V script yang tadi di copy.

Oke saya rasa postingan tentang Cara Menyisipkan Formulir Google Doc di Blog saya cukupkan sampai disni saja, semoga bermanfaat, Good Luck Happy Blogging

Internet Java Script PHP TAG

String To MD5 Generator Online

Z-PLATE at 21.47.00 0

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillahirrahmanirrahim........rasanya sudah lama sekali saya tidak update blog, dikarenakan banyak sekali sesuatu yang harus di selesaikan...hehe kaya orang sibuk aja.

Oke sobat blogger semua pada postingan ini sesuai dengan judul yaitu MD5 Generator Online, kenapa saya ingin membahas ini, karena beberapa hari kebelakang saya di pusingkan dengan yang namanya MD5 Generator sampai lupa tidur lupa makan..hehe.

Oke deh jika sobat lagi mencari MD5 Generator, saya rasa situs-situs di bawah ini bisa sobat coba.
1 . MD5 Hash Generator Miracle

MD5 Hash Generator Miracle

2.MD5 Dot Net

MD5 Generator Dot Net

3. Online MD5 Generator

MD5 Generator Online

4. MD5 Hash Generator

MD5 Hash Generator

5. MD5 Function Generator

MD5 Function Generator

6. MD5 Generator - Calculate MD5 for the typed string.

MD5 Generator - Calculate MD5 for the typed string

Sebenarnya masih banyak sekali MD5 Generator Online dan aplikasi untuk genrate MD5 namun pada kesempatan ini saya cuma bisa sampaikan segitu saja, semoga bermanfaat, Good Luck Happy Blogging

Design Java Script TAG Tutorial Blog

Cara Mengganti Warna Background Dengan Tombol

Z-PLATE at 09.45.00 1

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Bismillah... di hari minggu yang cerah ini semoga sobat blogger masih pada cemangat he he.. oke pada kesempatan ini saya akan tulis sedikit tentang cara mengganti warna Background Blogger sehingga para pengunjung bebas memilih warna sesuai dengan yang mereka inginkan.

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

CSS Design Java Script TAG

Cara Membuat According Dengan CSS dan JQuery

Z-PLATE at 08.32.00 2

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

According Menu

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

Terus seperti apa Menu According itu? saya kuang paham dan kurang tau definisi according itu seperti apa, jika sobat penasaran dengan arti dan makna According silahkan sobat cari di mesin pencari misalkan Google,Yahoo,Bing, dan lainnya.

Sekarang kita lanjut saja ke TKP jika sobat tertarik dengan menu according (klik untuk melihat contoh According) ini, silahkan sobat ikuti dan bisa di copy paste, he he.

Script CSS According

<style type='text/css'>
.container {
    width: 500px;
    margin: 0 auto;
}
h1 {
    font: 4em normal Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    padding: 20px 0;
    color: #aaa;
}
h1 small{
    font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 0.5em;
    display: block;}
h2.acc_trigger {
    padding: 0;    margin: 0 0 5px 0;
    height: 46px;    line-height: 46px;
    width: 500px;
    font-size: 2em;
    font-weight: normal;
    float: left;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-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);
}
h2.acc_trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0 10px 0 10px;
}
h2.acc_trigger a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-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);
}
h2.active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
cursor: pointer;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-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);
}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
text-decoration: none;
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);
}
.acc_container .block {
    padding: 20px;
}
.acc_container .block p {
    padding: 5px 0;
    margin: 5px 0;
}
.acc_container h3 {
    font: 1.5em normal Georgia, "Times New Roman", Times, serif;
    margin: 0 0 10px;
    padding: 0 0 5px 0;
    border-bottom: 1px dashed #ccc;
}
</style>

JavaScript According

<script type='text/javascript'>
$(document).ready(function(){

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
});

});
</script>

Terus kita gunakan Script Jquery kita cukup panggil saja dengan secript seperti di bawah

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Jika sobat sudah punya hosting sendiri silahkan sobat donwload Script Jquery nya di disini dan masukan dalam server hosting sobat.

Langkah terakhir cara penerpan di tag HTML sebagai contoh saya menggunakan 5 tab According

<div class="container">
    <h2 class="acc_trigger"><a href="#">TAB 1</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 1</h3>
            <p>isi Tab 1 </p>
        </div>
    </div>
        <h2 class="acc_trigger"><a href="#">TAB 2</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 2</h3>
            <p>isi Tab 2 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 3</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB 3</h3>
            <p>isi Tab 3 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 4</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB4</h3>
                <p>isi Tab 4 </p>
        </div>
    </div>
    <h2 class="acc_trigger"><a href="#">TAB 5</a></h2>
    <div class="acc_container">
        <div class="block">
            <h3>TAB5</h3>
                <p>isi Tab 5 </p>
        </div>
    </div>
</div>

Nah munkin itu sedikit info tentang cara membuat menu according jika sobat mau menerapkan dalam blogger sobat tinggal copy Code JavaScriptnya dan Code CSS dan masukan di bawah tag <head> atau di atas tag </head>, terus sobat tinggal sisipkan Code HTML nya di dalam tag <body> atau sobat tinggal masukan di dalam Gadget HTML/JavaScript. Terakhir Good Luck Happy Blogging.

Java Script TAG Tutorial Blog

Cara Membuat Auto Select Di Textarea

Z-PLATE at 20.52.00 1

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Auto Select Text Area

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

contoh Text area auto select

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

Java Script TAG

Show Hide Content Dengan JavaScript

Z-PLATE at 15.27.00 5

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Show Hide JavaScript

Bismillah... Pada kesempatan ini saya akan tulis tentang cara menyembunyikan dan menampilkan konten dengan menggunakan JavaScript atau istilah lainnya show hide conten. sobat mungkin pernah melihat dalam blog tetangga tentang konten yang disembunyikan dan ketika di klik akan muncul, jika sobat ingin mencoba dan menerapakannya ke dalam blog, sobat tinggal ikuti saja tutorial blog pada postingan ini.

Untuk membuat show hide conten pertama sobat login ke blogger.
Setelah masuk sobat masuk ke area Design/Rancangan Blog
Langkah selanjutnya sobat masuk ke area Edit HTML
Terus sobat cari kode </head> jika tidak ditemukan sobat centang Expand Widget
Setelah itu sobat copi code di bawah dan letakan di atas tag </head>

<script language="javascript" type="text/javascript">
function showHide(shID) {
   if (document.getElementById(shID)) {
      if (document.getElementById(shID+'-tampil').style.display != 'none') {
         document.getElementById(shID+'-tampil').style.display = 'none';
         document.getElementById(shID).style.display = 'block';
      }
      else {
         document.getElementById(shID+'-tampil').style.display = 'inline';
         document.getElementById(shID).style.display = 'none';
      }
   }
}
</script>
<style type="text/css">
.buttonshow {
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 10px/100% Arial, Helvetica, sans-serif;
    padding: .2em 2em .5em;
    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);
}
.buttonshow:hover {
    text-decoration: none;
}
.buttonshow :active {
    position: relative;
    top: 1px;
}

.red {
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
background: #b61318;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
</style>

Terus save Template Sobat untuk memakai show hide dalam postingan sobat tinggal copykan script di bawah ini dalam postingan sobat

<a href="#" id="lutfie-tampil" class="buttonshow red" onclick="showHide('lutfie');return false;">Tampil</a></p>
<div id="lutfie" class="more" style="display:none">
<a href="#" id="lutfie-tampil" class="buttonshow red" onclick="showHide('lutfie');return false;">Sembunyikan</a></br>
CONTEN YANG DI SHOW HIDE
</div>

Untuk contoh silahkan sobat lihat di blog ini , jangan lupa masukan konten sobat dalam tag div seperti script di atas, sobat tinggal ganti konten yang berwana merah dengan konten yang sobat miliki, untuk mengganti style buttonnya silahkan sobat baca lagi disini (Style Design Button ), demikian tutorial cara membuat show hide di blogspot, semoga berhasil, Good Luck Happy Blogging

Java Script TAG Tutorial Blog

Cara Membuat Readmore Dengan Thumbail

Z-PLATE at 16.42.00 7

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Cara Membuat Readmore Dengan Thumbail gambar

Readmore Otomatis

Bismillah.. setelah saya sharing tetang cara membuat button sexy social bookmark sekarang kita beranjak akan membahas tutorial cara membuat readmore otomatis dengan Thumabil gambar. cara membuat readmore di blogspot sebenarnya sangat mudah, sobat tidak perlu pakai JavaScript atau CSS lain, sobat tinggal gunakan saja pasilitas yang ada dalam postingan blogspot, sobat tinggal menggunakan tool insert jum break lihat gambar di bawah.

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 = "no-float" ; 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='#faa51a', endColorstr='#f47a20');
}
.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='#f88e11', endColorstr='#f06015');
}
.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='#f47a20', endColorstr='#faa51a');
}
</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 != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='button orange2' expr:href='data:post.url'>Read More</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'><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.

Java Script TAG Tutorial Blog

Cara Melindungi Postingan Dari Kejahatan Coppaser

Z-PLATE at 15.55.00 10

Z-PLATE.NET Tutorial Blogspot Wordpress, Tips anda Trick Seo, Busines Online,Design Template Blogspot, Emis Madrasah,BIOUN, Internet

Copy Paste

Di sore yang cerah ini saya akan mencoba memposting sebuah artikel yang mungkin berguna bagi para blogger yang suka kreatif dalam membuat artikel dalam artian bukan seorang blogger copy (CTR + C) dan (CTR + V). mungkin sudah banyak sekali para blogger yang merasa kerugian akibat artikel nya di jiplak dan di publish di blog orang lain tanpa seijin yang yang punya.

Oke! jika anda merasa kerugian dan merasa jengkel terhadap orang yang sudah mengambil artikel anda tanpa ijin.iya saya pahami itu. kita cape cape nulis dan berfikir eh orang lain dengan seenaknya tinggal comot, itu sih emang wajar namanya juga manusia berbeda beda, ada yang mau gampang aja dan ada yang mau bekerja keras dulu.. dan saya acungkan jempol bagi mereka yang suka berkerja keras.

Insya allah pada psotingan Cara Melindungi Postingan Dari Kejahatan Coppaser saya akan memberikan solusi sedikit mudah mudahan bermanfaat. langsung saja yuk! sebenarnya ada beberapa cara untuk melindungi artikel kita dari kejahatan Copy Vaste,

Cara pertama mungkin para blogger sudah banyak yang tau yaitu dengan memasang Java Script di blog kita. jika anda berminat dengan memasang java script ini silahkan anda teruskan untuk membacanya jika tidak lewat saja. he he. langkah pertama anda login ke blogger terus klik Edit HMTL lalu centang Expand Widget lalu anda cari KodeUntuk mempermudah pencarian tekan CTRL+F

</head>

Setelah ketemu kode tersebut anda anda copy script di bawah ini dan simpan tepat di atas kode

</head>

<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
<script language='JavaScript'>curPage=1;
document.oncontextmenu = function(){return false}
if(document.layers) {
window.captureEvents(Event.MOUSEDOWN);
window.onmousedown = function(e){
if(e.target==document)return false;
}
}
else {
document.onmousedown = function(){return false}
}
</script>

Langkah terakhir anda Klik Save. jika anda rekan rekan tidaka mau ribet anda tinggal pasang di gadget dan pilih HTM/Java Script lalu masukan kode di atas. script diatas adalah untuk mematikan / menonaktifkan Seleksi Area Teks..

Mungkin di atas cara yang kesatu. untuk cara yang kedua sama juga memaki java scrift namun beda fungsi untuk java script di bawah ini berfungsi untuk mematikan klik kanan (disable klik kana pada mouse) cara memasangnya seperti diatas

<script language=JavaScript>

</script>

Oke sudah paham! he he namun namanya juga keamanan pasti tidak seaman mungkin, ada kelemahan dan ada kelebihan, jika seorang copaser itu ulet dan pinter dia bisa saja mematikan java script di browsernya sehingga java script yang kita pasang di blog kita tidak berfungsi sama sekali dan dia dengan mudah copy vaste blog kita.

Cara berikutnya untuk mengamankan artikel kita dari para blogger copy paste anda coba daftarkan blog anda ke alamat Tynt Dot Com situs ini berfungsi untuk meningkatkan pencarian anda dan menjaga pengguna lama dan mengukur keterlibatan pengguna dengan memanfaatkan Copy Paste.. jadi jika artikel anda di copas oleh orang lain situs ini akan tau siapa yang pertama membuat artikel.. he eh kalo tidak salah silahkan anda cari ke dunia googling itu fungsi situs ini.

Cara terakhir mungkin anda bisa kreatif sendiri dengan menyispkan sedikit secript di setiap postingan. maksudnya gimana?? bingun?? sama aku juga bingung.. he he. just kidding.

Cara ini anda bisa lakukan dan mudah caranya anda lihat script di bawah ini.

<div style='visibility:hidden;display: none;'>
<a href='urlpostingan'>judulpostingan</a>
</div>

Masukan script di atas ini ke dalam potingan urlpostingan adalah alamat postingan anda dan Judul postingan adalah judul postingan anda, script diaatas anda sipan di tengah tengah postingan anda. sekilas mereka tidak akan sadar bahwa mereka telah mebuat backlink ke blog anda. karena dengan memakai script di atas mereka tidak akan melihat kecuali dengan di tampilkan source cede blog anda. oke keterangan script di atas kalo tidak salah

<div style='visibility:hidden;display: none;'> adalah script untuk menyembunyikan

<a href='urlpostingan'>judulpostingan</a> untuk nge link ke blog anda

Munkin sekian dulu karena sudah sore saya mau jalan jalan dulu sobat. he he semoga artikel ini bermanfaat dan memberi kenyamanan untuk anda khusunya dari Blogger Copy Paste

Pages

Axact Blogger Template

Cara Membuat Handscroll Image Di Blog

Cara Menyisipkan Formulir Google Doc di Blog

String To MD5 Generator Online

Cara Mengganti Warna Background Dengan Tombol

Cara Membuat According Dengan CSS dan JQuery

Cara Membuat Auto Select Di Textarea

Show Hide Content Dengan JavaScript

Cara Membuat Readmore Dengan Thumbail

Cara Melindungi Postingan Dari Kejahatan Coppaser

Recent Posts

Popular Posts

Random Post

Blog Archive

Labels

About

Pages