Berlangganan Melalui Email

logoblog
Telah Hadir Fitur SSL Blogger Custom Domain HTTPS

Blogger telah resmi menyediakan Fitur SSL atau HTTPS untuk custom domain dengan menggunakan HTTPS agar lebih aman lagi pada domain kita dan juga ngak perlu menggunakan Cloudfire lagi karena Blogger sudah menyediakan Fitur SSL secara gratis tanpa perlu repot banget.

Fitur SSL ini sangat berguna sekali menurut saya karena jadi lebih aman dari virus untuk blog tentu saja ada hal lain yaitu blog jadi serasa lebih Profesional karena menggunakan HTTPS pada domain yang kita punya.

Tutorial Mengatifkan SSL

1. Masuk ke link berikut https://draft.blogger.com

2. Silahkan klik Setelan > Dasar > dan pilih YES pada bagian yang saya kasih box merah

Telah Hadir Fitur SSL Blogger Custom Domain HTTPS

3. Tunggu sekitaran 10 menit agar fitur HTTPS dapat digunakan pada domain kita

4. Jika sudah kamu pilih YES pada bagian bawahnya juga agar HTTPS dapat berjalan

5. Cek blog kamu sekarang sudah ada HTPPS nya

Agar ada tanda gembok hijau kamu harus mengganti link HTTP menjadi HTTPS agar gembok pada domain menjadi hijau
Read More »

logoblog
Cara Membuat Partner Box Di Widget

Partner Box biasanya sih digunakan buat naruh iklan berukuran 125x125 kalau saya sendiri sering begitu tapi yah tergandung dari pemakai itu sendiri mau dijadikan sebuah Partner Box atau Iklan Box. Pada Partner Box saya memberikan 4 Box kosong yang dapat kamu ganti nanti pada bagian IMG dengan berukuran 125x125 tidak boleh lebih karena akan kacau untuk ukuran gambar nya.

Partner Box ini dapat sobat pasang di Widget pada Tata Letak blog dengan mudah tanpa perlu ribet hanya perlu copy dan paste doank yah pastinya perlu sedikit editan pada bagian gambar karena itu dapat mengalihkan ke url blog saya nanti.

Tutorial


1. Masuk ke blog sobat

2. Klik Tata Letak > Tambahkan Gadget > Pilih HTML/JAVASCRIPT > Kemudia copy kode dibawah dan paste

<div class="kotak_iklan">
<a href="http://www.kangian.com/p/contact-us_16.html" target="_blank" title="Pasang Iklan"><img style="border: none;" src="https://2.bp.blogspot.com/-qImlN0dl-PM/Wfjiea80zkI/AAAAAAAAFls/vZcqfxryuc0AuyHTnRX8gEaNMkoEJDRuACLcBGAs/s1600/yeside.png" alt="Pasang Iklan" title="Pasang Iklan" width="125" height="125"></a>
<a href="http://www.kangian.com/p/contact-us_16.html" target="_blank" title="Pasang Iklan"><img style="border: none;" src="https://2.bp.blogspot.com/-qImlN0dl-PM/Wfjiea80zkI/AAAAAAAAFls/vZcqfxryuc0AuyHTnRX8gEaNMkoEJDRuACLcBGAs/s1600/yeside.png" alt="Pasang Iklan" title="Pasang Iklan" width="125" height="125"></a>
<a href="http://www.kangian.com/p/contact-us_16.html" target="_blank" title="Pasang Iklan"><img style="border: none;" src="https://2.bp.blogspot.com/-qImlN0dl-PM/Wfjiea80zkI/AAAAAAAAFls/vZcqfxryuc0AuyHTnRX8gEaNMkoEJDRuACLcBGAs/s1600/yeside.png" alt="Pasang Iklan" title="Pasang Iklan" width="125" height="125"></a>
<a href="http://www.kangian.com/p/contact-us_16.html" target="_blank" title="Pasang Iklan"><img style="border: none;" src="https://2.bp.blogspot.com/-qImlN0dl-PM/Wfjiea80zkI/AAAAAAAAFls/vZcqfxryuc0AuyHTnRX8gEaNMkoEJDRuACLcBGAs/s1600/yeside.png" alt="Pasang Iklan" title="Pasang Iklan" width="125" height="125"></a>
</div>
<style>
.kotak_iklan {margin:auto;text-align:center;}
.kotak_iklan .sidebar .widget-content,.kotak_iklan .sidebar-two .widget-content{padding:0;border:0;}
.kotak_iklan .sidebar .widget {margin-bottom:0;padding:0;}
.kotak_iklan img{background:#fff;text-align:center;margin:10px 5px;transition:all .6s}
.kotak_iklan img:hover{box-shadow:0 8px 20px rgba(0,0,0,0.15),0 5px 5px rgba(0,0,0,0.12)}
.kotak_iklan2 {text-align:center;margin:0 auto;transition:all 1s ease-out}
.kotak_iklan2 .sidebar .widget-content,.kotak_iklan2 .sidebar-two .widget-content{padding:0;background:#f2f6f7;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);border:0;}
.kotak_iklan2 .sidebar .widget,.kotak_iklan2 .sidebar-two .widget {margin-bottom:0;padding:0;}
.kotak_iklan2  img {text-align:center;transition:all 1s ease-out;}
.kotak_iklan2  img:hover {transition:all .5s ease-out;}
.kotak_iklan3 {position:relative;margin:0 auto;}
#HTML6 .widget-content{background:#ecf0f1;padding:5px 0}
</syle>


3. Edit pada bagian Url agar tidak dialihkan ke halaman blog saya nanti

4. Simpan

5. Selesai

Heeh sekian dulu sob karena lagi ngak ada ide lagi buat post jadi begini lah nasib saya 😂
Read More »

logoblog

Animation atau animasi pasti sudah sobat kenal sendiri yah lewat berbagai macam animasi css dari Search ataupun Popup fanspage facebook yang pernah sobat pasang di blognya. Tapi sekarang saya hanya akan membuat Animation Shake saja atau animasi getar, animasi ini akan bekerja saat mouse mengarah ke gambar saja.

Untuk membuat animasi shake ini cukup mudah ngak ribet amat ngak kayak buat CSS untuk tampilan yang sangat bikin puyeng bin ribet.

Tutorial Animation Shake


1. Masuk ke blog sobat > lalu pilih Edit Tema > Klik Edit HTML

2. Cari kode img usahain ketemu yah

3. Tambahkan kode berikut untuk membuat animation shake tersebut agar jalan

{animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform: translate3d(0, 0, 0);backface-visibility: hidden;perspective: 1000px;}
@keyframes shake {10%, 90% {transform: translate3d(-1px, 0, 0);}20%, 80% {transform: translate3d(2px, 0, 0);}30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}40%, 60% {transform: translate3d(4px, 0, 0);}

4. Bila ngak mau ribet copy kode ini dan paste saja di kode <style> dibawahnya

img:hover{animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform: translate3d(0, 0, 0);backface-visibility: hidden;perspective: 1000px;}
@keyframes shake {10%, 90% {transform: translate3d(-1px, 0, 0);}20%, 80% {transform: translate3d(2px, 0, 0);}30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}40%, 60% {transform: translate3d(4px, 0, 0);}}

5. Simpan Template

6. Selesai

Untuk demo udah lihat gambar diatas pasti bergetar saat sobat mengarahkan kursor mouse ke gambar diatas.


Read More »

logoblog
Cara Membuat Jadwal Pelajaran Dengan PhotoshopBagi kalian yang ingin membuat Jadwal Pelajaran yang menarik dan bagus sekali dan juga keren loh apalagi ditambah dengan bumbu bumbu warna yang makin menarik nantinya, Disini saya cuman menyediakan dari hari Senin - Jumat saja karena tidak ada hari Sabtu kan sekolah udah full day sekarang :'v

Tutorial


Bahan:
  1. Mentahan gambar udah pasti saya kasih lah :v
    Cara Membuat Jadwal Pelajaran Dengan Photoshop
  2. Tahu jadwal sendiri lah biar tar ngak pusing buatnya :v
  3. Siapkan makanan dan minuman biar enak buatnya :v
  4. Kalau bisa pake Photoshop CS6 karena disini saya pake CS6
Tutorial

1. Buka Photoshop sobat dan masukan gambar mentahan tinggal di Drag and Drop aja
2. Buat Text jadwal pelajaran hingga hari jumat menjadi seperti ini
3. Setelah itu jadikan Covert To Smart Objek agar semua Teks menjadi satu

Cara Membuat Jadwal Pelajaran Dengan Photoshop
4. Ulangin aja cara buatnya seperti diatas hingga ke hari Jumat
5. Maka hasilnya akan terlihat seperti ini

Oke sekian dulu yah sob nanti saya lanjutkan lagi Tutorialnya :)
Read More »

logoblog
Cara Membuat Flat Design Gadget Dengan Photoshop
Hai kembali lagi bersama saya, pada kali ini saya akan menshare cara untuk membuat Flat Design yang sangat mudah dan enggak ribet banget cocok sekali buat kamu yang masih pemula. Flat Design sendiri sangat bagus karena tidak perlu penambahan effek effek yang 3D karena untuk membuat Flat Design cukup dengan beragam Warna saja.

Langsung ke Tutorial nya gan


Bahan:
  1. Photoshop nya wajib punya 
  2. Warna warna yang cukup familiar yang bagus bisa dilihat disini
  3. Siapkan kopi biar semangat mu membara lagi
1. Setelah itu sekarang mari kita buka dulu Photoshop nya > setelah dibuka buat dulu projek baru dengan cara masuk ke menu kemudian pilih File > New atau bisa juga gunakan shortcut Ctrl+N dan silahkan sesuaikan ukurannya.

2. Buat shapes pertama untuk smartphone, yaitu dengan menggunakan Rounded Rectangle Shapes Tool


Cara Membuat Flat Design Gadget Dengan Photoshop

3. Selanjutnya adalah buat shapes berbentuk persegi panjang yaitu Rectangle Shapes Tool. silahkan buat ditengah Rounded Rectangle Shapes tadi. Untuk mengatur ukurannya bisa menggunakan Free Transform (Ctrl+T)


Cara Membuat Flat Design Gadget Dengan Photoshop

4. Sekarang tambahkan shapes lain, seperti shapes lingkaran seperti tombol pada IPhone dan kamera



Cara Membuat Flat Design Gadget Dengan Photoshop


5. Selesai itulah cara buat Flat Design Gadget untuk Tablet caranya sama saja cuman agak lebih besar saja dan bisa dilihat di HP anda yang dipakai lalu kreasikan saja ide yang terdapat pada kalian dan tuangkan dengan Photoshop agar lebih indah :)
Read More »