Halo teman-teman hari ini saya mau memberikan tutorial bagaimana cara agar
tampilan blog menjadi menarik menggunakan plugin javascript. Caranya sangatlah
mudah tidak sesulit yang dibayangkan teman-teman. Berikut adalah beberapa
plugin yang bisa membuat tampilan blog menarik dan lebih indah.
1. Bx Slider
Plugin yang pertama yang kita bahas adalah Bx Slider. Pasti teman-teman bertanya apa sih Bx Slider itu? Bx Slider adalah sebuah plugin dimana fungsinya adalah untuk menampilkan beberapa gambar dalam satu wadah contohnya adalah seperti ini
Disini saya mempunyai beberapa gambar
1. Bx Slider
Plugin yang pertama yang kita bahas adalah Bx Slider. Pasti teman-teman bertanya apa sih Bx Slider itu? Bx Slider adalah sebuah plugin dimana fungsinya adalah untuk menampilkan beberapa gambar dalam satu wadah contohnya adalah seperti ini
Disini saya mempunyai beberapa gambar
\
Jika gambar
gambar diatas dijadikan menggunakan bx slider akan jadi seperti
ini.
Nah bagaimana caranya?
1. Buka menu tata letak pada menu blog
2. Kemudian tambahkan widget
3. Pilih HTML/Javascript
4. Kemudian copy code dibawah ini
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function($,bxSlider){
$('.slider').bxSlider();
});
});
</script>
5. Lalu paste
6. Setelah itu pergi ke menu postingan
7. Kemudian pilih edit
8. Setelah itu teman-teman akan berada di tampilan mengedit postingan
9. Langkah selanjutnya adalah lihat pojok kiri disana ada tulisan Compose dan HTML, Klik yang HTML
10. Kemudian masukkan code ini
5. Lalu paste
6. Setelah itu pergi ke menu postingan
7. Kemudian pilih edit
8. Setelah itu teman-teman akan berada di tampilan mengedit postingan
9. Langkah selanjutnya adalah lihat pojok kiri disana ada tulisan Compose dan HTML, Klik yang HTML
10. Kemudian masukkan code ini
<div class="slider">
<div>
<img
src="https://i.imgur.com/cRJCyaE.jpg" style="" />
</div>
<div>
<img
src="https://i.imgur.com/xzv6seg.jpg" />
</div>
<div>
<img
src="https://i.imgur.com/xA22jOX.jpg" />
</div>
</div>
<br />
<br />
Letaknya terserah mau ditaruh dimana setelah dipaste kemudian simpan
11. Selesai
Letaknya terserah mau ditaruh dimana setelah dipaste kemudian simpan
11. Selesai
*Perlu di ingat!! Nama
class slider berkaitan dengan javascriptnya Apabila class “slider” diganti
maka, di javascriptnya harus diganti
juga
Untuk postingan hari ini saya akhiri
sampai disini dulu untuk part 2 nya diusahakan besok udah diupload, Apabila ada
salah kata mohon dimaafkan. yang mau tanya-tanya, kritik, saran silahkan tulis
dikolom komentar.
Jangan lupa support saya dengan cara ikuti
saya di google+ atau di sosial media saya yang lainnya dan jangan lupa untuk
membagikan postingan ini kepada teman-teman kalian, Sekian Terima Kasih.





13 Comments
informasinya sangat bermanfaat.
ReplyDeleteTerima kasih :)
DeleteWah terimakasih pak, bisa buat refrensi supaya blog saya jadi tambah bagus, btw supaya kode html berwarna seperti itu pake text arae yg sperti apa pak ??
ReplyDeletePanggil mas/gan aja kalo pak ketuaan wkwkwkwk
DeleteKalo yang ijo-ijo itu saya editnya di Ms.Word kemudian copy lalu paste bisa juga pake style="background: nama warna /# kode warna"
Mantap Artikelnya
ReplyDeleteJangan Lupa Visit https://a-pastel-story.blogspot.com
Wah bagus sekali mas tutorialnya mudah di mengerti dan di pahami . Ini yang saya cari makasi mas.
ReplyDeleteWww.kulagamezo.com
Manstaps gans
ReplyDeletewww.masdroidpc.com
Amzing bro.. lanjutkan.
ReplyDeleteMakasih mbah ilmunya... Nice post
ReplyDeleteAwal2 ngeblog sering banget modif blog sendiri. Kayaknya ini referensi yang bagus nih
ReplyDeletemantap, ini yang gue cari
ReplyDeletekunjungi juga www.adeberkata.online
itu bisa di pasang pada template pihak ketiga gak bro,, mampir ke blog ane bro
ReplyDeleteInformasi dimanfaatkan bos .
ReplyDelete