Membuat Spoiler Dengan Efek Jquery

 

OK langsung aja gan,, ane bagi tutorial cara buatnya.. Pertama masuk dulu ke edit HTML di blog agan.. setelah itu tambahkan script berikut di atas kode</head>

<!-- spoiler script(Josendrobarbara)-->
<script type='text/javascript'>//<![CDATA[    $(function() {        $('blockquote.spoiler').hide(1000).before('<button class="sp-trigger">Lihat Konten</button>');        $('button.sp-trigger').toggle(function() {            $(this).addClass('sp-active').text('Tutup').next().slideDown(1000);        }, function() {            $(this).removeClass('sp-active').text('Lihat Konten').next().slideUp(1000);        });    });//]]></script>
<!-- end script --><!--JQuery [JosendroBarbara]--><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script src='http://reader-download.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>
<!-- end JQuery [JosendroBarbara] -->

Perhatian: Kode JQuery tersebut, jika sudah ada di blog agan.. tidak usah di tambahkan, untuk mencegah terjadinya penggandaan.. hehehe ntarrr template agan error lg.. ooo iyaa jgn lupa backup dulu templatenya yaa siapa tau terjadi error..

Selanjutnya Menambahkan CSS3-nya.. supaya lebihh kreen nihh hehehe...:) taruhh kode CSS berikut di atas kode ]]></b:skin> atau </style>:

/* Spoiler sederhana dengan JQuery (JosendroBarbara)*/blockquote.spoiler {  font:normal 11px/16px Verdana,Arial,Sans-Serif;  color:#666;  border:2px dashed #cec2c2;  background-color:#eee2e2;  padding:18px 20px;  -webkit-box-shadow:inset 0px 0px 7px #222;  -moz-box-shadow:inset 0px 0px 7px #222;  box-shadow:inset 0px 0px 7px #222;  margin:0px 30px 15px;  /*  overflow:auto;  height:250px;  (opsional) */}
button.sp-trigger {  display:block;  outline:none;  cursor:pointer;  margin:20px 0px 10px 30px;  border:none;  background-color:green;  font:bold 11px Verdana,Arial,Sans-Serif;  color:white;  text-shadow:0px 1px 0px rgba(0,0,0,0.4);  padding:5px 10px;  -webkit-border-radius:15px;  -moz-border-radius:15px;  border-radius:15px;  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);  box-shadow:0px 1px 2px rgba(0,0,0,0.4);}
button.sp-trigger.sp-active {background-color:#981515;}

Klik Simpan Template. Sekarang masuklah ke editor posting.
Untuk membuat spoiler, Anda cukup menambahkan elemen <blockquote>dengan atribut berupa class="spoiler" :

Contoh :

<blockquote class="spoiler">
     Konten/isi Spoiler agan dsini!!!
</blockquote>

Read More

Membuat Image Efek Hover saat di sentuh (CSS+Jquery) Membuat Image Efek Hover saat di sentuh (CSS+Jquery)

Sekarang Agan dapat menambahkan Gambar efek hover pada gambar di blogger sangat mudah.

Trik ini memungkinkan gambar Anda ke beberapa transparansi (Tidak semua Gambar saja gambar ditentukan). ketika mouse Agan pada gambar itu akan berubah menjadi tidak transparan akan membuat efek hover.

Caranya, pertama" login Blogger.. Pergi ke Rancangan trus pilih Edit HTML. dan Cari code ]]></b:skin>

Copy CSS di bawah dan taruh sebelum tag ]]></b:skin>

a.thumbopacity img {

 filter:alpha(opacity=50);
 -moz-opacity: 0.5;
 opacity: 0.5;
 -khtml-opacity: 0.5;
}
a.thumbopacity:hover img {
 filter:alpha(opacity=100);
 -moz-opacity: 1.0;
 opacity: 1.0;
 -khtml-opacity: 1.0;
}

dan SAVE TEMPLATE

Sekarang untuk mengaktifkan efek nya
-Apabila code gambar normal akan seperti ini

<a href="http:/alpinjanitra.blogspot.com/" ><img  border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYv1UrMc5J3_PQDfmpTEqG8jXsnSLd9X47ewdtQgYfVU0VCJmZFVJY9bNwPsiutb1TqEUuMT9KVyeZfoY77UuybnqklSF-p-QlrcUtUH4WeD-4iTSaeS0Q0OBslXKQko6grVPpOOWrC0LC/s1600/2+tooth+peace+sign+paundra+rethouching.jpg" /></a>

-Untuk mengaktifkannya, kita menambahkan code class="thumbopacity" akan seperti ini

<a href="http:/alpinjanitra.blogspot.com/"class="thumbopacity"  ><img  border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYv1UrMc5J3_PQDfmpTEqG8jXsnSLd9X47ewdtQgYfVU0VCJmZFVJY9bNwPsiutb1TqEUuMT9KVyeZfoY77UuybnqklSF-p-QlrcUtUH4WeD-4iTSaeS0Q0OBslXKQko6grVPpOOWrC0LC/s1600/2+tooth+peace+sign+paundra+rethouching.jpg" /></a>

Jangan lupa untuk menambahkan code tersebut, saat kamu akan menerbitkan artikel kamu harus masuk ke mode HTML. Semoga sedikit tips diatas dapat menambah ilmu kawan-kawan blogger semua ^^

Read More