Monday, March 19, 2012

Kearifan yang Terkoyak



Dalam sejarah Jawa, rakyat menyembah Dewa, Ratu dan juga Gusti Allah. Mereka sangat patuh, tawaduq dan  ikhlas. 



Masyarakat saat itu sedikit yang memburu harta. Kebanyakan yang mereka cari adalah "Patitising Tindak atas dasar Titising Hening". Jaman sekarang hanya sedikit manusia yang mau dan mampu mencari patitising tindak berdasar titising hening.

Para pemburu harta dengan cara yang tidak benar disebut begal, kecu, maling atau rampok.

Sekarang hampir semua lapisan masyarakat memburu harta dengan menghalalkan segala macam cara, hanya demi kepentingan individu.
Banyak yang bicara dan membicarakan "KEARIFAN". Tetapi yang ada hanya  "PENIPUAN  dan  KESERAKAHAN".  Apa tidak sadar bahwa semua akan ada balasannya ?

"Apakah ini sejarah dan era baru para durjana?" 
Sehingga arwah para pahlawan malu dan menangis tersedu melihat perilaku manusia jaman sekarang,terutama perilaku para penguasa. 

Sunday, March 18, 2012

Membuat Slide dengan Quake Slide


Membuat gambar Slide dengan Quake Slide :

1. Silahkan Login ke blogger
2. Klik Template
3. Klik Edit HTML
4. Masukan kode css di bawah ini di atas kode ]]></b:skin>
    (Carilah dengan menggunakan Ctrl+F)

.quake-slider-wrapper {
    margin: 0 auto;
    padding: 5px;
    }

.quake-slider {
    width: 800px;
    height: 350px;
    margin: 0;
    position: relative;
    overflow: hidden;
    -moz-box-shadow: 0 0 8px #90989e;
    -webkit-box-shadow: 0 0 8px #90989e;
    box-shadow: 0 0 8px #90989e;
    background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPS9Jj3uGtav4qM7NKhSzkzPrNX2yyaHmYKVVuZdlazv_hNfBs67KQ7hjHlImTQo4qQsVEXwBBMBhszAI9aS6_0CcKiUBHM979ip1YwV7xf6FWeyJknViCbU2q-8_OgkSJ8BTkblAq3M/s1600/loading.gif) no-repeat center
    }

.quake-nav a {
    position: absolute;
    top: 45%;
    text-decoration: none;
    width: 37px;
    height: 38px;
    background-repeat: no-repeat;
    z-index: 10000;
    cursor: pointer;
    text-indent: -9999px;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-select: none
    }

.quake-prev {
    left: 0;
    margin-left: 2px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicj1TgHt5jgozex8fQ6Uvsn436Lezvi_ZgFrXpP9IyKA3nPGJJXWLRBpRhIFgre9uN_1NkSl1jsoJtLRg8DuCdax-GtX8NmAEyg8YCf3Ev46O8S2BIYeJqPnf5uSkJm14nYsvpJXM6kME/s1600/nav.png)
    }

.quake-next {
    right: 0;
    margin-right: 2px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicj1TgHt5jgozex8fQ6Uvsn436Lezvi_ZgFrXpP9IyKA3nPGJJXWLRBpRhIFgre9uN_1NkSl1jsoJtLRg8DuCdax-GtX8NmAEyg8YCf3Ev46O8S2BIYeJqPnf5uSkJm14nYsvpJXM6kME/s1600/nav.png) right
    }
.quake-slider-caption-container-right {
 background-color: #1889F1;
 position: absolute;
 z-index: 101;
 padding: 5px;
 width: 200px;
 right: 0;
 top: 0;
 bottom: 0;
}

.quake-slider-caption-right {
 color: white;
 font: bold 13px/20px Arial,sans-serif;
 width: 200px;
 position: absolute;
 z-index: 102;
 right: 0;
 top: 0;
 bottom: 0;
 padding: 5px;
 margin: 0;
}
.quake-slider-caption-container-bottom {
 background-color: black;
 position: absolute;
 z-index: 101;
 padding: 15px;
 bottom: 0;
 left: 0;
 right: 0;
}

.quake-slider-caption-bottom {
 color: white;
 font: bold 13px/20px Arial,sans-serif;
 position: absolute;
 z-index: 102;
 bottom: 5px;
 padding: 0 10px;
}
.quake-nav-wrapper {
    position: relative;
    z-index: 1000;
    }

.quake-nav-container {
    margin: 10px auto 0;
    }

.quake-nav-control {
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: inline-block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpd4dGb4dVkaaDttrrDBUOI4fqqwfAbeoXE_Cmq1GQaLi2wx8qyoC4JpauQGiKW9anY-gJe50igMuW2lqvvjSeTOQbWr5R0Ts_g1S3FJy_QwTJBt4Y-0-tA2fa1h3s67kyTAgE_fCFV6A/s1600/circle.png) no-repeat;
    text-indent: -99999px;
    border: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-select: none;
    outline: none
    }

.quake-nav-control.active {
    /*background-position: 0px -22px;*/
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin0vXXr7wPtoE-uer3WCHnFyOJbIeuzCn4hRfn04vKogn4PSevbRZvveGoIhNZUIsw80RUFjCuv0o6BeB5KBDnKNgU7MfOeuSvIMmwRkwyJjV7Vorr05xcV9CBWZ4Wjldv7qmBsw0wV4U/s1600/circle-active.png)
    }

.quake-slider-caption a {
    color: Yellow
    }

.quake-link {
    position: absolute;
    z-index: 101
    }

5. Masukan script di bawah ini di atas kode </head>
    (Carilah dengan menggunakan Ctrl+F)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://system-svn.googlecode.com/svn/trunk/quake.slider-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
 $('.quake-slider').quake({
 thumbnails     : false,
 captionOpacity : '0.7',
 hasNextPrev    : true,
 frameWidth     : 800,
 frameHeight    : 350,
 captionsSetup  : [{
 "orientation"  : "bottom",
 "slides"       : [0,3],
 "callback": captionAnimateCallback
 }]
 });
 function captionAnimateCallback(captionWrapper, captionContainer, orientation) {
 captionWrapper.css({
 bottom: '-990px'
 }).stop(true, true).animate({
 bottom: 0
 }, 500);
 captionContainer.css({
 left: '-990px'
 }).stop(true, true).animate({
 left: 0
 }, 500);
 }
 });
</script>
6. Simpan Template
7. Masukan kode html di bawah ini dalam Gadget HTML/Javascript

<div class="quake-slider">
<div class="quake-slider-images">
<a target="_blank" href="#"><img src="url1.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url2.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url3.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url4.jpg" alt="judul gambar" /></a>
</div><!-- Kode penutup quake-slider-images -->
<div class="quake-slider-captions">
<div class="quake-slider-caption">Deskripsi gambar 1</div>
<div class="quake-slider-caption">Deskripsi gambar 2 dengan <a href='#'>Link</a></div>
<div class="quake-slider-caption">Deskripsi gambar 3</div>
<div class="quake-slider-caption">Deskripsi gambar 4</div>
</div><!-- Kode penutup quake-slider-captions -->
</div><!-- Kode penutup quake-slider -->

1. Perhatikan kode width: 800px; Dan height: 350px; pada kode css jika kode tersebut anda ganti maka kode width: 800px; Dan height: 350px; pada kode js juga anda harus ganti jadi harus sesuai.

2. Perhatikan kode "slides" : [0,3], pada kode js, 0,3 artinya gambar nomor 1 dan nomor 4 caption nya atau deskripsi gambarnya akan berada di bawah sedangkan gambar nomor 2 dan 3 akan berada di kanan. gambar di hitung mulai dari 0 jadi gambar nomor 1 adalah 0 dan nomor 2 adalah 1 dan seterusnya, jadi jika anda ingin caption gambar nomor 1,2 dan 3 berada di bawah maka kodenya nya menjadi "slides" : [0,1,2], jadi gambar nomor 4 caption nya akan berada di kanan, bisa juga jika anda ingin acak misalnya slider gambar 1 captionnya di kanan terus gambar 2 captionnya di bawah bisa anda tinggal rubah nomornya saja pada pengaturan "slides".

3. Ukuran gambar, jika anda menggunakan slider ini ukuran gambar harus sama semua, saya ambil contoh dari blog demo, di blog demo tersebut ukuran gambar slidernya 800 x 350 dan semua ukuran gambarnya sama, dan kode width: 800px; Dan height: 350px; pada kode css juga harus sama seperti ukuran gambar pada kode js juga. kenapa seperti itu..? agar slider ini terlihat rapi dan juga keren tentunya, anda pasti gak mau donk kalau slidernya kelihatan berantakan