F A Q adalah satu suku kata bahasa inggris yang memiliki kepanjangan dari Frequently asked questions, Pada postingan kali ini saya akan membagi code tentang cara membuat halaman faq di blogspot, untuk melihat tampilannya silahkan klik menu " F A Q " yang berada diatas halaman ini.
Kali ini kita akan mencoba membuat halaman FAQ yang berfungsi bagi panduan cortomer atau seputar pertanyaan umum tentang isi blog anda. Halaman ini sangat efektif bagi anda pengguna blog yang bertransaksi secara online (Online shop) atau menampilkan TOS panduan bagi pengguna user / client anda.
Tanpa basa basi, mari kita belajar membuat Frequently asked questions (FAQ) dengan teknik jquery yang dikembangkan oleh mastah RiVai, dimana telah dicek dengan hasil sebagai berikut :
Langkah yang harus dilakukan Sobat adalah sebagai berikut :
1. Instal kode css berikut ini
Login ke dashboard blog anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
setelah ketemu..
setelah ketemu..
Copy Code script CSS cara membuat halaman faq di blogspot dibawah ini, pastekan tepat diatas code ]]></b:skin>
yang telah anda temukan tadi atau bila template blog anda memakai template anda.
.halamanfaq{
margin:10px auto;
border:1px solid #999;
padding:30px;
background-color: #F0F0F0;
width:100%;
font-family: Verdana;}.halamanfaq h3{
margin:0;
padding:0;
font-size:16px;
color: #000000;
}.tanya{padding-top:20px}
.tanya dt{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQez1wqEEhMnap1cQnrXWVcmI-40nxM-F1LTXCQfikrCe_KCg41O_Vg5dG8kidXeHQ0Rk2YKuoSFFwgio29BmLIA_wxBQKPbjG1Mkk-RNyGlincnRMJq3hHNuOTbK96oeqsoDm1zOjXjK1/s1600/pertanyaan.gif') 0 3px no-repeat;
padding:3px 0 15px 30px;
position:relative;
color: #990000;
text-decoration: none;
font-size: 14px;
text-shadow: 1px 1px 1px #ccc;
}.tanya dt:hover{
cursor:pointer;
text-decoration: none;
color: #000099;
}.tanya dd{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xWqoDb29NAawS8vPQklWwjk0d65Z1IjexoH7iob0OLsBOM6EGumNWG01_myz-mpMEY39ghZiL6SHHbPEej-qzTXh46xUbLRhfpNkfkJ7OL4XWG_T1OlFEQEPXvQQbLhBxP812CJLgbgm/s1600/jawaban.gif') 0 2px no-repeat;
padding:0 0 5px 30px;
position:relative;
color:#333;
margin-left: 20px;
font-size: 12px;
line-height: 20px;
}.tanya .hover{color:#990000;text-decoration:underline}
/*** www.rivai.org CSS cara membuat halaman faq di blogspot and ***/
2. Instal Kode script di Blogspot
Setelah anda selesai memasang CSS cara membuat halaman faq di blogspot ini seperti yang telah diutarakan diatas, saatnya anda untuk memasang scriptnya sebagai motorik dari tampilan cara membuat halaman faq di blogspot pada postingan kali ini.
Cari code </head> pada template anda.
Copy code script dibawah ini, kemudian pastekan diatas code </head> yang telah anda temukan sebelumnya.
Perhatikan code Jquery yang berwarna merah di bawah ini, bila template blogspot anda sudah memiliki script Jquery sebaiknya code tersebut jangan anda pasang anda hanya cukup copy script yang dibawahnya saja, bila template anda memiliki script jquery versi dibawah 1.3.2 silahkan gantikan dengan script Jquery dibawah ini. Save template anda....
3. Instal html pada halaman/ page blog Anda
Masih di dalam dasbor anda silahkan lihat menu disebelah kiri anda, Pilih "Laman" kemudian klik "Laman Baru" lalu "Laman Kosong".
Pada laman kosong, silahkan anda klik tulisan atau tombol " HTML " yang berada disebelah kiri anda, disamping tombol compose. Setelah anda klik tombol "HTML " tersebut kemudian copy code yang berada di dalam spoiler dibawah ini pakemudian pastekan di halaman anda, buat judul halaman FAQ anda, edit codenya dan lihat " Pratinjau "setelah anda sudah merasa sempurna silahkan anda publish, silahkan klik tombol "Publikasikan"
yang telah anda temukan tadi atau bila template blog anda memakai template anda.
.halamanfaq{
margin:10px auto;
border:1px solid #999;
padding:30px;
background-color: #F0F0F0;
width:100%;
font-family: Verdana;}.halamanfaq h3{
margin:0;
padding:0;
font-size:16px;
color: #000000;
}.tanya{padding-top:20px}
.tanya dt{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQez1wqEEhMnap1cQnrXWVcmI-40nxM-F1LTXCQfikrCe_KCg41O_Vg5dG8kidXeHQ0Rk2YKuoSFFwgio29BmLIA_wxBQKPbjG1Mkk-RNyGlincnRMJq3hHNuOTbK96oeqsoDm1zOjXjK1/s1600/pertanyaan.gif') 0 3px no-repeat;
padding:3px 0 15px 30px;
position:relative;
color: #990000;
text-decoration: none;
font-size: 14px;
text-shadow: 1px 1px 1px #ccc;
}.tanya dt:hover{
cursor:pointer;
text-decoration: none;
color: #000099;
}.tanya dd{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xWqoDb29NAawS8vPQklWwjk0d65Z1IjexoH7iob0OLsBOM6EGumNWG01_myz-mpMEY39ghZiL6SHHbPEej-qzTXh46xUbLRhfpNkfkJ7OL4XWG_T1OlFEQEPXvQQbLhBxP812CJLgbgm/s1600/jawaban.gif') 0 2px no-repeat;
padding:0 0 5px 30px;
position:relative;
color:#333;
margin-left: 20px;
font-size: 12px;
line-height: 20px;
}.tanya .hover{color:#990000;text-decoration:underline}
/*** www.rivai.org CSS cara membuat halaman faq di blogspot and ***/
Setelah anda selesai memasang CSS cara membuat halaman faq di blogspot ini seperti yang telah diutarakan diatas, saatnya anda untuk memasang scriptnya sebagai motorik dari tampilan cara membuat halaman faq di blogspot pada postingan kali ini.
Cari code </head> pada template anda.
Copy code script dibawah ini, kemudian pastekan diatas code </head> yang telah anda temukan sebelumnya.
Perhatikan code Jquery yang berwarna merah di bawah ini, bila template blogspot anda sudah memiliki script Jquery sebaiknya code tersebut jangan anda pasang anda hanya cukup copy script yang dibawahnya saja, bila template anda memiliki script jquery versi dibawah 1.3.2 silahkan gantikan dengan script Jquery dibawah ini. Save template anda....
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function () {
$('.tanya dd').hide();
$('.tanya dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
$(this).next().slideToggle('normal');
}); });</script>
<script type="text/javascript">$(document).ready(function () {
$('.tanya dd').hide();
$('.tanya dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
$(this).next().slideToggle('normal');
}); });</script>
3. Instal html pada halaman/ page blog Anda
Masih di dalam dasbor anda silahkan lihat menu disebelah kiri anda, Pilih "Laman" kemudian klik "Laman Baru" lalu "Laman Kosong".
Pada laman kosong, silahkan anda klik tulisan atau tombol " HTML " yang berada disebelah kiri anda, disamping tombol compose. Setelah anda klik tombol "HTML " tersebut kemudian copy code yang berada di dalam spoiler dibawah ini pakemudian pastekan di halaman anda, buat judul halaman FAQ anda, edit codenya dan lihat " Pratinjau "setelah anda sudah merasa sempurna silahkan anda publish, silahkan klik tombol "Publikasikan"
<!-- code cara membuat halaman faq di blogspot start-->
<div class="halamanfaq">
<h3>JUDUL F.A.Q - Frequently asked questions </h3>
<dl class="tanya">
<dt>PERTANYAAN PERTAMA ANDA ?</dt>
<dd>Jawaban pertanyaan pertama : Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eumLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </dd>
<dt>PERTANYAAN KEDUA ANDA ?</dt>
<dd>Jawaban pertanyaan kedua : Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eumLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </dd>
<dt>PERTANYAAN KETIGA ANDA ?</dt>
<dd>Jawaban pertanyaan ketiga : Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eumLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </dd>
<dt>PERTANYAAN KEEMPAT ANDA ?</dt>
<dd>Jawaban pertanyaan keempat : Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eumLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </dd>
</dl>
</div>
<!-- code cara membuat halaman faq di blogspot end-->
<div class="halamanfaq">
<h3>JUDUL F.A.Q - Frequently asked questions </h3>
<dl class="tanya">
<dt>PERTANYAAN PERTAMA ANDA ?</dt>
<dd>Jawaban pertanyaan pertama : Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eumLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </dd>
<dt>PERTANYAAN KEDUA ANDA ?</dt>
<dd>Jawaban pertanyaan kedua : Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eumLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </dd>
<dt>PERTANYAAN KETIGA ANDA ?</dt>
<dd>Jawaban pertanyaan ketiga : Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eumLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </dd>
<dt>PERTANYAAN KEEMPAT ANDA ?</dt>
<dd>Jawaban pertanyaan keempat : Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eumLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </dd>
</dl>
</div>
<!-- code cara membuat halaman faq di blogspot end-->
Keterangan Code
- Silakan ganti text pertanyaan
- Silakan anda ganti judul dari halaman FAQ
- Silakan sesuaikan dengan jawaban dari pertanyaan
- Silahkan edit sesuai dengan kebutuhan halaman blog anda.
Saya rasa cukup mudah bukan ? Dan sangat efektif dalam memberikan berbagai jawaban umum maupun panduan tertentu yang sering dibutuhkan jawaban dengan cepat oleh pengunjung maupun user/client Anda.
Selamat mencoba - Salam kuplay-45.blogspot.com
