Website Edukasi Indonesia: December 2015

Thursday, December 31, 2015

Cara Membuat Google Custom Search Engine (CSE) di Blog 2016

Google Custom Search Engine merupakan mesin pencarian yang dibuat melalui akun Google kita, dan widget ini bisa kita pasang di Blog. Google Custom Search Engine (CSE) kita bisa menyesuaikan background sesuai dengan website atau blog.

CSE berfungsi untuk menelusuri semua isi laman pada web atau blog Anda, cara ini cukup efektif. Untuk Anda yang ingin membuat Google Custom Search Engine, berikut ini langkah-langkahnya:

Membuat Google Custom Search Engine di Blog :

1. Login dengan menggunakan Google Account.
2. Masuk ke Google Custom Search Engine
3. Klik tombol Buat Mesin Telusur Khusus berada di pojok kanan atas.

4. Kemudian akan muncul halaman Konfigurasi

Lakukan konfigurasi mesin pencari yang akan dibuat dengan mengisi content yang tersedia, Misalnya:
* Dukungan >> Tuliskan URL situs yang akan ditelusuri
* Bahasa >> Terdapat banyak Pilihan Bahasa, silahkan anda pilih salah satunya
* Nama mesin Telusur >> Tuliskan nama mesin telusur anda
* Klik Buat

5. Selamat mesin telusur anda sudah jadi!
Klik pada Dapatkan Code

6. Kemudian anda copy kode tersebut dan pasangkan diBlog anda

Cara memaang di Blog :
Perlu anda perhatikan, untuk memasang Google Custom Search Engine di Blog, anda jangan keluar dulu dari situs Google Custom Search Engine.

1. Login keakun Blogger
2. Pilih Layout/Tata letak
3. Klik add Gadget
4. Pilih THTML/Javascript
5. Perhatikan pada gambar diatas, klik pada bagian yang saya beri tanda merah untuk mendapatkan script >> copy script tersebut dan pastekan di conten yang telah tersedian pada nomor empat.
6. Klik Simpan

Note:
Anda juga dapat memasang Google Custom Search Engine pada bagian Editor Template, anda cari kode <body> dan terapkan script tersebut dibawah kode body (akan muncul diatas Header).

Live Demo :

Sekian dari saya Cara Membuat Google Custom Search Engine di Blog, semoga bermanfaat!

Monday, December 28, 2015

Cara Flashing / Install Ulang Samsung Galaxy Chat GT-B5330

Samsung Galaxy Chat adalah brand pertama yang di luncurkan oleh Samsung dengan sitem operasi Android Jelly Bean, memiliki ukuran layar 3 inci dan mengusung keyboard tipe QWERTY. Vendor Samsung melengkapi ponsel dengan kamera utama berkekuatan 2 MP kualitas QVGA.

Samsung Galaxy Chat didukung single provider dan jaringan internet 3G HSDPA. Smartphone ini sebenarnya di bandrol dengan harga terjangkau di tujukan untuk kalangan menengah. Semakin berkembangnya teknologi smartphone, kemampuannya semakin bertambah dan semakin canggih. Karena kemampuan yang di bawa oleh Samsung Galaxy Chat yang standar menjadikan tidak semua aplikasi support di install pada smartphone, membuat ponsel mengalami kendala.

Permasalahan yang muncul pada ponsel biasanya jika di aktifkan hanya muncul dan berhenti di logo, Solusi terbaik untuk keluar dari permasalahan tersebut adalah dengan melakukan flashing. Adapun caranya sebagai berikut ....

Siapkan tiga aplikasi pendukung flashing diantaranya, Firmware Samsung Galaxy Chat , Odin 1.85/versi teranyar. (Anda bisa mendownloadnya disitus - situs penyedia aplikasi tersebut)
Berikutnya kabel data (USB).
Komputer (PC) atau Laptop.

Apabila semua aplikasi pendukung sudah disiapkan langkah berikutnya proses kerjanya:

Pertama : Matikan ponsel, kemudian nyalakan dengan menekan tombol secara bersamaan Vol Down + Home + Power. Maka akan muncul Warning!! (Peringatan), dilanjutkan dengan menekan tombol Volume Up, kemudian Anda akan di bawa masuk ke menu download mode.

Kedua : Ekstrak aplikasi firmware dan odin yang tadi sudah di install, buka odin kemudian hubungkan dengan menggunakan kabel data, tunggu beberapa saat hingga odin mendeteksi perangkat. Apabila sudah terhubung maka akan muncul port pada odin dari perangkat tersebut.

Ketiga : Langkah selanjutnya pada port pilih PDA (beri tanda ceklish) dan firmware �B5330XWUBMD2_B5330OLBBMD2_XSE� yang sudah di ektrak tadi.

Keempat : Apabila semua tahap sudah Anda lakukan, selanjutnya tekan tombol start. Maka odin akan melakukan flashing, tunggu hingga proses selesai sambil minum secangkir kopi sampai muncul notif Pass. (Pada proses ini jangan Anda lepaskan USB dari perangakat)

Kelima : Proses telah selesai maka ponsel akan melakukan reboot secara otomatis. Sekarang proses flashing Samsung Galaxy Chat GT B5330 telah selesai.

Setelah proses flashing selesai, lakukan hard reset untuk membuat proses flashing menjadi lebih baik. Apabila Anda ingin menginstall aplikasi pada perangkat, lakukan dengan bijak pilih aplikasi yang bermanfaat agar ponsel tidak terbebani.

Demikian saya sampaiakan mengenai Cara Flashing / Install Ulang Samsung Galaxy Chat GT-B5330, terimakasih sudah berkunjung di aak-share.com dan semoga bermanfaat.

Sunday, December 27, 2015

Cara Membuat Sitemap Otomatis Sesuai Label di Blog Keren

Sitemap adalah salah satu alat bantu untuk para webmaster mempermudah dalam pengenalan peta situs di dalam website, itu merupakan sedikit pengertian sitemap dalam Google. Namun Sitemap yang saya tuliskan ini berbeda dengan sitemap Google, Sitemap berikut ini hanya akan memunculkan artikel yang sebelumnya telah dipublikasikan sesuai dengan lebel.

Riview Sitemap Otomatis Blog Sesuai Label

Artikel yang baru di publikasikan, pada Sitemap ini akan tertulis atau di beri tandan New! menjadikan pengunjung tahu artikel baru Anda. Bagi anda yang ingin menerapkannya di Blog kesayangan Anda, berikut adalah langkah-langkah penerapannya :

Cara Membuat Sitemap Blog Sesuai Label

1. Login ke Blogger
2. Selanjutnya Klick New Page/Laman Baru
3. Kemudian copy kode dibawah ini dan pastekan pada Mode HTML

</script>

4. Publikasikan

Silahkan Anda ganti kode yang saya beri warna biru dengan alamat URL Blog Anda.
Demikian Cara Membuat Sitemap Blog Sesuai Label semoga bermanfaat!

Ukuran Lapangan Futsal Standar Nasional dan Internasional

Futsal merupakan permainan bola beregu yang di lakukan dua tim, dan pada setiap tim terdiri dari 5 (lima) orang. Permainan futsal bisa di lakukan di in dor maupun out dor, lapangan ada yang terbuat dari rumput sitetis dan ada juga terbuat semen yang halus. Nah bagi Anda yang ingin membuat lapangan futsal berikut ukurannya beserta gambar :

Lapangan Futsal berbentuk persegi panjang, dengan ukuran sebagai berikut:

Panjang: 25 � 42 m.
Lebar: 15 � 25 m.

Ukuran standar pertandingan futsal internasional:

Panjang: 38 � 42 m
Lebar: 18 � 25 m.

Tanda Lapangan
Lapangan ditandai dengan garis pembatas lapangan. Garis yang berukuran lebih panjang disebut garis samping (touch line), sedang garis yang lebih pendek adalah garis gawang (goal line).
Lebar garis pembatas 8 cm.

Lapangan dibagi menjadi dua bagian yang sama luas dan diberi garis. Garis ini disebut garis tengah.
Titik tengah ditandai dengan titik tepat di tengah lapangan, lalu garis melingkar dibuat dengan titik pusat di titik tengah tersebut dengan jari-jari lingkaran 3 m.

Area Penalti
Daerah di depan gawang yang ditandai dengan garis setengah lingkaran disebut daerah penalti. Penentuan areal penalti adalah:
Dibuat dua garis seperempat lingkaran berjari-jari 6 m di dalam lapangan dengan titik pusat setiap

Tiang gawang
Satu ujung tiap garis seperempat lingkaran menempel di garis gawang. Satu ujung yang lainnya tepat berada di depan setiap tiang gawang. Kedua ujung yang berada di depan kedua tiang gawang dihubungkan dengan garis lurus sepanjang 3,16 m sejajar dengan garis gawang. Mengapa harus 3,16 m??? Karena 3,16 m ini didapat dari jumlah lebar gawang dan diameter ketebalan dua buah tiang gawang, yang masing-masing diameternya 8 cm.

Titik Penalti Pertama
Posisinya berjarak 6 m dari titik tengah antara kedua tiang gawang.

Titik Penalti Kedua
Posisinya berjarak 10 m dari titik tengah antara kedua tiang gawang.

Daerah Tendangan Sudut
Di setiap masing-masing sudut lapangan dibuat seperempat lingkaran dengan jari-jari 25 cm.

Daerah Bebas
Daerah bebas ini terletak di lima meter sekeliling garis tengah lapangan. Daerah ini harus bebas pandangan ke lapangan, karena di sisi luar daerah bebas ini terdapat meja wasit ketiga dan pencatat waktu. Jarak meja wasit ketiga ini minimal dua meter dari garis tepi lapangan.

Daerah Pergantian Pemain
Lima meter setelah garis daerah bebas adalah daerah pergantian pemain. Daerah ini ditandai dengan garis yang memotong garis samping. Lebar garis ini adalah 8 cm, dan panjangnya 80 cm (40 cm di dalam lapangan, 40 cm di luar lapangan).

Gawang
Gawang harus ditempatkan di bagian tengah masing-masing garis gawang. Lebar gawang adalah 3 m diukur dari bagian dalam tiang. Sedangkan tinggi gawang adalah 2 m diukur dari bagian dalam tiang

Palang atas gawang ke lantai
Bentuk penampang tiang yang diperbolehkan adalah kotak dan lingkaran, namun bentuk penampang lingkaran lebih dianjurkan, karena selain relatif lebih aman jika terjadi benturan juga pantulan bola dengan tiang penampang bundar lebih menghasilkan arah yang akurat.
Jaring gawang berbahan nilon, yang diikatkan ke tiang dan palang gawang. Kedalaman gawang adalah 80 cm untuk bagian atas gawang, dan 100 cm untuk bagian bawah.

Permukaan Lapangan
Permukaan lapangan harus halus, rata dan tidak licin. Bahan yang disarankan adalah kayu / parkit. Sangat tidak disarankan menggunakan bahan beton dan paving stone. Pemilihan bahan permukaan lapangan ini bertujuan mengutamakan keselamatan pemain futsal.

Ketetapan
Jika garis gawang antara 15-16 m, radius seperempat lingkaran hanya diukur sebesar 4 m. Dalam hal ini titik penalti tidak lagi ditempatkan pada garis yang dibatasi daerah penalti, tapi berada pada jarak 6 m dari titik tengah antara posisi kedua tiang gawang. Garis dapat digambarkan di luat lapangan, 5 m dari sudut lapangan dan pada sudut kanan dan kiri dari garis gawang untuk memastikan jarak ini dapat diamati bila tendangan sudut dilakukan. Lebar garis ini 8 cm.

Dua garis tambahan dengan masing-masing jarak 5 m pada kanan dan kiri titik penalti kedua untuk menggambarkan jarak pengamatan ketika tendangan bebas dilakukan dari titik penalti kedua.
Tempat duduk pemain cadangan berada di belakang garis pembatas lapangan, tepat di samping daerah bebas yang berada di depan meja pencatat waktu (time keeper).

Demikian saya sampaikan Ukuran Lapangan Futsal Nasional dan Internasional, Terimakasih sudah berkunjung di aak-share.com dan semoga bermanfaat.

Saturday, December 26, 2015

Cara Mudah dan Cepat Download Video YouTube di Android

Siapa yang tidak kenal dengan YouTube, layanan situs video grtais milik Google yang menampilkan banyak film, video musik, video lucu dan cuplikan video olahraga.

Sudah tahukan Anda men-download video di Youtube bisa di lakukan di smartphone Android tidak hanya di laptop atau komputer saja. Caranya juga terbikang mudah dan cepat loch sobat, tidak perlu menginstal sofware atau aplikasi tambahan di smartphone Android. Bagaimana caranya, yuuk sobat ikutin panduannya di bawah ini ....

Cara Mudah dan Cepat Download Video YouTube di Android

Download aplikasi browser Opera Mini di Google Play, apa bila di hp Android Anda sudah Ada bisa melewati langkah ini.
Setelah selesai men-downlioad, buka aplikasi tersebut, kemudian kunjungi situs TouTube.
Setelah Anda masuk, pilih video clip atau film yang ingin Anda download.
Setelah menemukan video tersebut klik, untuk membuka video. Biasanya terdapat keterangan video tidak bisa terbuka, Anda tidak perlu menghiraukannya.
Berikutnya Anda menuju link video tersebut, terdapat di atas layar. Tambakan link di depannya dengan dua huruf SS.

Contoh : https://m.ssyoutube.com/watch?v=wfLvrYYACY8
Setelah di tambahkan klik enter atau Go

Maka Anda akan di arahkan ke situs savefrom.net, selanjutnya Anda sedikit scroll kebawah terdapat banyak pilihan format video. Pilihlah sesuai yang Anda kehendaki, kemudian klik di format video tersebut.
Kemudian akan muncul notifikasi untuk mengunduh, klik tombol simpan untuk mulai mengunduh.
Tunggu sampai proses unduh selesai.

Naah, sekarang Anda sudah memiliki video tersebut mudah bukan. waktu utuk mengunduh biasanya tidak memerlukan waktu lama sekitar 5 menit, dengan catatan koneksi jaringan internet pada smartphone Anda baik.

Cukup sekian dulu ya sobat tutorial Cara Mudah dan Cepat Download Video YouTube di Android, terimakasih sudah berkunjung di aak-share.com dan semoga bermanfaat.

Friday, December 25, 2015

Cara Membuat Halaman Info Timeline di Blog

Membuah Halaman Informasi Timeline - Memberikan Informasi kepada pengunjung dapat kita lakukan dengan beberapa style seperti Info Box atau juga pesan pembuka . Pada kali ini Aak akan memberikan Tips Membuah Halaman Informasi Timeline , Anda bisa menginformasikan pada halaman dengan menampilkan waktu.

Demo CODE

Untuk menciptakannya dengan menggunakan properti CSS, bagi Anda yang tertarik berikut ini langkah-langkahnya :

Silahkan Anda buka Editor Template, kemudian Anda cari kode ]]></b:skin> dan salin kode dibawah ini terapkan diatasnya atau sebelumnya :

.container {
width: 400px;
margin: 0 auto;
}

a {
color: #5890FF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

.box {
border: 1px solid #ddd;
padding: 10px 12px;
margin-bottom: 15px;
background: #fff;
box-sizing: border-box;
border-radius: 3px;
overflow: hidden;
}
.box.blue {
border: 1px solid #5890FF;
}
.box .header {
position: relative;
color: #9197a3;
font-size: 12px;
line-height: 1.38;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid #ddd;
}
.box .header a {
font-weight: bold;
}
.box .header .date {
position: absolute;
right: 0;
top: 0;
}
.box .links {
margin-top: 8px;
font-size: 12px;
line-height: 1.38;
}
.box .links a {
color: #5890FF;
text-decoration: none;
}
.box .links a:hover {
text-decoration: underline;
}
.box .footer {
color: #444;
font-size: 12px;
line-height: 1.38;
border-top: 1px solid #ddd;
background: #5F5F5F;
padding: 5px 12px;
margin: 8px -12px -10px -12px;
}

Kemudian selanjutnya Anda terapkan pada Entri baru mode HTML atau Anda juga bisa menempatkan di manapun yang Anda inginkan.

<div class="container">
<div class="box">
<div class="header">
<a href="http://www.aak-share.com">www.aak-share.com</a> Information
<div class="date">
11. Februari 2015</div>
</div>
<div class="body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div class="links">
<a href="http://www.aak-share.com">Link</a></div>
<div class="footer">
This is a Footer</div>
</div>
<div class="box">
<div class="header">
<a href="http://www.aak-share.com">www.aak-share.com</a> Information
<div class="date">
11. Februari 2015</div>
</div>
<div class="body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div class="links">
<a href="http://www.aak-share.com">Link</a></div>
<div class="footer">
This is a Footer</div>
</div>
<div class="box blue">
<div class="header">
<a href="http://www.aak-share.com">www.aak-share.com</a> Information
<div class="date">
11. Februari 2015</div>
</div>
<div class="body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
<div class="links">
<a href="http://www.aak-share.com">Link</a></div>
<div class="footer">
This is a Footer</div>
</div>
</div>

Semoga bermanfaat!

Cara Membuat Kotak Deskripsi Effect Bounce

Cara Membuat Deskripsi Effect Bounce ~ Seperti apa yang saya jelaskan sebelumnya pada Navigasi Bouncing, pada deskripsi berikut ini juga memiliki effect yang sama yaitu Bounce. Ketika Anda klik pada menu maka akan muncul sebuah deskripsi dan effect Bounce atau memantul , effect yang muncul menjadikan tampilan lebih menarik.

Untuk membuat memantul kita juga bisa membuatnya dengan menggunkan marquee seperti pada widget yang satu ini bergerak memantul dengan menggunakan effect marquee. Namun pada Deskripsi Effect Bounce ini tidak menggunakan marquee melaikan menggunkan -webkit-animation .

Demo CODE

Bagaimana Anda tertarik memasangnya pada Blog kesayangan Anda, baiklah sobat berikut ini yang perlu Anda lakukan tahap demi tahapannya :

Tahap pertama Anda menuju Editor Template, kemudian Anda cari kode ]]></b:skin> lalu salin kode dibawah ini dan pasangkan diatasnya atau sebelumnya .

/*Deskripsi Effect Bounce */
.container {
width: 800px;
display: block;
margin: 25vh auto;
}

.button-text {
padding: 5px;
color: #fff;
font-weight: normal;
text-transform: none;
font-size: 12px;
margin-top: 10px;
line-height: 16px;
text-align: left;
display: none;
opacity: 0;
}

.blup {
margin: 10px;
display: inline-block;
width: 60px;
height: 60px;
background-color: #b21b00;
color: #df2b09;
list-style: none;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 1px;
font-weight: bold;
border: none;
border-radius: 100%;
-webkit-animation: blup .8s both;
transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.15);
overflow: hidden;
-webkit-user-select: none;
/* box-shadow: 0px 8px 20px 0px rgba(0,0,0,.4);*/
}
.blup.active {
width: 200px;
height: 200px;
border-radius: 100%;
-webkit-animation: blup .8s both;
}
.blup:active {
-webkit-animation: inherite;
-webkit-transform: scale(0.95);
/* box-shadow: 0px 2px 10px 0px rgba(0,0,0,.5);*/
}
.blup:focus {
outline: none;
}

@-webkit-keyframes blup {
0% {
-webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
2.083333% {
-webkit-transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
4.166667% {
-webkit-transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
6.25% {
-webkit-transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
8.333333% {
-webkit-transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
10.416667% {
-webkit-transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
12.5% {
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
14.583333% {
-webkit-transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
16.666667% {
-webkit-transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
18.75% {
-webkit-transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
20.833333% {
-webkit-transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
22.916667% {
-webkit-transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
25% {
-webkit-transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
27.083333% {
-webkit-transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
29.166667% {
-webkit-transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
31.25% {
-webkit-transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
33.333333% {
-webkit-transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
35.416667% {
-webkit-transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
37.5% {
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
39.583333% {
-webkit-transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
41.666667% {
-webkit-transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
43.75% {
-webkit-transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
45.833333% {
-webkit-transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
47.916667% {
-webkit-transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
50% {
-webkit-transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
52.083333% {
-webkit-transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
54.166667% {
-webkit-transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
56.25% {
-webkit-transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
58.333333% {
-webkit-transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
60.416667% {
-webkit-transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
62.5% {
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
64.583333% {
-webkit-transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
66.666667% {
-webkit-transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
68.75% {
-webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
70.833333% {
-webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
72.916667% {
-webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
75% {
-webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
77.083333% {
-webkit-transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
79.166667% {
-webkit-transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
81.25% {
-webkit-transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
83.333333% {
-webkit-transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
85.416667% {
-webkit-transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
87.5% {
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
89.583333% {
-webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
91.666667% {
-webkit-transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
93.75% {
-webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
95.833333% {
-webkit-transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
97.916667% {
-webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
100% {
-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
}
.ripple {
position: absolute;
background: rgba(0, 0, 0, 0.15);
border-radius: 100%;
-webkit-transform: scale(0);
pointer-events: none;
}
.ripple.show {
-webkit-animation: ripple .75s ease-out;
}

@-webkit-keyframes ripple {
to {
-webkit-transform: scale(3);
opacity: 0;
}
}

Pada tahapan kedua Anda cari kode </body> kemudian Anda salin kode dibawah ini :

Apabila pada Template Anda sudah terinstal kode diatas, Anda bisa melewati langkah tersebut.

Tahapan ketiga masih pada kode </body> , silahkan Anda salin kode dibawah ini kemudian pasangkan diatasnya atau dibawah kode diatas.

Tahapan keempat, pemasangan HTML. Silahakan Anda copy kode di bawah ini dan pasangakan sesuai yang Anda kehendaki bisa pada Widget, postingan atau yang lainnya .

<div class="container">

<button class="blup active">Define<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div><span class="ripple show grow" style="width: 140px; height: 140px; top: -27px; left: 28.5px;"></span></button>

<button class="blup active">Describe<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div><span class="ripple show grow" style="width: 140px; height: 140px; top: -5px; left: 46.5px;"></span></button>

<button class="blup active">Discover<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div><span class="ripple show grow" style="width: 140px; height: 140px; top: -27px; left: 53.5px;"></span></button>

<button class="blup active">Design<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div></button>

<button class="blup active">Develop<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div><span class="ripple show grow" style="width: 140px; height: 140px; top: 56px; left: 26.5px;"></span></button>

<button class="blup active">Deliver<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div><span class="ripple show grow" style="width: 140px; height: 140px; top: 60px; left: 55.5px;"></span></button>

</div>

Anda bisa memodifikasinya dengan menambahkan link pada kotak deskripsi atau yang lainnya

Semoga bermanfaat!

Cara Membuat Halaman Title On Klik di Blog

Cara Membuat Halaman Title ON Klik ~ Hallo sobat .. berjumpa kembali . Kali ini Aak akan berbagi Tips Membuat Halaman Title On klik. Tentunya Sobat sudah mengetahui fungsi pada Title, tidak perlu saya jelaskan kembali ya Sobat karena sebelumnya saya sudah membahas mengenai Title yaitu Membuat ALT dan Title Tag Otomatis Pada Gambar dan juga Title Tooltip Link dengan CSS.

Demo CODE

Pada dasarnya pembuatan title pada gambar hanya menambahkan title , untuk title satu ini sangat berbeda ya sobat karena terlihat seperti navigasi berada dibawah template dan melayang walaupun halaman discroll sampai keatas, dan jika link tersebut di klik maka akan muncul sebuah halaman . Cara pemasanganya sebagai berikut :

Buka Editor template Anda cari kode ]]></b:skin> dan slain kode dibawah ini pasangkan diatasnya.

/*Expanding Tittle*/
.tiles {
position: fixed;
z-index: 5;
bottom: 0;
display: flex;
width: 100%;
}
.tiles__tile {
flex: 1;
padding: 20px;
transition: all .25s ease-out;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.tiles__tile.active:nth-child(1) {
background: tomato;
}
.tiles__tile.active:nth-child(2) {
background: deepskyblue;
}
.tiles__tile.active:nth-child(3) {
background: lightseagreen;
}
.tiles__tile.active:nth-child(4) {
background: crimson;
}
.tiles__tile:hover:nth-child(1) {
background: tomato;
}
.tiles__tile:hover:nth-child(2) {
background: deepskyblue;
}
.tiles__tile:hover:nth-child(3) {
background: lightseagreen;
}
.tiles__tile:hover:nth-child(4) {
background: crimson;
}

.content {
z-index: 10;
height: 100vh;
position: fixed;
top: 0;
}
.content__item {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10;
display: flex;
align-items: center;
padding: 12vw;
-webkit-transform: scale(0);
transition: all 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}
.content__item.active {
-webkit-transform: scale(1);
}
.content__item.active .content-wrap {
-webkit-transform: scale(1);
opacity: 1;
}
.content__item:nth-child(1) {
-webkit-transform-origin: 0% 100%;
background: tomato;
}
.content__item:nth-child(2) {
-webkit-transform-origin: 33% 100%;
background: deepskyblue;
}
.content__item:nth-child(3) {
-webkit-transform-origin: 66% 100%;
background: lightseagreen;
}
.content__item:nth-child(4) {
-webkit-transform-origin: 100% 100%;
background: crimson;
}
.content__item .content-wrap {
-webkit-transform: scale(0.7);
opacity: 0;
transition: all 0.8s 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --------------- */
.stuff {
margin: 6vw;
max-width: 768px;
}

h2 {
font-weight: 300;
}

h3 {
font-size: 48px;
}

p {
font-weight: 300;
font-size: 24px;
}

Selanjutnya Anda cari kode </body> , kemudian salin kode dibawah ini dan pasangkan diatasnya. Apabila pada Template Anda sudah ada kode tersebut , Anda bisa melewati tangkah tersebut.

Masih pada Kode </body> , silahkan Anda copy Javascript dibawah ini dan pasangkan dibawah kode diatas atau diatas kode </body>.

Selanjutnya Anda pasangkan kode dibawah ini di atas </body>

<div class="stuff">
</div>
<ul class="tiles">
<li class="tiles__tile" data-tile="1">
<h2>
One</h2>
</li>
<li class="tiles__tile" data-tile="2">
<h2>
Two</h2>
</li>
<li class="tiles__tile" data-tile="3">
<h2>
Three</h2>
</li>
<li class="tiles__tile" data-tile="4">
<h2>
Four</h2>
</li>
</ul>

<ul class="content">
<li class="content__item" id="1">
<div class="content-wrap" style="-webkit-transition: 0s; transition: 0s;">
<h3>
Apples</h3>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et reprehenderit nostrum nisi aliquam nemo non fugit, minus, ex ullam vel minima libero, eius labore. Veritatis odit blanditiis quidem amet accusantium.
</div>
</li>
<li class="content__item" id="2">
<div class="content-wrap" style="-webkit-transition: 0s; transition: 0s;">
<h3>
Bananas</h3>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae impedit aperiam nemo quos fuga illum porro doloribus quisquam quidem reprehenderit, hic tempora, illo id provident aliquam quo officia ea voluptatum.
</div>
</li>
<li class="content__item" id="3">
<div class="content-wrap" style="-webkit-transition: 0s; transition: 0s;">
<h3>
Cucumbers</h3>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias nam nesciunt maiores. Nesciunt explicabo ea deserunt facere sunt, autem, reiciendis nobis, velit accusantium laudantium quis non ratione aspernatur. Eum, doloribus?
</div>
</li>
<li class="content__item" id="4">
<div class="content-wrap" style="-webkit-transition: 0s; transition: 0s;">
<h3>
Spinach</h3>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi velit iure expedita quis, blanditiis. Consectetur incidunt distinctio dolor ullam beatae cum maiores quas pariatur amet, temporibus ad commodi dolorem provident.
</div>
</li>
</ul>

Terimakasih sudah berkunjung di aak-share.com dan Semoga bermanfaat!