In some blog, I see people have a long list in their post (for example a list of name). It's very hard for users to scan through the data in this list to find what they are interested in. And I found a plugin name InstaFilta. It's the best choice in this case with a text field to perform in-page filtering. Just enter some character of what you are looking for, non-matching items will be hidden.
How to add this one to a post/page of my blog ?
1. Open Blogger Dashboard -> Create a new Blog Post -> Click HTML to switch to edit HTML mode. After this step, all the code are added into post content
2. First, we need a list of data in your site and a text field for in-page filtering. This is an example of HTML markup and text field:
<input type="text" id="instafilta-field" placeholder="Type to filter">
<div class="section1">
<h2 class="section-title">A</h2>
<ul class="section-list">
<li class="section-item">Amy</li>
<li class="section-item">Anakin Skywalker</li>
<li class="section-item">Albert</li>
<li class="section-item">Andy Panda</li>
</ul>
</div>
<div class="section1">
<h2 class="section-title">B</h2>
<ul class="section-list">
<li class="section-item">Bob</li>
<li class="section-item">Bonnie</li>
<li class="section-item">Boogie Woogie</li>
<li class="section-item">Barry</li>
</ul>
</div>
<div class="section1">
<h2 class="section-title">C</h2>
<ul class="section-list">
<li class="section-item">Carrie Bradshaw</li>
<li class="section-item">Carl</li>
<li class="section-item">Cindy</li>
<li class="section-item">Cameron</li>
<li class="section-item">C-3PO</li>
</ul>
</div>
<div class="section1">
<h2 class="section-title">D</h2>
<ul class="section-list">
<li class="section-item">Dave</li>
<li class="section-item">Daryl</li>
<li class="section-item">Donna</li>
<li class="section-item">Danielle</li>
</ul>
</div>
<div class="section1">
<h2 class="section-title">E</h2>
<ul class="section-list">
<li class="section-item">Eric</li>
<li class="section-item">Emma</li>
<li class="section-item">Eliot</li>
<li class="section-item">Ed</li>
</ul>
</div>
2. Add some CSS bellow HTML markup
<style type="text/css">
input[type="text"] { padding: .4em; border: 1px solid #ccc; border-radius: 4px; font-size: 1.2em; }
.section1 { border-bottom: 1px dashed #ccc; padding: .5em; }
.section-title { color: #7b7; margin-bottom: .5em; }
.section-list { padding: 0; margin: 0; list-style: none; }
.section-item { display: inline-block; margin: 0 3em 0 0; }
.instafilta-match { color: #7b7; }
</style>
3. Add Javascript file bellow CSS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://0e6db9c931da7428dddf1c2982bd659bcc6c5064.googledrive.com/host/0B7DKPL3_p49OYW9YLU82WFQ4bDQ/instafilta.min.js"></script>
In this step, I already hosted file instafilter.min.js in my Google Drive hosting. But I'm not sure if it is reliable or not. So if you have another hosting, you can download this file from
here and then host file your own.
4. Activate the filter script
<script>
$(function() {
$('#instafilta-field').instaFilta({
targets: '.section-item',
sections: '.section',
markMatches: true
});
});
</script>
Ok. You finish. Now you can Publish the post or Preview to see the result
ليست هناك تعليقات:
إرسال تعليق