Selasa, 11 Oktober 2011

MEMBUAT ARTIKEL TERSEMBUNYI MENGGUNAKAN JQUERY 1.8.5

 
Perhatian!!ini bukanlah spoiler dan jangan pernah menyamakan ini dengan spoiler karena ini adalah Jquery 1.8.5 fold yang saya kembangkan dalam artikel. Sebelum membuatnya sobat harus mengetahui beberapa fungsi dalam javascript query di antaranya adalah. .click(function() Ini berfungsi memerintahkan bahwa Jquery akan bekerja jika di klik {direction: "horizontal"}, 10000 ) Ini berfungsi untuk arah pergerakan bisa horizontal maupun vertical semakin besar nilainya semakin lambat pergerakannya Setelah kenalan dengan fungsinya barulah kita mulai membuatnya, berikut ada dua cara yang bisa sobat kembangkan. Saya juga memberikan kode full, jadi sobat hanya perlu memasukannya di dalam postingan. Membuat pergerakan dari bawah dan samping dengan menggunakan Jquery 1.8.5 Di sini sobat akan menyembunyikan artikel sobat dalam button dengan menggunakan Jquery 1.8.5 fold. Kalu berkenan silahkan klik tombol besar di bawah.
Copy kode di bawah kemudian masukan dalam postingan sobat.

KODE 

negrionta

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {$("#ho").click(function(){$(".to").show( "clip",{direction: "vertical"}, 10000 );});$("#so").click(function(){$(".to").hide( "clip",{direction: "horizontal"}, 10000 );});});
</script>
<button id="ho">Ini artikel dari atas</button>
<div class="to">
<b>ISI ARTIKEL DI SINI TERSERAH ENTE MAU ISI APA AJE TAHU ISI JUGA BOLEH, TAPI JANGAN LUPA CABENYA DIKIT AJE SOALNYE CABE LAGI MAHAL SEKARANG.</b>
<button id="so">Tutup artikel ke samping!</button> </div>
<style type="text/css">
.t{display:none;}.to{display:none;}.tar{display:none;}
</style>  
Diposting oleh putramakkah di 05.13 0 komentar

Kamis, 06 Oktober 2011

Show Hidden Content Onmouseover


Untuk membuat CSS3 Full Animated Show Hidden Content Onmouseover cukup mudah karena semua kode tinggal simpan di template, kemudian xHTML-nya gunakan saat posting atau di widget blog, maka segalanya akan selesai dengan teramat cepat.
Berbeda dengan biasanya, dimana show hidden content lebih banya menggunakan "KLIK" untuk membuka dan menutup, kali ini kita akan memanfaatkan mouseover sebagai trigger untuk mengorek apa yang tersembunyi di dalam box. Amat praktis karena hanya perlu sentuhan cursor dan semua bagian serta merta terlihat. Untuk menutup lepas saja cursor dan biarkan box menutup kembali seperti sedia kala.
Demonya sobat bisa lihat yang ada di blog ini !!!

Langkahnya adalah sebagai berikut:
1.Login ke BloGGeR
2.kemudian halaman "Dasboard"
3.Setelah memasuki Page Element, KLIK link "Edit HTML"
4.Back-up Template dengan cara KLIK "Download Full Template (Download Lengkap Template) dan SAVE/Simpan "File Template" di Folder PC.
5.Cari kode ]]></b:skin>, kemudian simpan kode CSS dengan posisi seperti yang terlihat di kode CSS yang tertulis di bawah.
6.Jangan Lupa KLIK "SAVE/Simpan Template".(Simpan Template)

Copy paste KODE CSS di bawah ini:
letakan sebelum kode: ]]></b:skin>

KODE CSS

.box_ontamos {
      height: 45px;
      width: 230px;
      border: 2px solid #000;
      background: #888888;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out;
      padding: 5px 5px;
      margin: 15px auto;
      font: 11px Arial;
      color: #555;
      overflow: hidden;
      box-shadow: 0 1px 15px #1E90FF;
      -moz-box-shadow: 0 1px 15px #1E90FF;
      -webkit-box-shadow: 0 1px 15px #1E90FF; 
      }
.box_ontamos:hover {
      min-height: 250px;
      border: 2px solid #00008B;
      background: #111;
      box-shadow: 0 1px 25px #1E90FF;
      -moz-box-shadow: 0 1px 25px #1E90FF;
      -webkit-box-shadow: 0 1px 25px #1E90FF;
      color: #0000ff; text-shadow: 0 1px 1px #000;
      }
.box_ontamos h3, .jerohan h3 {
      font-size: 14px; 
      font-family: Droid Serif;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      text-shadow: 2px 2px 3px #000; margin: 3px 5px;
      padding: 3px 10px;
      background: #000;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out;
 height: 37px;
      }
.box_ontamos h3:hover {
      box-shadow: 0 1px 8px #000;
      -moz-box-shadow: 0 1px 8px #000;
      -webkit-box-shadow: 0 1px 8px #000; 
      color:#800000;border: 2px solid #0000ff;
      } 
.box_ontamos img.mini, .negri_ontamos img.minianima {
      width: 70px; 
      border: 4px solid #666;
      padding: 3px; 
      border-radius: 6px; 
      -moz-border-radius: 6px; 
      -webkit-border-radius: 6px; 
      float: left; margin: 0 10px 5px 0; 
      background: #222; 
      -o-transition: all 1.5s;
      -moz-transition: all 1.5s;
      -webkit-transition: all 1.5s;
      }
.box_ontamos img.mini:hover, .negri_ontamos img.minianima:hover {
      box-shadow: 1px 1px 15px #000; 
      -moz-box-shadow: 1px 1px 15px #000; 
      -webkit-box-shadow: 1px 1px 15px #000; 
      border: 4px solid #CCCCCC;
      background :#000; 
      -o-transform: scale(1.4); 
      -moz-transform: scale(1.4);
      -webkit-transform: scale(1.4);  
      margin-top: 20px;
      margin-left: 15px;
      }
.box_ontamos img.minianima:hover {
      -o-transform: scale(1.4) rotate(360deg) translate(0px);
      -moz-transform: scale(1.4) rotate(360deg) translate(0px);
      -webkit-transform: scale(1.4) rotate(360deg) translate(0px);
      } 
.ontadalam {
      margin-top: 15px;
      height: 200px;
      overflow: auto; 
      padding: 0 5px;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out; background:#222; 
      }
.ontadalam:hover {
      background: #000000;
      color: #aaa;
      text-shadow: 0 0px 1px #fe0303;
      } 
.ontadalam h3 {
      margin: 20px 0; 
      max-width: 210px;
      background: #eeeeee;
      box-shadow: 0 1px 12px #004400;
      -moz-box-shadow: 0 1px 12px #004400;
      -webkit-box-shadow: 0 1px 12px #004400;  
      }
.ontadalam h3:hover {
      background: #222222;
      border: 1px solid #000;
      border-left: 5px double #00ff00;
      border-right: 5px double #00ff00;
      box-shadow: 0 1px 12px #00ff00;
      -moz-box-shadow: 0 1px 12px #00ff00;
      -webkit-box-shadow: 0 1px 12px #00ff00;  
      }
.ontadalam ul {
      padding: 0; 
      margin: 0;
      list-style: none;
      }
.ontadalam li {
      padding: 0; 
      margin: 0;
      list-style: none; 
      border-bottom:1px dotted #777;
      } 
.ontadalam li a{
      color: #03d8fe;
      padding: 0; 
      margin: 0;
      text-decoration:none; 
      font-size: 12px;
      -o-transition: all 1.5s;
      -moz-transition: all 1.5s;
      -webkit-transition: all 1.5s; 
      }
.ontadalam li a:hover {
      -o-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      color: red; 
      text-shadow: 0 1px 1px #000;
      margin-left: 20px;
      }
Dan letakkan kode di bawah ini tepat di bawah   ]]></b:skin>



<!--[if IE]>
<style type="text/css">
.box_ontamos {height: 30px; }
.box_ontamos h3, .ontadalam h3 {font-size: 13px; }
</style>
<![endif]-->



Copy paste KODE HTML di bawah ini:
letakan di Tambah Gadged

KODE HTML

<div class="box_ontamos">
<h3> Show Hidden </h3>
<div class="ontadalam">
<h3>negrionta</h3>
<img class="mini" src="http://i1125.photobucket.com/albums/l587/negrionta/logo001.png" />Mau gunakan untuk apapun silahkan! Muat gambar? Penuhi dengan berbagai teks.
<h3>New Post</h3>
<ul>
<li><a href="Link-1">Tuliskan disini : Link Title-1</a></li>
<li><a href="Link-2">Tuliskan disini : Link Title-2</a></li>
<li><a href="Link-3">Tuliskan disini : Link Title-3</a></li>
<li><a href="Link-4">Tuliskan disini : Link Title-4</a></li>
<li><a href="Link-5">Tuliskan disini : Link Title-5</a></li>
<li><a href="Link-6">Tuliskan disini : Link Title-6</a></li>
<li><a href="Link-7">Tuliskan disini : Link Title-7</a></li>
<li><a href="Link-8">Tuliskan disini : Link Title-8</a></li>
<li><a href="Link-9">Tuliskan disini : Link Title-9</a></li>
<li><a href="Link-10">Tuliskan disini : Link Title-10</a></li>
</ul>
</div>
</div>
teks
Diposting oleh putramakkah di 22.36 0 komentar
Langganan: Postingan (Atom)
negrionta tutorial © 2011 Template by:
rizkymakkah