 |
| Membuat Spoiler di Blogger Secara Sederhana |
Mungkin bagi anda yang baru mendalami dunia blogging belum mengenal apa itu spoiler. Rinata akan coba bahas sedikit mengenai spoiler. Spoiler adalah sebuah alat untuk menyembunyikan beberapa kalimat yang akan ditampilkan jika pengunjung mengeklik tombol pembuka/penutup spoiler. Masih bingung? yasudah, silahkan anda ikuti saja cara penerapannya dibawah ini.
Dengan Spoiler akan sangat membantu para pemilik blog untuk meringankan blog anda jika menggunakan script yang terlalu banyak karena spoiler menggunakan elemen tunggal yang dapat meringankan artikel di blog kita. Jika anda ingin memasang spoiler di blog anda, silahkan ikuti beberapa langkah singkat berikut ini.
Pertama-tama silahkan seperti biasa, masuk ke Dashboard Blogger > Template > Edit HTML, lalu masukan kode jQuery ini diatas kode
</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'></script>
Catatan : Jika template anda sudah memiliki kode jQuery, tolong jangan memasukan kembali kode jQuery, karena bisa menyebabkan error pada template nantinya.
Langkah kedua, masih di halaman Edit HTML. Salin kode ini dan letakkan tepat diatas kode
</head> :
<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>
Langkah ketiga, salin kode CSS dibawah ini lalu letakkan tepat diatas kode
]]></b:skin>
/*
Spoiler sederhana dengan JQuery http://blogrinata.blogspot.com
*/
blockquote.spoiler {
font:normal 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}
Jika sudah, silahkan klik
"simpan template".
Sekarang langkah terakhir adalah mempraktekannya. Silahkan anda buat sebuah artikel baru dan anda cukup menambahkan kode di kalimat yang akan anda berikan spoiler.
<blockquote class="spoiler">
Konten di sini...
</blockquote>
Nah, mudah bukan cara memasang spoiler di blog anda. Jadi tidak perlu artikel panjang-panjang untuk memuat semua artikel anda, karena sekarang anda sudah bisa
Membuat Spoiler Di Blog anda sendiri. Silahkan jika berkenan berikan komentar anda di kolom komentar yang sudah disediakan. Terima Kasih.
Source :
dte
Artikel keren lainnya:
oh gitu ya gan carana
BalasHapus