Cara Mengisi SKAKPT di Simpatika Kemenag

Banyak yang merasa bingung pada saat login simpatika muncul notifikasi "beberapa data yang perlu diperbaiki" dan "masa kerja golongan anda perlu diperbaiki". jika anda melihat notifikasi tersebut maka jangan panik, notifikasi tersebut muncul untuk menyesuaikan dan bertujuan agar anda dapat mengisi data di menu baru yaitu SKAKPT.

Memasuki masa verval Semester Genap Tahun 2018 ini muncul menu baru dalam Simpatika anda. pasti banyak yang bingung bagaimana cara untuk mengisi form pada menu SKAKPT. Surat Keputusan Analisa Kelayakan Penerima Tunjangan (SKAKPT) merupakan sebuah hal yang baru, jadi wajar saja banyak yang bertanya-tanya bagaimana cara megisi SKAKPT. 

Nah berikut ini diuraikan terkait dengan cara pengisian dan prosedur pengajuan SKAKPT.

Sebelum mengisi SKAKPT data-data yang diperlukan seperti, SK Golongan, Nomor NPWP  Beserta foto dan Nomor Rekening Beserta foto harus anda persiapkan terlebih dahulu agar tidak bingung nantinya. Berikut adalah penampakan menu SKAKPT

Berikut ini adalah Uraian Cara Mengisi SKAKPT di Simpatika yang Benar

Adapun Cara Mengisi SKAKPT di Simpatika yang Benar adalah sebagai berikut:
Pertama seperti biasa anda dipersilahkan login terlebih dahulu ke aplikasi Simpatika

kemudian Pilih menu SKAKPT yang berada di bagian bawah
setelah itu untuk mengisi formulir SKAKPT anda dapat mengklik tombol pensil di samping kanan atas.
sedangkan untuk pengisi semua data yang ada, meliputi:

1. Isi Masa Kerja Golongan sesuai SK Golongan anda

2. Scan SK Golongan (foto)
3. Nomor NPWP (Sesuai Kartu)

4. Scan NPWP (foto)
5. Nomor rekening sesuai tabungan (sesuai Kartu)
6. Nama Bank (sesuai Kartu)
7. Nama pada buku tabungan (Sesuai Kartu)
8. Nama cabang Bank (Sesuai Kartu)
9. Scan kartu NPWP (Foto)
10. Scan buku tabungan info depan (foto)

Setelah lengkap mengisi semuanya silahkan cek terlebih dahulu karena data sangat rawan dalam kesalahan pengetikan. pastikan nomor rekening dan nomor NPWP anda benar, jika sudah yakin klik simpan perubahan.

Setelah mengklik simpan perubahan seharusnya anda dapat mengklik simpan permanen pada menu di atas form SKAKPT namun kami masih kurang tahu karena sampai sekarang masih tidak bisa di klik pada menu simpan Permanen SKAKPT. Mungkin cukup demikian saja tutorial tentang Cara Mengisi KAKPT yang dapat kami sampaikan. semoga bermanfaat.

20 Animasi Font Awesome Terbaru

Dengan adanya sedikit bekal kini saya akan berbagi mengenai Animasi Font Awasome, mungkin sobat sudah banyak mengetahui cara membuat animasi dari font awesome, namun yang akan saya berikan ini merupakan salah satu hal yang sangat baru, dan tidak di publikasikan di website penyedia font awesome itu sendiri. Cara membuat animasi font awesome yang saya dapatkan ini merupakan hasil dari pencarian dari website yang merupakan langganan saya membacanya, walaupun bahasa inggris namun saya berusaha menggunakan translate agar paham.

Font Awesome yang saya gunakan adalah versi 4.5.0 yang terdiri dari 650 icon merupakan versi terbaru yang ada sekarang. Namun untuk animasi hanya bisa menggunakan spin, tentu saja kalau menurut saya kurang menarik kalau cuma bisa berputar. Untuk memperbanyak animasi icon font Awesome saya menggunakan CSS3 yang telah di ajarkan di website langganan saya. Mudah-mudahan ini juga bermanfaat bagi sobat semua.

20 Animasi Font Awesome

Untuk ini saya akan menjelaskan animasi apa saja yang akan saya berikan kepada sobat sekalian, yang pertama animasi icon font awesome tambahan selain animasi spin masih ada 19 animasi icon font awesome lagi yang harus sobat ketahui, animasi tersebut terdiri dari 2 style yaitu Animasi on Load (berfungsi pada saat halaman di buka) dan Hover (berfungsi pada saat kursor mouse di arahkan ke icon). Langsung saja sobat lihat contoh di bawah ini:

1. Animasi On Load 

Kode Animasi	Font Awesome
1. faa-bounce animated
2. faa-wrench animated
3. faa-ring animated
4. faa-horizontal animated
5. faa-vertical animated
6. faa-flash animated
7. faa-float animated
8. faa-shake animated
9. faa-spin animated
10.faa-pulse animated

Animasi On Load biasanya digunakan untuk widget navigasi agar pengunjung tertarik untuk melihat ke arah sana.. misalnya topik terhangat, iklan dan lain-lain. intinya bisa menambah daya tarik pengunjung blog untuk melihat icon tersebut karena dia bergerak setelah halaman tampil.

2. Animasi Hover

Kode Animasi	Font Awesome
1. faa-bounce animated-hover
2. faa-wrench animated-hover
3. faa-ring animated-hover
4. faa-horizontal animated-hover
5. faa-vertical animated-hover
6. faa-flash animated-hover
7. faa-float animated-hover
8. faa-shake animated-hover
9. faa-spin animated-hover
10.faa-pulse animated-hover

Hover bisanya digunakan untuk navigasi yang ada di leadership, dan biasa juga digunakan untuk navigasi berupa sosial media, hal tersebut di sebabkan oleh karena icon font awesome sangat lengkap sehingga sangat mudah menambahkan icon sosial media di blog kita. Dengan menggunakan fungsi hover akan membuat tampilan navigasi menjadi lebih hidup dan menarik.

Nah itulah ke 20 animasi icon font awesome yang saya dapatkan, Keren kan, yang sebelumnya hanya spin saja bisa menjadi berbagai efek animasi. oh ia untuk penggunaan animasi tersebut sobat tinggal tambahkan aja kode animasi setelah kode font awesome yang biasanya sobat gunakan jadi tinggal di gabung saja.

Contoh: 'fa fa-glass tinggal tambah faa-shake animated menjadi

'fa fa-glass faa-shake animated'

Untuk penggunaan font awesome sebagai tombol atau navigasi seperti yang saya gunakan di pojok kanan atas, bisa di beri warna juga untuk penggunaan dalam animasi icon font awesome juga bisa menambahkan sytle warna yang sobat inginkan biar lebih keren lagi misalnya bisa kita ubah menjadi dan bisa kita tambahkan animasi lagi menjadi dalam penggunaan untuk tombol sobat tinggal menambahkan button misalnya

Contoh: untuk menambahkan warna sobat bisa menambahkan kode style="color: #003399; di belakang kode icon font awesome contoh fa fa-facebook-official" style="color: #003399;"

untuk penggunaan animasi di atas agar berfungsi sobat harus menambahkan kode CSS lagi di template sobat agar dapat digunakan sepenuhnya. Dengan senang hati saya akan membagikan kode tersebut untuk digunakan oleh sobat. berikut adalah kode cssnya

@-webkit-keyframes wrench{0%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}18%,20%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}28%,30%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}38%,40%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}48%,50%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}58%,60%{-webkit-transform:rotate(-24deg);transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg);transform:rotate(24deg)}100%,75%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
@keyframes wrench{0%{-webkit-transform:rotate(-12deg);-ms-transform:rotate(-12deg);transform:rotate(-12deg)}8%{-webkit-transform:rotate(12deg);-ms-transform:rotate(12deg);transform:rotate(12deg)}10%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}18%,20%{-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}28%,30%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}38%,40%{-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}48%,50%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}58%,60%{-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}68%{-webkit-transform:rotate(24deg);-ms-transform:rotate(24deg);transform:rotate(24deg)}100%,75%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}}.faa-parent.animated-hover:hover>.faa-wrench,.faa-wrench.animated,.faa-wrench.animated-hover:hover{-webkit-animation:wrench 2.5s ease infinite;animation:wrench 2.5s ease infinite;transform-origin-x:90%;transform-origin-y:35%;transform-origin-z:initial}.faa-parent.animated-hover:hover>.faa-wrench.faa-fast,.faa-wrench.animated-hover.faa-fast:hover,.faa-wrench.animated.faa-fast{-webkit-animation:wrench 1.2s ease infinite;animation:wrench 1.2s ease infinite}.faa-parent.animated-hover:hover>.faa-wrench.faa-slow,.faa-wrench.animated-hover.faa-slow:hover,.faa-wrench.animated.faa-slow{-webkit-animation:wrench 3.7s ease infinite;animation:wrench 3.7s ease infinite}
@-webkit-keyframes ring{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}100%,20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}
@keyframes ring{0%{-webkit-transform:rotate(-15deg);-ms-transform:rotate(-15deg);transform:rotate(-15deg)}2%{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}4%{-webkit-transform:rotate(-18deg);-ms-transform:rotate(-18deg);transform:rotate(-18deg)}6%{-webkit-transform:rotate(18deg);-ms-transform:rotate(18deg);transform:rotate(18deg)}8%{-webkit-transform:rotate(-22deg);-ms-transform:rotate(-22deg);transform:rotate(-22deg)}10%{-webkit-transform:rotate(22deg);-ms-transform:rotate(22deg);transform:rotate(22deg)}12%{-webkit-transform:rotate(-18deg);-ms-transform:rotate(-18deg);transform:rotate(-18deg)}14%{-webkit-transform:rotate(18deg);-ms-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-12deg);-ms-transform:rotate(-12deg);transform:rotate(-12deg)}18%{-webkit-transform:rotate(12deg);-ms-transform:rotate(12deg);transform:rotate(12deg)}100%,20%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}}.faa-parent.animated-hover:hover>.faa-ring,.faa-ring.animated,.faa-ring.animated-hover:hover{-webkit-animation:ring 2s ease infinite;animation:ring 2s ease infinite;transform-origin-x:50%;transform-origin-y:0;transform-origin-z:initial}.faa-parent.animated-hover:hover>.faa-ring.faa-fast,.faa-ring.animated-hover.faa-fast:hover,.faa-ring.animated.faa-fast{-webkit-animation:ring 1s ease infinite;animation:ring 1s ease infinite}.faa-parent.animated-hover:hover>.faa-ring.faa-slow,.faa-ring.animated-hover.faa-slow:hover,.faa-ring.animated.faa-slow{-webkit-animation:ring 3s ease infinite;animation:ring 3s ease infinite}
@-webkit-keyframes vertical{0%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px);transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px);transform:translate(0,3px)}100%,22%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@keyframes vertical{0%{-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);transform:translate(0,-3px)}4%{-webkit-transform:translate(0,3px);-ms-transform:translate(0,3px);transform:translate(0,3px)}8%{-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);transform:translate(0,-3px)}12%{-webkit-transform:translate(0,3px);-ms-transform:translate(0,3px);transform:translate(0,3px)}16%{-webkit-transform:translate(0,-3px);-ms-transform:translate(0,-3px);transform:translate(0,-3px)}20%{-webkit-transform:translate(0,3px);-ms-transform:translate(0,3px);transform:translate(0,3px)}100%,22%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}}.faa-parent.animated-hover:hover>.faa-vertical,.faa-vertical.animated,.faa-vertical.animated-hover:hover{-webkit-animation:vertical 2s ease infinite;animation:vertical 2s ease infinite}.faa-parent.animated-hover:hover>.faa-vertical.faa-fast,.faa-vertical.animated-hover.faa-fast:hover,.faa-vertical.animated.faa-fast{-webkit-animation:vertical 1s ease infinite;animation:vertical 1s ease infinite}.faa-parent.animated-hover:hover>.faa-vertical.faa-slow,.faa-vertical.animated-hover.faa-slow:hover,.faa-vertical.animated.faa-slow{-webkit-animation:vertical 4s ease infinite;animation:vertical 4s ease infinite}
@-webkit-keyframes horizontal{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}6%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}12%{-webkit-transform:translate(0,0);transform:translate(0,0)}18%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}24%{-webkit-transform:translate(0,0);transform:translate(0,0)}30%{-webkit-transform:translate(5px,0);transform:translate(5px,0)}100%,36%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@keyframes horizontal{0%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}6%{-webkit-transform:translate(5px,0);-ms-transform:translate(5px,0);transform:translate(5px,0)}12%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}18%{-webkit-transform:translate(5px,0);-ms-transform:translate(5px,0);transform:translate(5px,0)}24%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}30%{-webkit-transform:translate(5px,0);-ms-transform:translate(5px,0);transform:translate(5px,0)}100%,36%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}}.faa-horizontal.animated,.faa-horizontal.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-horizontal{-webkit-animation:horizontal 2s ease infinite;animation:horizontal 2s ease infinite}.faa-horizontal.animated-hover.faa-fast:hover,.faa-horizontal.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-horizontal.faa-fast{-webkit-animation:horizontal 1s ease infinite;animation:horizontal 1s ease infinite}.faa-horizontal.animated-hover.faa-slow:hover,.faa-horizontal.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-horizontal.faa-slow{-webkit-animation:horizontal 3s ease infinite;animation:horizontal 3s ease infinite}
@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}
@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.faa-flash.animated,.faa-flash.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-flash{-webkit-animation:flash 2s ease infinite;animation:flash 2s ease infinite}.faa-flash.animated-hover.faa-fast:hover,.faa-flash.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-flash.faa-fast{-webkit-animation:flash 1s ease infinite;animation:flash 1s ease infinite}.faa-flash.animated-hover.faa-slow:hover,.faa-flash.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-flash.faa-slow{-webkit-animation:flash 3s ease infinite;animation:flash 3s ease infinite}
@-webkit-keyframes bounce{0%,10%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%,60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}
@keyframes bounce{0%,10%,100%,20%,50%,80%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%,60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}.faa-bounce.animated,.faa-bounce.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-bounce{-webkit-animation:bounce 2s ease infinite;animation:bounce 2s ease infinite}.faa-bounce.animated-hover.faa-fast:hover,.faa-bounce.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-bounce.faa-fast{-webkit-animation:bounce 1s ease infinite;animation:bounce 1s ease infinite}.faa-bounce.animated-hover.faa-slow:hover,.faa-bounce.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-bounce.faa-slow{-webkit-animation:bounce 3s ease infinite;animation:bounce 3s ease infinite}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);-ms-transform:rotate(359deg);transform:rotate(359deg)}}.faa-parent.animated-hover:hover>.faa-spin,.faa-spin.animated,.faa-spin.animated-hover:hover{-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}.faa-parent.animated-hover:hover>.faa-spin.faa-fast,.faa-spin.animated-hover.faa-fast:hover,.faa-spin.animated.faa-fast{-webkit-animation:spin .7s linear infinite;animation:spin .7s linear infinite}.faa-parent.animated-hover:hover>.faa-spin.faa-slow,.faa-spin.animated-hover.faa-slow:hover,.faa-spin.animated.faa-slow{-webkit-animation:spin 2.2s linear infinite;animation:spin 2.2s linear infinite}
@-webkit-keyframes float{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes float{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.faa-float.animated,.faa-float.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-float{-webkit-animation:float 2s linear infinite;animation:float 2s linear infinite}.faa-float.animated-hover.faa-fast:hover,.faa-float.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-float.faa-fast{-webkit-animation:float 1s linear infinite;animation:float 1s linear infinite}.faa-float.animated-hover.faa-slow:hover,.faa-float.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-float.faa-slow{-webkit-animation:float 3s linear infinite;animation:float 3s linear infinite}
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}
@keyframes pulse{0%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}.faa-parent.animated-hover:hover>.faa-pulse,.faa-pulse.animated,.faa-pulse.animated-hover:hover{-webkit-animation:pulse 2s linear infinite;animation:pulse 2s linear infinite}.faa-parent.animated-hover:hover>.faa-pulse.faa-fast,.faa-pulse.animated-hover.faa-fast:hover,.faa-pulse.animated.faa-fast{-webkit-animation:pulse 1s linear infinite;animation:pulse 1s linear infinite}.faa-parent.animated-hover:hover>.faa-pulse.faa-slow,.faa-pulse.animated-hover.faa-slow:hover,.faa-pulse.animated.faa-slow{-webkit-animation:pulse 3s linear infinite;animation:pulse 3s linear infinite}.faa-parent.animated-hover:hover>.faa-shake,.faa-shake.animated,.faa-shake.animated-hover:hover{-webkit-animation:wrench 2.5s ease infinite;animation:wrench 2.5s ease infinite}.faa-parent.animated-hover:hover>.faa-shake.faa-fast,.faa-shake.animated-hover.faa-fast:hover,.faa-shake.animated.faa-fast{-webkit-animation:wrench 1.2s ease infinite;animation:wrench 1.2s ease infinite}.faa-parent.animated-hover:hover>.faa-shake.faa-slow,.faa-shake.animated-hover.faa-slow:hover,.faa-shake.animated.faa-slow{-webkit-animation:wrench 3.7s ease infinite;animation:wrench 3.7s ease infinite}
@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg)}30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg)}40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg)}100%,80%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(.9) rotate(-8deg);-ms-transform:scale(.9) rotate(-8deg);transform:scale(.9) rotate(-8deg)}30%,50%,70%{-webkit-transform:scale(1.3) rotate(8deg);-ms-transform:scale(1.3) rotate(8deg);transform:scale(1.3) rotate(8deg)}40%,60%{-webkit-transform:scale(1.3) rotate(-8deg);-ms-transform:scale(1.3) rotate(-8deg);transform:scale(1.3) rotate(-8deg)}100%,80%{-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}.faa-parent.animated-hover:hover>.faa-tada,.faa-tada.animated,.faa-tada.animated-hover:hover{-webkit-animation:tada 2s linear infinite;animation:tada 2s linear infinite}.faa-parent.animated-hover:hover>.faa-tada.faa-fast,.faa-tada.animated-hover.faa-fast:hover,.faa-tada.animated.faa-fast{-webkit-animation:tada 1s linear infinite;animation:tada 1s linear infinite}.faa-parent.animated-hover:hover>.faa-tada.faa-slow,.faa-tada.animated-hover.faa-slow:hover,.faa-tada.animated.faa-slow{-webkit-animation:tada 3s linear infinite;animation:tada 3s linear infinite}
@-webkit-keyframes passing{0%{-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50%{-webkit-transform:translateX(0%);transform:translateX(0%);opacity:1}100%{-webkit-transform:translateX(50%);transform:translateX(50%);opacity:0}}
@keyframes passing{0%{-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);opacity:0}50%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%);opacity:1}100%{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);opacity:0}}.faa-parent.animated-hover:hover>.faa-passing,.faa-passing.animated,.faa-passing.animated-hover:hover{-webkit-animation:passing 2s linear infinite;animation:passing 2s linear infinite}.faa-parent.animated-hover:hover>.faa-passing.faa-fast,.faa-passing.animated-hover.faa-fast:hover,.faa-passing.animated.faa-fast{-webkit-animation:passing 1s linear infinite;animation:passing 1s linear infinite}.faa-parent.animated-hover:hover>.faa-passing.faa-slow,.faa-passing.animated-hover.faa-slow:hover,.faa-passing.animated.faa-slow{-webkit-animation:passing 3s linear infinite;animation:passing 3s linear infinite}
@-webkit-keyframes burst{0%{opacity:.6}50%{-webkit-transform:scale(1.8);transform:scale(1.8);opacity:0}100%{opacity:0}}
@keyframes burst{0%{opacity:.6}50%{-webkit-transform:scale(1.8);-ms-transform:scale(1.8);transform:scale(1.8);opacity:0}100%{opacity:0}}.faa-burst.animated,.faa-burst.animated-hover:hover,.faa-parent.animated-hover:hover>.faa-burst{-webkit-animation:burst 2s infinite linear;animation:burst 2s infinite linear}.faa-burst.animated-hover.faa-fast:hover,.faa-burst.animated.faa-fast,.faa-parent.animated-hover:hover>.faa-burst.faa-fast{-webkit-animation:burst 1s infinite linear;animation:burst 1s infinite linear}.faa-burst.animated-hover.faa-slow:hover,.faa-burst.animated.faa-slow,.faa-parent.animated-hover:hover>.faa-burst.faa-slow{-webkit-animation:burst 3s infinite linear;animation:burst 3s infinite linear}

Saya rasa dengan adanya contoh-contoh ini sobat bisa memahaminya, karena penggunaannya juga sangat mudah diterapkan, alasan menggunakan icon font awesome di blog saya adalah karena font awesome sangat ringan dan sangat bersahabat dalam blog, bisa mempercantik tampilan blog juga sobat. Dengan begitu kita akhiri saja tentang Cara Membuat 20 Animasi Font Awesome Terbaru ini.

Cara Memperbaiki Kode Google Tag Manager Error

Mungkin sudah banyak yang mengetahui cara verifikasi blog ke google webmaster tools, untuk blogger pada umumnya bisa mendaftar dengan 3 metode verifikasi, nah sebenarnya apa tujuan verifikasi blog ke google webmaster tool? banyak hal yang dapat sobat dapatkan ketika verifikasi blog sobat, yang paling utama adalah google dapat dengan mudah memaksimalkan perayapan konten blog. yang kedua blog yang sudah terdaftar dan diverfikasi dengan 3 metode yang di sediakan memiliki kemungkinan kecil untuk di hapus oleh google, yang ketiga kegunaan dari verifikasi kita dapat meninjau perkembangan blog kita, dan masih banyak lagi kegunaan dari verifikasi.

Mengenai 3 metode untuk blogger yang telah saya sebutkan di atas merupakan proses verifikasi yang harus kita isi satu per satu, apa saja 3 metode tersebut? yang pertama adalah metode verifikasi HTML Tag, Google Analytics dan Google Tag Manager. yang paling umum biasanya kebanyakan blogger menggunakan metode HTML Tag saja.

Namun setelah saya mendaftar dari ketiga metode tersebut akhirnya mengalami masalah pada metode Google Tag Manager maka dari itu pada kesempatan kali ini saya mendapat pengalaman baru yaitu Memperbaiki Code Google Tag Manager, hal tersebut saya alami pada saat mendaftar dan memasukkan kode yang telah di sediakan oleh google tag manager.

Mengatasi Kode Google Tag Manager Error

Langkah-langkah yang perlu anda lakukan tentu saja membuat akun google tag manager, setelah itu sobat lakukan pendaftaran blog sobat, nah ketika sudah di daftarkan sobat akan diberikan kode yang akan di masukan ke template agar proses verifikasi di google webmaster tools sukses. Pada saat ini kemungkinan sobat akan mengalami masalah yang sama dengan yang telah saya alami, maka dari itu saya akan memberikan Cara Memperbaiki Code Google Tag Manager Error. Berikut ini adalah screenshot kode saat error.

Sesuai dari keterangan  error di atas letak kode yang error ada pada bari ke 778 kolom ke 43 tepatnya pada kode '&l=, nah pada saat itu saya cukup dibuat kebingunan oleh kode tersebut, dengan berbagai cara telah saya lakukan, ternyata dengan merubah kode tersebut bisa kita lakukan untuk mengatasinya.

Caranya kode &l tersebut kita ganti dengan'& amp; l=  hanya itu saja keterangan kode amp; jangan di spasi.

Namun sobat juga bisa menggunakan dengan cara yang berbeda dengan bantuan web tools yang telah saya sediakan yaitu ads conventer, atau bahasa lainnya adalah parse. Parse kode sebenarnya tidak merubah apapun dari fungsi script maka dari itu dengan parse juga aman di lakukan, tinggal sobat saja yang menentukan cara yang mana menurut sobat lebih mudah.

Dengan adanya tutorial ini saya harap tidak ada lagi yang kebingungan seperti yang telah saya alami saat verifikasi google tag manager. Demikian saja tentang Cara Memperbaiki Code Google Tag Manager Error semoga bermanfaat.

Fitur Terbaru Widget Entri yang Diunggulkan atau Featured Post

Halo sobat, saya mau share nih tentang fitur terbaru blogger yaitu Widget Entri atau Featured Post, hari ini pada tanggal 11 Desember tahun 2015 saya melihat ada yang aneh pada saat saya mau menambahkan widget. Kok tiba-tiba ada widget yang baru pernah saya lihat. Ternyata blogger memberikan fitur terbarunya yaitu Widget Entri yang Diunggulkan atau Featured Post sedikit bingung dan bercampur penasaran apa fungsi dari widget tersebut saya langsung coba.

Fungsi dan Keunggulan

Setelah saya coba saya langsung tahu apa fungsi dan keunggulan widget Entri yang Diunggulkan/Featured Post tersebut, sobat mau tahu apa saja fungsi dan keunggulannya? Keunggulan dari widget ini adalah bisa menyematkan posting yang paling sobat rekomendasikan kepada pengunjung. Jika menyematkan posting terus gunanya untuk apa? Jika sobat kurang tertarik dengan fitur terbaru ini sobat perlu tau juga fungsi penyematan atau entri yang diunggulkan.

Entri yang diunggulkan dalam blogger ini berfungsi untuk menyematkan posting yang kita anggap sangat menarik perhatian pengunjung. Sehingga pengunjung dapat dengan mudah menemukan isi yang menarik di dalam blog sobat. Sobat tentunya pernah melihat di Forum-forum jual beli di facebook kan? Nah biasanya di forum facebook tersebut ada posting yang disematkan. Orang juga biasanya rela sampai bayar admin dari forum tersebut hanya untuk menyematkan postingnya. Hal tersebut bertujuan pengunjung forum melihat postingnya pada saat masuk ke dalam forum tersebut.

Featured Post di Blog atau widget entri yang di unggulkan ini juga akan mendukung teknik SEO, mengapa demikian? ini saya berikan gambaran kepada sobat, Misalnya sobat baru saja posting artikel baru, sedangkan sobat ingin banyak pengunjung yang membacanya supaya posting tersebut berada di halaman pertama google pencarian. Nah teknik ini sobat juga bisa terapkan untuk menyematkan posting terbaru tersebut untuk menarik perhatian pengunjung.

Cara pemasangan Widget Entri yang Diunggulkan atau Featured Post

Baiklah daripada saya terus menerus menjelaskan panjang lebar lebih baik saya akan memperlihatkan kepada sobat bagaimana cara menambahkan widget featured post atau entri yang diunggulkan ini.

Nah kira-kira seperti itu nanti akan tampil di blog sobat. Cara pemasangannya sangat mudah jadi tenang saja sobat :). Berikut ini adalah cara pemasangan Widget yang diunggulkan atau featured post.

• Sobat Login ke blog.
• Pilih Layout
• Pilih add widget atau tambahkan widget
• Pilih Widget yang diunggulkan/Featured Post
• Setelah muncul jendela baru, sobat pilih Judul yang ingin sobat tampilkan
• Setelah itu Pilih Save.

Bagaimana? mudah kan, selesai sudah posting kali ini mudah-mudahan sobat dapat menerapkan widget entri yang diunggulkan atau featured post ini dengan baik. Ingat jika memasang widget berlebihan sangatlah tidak baik sobat. Jadi gunakanlah yang mana menurut sobat itu penting, dan yang terpenting adalah posting yang berkualitas. Terima kasih

Cara Membuat Pop Up Keren dan Responsive

Cara Membuat Pop Up Keren dan Responsive - Halo sobat, untuk hari ini saya akan berbagi tips tentang bagaimana membuat berhubung saya melihat popup yang digunakan oleh mbak Arlina saya tertarik dan ingin menambahkan popup tersebut di blog saya juga. Terus saya cari-cari tutorial tentang membuat popup dengan banyak versi yang menarik, namun tidak ada yang mirip seperti blog mbak Arlina tersebut.

Daripada pusing saya memutuskan untuk melihat source dari web mbak Arlina. Ketemu sih namun banyak yang membuat saya bingung. Terutama setelah saya menempatkan kode-kode dari sana tampilan Popup tidak mau muncul ha ha ha... tambah bingung dibuatnya. Namun dari usaha tersebut saya tidak mau mundur saya coba terus berkali-kali dengan sedikit bekal pengetahuan. Sampai keesokan harinya popup saya telah jadi dengan sempurna, sama persis dengan yang dimiliki mbak arlina, Boleh dikatakan ini adalah popup ala arlina design.

Cara Membuat Popup

Sebelum membuat popup alangkah baiknya kita tahu apa itu definisi popup. Menu Popup menurut definisi saya adalah menu yang apabila di klik terus muncul sebuah kotak dialog yang berisi sejenis peringatan, informasi, konfirmasi, dan dialog lainnya. Popup yang berisi peringatan biasanya digunakan untuk memberikan peringatan jika ada kesalahan atau kekurangan, ini biasanya digunakan untuk pencarian, contact form dan sejenisnya. Sedangkan Popup Konfirmasi biasanya digunakan untuk meyakinkan seseorang apakah benar-benar setuju atau tidak, pop up jenis ini biasanya digunakan untuk formulir registrasi, biasanya di dalam pop up ini ditambahkan dengan dialog peringatan. Terakhir adalah Pop up Informasi, seperti yang saya gunakan saat ini adalah sejenis pop up informasi, karena dialog yang saya gunakan adalah untuk memberikan info kepada seseorang untuk mengetahui segala informasi secara ringkas tentang isi dari blog saya. Dari Penjelasan di atas merupakan definisi menurut saya pribadi, jadi jika ada kesalahan saya mohon berkomentar agar saya dapat memperbaiki dengan benar, dan informasi yang saya berikan tidaklah menjadi informasi yang tidak berguna.

Langkah-langkah Membuat Popup

Oke, kita langsung saya ke pokok pembahasan tentang bagaimana membuat pop up seperti yang saya miliki saat ini.

1. Masuk ke blog sobat > dan pilihlah Template > selanjutnya pilih Edit HTML

2. Tambahkan CSS untuk menu pop up. Berikut ini adalah kode CSS yang akan sobat gunakan nantinya.

.boxinner{z-index:99;width:100%;height:575px;position:absolute;left:50%;margin-left:-310px;top:70px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
headbanger{background:#ff675c;height:70px;width:100%;position:inherit}
#textlogo{background:rgba(0,0,0,0.1);color:#fff;line-height:70px;text-align:center;font-size:200%;position:inherit;width:68.5%;box-sizing:initial}
#left{background:#fff;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:200px;position:inherit}
#left a{color:#888;transition:initial;}#left a:hover{color:#fff;}
#left i {margin:0 10px 0 0}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;padding:15px;color:#888;}
.taber1:hover{background:#ff6733;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#383838;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{background:#fafafa;width:62.2%;padding:20px 20px 40px 20px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin:55px 0 0 0}
.scrollbarbox .innerone{height:480px;overflow:auto}
#popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:50px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(0,0,0,0.2);font-family:fontawesome}
a.popup-close:hover{color:rgba(0,0,0,0.6);}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#aaa}
.totalposts .totallabel{display:block;color:#aaa;font-weight:700}
.top-menunavi li.infoInginTahu{border:0;}
.top-menunavi li.infoInginTahu a{background:#ff675c;color:#fff;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}
.top-menunavi li.infoInginTahu a:hover{background:#e4554b;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}

3. Cari kode</head> lalu tambahkan kode script di atasnya. Ingat jangan sampai masuk ke dalam tag kondisional ya sobat. Berikut ini kode javascript yakan sobat tambahkan.

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic");loadCSS("//fonts.googleapis.com/css?family=Roboto+Condensed:400,700");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
// Total Posts
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Artikel yang di Publish</span></div>');}
//]]>
</script>

Script tersebut berfungsi untuk menampilkan jumlah posting yang telah sobat publikasikan.
4. Cari kode <body>ini adalah bagian dimana dalog tersebut akan muncul pada saat menu pop up di klik. Sobat bisa mengubah pesan-pesan yang berisi di dalamnya. Misalnya  Logo, sosial media, dan isi dialog tentang blog sobat. Isikan kode di bawah ini di bawah kode <body>.

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='contentbox'>
<headbanger><span id='textlogo'>Ingin Tahu</span>
<a class='popup-close' href='#closed' title='Close'><i class='fa fa-times'></i></a>
</headbanger>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='Ingin Tahu' height='140' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYq3clKRSc8zsDPQ_PD1vjIjvofmp9W_rT9DK4B4ZicCTZn743TAPX3zHnLuxLAmImECkshqhs_jLxPl19kiQ2NfctEphUfAsOCYZ7hyCtukpUPAMWIWTT9WxfB5HtrNcVulBkDEtLE4X0/s1600/IT-InginTahu.png' title='Ingin Tahu' width='140'/><br/>
<script src='http://memberi-cara.blogspot.com/feeds/posts/default?alt=json-in-script&callback=getposts'></script><br/><br/>
Blog Ingin Tahu merupakan sebuah blog pribadi tempat Saya berbagi mengenai tips seputar blogger<br/><br/>
Mudah-mudahan kedepannya blog ini dapat memberikan kontribusi serta informasi bermanfaat bagi sobat semua. Terima kasih.<br /><br />
<div style=float:right;font-size:8px;margin-bottom:0;><script>eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1.4("<a 2=\'3://0-5.6.7\'>8 9</a>");',11,11,'memberi|document|href|http|write|cara|blogspot|com|Memberi|Cara|'.split('|'),0,{}))</script></div>
</div></div></div>
<div id='left'>
<div class='taber2'><a href='https://plus.google.com/111136239845024944402' rel='nofollow' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus fa-fw'></i> Google Plus</a></div>
<div class='taber3'><a href='https://www.facebook.com/Ingin.Tahu.IT' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook fa-fw'></i> Facebook</a></div>
<div class='taber4'><a href='https://twitter.com/aboeoeba' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter fa-fw'></i> Twitter</a>
</div>
<div class='taber6'><a href='http://codepen.io/abudarda/' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen fa-fw'></i> Codepen</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow-blog.g?blogID=BLOG ID SOBAT' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-users fa-fw'></i> Join this blog</a>
</div></div></div></div></div></div>

Keterangan : parse kode script yang paling atas. Ubah dan sesuaikan pesan singkat tentang informasi blog sobat. Ganti alamat sosial media dan id blog yang telah saya tandai tersebut

5. Langkah terakhir sobat masukkan kode ini di menu yang sobat inginkan:

<li class='infoInginTahu'><a class='popup-link' href='#popup'>Popup </a></li>

Setelah itu save Template dan selesai. Silahkan sobat coba sendiri dan lihat hasilnya.

Demikian saya akhiri saja tutorial tentang membuat menu pop up yang berbentuk dialog informasi. Popup ala arlina design ini saya peroleh dari source kode dari web mbak arlina. Jika ada kesalahan dalam tutorial ini saya mohon maaf dan saya juga ingin sobat memberikan kritik dan saran demi perkembangan blog ini selanjutnya.

Cara Terbaru Mengatasi Alexa No Data

Cara Terbaru Mengatasi Alexa No Data - Hari demi hari saya mencari solusi bagaimana mengatasi rank alexa no data. Lama-lama saya merasa bahwa blog saya emang tidak ada pengunjung, tetapi itu tidak masuk akal, karena belakangan ini meskipun sedikit pengunjung tetapi normal dalam sehari bisa 40-50 oleh karena blog baru sobat :). Kemudian saya cek lagi blog saya yang lama yaitu nagebonar yang bertemakan blog akuntansi, eh tiba-tiba alexanya  hilang entah kemana padahal saya tau persis dulunya rank alexanya muncul.

Tips Mengatasi Alexa No Data Rank

Saya rasa sobat juga bingung kan? Sobat pasti juga bertanya-tanya mengapa alexa rank tiba-tiba no data? makanya sobat sampai mampir di sini ;). Nah keesokan harinya saya mencoba alternatif baru, berfikir secara logika ketika saya menulis blogsaya [dot]blogspot[dot]com, saya lihat link berubah ketika masuk kalau bahasa keren nya redirect link menjadi blogspot[dot]co[dot]id benar kan? kemudian saya coba verifikasi dengan url .co.id tersebut eh tau-taunya alexa rank muncul he he he. Ini pengalaman pribadi saya jadi mohon maaf saya sedikit mendongeng kepada sobat :) yang penting kan saya ingin berbagi dengan tulus kepada sobat sekalian.

Jika sobat kurang percaya atau mengatakan saya salah saya ada bukti berupa gambar yang telah saya ambil dari blog nagebonar yang telah saya jadikan experiment sekarang. Intinya saya memverifikasi blog saya kembali dari com menjadi co.id. Baiklah daripada penasaran sobat bisa lihat gambar di bawah ini dengan jelas.

Nah gambar di atas adalah bukti bahwa saya benar-benar berexperiment sobat. Oh ia mengenai data ID tersebut menurut logika saya sih, karena itu masih baru, sebab waktu saya daftar pertama-tama juga begitu. Hmm sebenarnya juga malu melihat rank 9 jutaan :). Bagi sobat yang masih belum tahu bagaimana cara memverifikasi alexa ke blog saya juga akan mencoba untuk berbagi pengalaman waktu saya mendaftar. 

Cara Mendaftarkan Blog ke Alexa

Tanpa penjelasan panjang saya akan membagikan langkah-langkah dalam memverifikasi blog ke alexa sebagai berikut:

1. Sobat masuk ke www.alexa.com lalu login jika belum punya akun sobat juga bisa ke halaman login di sana disediakan login melalui facebook atau membuat akun melalui email sobat.

2. Sobat menuju alamat www.alexa.com/siteowners/claim untuk verifikasi blog sobat, lalu masukan alamat blog sobat disana. Untuk lebih jelasnya saya tampilkan sebuah gambar dimana sobat akan lebih mudah mengerti dengan gambar ini.

Setelah itu tentunya sobat pilih/klik continue.

3. Setelah itu sobat akan dihadapkan dengan 3 pilihan yaitu Method 1, Method 2 dan Method 3. Jika ingin lebih mudah maka pilihlah method 2. 

4. Jika sudah di klik metode 2 maka sobat akan diberikan verifikasi ID. Nah disitu sobat terlebih dahulu memasukan kode verifikasi ID di meta tag sobat. Jika sudah memasukan dan langsung di save  template barulah sobat  klik verifikasi. Gampang kan? he he

Demikian kisah saya yang saya bagikan kepada sobat tentang cara mengatasi alexa no data dan cara mendaftarkan blog di alexa. Jika sobat merasa tidak yakin dengan cara sebut, sobat bisa abaikan saja. dan saya harap sobat juga memberi solusi yang terbaik. Terima kasih

Cara Membuat Navigasi Horizontal dan Vertikal

Cara Membuat Navigasi Horizontal dan Vertikal - Datang lagi saya dengan sebuah bekal pengalaman yang akan saya bagikan kepada sobat dengan banyaknya pertanyaan-pertanyaan yang saya baca di grup facebook yaitu bagaimana membuat navigasi horizontal maupun vertikal? maka dari itu saya berusaha untuk mendapatkan jawabannya. Mudah-mudahan dengan adanya posting kali ini saya akan dapat sedikit membatu sobat dalam membuat navigasi tersebut.

Saya juga belajar cara ini dari sebuah website yang bernama w3school, tidak dipungkiri pada awalnya juga saya merasa bingung untuk membuat navigasi horizontal maupun vertikal. Kebetulan saya juga masih dalam tahap belajar dalam dunia blogging saya boleh dikatakan masih pemula. Jadi jika ada yang merasa tidak senang dengan posting saya yang terlihat "sok tau" ini saya mohon maaf sebesar-besarnya.

Membuat Navigasi Horizontal

Menu navigasi horizontal termasuk paling banyak dipakai oleh para blogger, karena sangat mudah untuk di akses oleh pengunjung dan juga enak dilihat. Dalam proses pembuatan navigasi ini termasuk mudah, kita hanya melakukannya dengan 2 langkah besar yaitu memasukan kode di head dan body.

berikut adalah langkah-langkah membuat navigasi horizontal:

Langkah-langkah membuat Navigasi Horizontal

1. Masuk ke blogger sobat lalu pilih template > pilih edit HTML > lalu masukan kode CSS di Head sobat, jika bingung cari kode dan simpan sebelum ]]></b:skin> atau kode </style>langsung saja lihat contoh kodenya seperti di bawah ini:

ul{list-style-type:none;margin:0;padding:0;overflow:hidden;border:1px solid #e7e7e7;background-color:#f3f3f3}
li{float:left}
li a{display:block;color:#666;text-align:center;padding:14px 16px;text-decoration:none}
li a:hover:not(.active){background-color:#ddd}
li a.active{color:white;background-color:#4CAF50}

Setelah itu sobat isikan kode dibawah kode <header> lalu tambahkan kode berikut dibawahnya:

<ul>
  <li><a class="active" href="/">Home</a></li>
  <li><a href="#Menu1">Menu1</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Untuk lebih jelasnya sobat bisa lihat demo:

• DEMO

Membuat Navigasi Vertikal

Menu navigasi vertikal termasuk jarang saya lihat dipakai oleh para blogger, karena saya rasa tata letak kurang efisien untuk menu vertikal dan memakan tempat juga sih. Dalam proses pembuatan navigasi ini termasuk mudah sama seperti menu horizontal, kita hanya melakukannya dengan 2 langkah besar yaitu memasukan kode di head dan body.berikut adalah langkah-langkah membuat navigasi vertikal:

Langkah-langkah membuat Navigasi Vertikal

Langkah membuat menu navigasi vertikal hampir sama dengan membuat menu horizontal perbedaannya hanya terdapat di code CSS dan HTML saja mungkin langkah kita persingkat saja dengan melakukan edit HTML di template sama seperti di atas kita menambahkan kode CSS seperti di bawah ini:

body{margin:0}
ul{list-style-type:none;margin:0;padding:0;width:25%;background-color:#f1f1f1;position:fixed;height:100%;overflow:auto}
li a{display:block;color:#000;padding:8px 0 8px 16px;text-decoration:none}
li a.active{background-color:#4CAF50;color:white}
li a:hover:not(.active){background-color:#555;color:white}

Jika sudah selesai selanjutnya sobat memasukkan kode HTML di bawah kode header sepeerti di atas berikut ini adalah kode tersebut:

<li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Untuk lebih jelas sobat bisa lihat demo berikut ini:

• DEMO

Bagaimana sobat? mudah kan? jika ada pertanyaan atau sobat kurang paham jangan malu untuk bertanya di komentar atau melalui email saya. Saya rasa demikian saja untuk posting tentang cara membuat menu navigasi horizontal maupun vertikal. Semoga kedepannya saya akan dibekali banyak pengalaman untuk dibagikan kepada sobat. Terima kasih

Cara Berbagi Wifi dengan Tethering

Berbagi Wifi dengan Tethering

Halo sobat, sekarang saya akan posting tentang bagaimana berbagi hotspot dengan menggunakan CMD sebenarnya istilah ini dikenal sebagai tethering. Keinginan berbagi tentang tethering hotspot ini berdasarkan pengalaman saya sebagai seorang mahasiswa sering sekali ke tempat hotspot untuk mencari berbagai informasi, chating, mencari film dan lain-lain, nah biasanya kalau pergi ke tempat hotspot tentunya saya pergi tidak sendiri. Kebetulan kalau anak kost seperti saya dan teman-teman saya pasti ingin internet cepat dan murah ha ha. mungkin kalian juga merasakan seperti itu, oleh karena itulah saya akan membagikan bagaimana cara hemat dan bisa menikmati hotspot bersama teman kita, romantis kan.

Cara kerja Tethering hotspot kira-kira seperti ini: Hotspot 1 > laptop sobat > sobat membuat hotspot 2 > Menjadi hotspot 2 > teman-teman menikmati hotspot 2. Jadi sobat hanya membeli 1 password dan username untuk bisa di akses sampai beberapa orang, cukup hematkan? jujur saja saya sering sekali ke tempat hotspot dengan teman-teman dengan menggunakan cara seperti ini. Lumayan juga kalau download masih bisa sampai 500-700 kb/second kalau dibagi dua.

Langkah-langkah Membuat Tethering

Baiklah saya rasa kita langsung saja melihat bagaimana cara membuat tethering hotspot. Adapun langkah-langkah membuat tethering hotspot sebagai berikut:

1. Klik Start > ketikan CMD > klik kanan > run as administrator

2. ketik netsh wlan set hostednetwork mode=allow ssid=NAMAHOTSPOT KEY=PASSWORDHOTSPOT lalu enter

keterangan: Namahotspot= nama hotspot yang kamu inginkan (usahakan jangan pakai spasi). PASSWORD HOTSPOT = password yang kamu inginkan, minimal 8 digit.

Untuk lebih jelasnya lihat contoh di bawah ini:

netsh wlan set hostednetwork mode=allow ssid=hotspotkita KEY=HematUangJajan 

Jadi nama hotspot yang akan muncul seperti di contoh di atas adalah "hotspotkita" sedangkan untuk akses login teman sobat menggunakan password "HematUangJajan". Lalu tekan enter, jika muncul pesan seperti di bawah ini maka hotspot sobat berhasil di buat lihat contoh pesan yang muncul:

C:\Users\Nama PC Sobat>netsh wlan set hostednetwork mode=allow ssid=hotspotkita key=HematUangJajan
The hosted network mode has been set to allow.
The SSID of the hosted network has been successfully changed.
The user key passphrase of the hosted network has been successfully changed.

3. Setelah itu sobat mulai dengan menggunakan perintah cmd lagi untuk start hotspot biar bisa terdeteksi di laptop teman sobat dengan perintah sebagai berikut netsh wlan start hostednetwork lalu tekan enter. Jika sukses maka akan mucul seperti ini

C:\Users\Nama PC Sobat>netsh wlan start hostednetwork
The hosted network started.

4. Pada langkah ini sobat memulai dengan klik start > kontrol panel > network and internet > network and sharing center > change adapter setting . langkah selanjutnya lihat gambar di bawah ini supaya lebih jelas. Pilih Local Area Connction > properties lalu centang Allow Other User.

5. Setelah itu Pilih Wireles Connection > Properties > Pilih Home networking dengan wireless Network connection 2 lalu pastikan allow other usernya telah dicentang. berikut adalah gambarnya.

Jika tahap tersebut sudah selesai maka hotspot sobat siap dipakai bersama teman, dan bisa menikmati internet bersama.

Keuntungan Memakai Tethering Wifi

Keuntungan dalam menggunakan tethering sangatlah banyak, yang pastinya ringan soalnya tidak memakai aplikasi apapun, bisa sharing ke handphone jadi lebih mudah untuk BBM klo tidak ada paket hehe. Bagaimana sobat? masih mau pakai software yang berat apa mau pakai cara yang telah saya berikan? Silahkan pilih dengan bijak.

Saya berharap jika sobat merasa kesulitan jangan sungkan untuk bertanya di komentar, dan juga jika posting saya kali ini ada kesalahan saya dengan senang hati kritik dan sarannya untuk memperbaiki dimana letak kesalahan itu. Demikin saja tutorial Tentang membuat wifi dengan tethering. Terima kasih

Cara Menempatkan Iklan Adsense di Paragraf Tertentu Secara Otomatis

Cara Menempatkan Iklan Adsense di Paragraf Tertentu Secara Otomatis - Halo sobat Ingin Tahu  akan berbagi tentang bagaimana cara menempatkan iklan adsense secara otomatis di paragraf yang kamu inginkan. Hal yang terpenting dalam menempatkan iklan adalah tata letak (penempatan) iklan yang strategis dan ramah tentunya tidak melanggar peraturan yang sudah ditentukan oleh pihak Google Adsense. Mungkin sudah banyak sekali posting yang berkaitan dengan cara memasang adsense di blog, tentu saja ini berbeda karena kebanyakan memakai cara memasang iklan adsense di bawah posting maupun cara memasang iklan adsense di bawah judul posting

Banyak yang masih bingung dalam menempatkan iklan google adsense pada posting mereka. Sehingga mereka hanya menggunakan penempatan secara manual. Memang secara manual juga tidak melanggar dan bagus namun lebih baik lagi jika kita terapkan secara otomatis, sehingga kita bisa fokus dalam menulis tanpa memikirkan kode-kode javascript dan mengatur tata letak iklan lagi.

Bagaimana Menempatkan Iklan Adsense di Paragraf?

Berikut ini adalah langkah-langkah yang harus sobat ikuti, ingat jangan sampai melewatkan satu langkah. Adapun caranya sebagai berikut:

1. Masuk ke Blogger > Pilih Blog sobat.

2. Pilih menu Template dan pilih edit HTML. Setelah terbuka halaman edit HTML sobat cari kode dengan menggunakan CTRL + F  lalu cari kode <data:post.body/>. Setelah itu sobat ganti kode tersebut dan masukan kode di bawah ini

<div id='adsense-target'><data:post.body/></div>

Kemudian sobat masukan kode di atas kode tersebut berikut adalah kodenya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='adsense-content' style="display:block;text-align: center">IKLAN ADSENSE DI SINI</div></b:if>

Keterangan: Masukan kode iklan Adsense pada tulisan yang telah saya tandai tersebut dan jangan lupa sebelum memasukan kode script haruslah di parse terlebih dahulu. menggunakan ads converter yang ada di Web Tools yang telah saya sediakan.

Langkah selanjutnya adalah memasukan script seperti di bawah ini sebelumnya harus di parse dahulu menggunakan web tool ads converter di page saya:

<script type='text/javascript'>
function insertAfter(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}var adscont=document.getElementById("adsense-content"),target=document.getElementById("adsense-target"),linebreak=target.getElementsByTagName("br");linebreak.length>0)insertAfter(adscont,linebreak[0]);
</script>

Catatan: Untuk tanda yang br yang saya terangkan tersebut adalah kode tag dimana sobat bisa ganti dengan h2, h3 dan seterusnya jika ingin meletakkan iklan otomatis setelah h2, maka isi dengan h2. Untuk kode 0 yang saya terangkan tersebut kamu sobat bisa memilih paragraf yang ingin  ditentukan. Misalnya ingin iklan tampil setelah paragraf 1 maka isi dengan 1 dan seterusnya.

Kode Iklan di Paragraf Secara Keseluruhan

Untuk lebih jelasnya maka saya akan tampilkan penerapan kode keselurah sesudah gambar di atas di edit akan menjadi seperti ini:

Alasan mengapa kita sebaiknya memasang iklan google adsense di posting, menurut saya memasang iklan di posting memiliki tingkat CTR sangat tinggi, maka dari itu untuk meningkatkan ctr pada iklan google adsense sebaiknya kita tempatkan di posting.Sekian saja tentang Memasang Iklan google adsense secara Otomatis di Paragraf semoga dengan posting kali ini akan membantu masalah sobat dalam penempatan iklan dengan baik. Terima Kasih

Membuat Daftar Isi Sederhana dan Cepat Berdasarkan Label

Membuat Daftar Isi Sederhana dan Cepat Berdasarkan Label - Halo sobat yang Ingin Tahu kali ini saya akan berbagi pengalaman lagi yaitu tentang bagaimana membuat daftar isi pada halaman statis sobat. Berikut ini adalah merupakan contoh gambar daftar isi yang akan saya bagikan. Cara Penerapan kode ini sangatlah mudah, bahkan pemula sekalipun dapat menggunakan cara ini dengan waktu beberapa menit, jadi sebaiknya sobat meluangkan waktu sebentar untuk membacah dongeng yang saya berikan. 

Daftar isi berdasarkan label sangat berguna bagi kita untuk menampilkan semua posting pada satu halaman saja. Sehingga pengunjung di blog kita akan merasa sangat dimudahkan dengan adanya daftar isi ini. Tampilan yang sederhana dan cepat sehingga sangat mudah di akses oleh pengunjung, namun tidak hanya itu saja, Ingin Tahu?

Beberapa Fungsi dan Manfaat Daftar Isi:

• Menampilkan daftar isi berdasarkan label
• Memiliki pemberitahuan tentang artikel terbaru
• Tersusun rapi sehingga pengunjung mudah untuk mencari artikel
• Sederhana dan Cepat
• Menurut saya enak di pandang mata, soalnya saya melihat ada beberapa blog yang menggunakan daftar isi yang mencantumkan banyak variasi sehingga menimbulkan kesan yang tidak enak dipandang mata.

Cara Pemasangan Daftar Isi Berdasarkan label di Blog:

1. Login ke blogger > Pilih Menu Laman > lalu pilih Buat Laman Baru pada halaman edit posting sobat akan menemui tab compose dan HTML kemudian sobat pilih HTML > setelah itu sobat masukan kode yang akan saya berikan di bawah ini:

<div style="background-color:none; max-height:1200px; margin:auto;overflow:auto;padding:3px;text-align:left;width:100%;">
<script src="https://sites.google.com/site/dardauba/script-abudarda/DaftarIsi.js"></script><script src="/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Keterangan: untuk kode yang saya tandai di atas. Sobat bisa edit sesuai dengan kebutuhan sobat, Misalnya ingin merubah background maka edit kode none dan ganti dengan kode warna yang sobat inginkan, dan jika sobat ingin merubah tinggi maksimal dari daftar isi maka rubah 1200px sesuai dengan keinginan sobat.

2. Sobat Publikasikan dan selesai.

Tutorial yang saya bagikan sekarang ini tidak hanya tampilan sederhana, namun memiliki kelebihan juga yaitu daftar isi responsive, maka dari itu sobat tidak perlu khawatir untuk menambahkannya dalam template blog sobat yang sudah responsive tersebut.

Demikian posting saya mengenai cara membuat daftar isi berdasarkan label yang sederhana dan cepat. Semoga bermanfaat untuk sobat, dan jangan lupa memberikan komentar bagi yang merasa kurang paham atau isi dari posting saya ada kesalahan, karena saya sangat berharap komentar sobat demi perkembangan posting berikutnya. Terima Kasih