Kumpulan Script Untuk Website [ Admin Website ]

[1] Author Pada Berita

Script Untuk Menampilkan Author Berita yang terdiri dari [1] Photo pemberita,[2] Nama Lengkap, [3] Jabatan Dalam Instansi, [4] Alamat Media Sosial Seperti Facebook, Twitter, Instagram dan Youtube Cannel.
Video Tutorial Tampilkan Script

Edit : Langsung Bisa Di Edit
Copy dan Paste : Langsung Bisa Di Copy Dan Pastekan Script

× 

<div class="container">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="authorlmq_slide">
<img src="alamat photo author" class="img-circle img-responsive" />
<h4>NAMA YANG PUBLIKASI/WARTAWAN</h4>
<p>JABATAN DALAM INSTANSI<br/>
</p>
</div>
</div>
</div>
</div>

<div class="mediaonlinenyalmq">
<a href="Alamat Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZba1MBTELTKizlVkohFXC4SBtxOSJvDpITzvtF8bKewBukSYIKn6PDQ4MnScXvrTUzvG8eSS7c2dTZEVD6hzv0SD1Ilix3GAi6RFmtmvPifYvPLSlmgH1KsZ6y7ZtjgHweBI-7uZKuAAVVXW1Pd3MrXtcdxI91Kzd2aj9zpizLA4D3raC4LtqnlSJsg/s284/facebook.png" class="img-circle img-responsive"></a>&ensp;

<a href="Alamat Twitter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_xf8ORex4qc1Mhl6VO99kt3m6a2Dc2_BRxyTlVMxROLE3_mXksTDmhyG-Jf04KX18mriTM2ppiUXp20fYCEeNrEJLyRZA6ldNr2GD_ixmdDmW4FkTR6ITKY1ibV41nOogvIR6CeA6RkFPilWPKqavrleb6ol3-YGJrunLcHPuNtmqRmccP45SaeCwiAU/s284/twitter.png" class="img-circle img-responsive"></a>&ensp;

<a href="Alamat Instagram" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfM80VRABzkyir1zrK7bpNCNVFS5rw0DrCytI9Gg2TivT_kLlEvz_vQw62si_igIYloo66zVQTKWtnTLvKbxltU-ZTvlOGQZtjdgvDZT03U2dcGp7mvu9s9eNFxGiNIQDNt18329B0rmY4G42_O-dzXaY51BYWCVu4caWkYjCSE5YXSfTqZLZpqML1-Xk/s284/instagram.png" class="img-circle img-responsive"></a>&ensp;

<a href="Alamat Youtube" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUCHqXkpoBEh-8XavNndauKrlBe_QBNjkCbCM_vWEEhDzmg7eWf2kG5IcOnakcztpjuoAD-7xpRM1T1cpzwxl0nF65uTnuB4mVlsxyxuPvC6pkd0koZeKBG-XOCexedJ7K6Wl3v1RoZ8Bbn_Yfs7hUKfmdfQIX5Zpw4HmRpJSR9t6nebZqOKI6LlVQGws/s284/youtube.png" class="img-circle img-responsive"></a>
</div>

📢 Perhatikan Dengan Seksama Arahan Pada Video
📢 Gunakan Note ++/Lainnya Sebagai Software Bantu Penulisan

×

[2] Data Wali Kelas Pada Daftar Siswa Aktif Perkelas

Script Untuk Menampilkan data wali kelas berdasarkan daftar siswa yang di publikasi pada website.
Untuk pelabelan : [Kelas ...], [Wali Kelas].
Video TutorialTampilkan Script

Edit : Langsung Bisa Di Edit
Copy dan Paste : Langsung Bisa Di Copy Dan Pastekan Script

× 

<div class="widget-title title-wrap" background-color="#006aff">
<a class="more" href="https://www.lmq.sch.id">🟡 Daftar Santri Kelas X KP-PS Wusta</a></div>
<ul class="publikasi-kegiatan-container">
<li class="publikasi-kegiatan-list">
<img class="walikelas-thumb" src="LINK PHOTO WALI KELAS YANG DI TAMPILKAN" />
<div class="publikasi-kegiatan-title">
<a target="_top">NAMA WALI KELAS LENGKAP DENGAN JABATAN</a>
</div>
Data Siswa dan Siswi Kelas ... (...) KP-PS (MTs) Wustho Pondok Pesantren Lil-Muqorrobien Al-Islami. <br/>Tahun Ajaran 0000 - 0000. <br/>
🧑🏻‍🎓 Jumlah Putra : 00 Siswa <br/>
👩‍🎓 Jumlah Putri : 00 Siswi. <br />
<div class="publikasi-kegiatan">
Wali Kelas ... (Sepuluh) Pondok Pesantren Lil-Muqorrobien Al-Islami Riau<br />
Aktif Menjadi Tenaga Pendidik Sejak Tahun 0000.
</div>
</li>
</ul>
<div class="widget-title title-wrap" background-color="#006aff">
<a class="more" href="https://www.lmq.sch.id"></a></div>

Edit : 📢 Perhatikan Dengan Seksama Arahan Pada Video
📢 Gunakan Note ++/Lainnya Sebagai Software Bantu Penulisan

×

[2.1] Input Script Tambahan Daftar Siswa Aktif Perkelas

Script ini di letakkan di bagian bawah laman pemuat data. Fungsi script ini adalah untuk menampilkan data dengan tampilan yang lebih baik. Tanpa script tambahan ini, maka data tampilannya tidak akan sempurna.
Video TutorialTampilkan Script

Edit : Langsung Bisa Di Edit
Copy dan Paste : Langsung Bisa Di Copy Dan Pastekan Script

× 

<strike>full-width</strike>
<style>
/*!
 * Script Tambahan Yang Harus Di Pasang
 * Jika Script Ini Tidak Di Pasang, Maka hasil tampilan akan menjadi kacau
 * Pada satu laman daftar siswa, hanya terpasang satu script tambahan ini
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
@font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:100%;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role=button]{cursor:pointer}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}
@media (min-width:900px){.container{width:1000px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}
@media (min-width:1000px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}th{text-align:left}
</style>

📢 Perhatikan Dengan Seksama Arahan Pada Video
📢 Gunakan Note ++/Lainnya Sebagai Software Bantu Penulisan

×

[2.2] Input Satuan Data Siswa Berdasarkan Kelas Pada Daftar Siswa

Script untuk menginput data persiswa pada daftar siswa aktif perkelas.
Video Tutorial Tampilkan Script

Edit : Langsung Bisa Di Edit
Copy dan Paste : Langsung Bisa Di Copy Dan Pastekan Script

× 

<!--santri [[[[[[[[[[[[[[]]]]]]]]]]]]]]]]]]] nomor : 1-->
<div class="col-lg-4 col-md-6 col-sm-6 col-12 mt-5">
<article class="material-card Red">
                <h2>
                <span>NAMA SANTRI/SISWA</span>
                <strong>
                <i class="fa fa-fw fa-magic"></i>
                Santri Kelas IX
                </strong>
                </h2>
<div class="mc-content">
<div class="img-container">
<img class="img-fluid" src="LINK PHOTO SISWA YANG DI TAMPILKAN" alt="" draggable="false" oncontextmenu="return false;" />
</div>
<div class="mc-description">
ANUGRAH KHOIRUNNISAH. Lahir di Pangkalan Kerinci pada Mei 2009. Beralamatkan di Kerinci Kiri, Siak. Di terima di pesantren kelas VII pada 17 Juli 2022.<br/>
NIS : 0096196705<br/>
Sekolah Asal : SDN 11 Kerinci Kiri
</div>
</div>
 <a class="mc-btn-action ripple">
<i class="fa fa-bars"></i>
</a>
<div class="mc-footer">
                <h4>
                Social
                </h4>
<a href="ALAMAT FACEBOOK" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZba1MBTELTKizlVkohFXC4SBtxOSJvDpITzvtF8bKewBukSYIKn6PDQ4MnScXvrTUzvG8eSS7c2dTZEVD6hzv0SD1Ilix3GAi6RFmtmvPifYvPLSlmgH1KsZ6y7ZtjgHweBI-7uZKuAAVVXW1Pd3MrXtcdxI91Kzd2aj9zpizLA4D3raC4LtqnlSJsg/s284/facebook.png" class="mediaonlinenyalmq"></a>&ensp;
<a href="ALAMAT TWITTER" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_xf8ORex4qc1Mhl6VO99kt3m6a2Dc2_BRxyTlVMxROLE3_mXksTDmhyG-Jf04KX18mriTM2ppiUXp20fYCEeNrEJLyRZA6ldNr2GD_ixmdDmW4FkTR6ITKY1ibV41nOogvIR6CeA6RkFPilWPKqavrleb6ol3-YGJrunLcHPuNtmqRmccP45SaeCwiAU/s284/twitter.png" class="mediaonlinenyalmq"></a>&ensp;
<a href="ALAMAT INSTAGRAM" target="_blank"  ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfM80VRABzkyir1zrK7bpNCNVFS5rw0DrCytI9Gg2TivT_kLlEvz_vQw62si_igIYloo66zVQTKWtnTLvKbxltU-ZTvlOGQZtjdgvDZT03U2dcGp7mvu9s9eNFxGiNIQDNt18329B0rmY4G42_O-dzXaY51BYWCVu4caWkYjCSE5YXSfTqZLZpqML1-Xk/s284/instagram.png" class="mediaonlinenyalmq"></a>&ensp;
<a href="ALAMAT CHANNEL YOUTUBE" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUCHqXkpoBEh-8XavNndauKrlBe_QBNjkCbCM_vWEEhDzmg7eWf2kG5IcOnakcztpjuoAD-7xpRM1T1cpzwxl0nF65uTnuB4mVlsxyxuPvC6pkd0koZeKBG-XOCexedJ7K6Wl3v1RoZ8Bbn_Yfs7hUKfmdfQIX5Zpw4HmRpJSR9t6nebZqOKI6LlVQGws/s284/youtube.png" class="mediaonlinenyalmq"></a>
</div>
</article>
</div>

Edit :📢 Perhatikan Dengan Seksama Arahan Pada Video
📢 Gunakan Note ++/Lainnya Sebagai Software Bantu Penulisan

×

[3] Input Galeri Photo

Script Untuk Input Galeri Photo. Terdapat Script Menampilkan Pengupload Photo dan Photo Yang Di Upload.
Video Tutorial Tampilkan Script

Edit : Langsung Bisa Di Edit
Copy dan Paste : Langsung Bisa Di Copy Dan Pastekan Script

× 

<ul class="publikasi-kegiatan-container">
<li class="publikasi-kegiatan-list">
<img class="publikasi-kegiatan-thumb" src="LINK PHOTO PENGUPLOAD DATA" />

<div class="publikasi-kegiatan-title">
<a target="_top">NAMA PENGUPLOAD PHOTO</a>
</div>
DESKRIPSI PHOTO-PHOTO YANG DI UPLOAD <br />
<div class="publikasi-kegiatan">
_________________________________<br />
Tanggal Bulan Tahun | Tempat Kegiatan<br />
Jabatan di Pesantren
</div>
</li>
</ul>

<!--Tampilkan Photo Urutan 1-->
<div class="imageGallery1">
<!--[photo 1]-->
<a href="
Link Photo 1
" title="Keterangan Dari Foto Yang Di Upload">
<img src="
link photo 1
"></a>

<!--[photo 2]-->
<a href="
Link Photo 2
" title="Keterangan Dari Foto Yang Di Upload">
<img src="
link photo 2
"></a>

<!--[photo 3]-->
<a href="
Link Photo 3
" title="Keterangan Dari Foto Yang Di Upload">
<img src="
link photo 3
"></a>


</div>
<!--Akhir Tampilkan Photo Urutan 1-->



Tambahkan Kode untuk 3 photo lagi di sini



<!--Script Untuk Menampilkan Full Width/Laman Postingan-->
<strike>full-width</strike>

Edit :📢 Perhatikan Dengan Seksama Arahan Pada Video
📢 Gunakan Note ++/Lainnya Sebagai Software Bantu Penulisan

×
full-width