Widget HTML #1

Menambahkan Tombol Like dan Share Pada Artikel CMS Sekolahku

Ok sebelum masuk ke topik utama, kita bahas sedikit tentang CMS Sekolahku yang merupakan content management system berbasis pendidikan yang bisa didapatkan secara free di laman resminya https://sekolahku.web.id/ buatan bapak Anton Sofyan, demonya bisa kita lihat di CSM Sekolahku.

CMS lokal ini sudah sangat banyak digunakan di nusantara kita, oleh karenanya saya ingin menuliskan sedikit tentang modifikasi yang dilakukan, untuk fiturnya sendiri sudah sangat lengkap

Nah segala hal berkaitan dengan CMS ini bisa langsung dirujuk dilink tersebut, yang jelas CMS ini juga sudah saya coba dan review menurut saya sangat baik, walaupun yang saya coba juga versi free nya.

Fitur CMS Sekolahku (Free Version)

Image Slider
Pesan Masuk
Tautan
Halaman
Tulisan
Kategori Tulisan
Komentar
Tag
Kutipan
Sambutan Kepala Sekolah
Subscriber
Master Tahun Akademik
Master Kebutuhan Khusus
Master Kelas
Master Pendidikan
Master Program Keahlian
Master Penghasilan Bulanan
Master Tempat Tinggal
Master Status Peserta Didik
Master Moda Transportasi
Master Pekerjaan
Master Status Kepegawaian
Master Jenis GTK
Master Lembaga PEngangkat
Master Pangkat / Golongan
Master Sumber Gaji
Master Keahlian Laboratorium
Master Gelombang Pendaftaran
Master Kuota Pendaftaran
Pengaturan Data Peserta Didik
Pengaturan Data Alumni
Pengaturan Kelas
Pengaturan Rombongan Belajar
Pengaturan Diskusi
Pengaturan Email Server
Pengaturan Jejaring Sosial
Pengaturan Media
Pengaturan Menulis
Pengaturan Membaca
Pengaturan PPDB
Pengaturan Profil Sekolah
Pengaturan Umum
Direktori Alumni
Direktori Peserta Didik
Direktori Guru dan Tenaga Kependidikan
Grafik
Import Peserta Didik
Guru dan Tenaga Kependidikan
Import Guru dan Tenaga Kependidikan
Daftar Calon Peserta Didik
Proses Seleksi PPDB / PMB
Hasil Seleksi PPDB / PMB
Iklan
Jajak Pendapat
Upload File
Kategori File
Album Foto
Video
Pengaturan Navigasi Menu
3 Pilihan Tema
Dinamic Access Control List
Backup Database
Backup Apps

Dari hasil coba sementara ini saya menemukan 2 hal yang masih terasa kurang yaitu pertama ketiadaan fitur share artikel dan ketika membuat artikel saya hanya bisa memasukkan satu gambar/foto untuk artikel sementara jika saya masukkan gambar tambahan pada artikel, gambar tersebut tidak bisa menyesuaikan layar perangkat alias belum responsive.

Update:

Untuk gambar tambahan didalam artikel bisa menjadi responsive atau menyesuaikan besar layar perangkat maka ketika insert gambar, kemudian masuk ke menu Tool pilih mode SourceCode pada artikel editor kemudian cari link gambar yang kita masukkan dan ubah nilai dimensi gambar dari satuan pixel menjadi persen (%).

misalkan ukuran gambar adalah 1024px x 720px ubah menjadi 90% atau100% pada lebar dan tingginya, berikut saya screenshot kan contohnya.

responsive image

Nah dikesempatan ini saya tuliskan cara agar pada artikel terdapat tombol like facebook dan share ke media sosial, untuk memudahkan kita share artikel sebagai kepentingan promosi misalnya.

Ini adalah cara termudah dibandingkan dengan teknik lainnya karena kita hanya menambahkan sedikit script saja tanpa embel-embel css dan lainnya. Dalam hal ini kita menggunakan fasilitas dari AddThis

Caranya temukan file "single-post.php" pada folder views/themes/blue_sky/ ini karena saya menggunakan tema ini. selanjutnya lihat gambar berikut.

blue_sky

Tambahkan script berikut tepat diatas,  <!-- Komentar --> gunakan salah satu tipe yang dipilih saja ya.

Tipe 1


<!-- AddThis Button BEGIN --><b:if cond='data:blog.pageType == &quot;item&quot;'><div class="addthis_toolbox addthis_default_style "><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div></b:if><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71fdea5bff8d67"></script><!-- AddThis Button END -->

Tipe 2


<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71feed783c3890"></script>
<!-- AddThis Button END -->

Tipe 3


<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71ff8750bee738"></script>
<!-- AddThis Button END -->

Yang tipe 1 hasilnya seperti gambar berikut ini,  ...


share button

Kesimpulan :

CMS Sekolahku sudah bisa diandalkan sebagai portal sekolah tanpa perlu pusing-pusing membuatnya dari nol, tentunya kita juga butuh web hosting untuk penempatannya, tinggal pilih mau pakai hostinger, niagahoster, rumahweb, dewa web atau lainnya, jika butuh bantuan setup bisa langsung hubungi hosting server nya.

Demikian sekilas modifikasi tambahan yang saya tuliskan, karena saat cari rujukan tentang hal ini saya tidak menemukannya, selanjutnya akan saya coba agar artikel bisa ditambahkan gambar yang responsive, atau jika ada yang sudah tau tolong info info masseh...

Post a Comment for "Menambahkan Tombol Like dan Share Pada Artikel CMS Sekolahku"