skip to main | skip to sidebar

INFOIKI

tutorial untuk mengedit, mempercantik,membuat, dan memperindah blog template seo gratis

  • Home
  • Template
  • Ebook
  • Kata Mutiara
  • Tips Blog
  • Video
  • Umum
 

Dapatkan Update!

Dapatkan artikel terbaru dari INFOIKI yang akan dikirim ke email anda secara gratis!
Browse » Home » Ngeblog » Cara mudah membuat widget spolier dengan jQuery

Cara mudah membuat widget spolier dengan jQuery


   Spolier kali ini memiliki suatu kelebihan penting. Yaitu, hanya menggunakan satu elemen tunggal.  Itu artinya, bahwa proses intalasi menjadi jauh lebih mudah. Elemen tombol pembuka atau penutup spoiler tidak perlu kita sertakan disini, karena jQuery akan menyisipkan tombol tersebut secara otomatis pada masing - masing elemen target. Ok, seperti apa spolier yang akan saya bahas? Lihat pada kolom Site Info pada blog ini. Itu adalah demonya. Mulai...

1. Login blog.
2. Template.
3. Edit HTML -> Lenjutkan -> Centang expand template widget.
4. Cari kode </head>
5. Letakkan kode dibawah ini, tepat di atas tag </head>


<script type='text/javascript'>
//<![CDATA[
    $(function() {
        $('blockquote.spoiler').hide(1000).before('<button class="sp-trigger">Judul spoiler</button>');
        $('button.sp-trigger').toggle(function() {
            $(this).addClass('sp-active').text('Tutup').next().slideDown(1000);
        }, function() {
            $(this).removeClass('sp-active').text('Judul Spolier').next().slideUp(1000);
        });
    });
//]]>
</script>

































Note : Ganti Judul Spolier dengan teks lain.
6. Kemudian cari kode ]]></b:skin> atau </style>
7. Letakkan kode dibawah ini, diatas kode no.6


/*
 Spoiler sederhana dengan JQuery
 (http://infoiki.blogspot.com)
*/
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;}


































































8. Save template.

  Spoiler ini bisa digunakan. Tetapi, tinggal menambahkan kode dibawah ini :

<blockquote class="spoiler">
   KONTEN DISINI
</blockquote>

Note : Untuk diletakkan di postingan, jangan lupa ubah mode compose menjadi mode HTML. Untuk meletakkan konten, letakkan konten di mode Compose.

  Selesai. Semoga berhasil. ;)

Posted By Efendy bloggers | -

Comments :

1
Anonim mengatakan... on 
24 Juli 2012 pukul 15.19

test

Posting Komentar

Aturan Berkomentar
1. No spam!
2. No live link!
3. No maho :D

←  Posting Lebih Baru Posting Lama  → Beranda
Langganan: Posting Komentar ( Atom )

Statistik

Statistic Blog:
PageRank Checking Icon
SEO Reports for infoiki.blogspot.com

Pencarian

Kategori

  • Advertiser
  • Diet
  • Ebook gratis
  • Facebook
  • Handphone
  • Jasa Like
  • Kata Kata
  • Komputer
  • Kontes SEO
  • Ngeblog
  • Review‎
  • Software
  • Template
  • tips trik ngeblog
  • Umum
  • Video

Terpopuler

  • Software Hack Wifi GRATIS [WzCook.exe]
  • Kumpulan template blog Imut dan cantik (Blogspot)
  • Download template blog Anime keren
  • Cara paling ampuh membuka situs yang diblokir telkom
  • 3 langkah mudah membuat banner sendiri
  • Software SMS gratis lewat pc/komput [free download]
  • Cara menghapus virus dengan cara manual menggunakan CMD
  • 7 Cara mudah menghafal script tanpa hafalan
  • tips Cara merawat ayam serama
  • Trik mudah membuat header blog bergerak (Gif)

Pengikut

Diberdayakan oleh Blogger.
.

Send Quick Massage

Nama

Email *

Pesan *

 
INFOIKI
Template by Infoiki | Powered by Blogger