PESLAW: September 2019

Sayembara Untuk Mendesain Logo Dapodik Hadiah 30Juta

Sayembara Untuk Mendesain Logo Dapodik Hadiah 30Juta - Logo Dapodik adalah logo yang khusus didesain untuk memperkenalkan identitas sistem pendataan Dapodik sebagai program unggulan Kementerian Pendidikan dan Kebudayaan.

Data Pokok Pendidikan (Dapodik) merupakan suatu sistem pendataan yang dikelola oleh Kementerian Pendidikan dan Kebudayaan yang memuat data satuan pendidikan, peserta didik, pendidik dan tenaga kependidikan, dan substansi pendidikan yang datanya bersumber dari satuan pendidikan yang terus menerus diperbaharui secara daring.

Dapodik memiliki karakteristik data yaitu: Individual, Relasional, Longitudinal, Terintegrasi dan Data Digital/Elektronik.

Semakin Lama pendataan Dapodik terus berkembang semakin Baik dan meningkat dan maju dengan kualitas data yang terus meningkat dari waktu ke waktu.

data pokok pendidikan atau kita sering menyebutnya DAPODIK merupakan sistem informasi pendidikan nasional yang memuat basis data pendidikan yang berbasis teknologi informasi dab komunikasi.

sistem pendataan sebagai pelaksanaan permendikbud nomor 79 tahun 2015 tentang data pokok pendidikan ini di desain untuk mewujudkan basis data tunggal sehingga dapat tercipta tata kelola data pendidikan yang terpadu dan menghasilkan data yang represintative untuk memenuhi kebutuhan kementrian dan pemangku kepentingan lainnya.

saat ini dapodik telah menjadi program unggulan kementrian pendidikan dan kebudayaan.

Pesan dalam logo:

"Satu Data Pendidikan Indonesia"

Syarat peserta:

Berlaku hanya bagi Warga Negara Indonesia (WNI)
Bukan Pegawai Kemendikbud, termasuk UPT daerah
Satu peserta hanya diperbolehkan mengirim satu karya.

Ketentuan Umum Sayembara:

Karya asli peserta sayembara, bukan meniru/menjiplak desain yang sudah ada
Tidak mengandung unsur pornografi dan isu SARA
Karya desain logo belum pernah diikutsertakan pada lomba dan/atau dipublikasikan sebelumnya
Hak Cipta atas karya yang ditetapkan sebagai pemenang sayembara menjadi sepenuhnya milik Kemendikbud
Keputusan penetapan pemenang tidak dapat diganggu gugat.

Ketentuan teknis logo:

Logo berwarna dan hitam putih dikirim dalam 3 format, yaitu: pdf, png, dan jpeg
Menyertakan penjelasan konsep desain sesuai dengan filosofi logo

Tata cara sayembara:

Buat desain logo dengan mengikuti kriteria pesan yang harus disampaikan
Kirim karya desain ke tautan https://s.id/formulirsayembaralogodapodik
Batas akhir pengiriman karya: Senin, 30 September 2019
Data Peserta menyebutkan:

Nama Lengkap
Tempat/tanggal Lahir
Jenis Kelamin
Alamat
No Kartu Keluarga
No KTP
Telepon/Handphone
Email
Lampiran: (desain logo dan penjelasan makna logo)

Mengikuti akun resmi instagram @kemdikbud.ri
Unggah desain melalui akun instagram peserta dengan menyertakan tagar #LombaLogoDapodik, #LogoDapodik dan #SayembaraLogoDapodik kemudian tag dan mention @kemdikbud.ri pada tanggal yang ditentukan (Senin, 30 September 2019, paling lambat pukul 16.00 WIB)

Hadiah:

Pemenang diumumkan di laman kemdikbud.go.id dan akun media sosial Kemendikbud, pada tanggal 11 Oktober 2019
Diberikan hadiah sayembara berupa:
1. Juara 1 Rp. 15.000.000,- + Sertifikat
2. Juara 2 Rp. 5.000.000,- + Sertifikat
3. Juara 3 Rp. 3.000.000,- + Sertifikat
4. Juara 4 – 10 @ Rp. 1.000.000,- + Sertifikat

Pajak hadiah ditanggung oleh pemenang.

Pemenang akan menandatangani pernyataan penyerahan hak cipta logo.

Dalam rangka semakin menguatkan tata kelola pendataan satu pintu melalui Dapodik dan mewujudkan basis data tunggal untuk data pendidikan Indonesia, Kementerian Pendidikan dan Kebudayaan menyelenggarakan Sayembara Desain Logo Dapodik. Syarat dan ketentuannya selengkapnya ada di:

http://dapo.dikdasmen.kemdikbud.go.id/berita/sayembara-desain-logo-dapodik

Atau di :

https://www.kemdikbud.go.id/main/blog/2019/09/sayembara-desain-logo-dapodik-kemendikbud

By at September 28, 2019
Labels: Dapodik

Free Download Aplikasi Al Quran Android Tanpa Iklan

Free Download Aplikasi Al Quran Tanpa Iklan , kita mungkin sudah tau apa itu alquran, tetapi alangkah baiknya kita mengurai kan sedikit lagi tentang alquran.

Alquran adalah Firman allah Yang tiada tandingannya, yang di turunkan kepada nabi muhammad SAW. penutup para nabi dan rasul dengan perantara Malaikat jibril dan dulis dalam mushaf-mushaf yang kemudian di sampaika kepada kita secara mutawatir, serta membaca dan mempelajarinya merupakan ibadah yang mana al quran tersebut di mulai dengan surat al fatihah dan di tutup dengan surat an nas.

Akan tetapi menurut WIKIPEDIA adalah sebuah kitab suci utama dalam agama Islam, yang umat Muslim percaya bahwa kitab Alquran diturunkan oleh Allah kepada Nabi Muhammad. Kitab Alquran terbagi ke dalam beberapa surah, dan setiap surahnya terbagi ke dalam beberapa ayat.

Umat Muslim percaya bahwa Al-Qur'an difirmankan langsung oleh Allah kepada Nabi Muhammad melalui Malaikat Jibril, berangsur-angsur selama 22 tahun, 2 bulan dan 22 hari atau rata-rata selama 23 tahun, dimulai sejak tanggal 17 Ramadan, saat Nabi Muhammad berumur 40 tahun hingga wafat pada tahun 632.

Umat Muslim menghormati Al-Qur'an sebagai sebuah mukjizat terbesar Nabi Muhammad, sebagai salah satu tanda dari kenabian, dan merupakan puncak dari seluruh wahyu yang diturunkan oleh Allah sejak Nabi Adam dan diakhiri dengan Nabi Muhammad. Kata "Quran" disebutkan sebanyak 70 kali di dalam Al-Qur'an itu sendiri.

Dan Kami turunkan dari Al Qur’an suatu yang menjadi penawar dan rahmat bagi orang-orang yang beriman dan Al Qur’an itu tidaklah menambah kepada orang-orang yang lalim selain kerugian. QS. Al Israa’ (17) : 82

Baiklah, udah cukup kiranya kita membahas tentang alquran, akan tetapi kita Beruntung di era digital seperti saat ini, seorang muslim bisa membaca kitab suci al quran dimana saja dan kapan saja, hanya menggunakan aplikasi. Karena memang sudah banyak aplikasi Al-quran di platform, seperti Android.

Memang Rasanya Tidak lengkap kalau di smartphon kita tidak di isi dengan aplikasi al quran

Lebih-lebih lagi Di bulan Puasa Ramadan, Itu Adalah Sebahgian waktu yang tepat untuk meningkatkan iman dan taqwa. Salah satunya dengan mengisi waktu dengan membaca Al-Quran.

Fitur – Fitur Aplikasi Al Quran Seperti Berikut :

Design yang menarik dan intuitif dengan ornamen khas islami

Tanpa Iklan

Tampilan antarmuka yang mudah digunakan

Baca Al Quran dengan mode layar landscape atau portrait

Tersedia mode terang maupun gelap

Ragam tampilan mushaf versi Indonesia dengan tajwid atau non-tajwid

Ragam tampilan mushaf versi Madinah dengan tajwid atau non-tajwid

Terdapat pembeda halaman kanan dan kiri Al Quran

Menggunakan Rasm Usmani pada setiap tampilan Al Quran

Al Quran per kata tajwid maupun non-tajwid yang memudahkan pengguna mengerti makna setiap kata di Al Quran

Al Quran per ayat versi Indonesia dengan penulisan yang rapi

Menandai halaman yang dibaca dengan pembatas yang cantik dan mudah digunakan

Otomatis menandai halaman yang terakhir dibaca

Terjemahan Bahasa Indonesia sesuai Kementrian Agama RI

Tulisan latin (transliterasi)

Pencarian ayat berdasar kata kunci dari terjemahan

Daftar surah terurut sesuai index dan per juz

Jalan pintas untuk menampilkan ayat tertentu secara cepat

Audio mp3 murottal 30 juz dari qori pilihan, diantaranya: Syaikh Mishary Rashid, Syaikh Abdul Rahman Al-Sudais, Syaikh Saad Al-Ghamdi, Syaikh Mahmud Khalil Al-Husary

Pengontrol audio murottal (play, pause, informasi ayat yang sedang dibaca)

Menjalankan audio murottal dari ayat ke ayat, dapat diulang 2-3 kali untuk mengingat hafalan (murojaah)

Bookmark ayat-ayat pilihan

Jadwal sholat lengkap sesuai lokasi pengguna (imsakiyah)

Pengingat waktu sholat dengan perhitungan waktu mundur yang atraktif dan notifikasi adzan dari muadzin pilihan

Penunjuk Qiblat

Kalender hijriah

Link
DOWNLOAD

By at September 24, 2019
Labels: Aplikasi Android

Cara Memasang Kode Javascript Di Css Blog

Halo Jumpa lagi dengan saya kali ini kita akan membagikan Cara Memasang Kode Javascript Di Css Blog.

saudara jika kita hendak membangun sebuah website tentu ada yang nama nya template atau tema dari sebuah website dan tak luput yang namanya dengan kode-kode unik, seperti HTML, CSS, Jquery, dan Javascript.

apa sih HTML... ? HTML adalah sebuah script untuk membuat halaman blog kita. kalau Css adalah kode pengaturan terhadap seluruh tampilan di tema blog kita.

sedangkan Javascript adalah untuk memberikan efek pada tampilan blog. dari sekian banyaknya kasus membingungkan yang di alami oleh bloger, dan yang paling sering di alami adalah pengkodean Css untuk HTML.

kita juga harus tau bahwa kode titik (.) pada CSS untuk menunjukan perintah kepada DIV-CLASS. sedangkan tanda pagar (#) untuk DIV-ID.

Adapun Cara Memasang Kode Javascript Di Css Blog adalah sebagai berikut :

Pertama-tama kita sediakan dulu kode javascript nya. setelah itu gunakan kode ini untuk mengaktifkannya <script type="text/javascript" >
Letak kode JavaScript
</script>

Jika cara diatas tidak mempan maka gunakan kode ini : <script type="text/javascript" >
//<![CDATA[
Letak kode JavaScript
//]]></script>

Jika tidak mempan juga. berarrti ada yang tidak beres dalam meletakkan kode Javascript tersebut.

Dan letakan kode Java Script terbut berada diatas kode </head> atau di atas kode k </body>

sekian dulu pembahasan kita pada hari mudah-mudahan bermanfaat.

By at September 22, 2019
Labels: JAVASCRIPT, TUTORIAL

Begini Cara Terbaru Menangkap Layar Atau Screenshoot Di Laptop Atau Pc

halo sobat Berjumpa lagi dengan Kita Pada Kali kali Ini kita akan berbagi tentang Cara Screenshoot Atau Tangkapan Layar Di Laptop Atau Pc

Tau tidak Apa itu Screenshoot.... ?
Screenshoot atau tangkapan layar adalah gambar image yang memberikan tampilan layar laptop atau Pc milik kita. dan pungsinya tentulah gambar tersebut sangat berguna jika kita hendak membagikannya kepada kawan-kawan kita atau kepada orang lain.

Contohnya kita bisa membagikan hal-hal penting tersebut dari tangkapan layar alias screenshoot tersebut kepada situs-situs.atau bisa juga kita bisa berbagi hasil tangkapan tersebut di blog pribadi kita untuk tambahan isi dari artikel kita loh..

Adapun Metodenya ada beberapa cara :

Pastikan tampilan layar laptop kita sudah sesuai dengan yang kita inginkan

1. Screenshoot dengan cara melalui pintasan keybort

Caranya tekanlah tombol Windows dengan tombol PrtScr Secara Bersamaan. akan tetapi layar laptop ataupun Pc kita kemungkinan akan redup sejenak. berrti itu tandanya bahwa screenshot yang kita inginkan tersebut telah sukses.

Cari Hasil Screenshot. setelah kita mengklik tombol Windows dengan tombol PrtScr Secara Bersamaan. tentu kita akan bertanya-tanya. loh di manakah hasil dari screenshot tersebut. cara nya bukalah file explorer lalu pilih Fictures dari panel kiri jendela lalu bukalah folder "screenshoot" setelah terbuka maka hasil dari screenshoot tersebut akan terkumpul di dalam folder tersebut. dan screenshoot terbaru akan memiliki nomor urut terbesar dapada folder. dan screenshoot akan tersimpan dengan format nama "Screenshoot(#)".

2. klik jendela yang ingin kita Screenshoot dengan mengklik bilah judulnya

cara nya tahan tombol ALT+PrtScr secara Bersamaan. Maka screenshoot akan tersalin ke clipboard akan tetapi di beberapa perangkat kita . dengan cara menekan Alt+Fn+PrtScr.

Selanjuutnya kita buka Aplikasi Paint. kita dapay mencari hasil nya tersebut lewat ikoon bilah pencarian di bilah tugas.

klik tempel Atau Vaste atau Crtl+V di aplikasi paint. Setelah gambar sudah berada di aplikasi Paint maka jangan lupa pula untuk mengklik tombol crop pada Pita menu Di atas jendela Paint tersebut. Setelah itu jangan lupa klik Save untuk menyimpan Gambar Atau b isa juga menekan tombol Crtl+S.

Pilih lokasi Penyimpanan Berkasnya. Setelah kita mengklik Save atau menekan tombol Crtl+S. maka otomatis muncul pop up yang berisikan folder. maka klik salah satu folder untuk meletakan berkas hasil screeenshoot tadi kemana sana yang kita suka. setelah itu jangan lupa buatkan nama berkas nya agas mudah mencari gambar hasil scereenshoot tadi jika suatu saat kita sudah membutuhkannya.

3. cara Selanjutnya Menggunankan Snipping Tool

Melalui Snipping Tool caranyan carilah snipping tool Di kotak Pencarian Biasanya Disamping Menu Star. Selanjutnya bukalah snipping Tool Dengan mengklik hasil pencarian.biasanya program ini kita menangkap bagiantertentu tampilan layar laptop kita. setelah itu maka kita klik panah di sebelah New. kita dapat menggunakan salah satu opsi untuk screenshoot. "free-form snip". "Rectangular snip". "windows snip" dan "full-screen snip".

setelah itu Pilih New untuk mengaburkan layar dan mengubah kursor menjadi "+". tarik kursor nya untuk memilih daerah layar yang ingin kita ambil screennya. dan daerah yang nampak jelas maka itu akan menjdi bagian dari screenshoot. selanjutnya jangan lupa mengklik save file untuk menyimpan gambar di laptop kita.

By at September 22, 2019
Labels: TUTORIAL

Cara Membuat Menu 3D Tampilan Seperti Jendela Keren Di Blog

Dalam Posting ini kita akan membahas tentang Cara Membuat Menu 3D Tampilan Seperti Jendela Keren Di Blog dengan menggunakan tag html dan kode Css saja.

Dan tentunya kali ini tidak akan kalah keren dengan postingan yang lain. Yaitu Kita akan share Menu dengan tampilan 3D dan saat disentuh mouse akan terbuka seperti layaknya jendela kamar rumah.

Penasaran...?

Nah itu saja yang dapat Kita gambarkan tentang postingan kali, tak perlu panjang panjang ini untuk lebih jelasnya dapat kita lihat dan dowload filenya.

Baiklah berikut ini tag html yang dapat membangun Menu 3D Tampilan Seperti Jendela Keren Di Blog :

Caranya tinggal salin dan vaste kan saja kode di bawah ini pada situs kita tepat nya di Settingan Tema > pilih Edit HTML > terus Tekan CTRL+F > setelah itu cari Kode ini </b:skin> Lalu Vastekan Kode di bawah ini Tepat di Atas Nya.

Kode css

Dan Kode yang dibawah ini salin dan vaste kan di TATA LETAK

pilih Di mana saja yang kita sukai lalu Klik tambahkan widget lalu pilih HTML/Java scrift setelah itu jangan lupa di vaste.

Dan lihatlah hasilnya..

Kode Html

div id='menufixed'>
<div class="menu3Dflip">
<ul class="nav">
<li><a class="top-a" href="#link"><b>Home</b></a></li>
<li><a class="top-a" href="#link"><b>Menu 1</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#link">Sub Menu 1</a></li>
<li><a href="#link">Sub Menu 2</a></li>
<li><a href="#link">Sub Menu 3</a></li>
<li><a href="#link">Sub Menu 4</a></li>
<li><a href="#link">Sub Menu 5</a></li>
</ul>
<ul class="col">
<li><a href="#link">Sub Menu 6</a></li>
<li><a href="#link">Sub Menu 7</a></li>
<li><a href="#link">Sub Menu 8</a></li>
<li><a href="#link">Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#link"><b>Menu 2</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#link">Sub Menu 1</a></li>
<li><a href="#link">Sub Menu 2</a></li>
<li><a href="#link">Sub Menu 3</a></li>
<li><a href="#link">Sub Menu 4</a></li>
<li><a href="#link">Sub Menu 5</a></li>
</ul>
<ul class="colRight">
<li><a href="#link">Sub Menu 6</a></li>
<li><a href="#link">Sub Menu 7</a></li>
<li><a href="#link">Sub Menu 8</a></li>
<li><a href="#link">Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#link"><b>Menu 3</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#link">Sub Menu 1</a></li>
<li><a href="#link">Sub Menu 2</a></li>
<li><a href="#link">Sub Menu 3</a></li>
<li><a href="#link">Sub Menu 4</a></li>
<li><a href="#link">Sub Menu 5</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#link"><b>Menu 4</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#link">Sub Menu 1</a></li>
<li><a href="#link">Sub Menu 2</a></li>
<li><a href="#link">Sub Menu 3</a></li>
<li><a href="#link">Sub Menu 4</a></li>
</ul>
<ul class="colRight">
<li><a href="#link">Sub Menu 5</a></li>
<li><a href="#link">Sub Menu 6</a></li>
<li><a href="#link">Sub Menu 7</a></li>
<li><a href="#link">Sub Menu 8</a></li>
<li><a href="#link">Sub Menu 9</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>

Adapun tampilannya nya dapat dilihat hasilnya dan Filenya dapat juga diunduh.
berikut di bawah ini Link :

Demo Unduh

By at September 22, 2019
Labels: HTML, MENU NAVIGASI, TUTORIAL

Cara Membuat Slide Show Image CSS Keren Di Blog

Dalam Posting ini kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal bergerak ke kiri dan ke kanan secara bergantian dengan menggunakan tag html saja.

Slide Image dengan menggunakan CSS dengan Sliding secara horizontal, kali ini saya akan membagikan tersebut. berbagai image post dapat dipasang disini. pada pembuatan slide ini saya hanya menggunakan fungsi tag CSS saja tanpa menggunakan Java Script atau Jquery. Dengan CSS saja sudah cukup keren. Baiklah mari kita lanjutkan penjelasannya untuk pembuatan slider ini. Berikut ini fungsi CSS dan HTMLnya.

Baiklah berikut ini tag html yang dapat membangun Slide Image nya :

Caranya tinggal vaste kan saja kode di bawah ini pada situs kita tepat nya di TATA LETAK

Klik tambahkan widget lalu pilih HTML/Java scrift lalu vaste. lihat hasilnya..

css

<div id="sliderSK">
<style>
#sliderSK {
width: 468px;
height: 260px;
overflow: hidden;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
}
#maskSK {
overflow:hidden;
}
#sliderSK:hover {
background-color:#fff;
border-right: 4px solid rgb (176,0,0)
border-left: 4px solid rgb(176,0,0)
border-top: 4px solid rgb (22,22,22)
border-bottom: 4px solid rgb(22,22,22)
box-shadow :0px 0px 13px;
}
#sliderSK:hover #pauseSK {
opacity:1;
}
#sliderSK:hover #progressSK {
background-color:rgba(255,255,255,0.0);
}
#sliderSK:hover ul, #sliderSK:hover #progressSK, #sliderSK:hover #overlaySK {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#sliderSK ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:'Communist-Regular';
text-shadow:1px 1px 1px #362c30;
}
#pauseSK {
width:468px;
height:260px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progressSK {
width:2px;
height:3px;
background-color:#0054BB;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlaySK {
width:4680px;
height:260px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#sliderSK ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#sliderSK li {
display:inline;
width:468px;
height:260px;
margin:0;
padding:0;
float:left;
position:relative;
}
#sliderSK li:last-of-type {
background-color:#362c30;
}
#sliderSK li a {
display:block;
text-decoration:none;
}
#sliderSK li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
</style>

html

Adapun File nya dapat dilihat hasilnya dan dapat juga diunduh berikut di bawah ini :

Demo Unduh

By at September 21, 2019
Labels: HTML, SLIDE SHOW, TUTORIAL

Cara Membuat Slide Show Image Pakai Tombol Dan keterangan Keren Di Blog

Dalam Posting ini - Cara Membuat Slide Show Image Pakai Tombol Dan keterangannya Keren Di Blog kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal Memakai tombol dan juga penampakan keterangannya secara bergantian dengan menggunakan tag Css, html javascrift.

slider Image ini sangat cocok dan tampilannya menarik jika di letakkan untuk bagian atas header blog kita, dengan sliding image secara horizontal Untuk dapat membangun slidernya kita membutuhkan tag css, html, dan Javascript. penasaran .... ? mari kita langsung saja menuju TKP.

kode css

Dan berikut ini tag html yang dapat membangun Slide Image nya :

Caranya tinggal vaste kan saja kode di bawah ini pada situs kita tepat nya di TATA LETAK

Klik tambahkan widget lalu pilih HTML/Java scrift lalu vaste.

kode html

<div id="wrslider">
<div id="mover" style="width: 2880px; left: 0px;">
<div id="slide-1" class="slide">
<h1>
Judul 1</h1>
<p>
tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba.
</p>
<a href="#">
<img alt="learn more" src="image_1.png" style="top: 20px;">
</img>
</a>
</div>
<div class="slide">
<h1>
Judul 2</h1>
<p>
tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba.
</p>
<a href="#">
<img alt="learn more" src="image_2.png" style="top: 20px;">
</img>
</a>
</div>
<div class="slide">
<h1>
Judul 3</h1>
<p>
tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba.
</p>
<a href="#">
<img alt="learn more" src="image_3.png" style="top: 20px;">
</img>
</a>
</div>
</div>
</div>

kode javascrift

dan coba lihat hasilnya..

Adapun File nya dapat dilihat hasilnya dan dapat juga diunduh berikut di bawah ini :

Demo Unduh

By at September 21, 2019
Labels: HTML, SLIDE SHOW, TUTORIAL

Cara Membuat Slide Show Image Dari bawah Ke atas Keren Secara Vertikal Di Blog keren

Dalam Posting ini - Cara Membuat Slide Show Image Vertikal Dari bawah Ke atas Keren Di Blog kita akan membahas tentang membuat tampilan Slide image yang bergerak secara Vertikal bergerak dari bawah ke atas secara bergantian dengan menggunakan tag html Css dan javascrift.

Biasanya Slide show ini sangat cocok jika di pasangkan dan di letakan di bagian sidebar blog kita agar sesuai letak dan posisi nya agar tampilannya menarik dan keren.

slider ini yang sangat cocok dipasang untuk blog kamu, dengan tampilan secara vertikal dan post yang tampil akan bergantian secara terus menerus. Untuk dapat membangun slidernya kita membutuhkan tag css, html, dan Javascript. Penasaran... ? mari kita langsung saja menuju TKP.

Dan berikut ini tag html yang dapat membangun Slide Image nya :

Caranya tinggal vaste kan saja kode di bawah ini pada situs kita tepat nya di TATA LETAK

Klik tambahkan widget lalu pilih HTML/Java scrift lalu vaste.

Kode html

<ul id="mycarousel" class="jcarousel-skin-tango2">
<li class="transparent-1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTjjIUg77cJvg2F6_LIhVl8eHjjBhFQVPUzTZqhJyeRVRhbpsIiJIE9G78WY2YRPZ6F0jMHpo25I_RWCluekkevYHyww6muNNCCA5sfh5tQNV01eANO3-EgxyeK4ysBBVKTYVISk6daTb6/s1600/desain_rumah_idaman.jpg" width="211" height="129" alt=""/>
<h5>
<span><a href="#">Desain Rumah idaman anda, cukup hubungi kami di .,...</a></span></h5>
</li>
<li class="transparent-2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOHT_JTo95oZZ9TvlnCwrTu3E38Cmi1uKIzvnXb8YawCr_1Uz-30kMv4gooH6tuNh_AvxM0XqZNs5TjAGLHlfPDfNbpiCrrc5tmiWlRjfJ0iU8hKUL5YcqauFvztxNrDdJilqtUNDCqKa7/s1600/Desain-Rumah-Idaman-Minimalis-6.jpg" width="211" height="129" alt=""/>
<h5>
<span><a href="#">pengen rumah baru,? hubungi kami...</a></span></h5>
</li>
<li class="transparent-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqrB9dCy-ijy1I6GMUJ5lHngtdF2F59T8E9eEd4tAj2zfhG8Yn6_vyWaCaHBt53QW-DIgwy7Uz4bLI4rX8qFwWWDv5hBYNGp2MZbec1Of-d9vvnVjmiujRnwkSziV-c8Z_TdD6zvQa_PJB/s1600/dijual-rumah-idaman-minimalis-murah-ngeliat-pasti-suka-hub-20140610204123-53976d730d733.jpg" width="211" height="129" alt=""/>
<h5>
<span><a href="#"> jual dengan harga yang memuaskan ?, kunjungi situs kami di ...</a></span></h5>
</li>
<li class="transparent-4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_Hp9YTF7IMCZgyHh_9oIt5XYzNIOFpf7NZ1aGHvuJiMS3j7XrGQ9aaEJt7dQwZgXuxnMu5crAhldXhcKKmRvZ1v0cjZlr7_cHbjiMMHuhV-miXLm-B-TkS9PU_pyf3lJhdnHuZYOS8ts/s1600/Gambar-Model-Rumah-Idaman-2013.jpg" width="211" height="129" alt=""/>
<h5>
<span><a href="#">rumah kos yang mewah dan murah.? hub kami hanya di ...</a></span></h5>
</li>
<li class="transparent-5">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2gIg9xuSmcMnKFRonpqaYz6JzQHnLc_HuHXw-ATRiU3fv1DA31P1CqWhhpXQv7QFrqzIgKNQ11pYVhnFrjWwfAqangjL9qdkbv7t7QhaKUlniqOZz1pNc4l6C2oHfwY7GVuPVVWccU5M/s1600/images.jpg" width="211" height="129" alt=""/>
<h5>
<span><a href="#">hotel penginapan yang memuaskan anda </a></span></h5>
</li>
<li class="transparent-6">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQwfnfuSzUjGNzhO8gNWHtayonoT8-U658ujRaTdghkuDeRreoSbfojSX5J1aIFPLplxCMBICwdI-2bhi-QHujH-muZW0ijeuaEfE96nOyN4m5b8shZ5fv3bj6M6hW1E0HyvyG0bVhZIl/s1600/pantone-titanium-decor-Desain-Interior-dan-Dekorasi-Interior-Rumah-Idaman.jpg" width="211" height="129" alt=""/>
<h5>
<span><a href="#">rumah dapur kami memang disajikan untuk anda</a></span></h5>
</li>
</ul>

Kode javascrift