Social media script kini sudah berhasil dipasang pada theme. Visual bisa dilihat di bagian bawah artikel ini salah satunya. Dengan tampilan segitu cantik tidak menurut teman-teman semuanya?
Tombol share tersebut memanfaatkan button dari Bootstrap. Begitu juga dengan icon yang mirip fontawesome padahal bukan. Jadi semuanya bukan image yang disematkan ke dalam template.
Awalnya, kode didapat dengan mudah dari internet. Kemudian kode disesuaikan dengan gaya theme. Dalam hal ini saya memanfaatkan fungsi button dan warna dari Bootstrap semuanya.
Maklum karena template Blogger ini dibangun dengan Bootstrap. Sehingga saya berupaya mendapatkan kode yang sesuai. Dan ini saya lakukan sambil belajar meskipun otodidak.
Sampai di sini ada yang tertarik dengan bahasannya? Simak artikel kali ini tentang social media script. Kode ini kita pasang pada theme Blogger yang dibangun dengan Bootstrap.
Cara Menambahkan Social Media Script Theme Blogger
Kali ini kita akan mempraktekan pemasangan social media script. Tentunya pada theme yang sedari awal dibangun dengan Bootstrap. Sehingga makin lengkaplah fitur theme yang dibuat sendiri dari nol. Namun jika ternyata hasilnya kurang bagus bisa coba social media script lain.
Oke, langsung saja kita mulai sesuai tahapan berikut ini.
1. Login ke dashboard Blogger.
2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".
3. Pastikan sudah ada kode berikut setelah tag <head> dan sebelum </head>/
4. Link CDN JavaSript dari Bootstrap juga sudah terpasang sebelum </body>
5. Untuk mempercantik tampilan bisa menggunakan icon dari Bootstrap. Alternatif pengganti selain fontawesome ini diletakan diantara tag <head> dan </head>,
6. Klik pada area sembarang diantara baris kode template. Kemudian tekan Ctrl + F untuk memunculkan kotak pencarian pada theme. Masukan baris kode berikut <b:includable id='postQuickEdit' var='post'>. Kemudian tekan enter untuk menemukan baris kode yang terletak di bawahnya seperti ini:
7. Di bawah baris kode tersebut di atas, silahkan tempatkan baris kode social media script berikut.
8. Tekan icon "Save" yang terletak pada pojok kanan atas untuk menyimpan.
9. Selesai.
10. Link demo bisa dilihat dengan cara klik tombol di bawah ini.
Kesimpulan
Ada banyak social media script yang tersebar di internet. Namun kebanyakan tidak dibangun dengan Bootstrap. Untuk itu perlu sentuhan dengan menambahkan class btn dari Bootstrap. Contohnya seperti yang terlihat pada baris kode nomor 7 (tujuh) di atas.
Pada baris kode tersebut juga bisa dilakukan sentuhan lain. Misalnya dengan membagi baris kode menjadi 2 (dua) bagian. Yaitu kode css bisa kita pindah ke <b:skin><![CDATA[/* dan sebelum tag ]]></b:skin>.Sedangkan <div class="share"> serta kode html lainnya biarkan saja terletak di sana.
Adapun baris kode CSS yang dimaksud pada nomor 7 diawali dengan tag <style type='text/css'> dan diakhiri dengan </style>. Baris kode inilah yang kita pindahkan diantar kode css yang lain. Tentang penulisannya, tentu saja sudah tidak perlu menggunakan tag <style type='text/css'> dan </style> lagi.
Oia, kode di atas awalnya tidak menggunakan fungsi dari bootstrap diambil dari geekinstruktor.
Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar