Ingin Tahu

Cara Mengisi SKAKPT di Simpatika Kemenag

2018-04-13T22:19:00.003+07:00

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

2016-01-11T08:55:00.000+07:00

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

2015-12-29T23:36:00.001+07:00

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

2015-12-11T22:53:00.000+07:00

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

2015-12-10T22:51:00.000+07:00

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

2015-12-08T02:31:00.000+07:00

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

2015-12-07T09:05:00.001+07:00

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

2015-12-06T03:34:00.001+07:00

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

2015-12-05T13:36:00.000+07:00

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

2015-12-04T13:48:00.000+07:00

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

Membuat Widget Social Media Melayang di Samping Blog

2015-11-29T02:51:00.000+07:00

Halo sobat Ingin Tahu, hari ini saya akan membagikan tutorial cara membuat widget sosial media melayang di samping blog - Mungkin anda sering membaca artikel yang mirip seperti ini, sudah tidak asing lagi bagi para blogger tentunya. Namun saya tertarik dengan widget yang akan saya bagikan oleh karena widget ini ringan dan tidak memakan tempat.

Widget Sosial Media sangatlah penting untuk para blogger, karena sosial media merupakan salah satu sumber dimana kita dapat membagikan hasil posting kita disitu. Baiklah saya rasa anda sudah sangat mengerti tentang sosial media, jadi kita langsung saja membahas caranya.

Tetapi Sebelumnya lebih baik anda melihat demo terlebih dahulu, supaya lebih yakin apakah anda akan menerapkan widget ini atau tidak.

Bagaimana sobat? keren kan? caranya cukup sederhana dan sangat mudah, hanya memerlukan waktu beberapa detik saja. Maka dari itu silahkan dicoba ya.

Cara Menambahkan Widget ke Blog Anda:

1. Login ke blogger > Layout > Tambahkan Gadget > Pilih Html/Javascript
2. Salin kode di bawah ini, lalu tambahkan ke gadget anda

<style type="text/css">
ul#social{position:fixed;margin:0;padding:0;top:10px;left:0;list-style:none;z-index:9999}ul#social li{width:100px}ul#social li a{display:block;margin-left:-2px;width:100px;height:70px;background-color:#fff;background-repeat:no-repeat;background-position:center center;border:1px solid #AFAFAF;-moz-border-radius:0 10px 10px 0;-webkit-border-bottom-right-radius:10px;-webkit-border-top-right-radius:10px;-khtml-border-bottom-right-radius:10px;-khtml-border-top-right-radius:10px;-moz-box-shadow:0 4px 3px #000;-webkit-box-shadow:0 4px 3px #000}ul#social .twitter a{background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6IAmJMXljRci8weVah_eCsVvj17Mgd5mpG6po_EwAk-xhS_eRXYii6IXxJxvpX6lpR9dWNgc9rP9zrx8oN3CflqSIc-AzOKStzxreQCXByiLed0P4Evgv0NrIrYHTto9TMdXRf1UUrYfS/h120/ingin-tahu-blogspot-com-sosial-media-twitter.png)no-repeat;background-position:center center}ul#social .googleplus a{background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg04ze_RCm4HUpVq3heqhy5pRR8APpUjj9cLzMuJqcpWxr5IR4LNphUaeAPEADejLfH6tkFDgaQciX05Sjr_HIM_BvpPuOHuaAdjGLK4oAZ8lR8k_6BSKfwZnnQ-rjY3_4Xk15AKJoRBzIB/h120/ingin-tahu-blogspot-com-sosial-media-google-plus.png)no-repeat;background-position:center center}ul#social .facebook a{background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHTw0YDtj6K_14IzVBUax7Fbdt6HgxRFoavEqMx5kZGGDfPF7Ou96TBSt9LTQ2tTo6odZu3b45Gc_XDysuMbBQbL7j2VgYF_s1QciIZZ_u6lmuxCNVU6SR630JmjiOy9poX26FAD77ER88/h120/ingin-tahu-blogspot-com-sosial-media-facebook.png)no-repeat;background-position:center center}ul#social .rss a{background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoo7opn6JPXvFtoLU9ZXR-KwySa8Z1XCiUjkWC6KGnCVirSFkSbte3lHGcMcMUz_YjbpBgYrAP9U7CuAbk3I9keeNStUPp2wAOV4B-SQ0XyYRv6nMwTZq7WnAGHwr6T6MDXFxTP3tXLm84/h120/ingin-tahu-blogspot-com-sosial-media-rss.png)no-repeat;background-position:center center}ul#social .pinterest a{background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8k1E5tI7OY4NtM7M-YWjDf_iPb4ULnAeTEtD6ESsk9581AAN7uPeStZ7t2JtDW_olMbnhlU8lnGi0iz6GE3m_3fW6nKcvPm38-p2lji11URDgc8Siucz3nQCauaME4yVo_FR4A-HKtOsS/h120/ingin-tahu-blogspot-com-sosial-media-pinterest.png)no-repeat;background-position:center center}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function(){$("#social a").stop().animate({marginLeft:"-85px"},1e3),$("#social > li").hover(function(){$("a",$(this)).stop().animate({marginLeft:"-2px"},200)},function(){$("a",$(this)).stop().animate({marginLeft:"-85px"},200)})});
</script>
<ul id='social'>
 <li class='twitter'><a href='#' title='Twitter'></a></li>
 <li class='googleplus'><a href='#' title='Google Plus'></a></li>
 <li class='facebook'><a href='#' title='Facebook'></a></li>
 <li class='rss'><a href='#' title='Rss'></a></li>
 <li class='pinterest'><a href='#' title='Pinterest'></a></li>
</ul>

Catatan:

Jika di template kamu sudah memiliki kode jquery seperti <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> lebih baik di hapus kode tersebut.

Ganti tanda # dengan url media sosial anda

3. lalu Save dan lihat hasilnya. . . Selesai !!

Jika ada kesalahan dalam artikel ini saya berharap anda bisa berkomentar dan memberikan saran yang terbaik, demi kebaikan kita bersama, demikian pembahasan saya tentang membuat widget sosial melayang, dan nantikan tutorial selanjutnya, terima kasih.

Cara Membuat Show and Hide Comments Facebook dan Blogger

2015-11-24T17:13:00.000+07:00

Cara Membuat Show and Hide Comments Facebook dan Blogger - Kembali lagi saya akan berbagi tips blogger setelah dua hari tidak posting, kali ini saya akan berbagi tentang fungsi show dan hide komentar sehingga pengunjung dapat memilih dengan mudah untuk berkomentar. Tutorial kali ini saya akan menerapkan komentar facebook dan blogger secara berdampingan seperti gambar di atas.

Manfaat dari show dan hide komentar ini yaitu memudahkan pengunjung untuk berkomentar dan agar lebih banyak mendapatkan respon dari pengunjung, seperti yang kita ketahui kebanyakan pengunjung pasti sudah login otomatis pada akun google dan akun facebook di desktop maupun smartphone. Dengan adanya show dan hide komentar ini pengunjung terserah memilih berkomentar menggunakan akun tersebut.

Kekurangan kemungkinan kekurangan dari penggunaan cara ini adalah tidak ada icon fontawesome yang seperti logo blogger, saya berharap akan ada uptade icon seperti blogger, maka penggunaannya akan lebih keren saya pikir. Kalau menurut anda bagaimana?

Baiklah saya tidak ingin berbelit-belit menjelaskan karena saya yakin anda juga pasti sudah mengerti apa yang saya maksud sehingga anda berada disini. Kita langsung saja menjelaskan caranya.

Show and Hide Comments Facebook and Blogger:

Buka Blogger > Template Editor > Cari kode seperti ini </head> :

Lalu masukkan Javascript di bawah ini di atas kode </head>:

<script type='text/javascript'>
    //<![CDATA[
    $(window).bind("load resize", function(){
      var url = location.protocol+'//'+location.host+location.pathname;
      var containercm_width = $('#container-commentfb').width();  
        $('#container-commentfb').html('<div class="fb-comments" ' +
        'data-href="'+url+'"' +
        ' width="' + containercm_width + '" data-num-posts="10"></div>');
        FB.XFBML.parse();
    });
    //]]>
    </script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Setelah itu anda cari kode html <b:include data='post' name='post'/> lalu anda tambahkan kode di bawahnya dengan kode seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#comments, #container-commentfb {display:none;} .comments-icons {no-repeat; font-size: 20px; font-family: &quot;Arial Narrow&quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align:text-bottom;}</style>
<div class='comments-icons'>
Silahkan pilih Comment melalui: <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#container-commentfb&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='blogger-icon' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBGDu5nP16qCFKz59DHoL0gtiaN-i7vwDhSG1cebPI9AmsPXJdcRn1ooB7Zoy452mvyx8xXheMfWdQkmNhe_HsN69qD8zJq7CG4LkbK-ZH5F5yJwKDpYPIss6YerpZZlVJAcy-vfwaZ_U/h120/facebook+icon.PNG' width='35'/></a> atau <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#container-commentfb&quot;).hide();'><img class='blogger-icon' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRnRlEQ3LQp62lHN7HNFk_vkuwz6vQZ0oAfN6BnCKGq_3jQEocZs-r2joAGqdmUjT5RkOesFFcRJcbMPBNtdQD8IcQcL8FjzIHbl9ahx0MpUdR8iexsk1yILcabfRNO8qB8NdHvdQYWyb7/h120/blogger+%25281%2529.png' width='35'/></a>
</div>
<div id='fb-root'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div data-width='100%' id='container-commentfb' style='padding: 10px;padding-right: 10px;padding-left: 10px;'>
<div class='fb-comments' data-href='http://memberi-cara.blogspot.com/'>
<fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
  </div></div></b:if>

Jangan lupa ganti alamat yang saya tandai di atas dengan alamat blog anda.

Selanjutnya kamu save template dan lihat hasilnya.

Mungkin hanya itu saja yang dapat saya sampaikan jika ada kesalahan saya berharap ada yang berkomentar demi kemajuan bersama.Demikian tutorial tentang Cara Membuat Show and Hide Comments Facebook dan Blogger jika ada kesulitan jangan malu bertanya lewat komentar.

Cara Mengatasi Pesan Error Feedburner

2015-11-17T04:31:00.000+07:00

Baiklah kali ini saya memiliki kesempatan untuk melanjutkan pembahasan sebelumnya yang telah saya buat yaitu cara mudah mendaftar google feedburner - Tentunya mendaftar saja belum cukup untuk menggunakan fitur-fitur yang disediakan oleh pihak feedburner, maka dari itu anda sering mengalami kesalahan seperti pada topik kali ini yaitu pesan error feedburner.

Nah untuk mengatasi masalah pesan error dari feeburner anda tentunya harus melakukan beberapa pengaturan untuk mengaktifkan fitur tersebut dan harus tahu apa namanya. Anda tahu apa namanya?untuk mengktifkan fitur mengikuti via email feedburner menyediakan layanan yang bernama Email Subcriptions. Inilah yang akan kita bahas pada saat ini.

Berikut adalah Cara Mengatasi Pesan Error Feedburner:

Buka halaman website feedburner di feedburner.disini
Pilih blog yang akan anda setting, lalu buka tab Publicize seperti gambar di bawah ini dan pilih Email Subcriptions seperti gambar yang saya tandai dibawah ini

Jika anda telah memilih email subcriptions maka tampilannya akan seperti gambar dibawah ini, selanjutnya pilih aktivate yang saya beri tanda berwarna kuning

Setelah itu klik save maka email subcriptions anda telah selesai. namun ada baiknya anda mengetahui penerapannya dalam membuat widget seperti pada gambar berikut

Yang berwarna kuning adalah ID feedburner anda. Seperti pengalaman saya untuk memasang widget yang lebih menarik maka ID tersebut sangatlah penting untuk kita tanamkan kedalam widget yang tersedia dari teman-teman blogger yang memiliki kreativitas untuk membuat tampilan widget yang lebih menarik khususnya widget Mengikuti via email. Anda juga jangan lupa untuk melakukan setting seperti dibawah ini

Setelah itu Save lagi biar lebih yakin.

Mungkin itu saja yang dapat saya sampaikan, Jika ada kesalahan mohon di komentar setidaknya saya dapat mengetahui dan memperbaiki kesalahan tersebut. Karena yang saya tulis di blog ini adalah sebagian pengalaman pribadi yang saya lakukan sendiri.

Cara Mudah Mendaftar Google Feedburner

2015-11-13T21:08:00.000+07:00

Pada kesempatan kali ini saya akan membagikan pengalaman saya kepada anda yang lagi butuh tentunya, kebetulan saya baru saja selesai mendaftar google feedburner itu sebabnya saya menemukan ide untuk posting kali ini yaitu Cara Mudah Mendaftar Google Feedburner

Baiklah sebelum saya mengajarkan caranya sebaiknya kita mengenal dulu apa itu google feedburner, layanan feedburner dikenal sebagai penyedia RSS feed untuk orang yang ingin mengikuti aktivitas postingan terbaru pada blog. Hal tersebut sangat menguntungkan bagi para blogger dan juga pengunjung blog. Apa saja manfaatnya? berikut ini akan saya jelaskan:

Manfaat bagi pengunjung: dapat mengikuti setiap postingan terbaru dari blog yang diminatinya dengan cepat hanya dengan modal sebuah email pengujung, karena layanan ini adalah gratis.
Manfaat bagi blogger: tentunya sangat menguntungkan karena bagi blogger yang memiliki pengunjung setia ini akan memudahkan untuk meningkatkan jumlah penayangan di blognya meskipun baru memposting. karena secara otomatis feedburner akan memberitahukan kepada pengunjung untuk segera membacanya. setidaknya jumlah penyangan pada blog sangat stabil dengan adanya feedburner.

Baiklah kita persingkat saja penjelasannya, mau informasi lebih lengkap silahkan kunjungan websitenya. selanjutnya kita akan belajar mendaftar google feedburner, berikut ini adalah penjelasannnya:

Pastikan anda sudah login ke akun google.
Kunjungi alamat website google feedburner disini
Jika sudah ke halaman feedburner isikan blog anda di formulir tersebut. seperti di bawah ini

Setelah diisikan lalu klik next

Selanjutnya pilih link yang enak dilihat seperti /feeds/posts/default lalu klik next

Pada formulir ini bertujuan untuk mengisi dengan nama web atau nama admin. jika suda maka klik next

Sampai tahap ini berhasil mendapatkan link feeburner feed. selanjutnya next lagi

Centang gambar di atas kecuali item enclosure download setelah itu next lagi

Selamat sudah selesai ha ha

Cukup mudah bukan? baiklah mungkin hanya ini yang bisa saya sampaikan. Untuk pengaturan subcribe via email silahkan baca postingan berikutnya tentang Cara mengaktifkan subcribe via email

sampai jumpa lagi di postingan berikutnya. Disini

Cara Membuat Email Gmail

2015-02-26T01:34:00.000+07:00

Pada posting kali ini saya akan mengajarkan bagaimana Cara Membuat email Gmail - Seperti yang kita ketahui setiap orang yang pernah menggunakan internet pada umumnya memiliki beberapa akun email pribadi, kenapa? karena email adalah sebuah alamat pribadi layaknya alamat rumah, dimana alamat itu kita dapat berfungsi dalam berbagai media komunikasi yang digunakan dalam internet seperti mengirim pesan teks, mendaftar ke forum-forum, mendaftar ke sosial media dan lain-lain. Anda tahu kenapa email selalu menggunakan simbol "@"? jika anda penasaran sebaiknya baca alasan simbol "@" dalam email.

Kenapa harus mendaftar Gmail? sebenarnya masih banyak lagi layanan pembuatan email seperti yahoo mail, aim mail, hotmail dan lain-lain. Nah alasan kenapa mendaftar Gmail menurut saya gmail sangat mudah dan memiliki fitur yang lebih banyak dari layanan email yang lainnya.

Gmail merupakan sebuah produk layanan yang diberikan oleh google secara otomatis kita dapat dengan mudah untuk mendaftar dari beberapa fitur yang disediakan oleh google dengan menggunakan email yang telah kita buat. misalnya mendaftar di Blogger, Youtube, Google Webmaster, Google Adsense, Google Analytics dan lain-lain.

Baiklah, saya rasa sudah saatnya saya akan menjelaskan secara bertahap bagaimana proses pembuatan akun Gmail.

Cara Mengisi Data Akun Gmail:

Berikut adalah langkah-langkah mengisi data membuat Gmail:

Buka halaman utama gmail dengan alamat https://mail.google.com/
Pilih SignUp atau Create an Account
Lalu akan tampil formulir pengisian data anda.
Berikut adalah contoh gambarnya :

Keterangan gambar di atas:

Kolom Nama: pada kolom nama isikan nama anda atau nama-nama kesukaan anda.
Kolom Pilih nama pengguna Anda: isikan dengan alamat email yang anda inginkan. Misalnya: akucintakamu@gmail.com, kuanakalay@gmail.com. dalam pengisian kolom ini ada beberapa syarat yang harus kita ikuti. Syarat yang dilarang: tidak boleh menggunakan simbol atau tanda baca (kecuali "titik")
Kolom Sandi: isikan dengan kata-kata yang mudah di ingat namun sangat rahasia. Misalnya: akusangatganteng atau akusayangkamuselamanya.
Kolom Konfirmasi Sandi: isikan dengan kata sandi yang sama persis dengan kolom sandi yang pertama tadi.
Kolom Tanggal Lahir: isikan dengan tanggal lahir anda.
Kolom Gender: isikan dengan jenis kelamin anda. disitu ada 3 pilihan Pria, Wanita dan "lainnya" tanda kutip lainnya.
Kolom Ponsel: isikan dengan nomor ponsel anda, saran saya nomor ponsel yang selalu digunakan (tidak diganti-ganti) karena ini sangat penting bagi keaman akun anda.
Kolom Alamat Email anda saat ini: boleh dilewatkan saja (tidak di isi juga tidak apa-apa) dengan klik centang pada kotak kecil
Kolom Ketik Teks: isikan dengan huruf yang ada di gambar contohnya seperti yang diatas. maka kita akan mengisi kolom tersebut dengan huruf "NGARI"
Kolom Lokasi: isikan dengan negara anda.

Baiklah saya rasa tahap ini sudah selesai, namun masih ada langkah selanjutnya yang wajib anda lakukan yaitu verifikasi akun. Verifikasi akun sangatlah penting karena jikalau akun kita tidak di verifikasi maka langkah sebelumnya yang anda lakukan akan sia-sia. Ibarat mau jalan-jalan pakai motor tapi tidak ada bensin ha ha ...

Cara Verifikasi Akun Gmail:

Berikut ini adalah gambaran dari halaman verifikasi akun:

Isikan dengan nomor ponsel yang anda gunakan saat mengisi formulir di langkah awal tadi.
Lalu pilih metode pengiriman kode verifikasi apakah dengan menggunakan via SMS atau Telepon
Setelah itu klik Lanjutkan lalu tunggu beberapa saat anda akan dikirimkan kode verifikasi lalu masukan ke halaman yang telah tampil setelah klik Tombol Lanjutkan tersebut.
Setelah itu Email anda telah jadi. Selamat menikmati Email Gmail anda ...

Sekian tutorial tentang Cara Membuat Email Gmail, jika ada kesalahan saya harap anda dapat berkomentar dan berikan masukan terimakasih . . .