Memasukan Web lain ke dalam website CMS Sekolahku

Asslamualaikum wr wb
kembali lagi di tutorial CMS Sekolahku berikutnya sob.
untuk kali ini saya akan coba berbagi mengenai bagaimana membuat Menu NISN di CMS Sekolahku yang ketika di klik menunya menampilkan halaman web NISN di dalam website kita.

Tutorial ini selain digunakan untuk CMS sekolahku bisa juga digunakan di blooger, wordpress dll ya sob ( Harusnya sih Gitu ) heee

tutorial ini terisprirasi dari website http://disdik.jabarprov.go.id yang didalamnya terdapat menu Cari NISN yang menampilkan web didalam web heeee

Langsung ke tutorialnyanya sob
Langkah Pertama
1. Login ke website CMS Sekolaku masing masing
2. Pilih Blog => Halaman => dan klik ikon + plus untuk menambahkan Halaman/Menu

Langkah Kedua

1. Tulis Cari NISN pada Title

2. Pilih Menu Tools

3. Pilih source code

Langkah ketiga

1. masukan kode dibawah ini sob

2. Ok

3. Simpan

<p><iframe style="border: 1px solid;" src="http://nisn.data.kemdikbud.go.id/page/data" name="frame1" width="98%" height="400px" frameborder="yes" scrolling="auto" align="center"></iframe></p>
URL http://nisn.data.kemdikbud.go.id/page/data dapat diubah sesuai keinginan ya sob

Langkah keempat (Atur Posisi Menu)

1. Pilih menu tampilan

2. Pilih menu

3. Pilih tanda +(plus) pada halaman

Langkah ke Lima 

1. Pilih menu (halaman) yang sebelumnya dibuat (Cari NISN)

2. Simpan Struktur

  

Selesai

dan hasilnya seperti ini sob

Read More ->>

Bikin Icon Sosmed CMS Sekolahku Mu Jadi Blink Blink

Assalamualaikum Warohmatullah

setelah sekian lama ga nyentuh blog, akhirnya ada waktu buat nulis lagi sob

untuk kali ini saya akan coba bagikan tips untuk bikin ikon sosial media di CMS Sekolahku jadi berubah ubah warnanya.

sebelum dilanjut ke tutorialnya, saya kasih info dikit ya sob

CMS Sekolahku adalah salah satu CMS keren yang di peruntukan untuk dunia pendidikan, khususnya web profil sekolah/Universitas sob, CMS sekolahku ini dibuat oleh mas Anton Sopyan,.

untuk yang belum tau langsung aja klik link ii sob CMS SEKOLAHKU.

sampai sekarang CMS ini sudah di versi 2 loh.

dah dulu ya info CMS Sekolahkunya

Sekarang masuk ke Tutorial sesuai judul.

Warna Ikon Sosmed sebelum di bikin blink blink

kila lakukan Perubahan pada Scriptnya
1. masuk ke View/themes/pilih tema yang diinginkan/css/style.css
2. cari kode .social-circle li a


Kode awal sebelum diubah

.social-circle li a {
background-color: #f44336;
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 40px;
height: 40px;
font-size:18px;
}


Ubah menjadi
.social-circle li a {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 40px;
height: 40px;
font-size:18px;
background-color: #f1c40f;
-webkit-animation: color 5s ease-in  0s infinite alternate running;
-moz-animation: color 5s linear  0s infinite alternate running;
animation: color 5s linear  0s infinite alternate running;
}

/* Animasi + Prefix untuk browser */
@-webkit-keyframes color {
    0% { background-color: #f1c40f; }
    32% { background-color: #e74c3c; }
    55% { background-color: #9b59b6; }
    76% { background-color: #16a085; }
    100% { background-color: #2ecc71; }
}
@-moz-keyframes color {
     0% { background-color: #f1c40f; }
    32% { background-color: #e74c3c; }
    55% { background-color: #9b59b6; }
    76% { background-color: #16a085; }
    100% { background-color: #2ecc71; }
}
@keyframes color {
  0% { background-color: #f1c40f; }
    32% { background-color: #e74c3c; }
    55% { background-color: #9b59b6; }
    76% { background-color: #16a085; }
    100% { background-color: #2ecc71; }
}


Hasil dari kode tersebut adalah akan membuat ikon sosmed anda berubah warna tiap 5 detik, dah hasil dari script diatas nanti seperti dibawah ini sob

Kode merubah warna ini saya dapet dari

http://www.tutorial-webdesign.com/membuat-animasi-backround-website-barubah-ubah-warna/

Read More ->>