Skip to main content

Posts

Showing posts from June, 2018

Featured Post

Pamula Elegant Blogger Theme

Pamula  merupakan tema personal yang saya desain dengan beberapa referensi, Tema ini dibuat clean dan elegant untuk membuat lebeih fresh serta memaksimalkan fitur dari fungsi blogger agar dapat meminimalisir penggunaan javascript atau json blogger. Tema ini memiliki kecepatan super cepat seperti tema-tema yang saya share sebelumnya, tapi pada tema yang saya buat sekarang terus menggunakan fungsi javascript dan tidak ada jQuery di dalamnya. Kemungkinan kalian tidak akan paham karena terbiasa dengan jQuery. Pada tema ini kalian akan mendapatkan beberapa fitur menarik seperti : Kecepatan Loading Super Ngebut Dengan memiliki loading yang cepat pasti dapat membuat pengunjung menjadi lebih betah sebab tidak perlu cari Artikel serupa meskipun yang disebabkan oleh loading lambat. Saya sudah mencoba untuk mengetest kecepatan dengan bantuan dari GTmetrix dan Pagespeed. Untuk melihat hasilnya bisa cek gambar berikut: Kecepatan loading ini sudah saya test sendiri menggunak
35 comments
Read more

Cara Menghilangkan Icon Obeng Di Blog

Mungkin untuk template sekarang sudah tidak ada lagi yang namanya Quick edit widget blogger yang dilambagnkan dengan obeng (screwdriver) dan kunci pas (wrench). Mungkin biasanya quick edit ini disebut tang dan obeng, namun yang benar adalah obeng dan kunci pas. Quick edit merupakan fitur yang tersemat pada tiap widget blogger. Berfungsi untuk shortcut (jalan pintas) yang memungkinkan pemilik blog mengedit widget-widget blognya langsung melalui halaman blognya, bukan melalui layout pada dashboard blog. Quick edit hanya dapat dilihat oleh pemilik blog ketika sedang login blogger. Sedangkan pengunjung tidak dapat melihat icon quick edit pada blog yang sedang dikunjunginya. Pemilik blog juga tidak akan dapat melihat icon quick edit walaupun itu blognya sendiri jika tidak login ke blog. Quick edit ini juga membuat blog menjadi tidak valid HTML5, karena itu sekarang banyak template blog yang menghilangkan Quick edit karena dapat membuat blog menjadi tidak valid HTML5. Cara Menghilangkan Icon
Post a Comment
Read more

Cara Mengnonaktifkan Fungsi Seleksi Teks di Blog

Salah satu cara yang dapat digunakan untuk menghindari artikel blog sobat di copy paste adalah dengan mematikan fungsi seleksi teks diblog dengan menggunakan css, dengan menggunakan cara ini dapat mengatasi blog sobat bila adanya orang jahat yang ingin melakukan copy paste artikel di blog sobat. Tentu saja cara ini lebih terbilang ampuh dari pada menggunakan JavaScript kenapa dibilang ampuh? karena jika sobat menggunakan JavaScript untuk mencegah blog sobat di copy paste itu adalah hal yang salah karena fungsi javascript bisa dinonaktifkan pada browser yang digunakan maka dari itu menggunakan CSS adalah yang ampuh menurut alpukoding. Menonaktifkan fungsi seleksi teks atau block teks memang adalah cara yang paling aman untuk blog apalagi bisa terhindar dari adanya copy paste orang jail. Selain itu juga sobat bisa menambahkan bagian tertentu untuk diseleksi agar blog lebih aman seperti halnya jika sobat mempunyai niche coding atau pemprograman pasti pada bagian tertentu selalu ada kode y
Post a Comment
Read more

Cara Membuat Animasi Gradient Color Di Blog

Gradient Color adalah sebuah warna yang dimana warna tersebut terdapat bermacam macam warna yang dapat disatukan dengan warna lainnya, Seperti contohnya pelangi yang memiliki warna berbeda beda. Selain itu juga sobat bisa menggunakan warna gradient ini untuk memperindah warna tampilan pada blog sobat dengan tambahan animasi agar tampilan seperti berubah ubah. Tampilan Graient Color ini memang sempat lagi Trending banget dikalangan blogger sempat waktu saya share diblog yang dulu dan banyak diminati. Sobat juga bisa menggunakan Animasi Gradient Color ini untuk berbagai template lain, tentu saja sobat harus paham dalam penerapanya dengan begitu bisa dipakai di semua template. Cara Membuat Animasi Gradient Color Di Blog 1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian tambahkan kode dibawah ini sebelum ]]></b:skin> atau </style> CSS #header-wrapper, #navigasi-wrapper{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-si
Post a Comment
Read more

Cara Menghilangkan Garis Dotted Di Blog

Menghilangkan garis titik titik dibagian Tanggal Blog atau PostDate ini sangat terganggu sekali karena dari segi tampilan yang menjadi kurang bagus. Mungkin untuk template yang sekarang sobat gunakan garis titik titik atau Dotted ini sudah tidak ada karena sang author atau pembuat template menghilangkan tampilan dotted ini agar memperbagus tampilan templatenya. Lantas bagaimana caranya untuk menghilangkan garis tersebut? tentu saja ada caranya yaitu dengan menggunakan CSS khusus agar Garis Dotted menghilang sepenuhnya. Cara Menghilangkan Garis Dotted Di Blog 1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian tambahkan kode dibawah ini sebelum ]]></b:skin> atau </style> CSS abbr {text-decoration:none;outline:none} 2. Simpan Tema dan lihat hasilnya Mungkin sekian artikel tentang Cara Menghilangkan Garis Dotted atau Titik-Titik Di Blog dan semoga artikel ini sangat bermanfaat bagi sobat semua.
Post a Comment
Read more

Cara Memasang Cookie Di Blog

Berawal dari dashboard blogger tentang kebijakan dari Hukum Uni Eropa menyangkut Cookie sebuah blog. Jadi untuk pengunjung yang berasa dari Uni Eropa mewajibkan untuk menginformasikan penggunaan Cookie pada blog, karena jika tidak dilakukan itu dianggap ilegal dan tidak memenuhi peraturan undang undang Uni Eropa tersebut. Bila sobat pernah lihat notifikasi Google Cookie pada dashboard sobat maka isinya kurang lebih seperti ini: "Hukum Uni Eropa mengharuskan Anda untuk memberikan informasi kepada pengunjung Uni Eropa tentang cookie yang digunakan di blog. Dalam banyak kasus, undang-undang ini juga mengharuskan Anda untuk mendapatkan persetujuan pengunjung. Sebagai bagian dari layanan, kami telah menambahkan pemberitahuan di blog Anda untuk menjelaskan penggunaan Google akan cookie Blogger dan Google tertentu, termasuk penggunaan cookie Google Analytics dan AdSense. Anda bertanggung jawab untuk mengonfirmasi bahwa pemberitahuan ini benar-benar berfungsi di blog dan dapat ditampilkan
Post a Comment
Read more

Cara Membuat Iframe Responsive Dan Seo Di Blog

Apa sebenarnya sih Iframe ini ? Iframe adalah "bingkai" untuk menampilkan webpage lain pada suatu halaman. Salah satu contoh Iframe yang banyak digunakan adalah chatbox dan video dari youtube. Html Iframe digunakan untuk menampilkan file lain untuk dimasukkan ke embed dalam halaman yang akan dipakai. Contohnya jika ingin menambahkan video youtube ke blog maka sobat harus mengambil iframe dari vidio youtube tersebut. Iframe sering digunakan untuk menyisipkan konten dari website lain, seperti menyisipkan script iklan dari website pihak ketiga, memasukkan widget atau aplikasi tertentu, dan memasukkan video atau musik dari sumber lain (seperti Youtube, Soundcloud, dll). Terkadang, saat memasang Iframe diblog pasti ada saja masalah masalah baru yang muncul, seperti Iframe yang terpotong alias tidak responsive, dan menurunkan skor SEO blog di chkme dan tool pengecek skor SEO lainnya. Tapi tenang saja karena alpukoding akan bagikan Tips bagaimana cara supaya Iframe tadi menjadi resp
Post a Comment
Read more

Cara Membuat Color Picker Di Blog

Color Picker adaalah sebuah tool untuk mengetahui berbagai jenis warna lebih cepat dan lebih mudah. Sangat cocok bagi sobat yang sering melakukan desain terutama dengan warna flat. Color picker ini memiliki tampilan yang bagus gan nyaman untuk dilihat. Jadi, sangat cocok dipasang diblog manapun. Untuk memasang color picker ini sobat hanya perlu membuat sebuah Laman bukan Post tapi Laman agar color picker ini tidak terindex oleh mesin pencarian dan hanya akan dilihat oleh pengunjung blog sobat saja ditampilan blognya. Disini ada dua variasi Color Picker yang dapat sobat gunakan dan salah satunya sudah saya coba di alpukoding ini sob. Cara Membuat Color Picker Di Blog 1. Buka Blogger > Buat baru di halaman statis > Kemudian tambahkan kode dibawah ini pada tab HTML post. Versi Color Picker 1 HTML <div class="color-widget" onclick="colorPick(event)"> <form id="alpukoding-pick"> <input id="coloredvalue" onclick="SelectAll(
Post a Comment
Read more

Cara Membuat Dialog Box Di Blog

Membuat Dialog Box atau yang biasa disebut dengan notification box yang berfungsi untuk memberikan pesan singkat kepada pengunjung blog. Dialog Box ini bisa digunakan untuk blog sobat bila ada beberapa pembetulan pada template yang dipakai dengan begitu para pengunjung akan tahu kalau blog sobat akan mengalami perbaikan pada template. Bisa juga hanya sekedar untuk memberikan informasi penting kepada para pengunjung blog sobat. Pada kesempatan kali ini Dialog Box menggunakan material design sebagai desain utamanya, yang tentu saja memiliki desain yang bagus serta sudah responsive dan cocok untuk segala bentuk device. Untuk membuat Dialog Box ini sangat mudah sekali dan tidak sulit, hanya perlu memasang beberapa kode diblog sobat saja. Cara Membuat Dialog Box Di Blog 1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian tambahkan kode dibawah ini sebelum kode ]]></b:skin> atau </style> CSS /* Dialog Box */ a.waves-light.close-sf{font-size:14px
Post a Comment
Read more

Fungsi Dari CDATA Pada CSS dan Javascript

Mungkin sudah tidak asing lagi dengan yang namanya CDATA, kode CDATA ini biasanya dapat sobat blogger jumpai pada kode javascript atau css di template yang sobat pakai pasti ada beberapa kode yang menggunakan CDATA tersebut. Lantas kegunaan CDATA itu apa sih? Kegunaan CDATA ini adalah untuk mengirim sebuah perintah pada browser agar script tersebut tidak diparse atau diurai. Dengan kata lain, dengan pemberian XML ini pada suatu script, maka script tersebut tidak akan diparse atau diurai oleh browser. Fungsi Dari CDATA Pada CSS dan Javascript CDATA sering kali dijumpai pada saat mengotak-atk CSS dan Js, dan biasanya terletak diawal kode. Contohnya seperti kode js berikut: jQuery <script type='text/javascript'> //<![CDATA[ (function printMsg() {     var node = document.getElementById("footer-kode");     node.innerHTML = "<a href='https://alpukoding.blogspot.com'>alpukoding </a>"; })(); //]]> </script> Diawali dengan //<
Post a Comment
Read more

Cara Membuat Simbol Hati / Love Di Blog

Mungkin bagi beberapa orang simbol ini biasa saja tapi ada kalanya simbol ini digunakan oleh beberapa blogger yang dipakai untuk Template yang mereka buat dengan penuh ( ♥ ) yah simbol ini menandakan bahwa mereka membuatnya dengan penuh cinta. Lantas bagaimana untuk membuat simbol love ini? tentu saja sobat bisa menggunakan image / font tapi itu akan membuat blog menjadi berat tapi ada cara lain yaitu menggunakan HTML. Dengan menggunakan kode dari HTML dapat meringankan blog sekaligus membuat simbol love alias heart alias hati ini. Cara Membuat Simbol Love / Hati / Heart 1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian masukan kode berikut di sela kata kata footer credit blog sobat. HTML &#9829; Simpan tema dan lihat hasilnya, pasti akan muncul tanda hati dibagian footer credit sobat. Kalau sobat ingin membuatnya berwarna merah, silakan gunakan kode berikut HTML <span style="color: #e25555;">&#9829;</span> Maka hasilnya akan terlihat
Post a Comment
Read more

Cara Membuat Show and Hide Comment Blogger

Pada kesempatan kali ini akan membahas bagaimana cara untuk membuat Show and Hide Comment Blogger dengan Onlcik Event. Dengan menggunakan atribut onclick event dapat membuat blog sobat menjadi lebih cepat karena blog akan meload bagian komentar saat sudah diklik show and hide jika belum diklik maka tidak akan terload dengan begitu blog akan semakin cepat. Cara kerja dari script ini cukup sederhana yaitu konten komentar akan tetap tertutup sebelum sobat membuka area komentar dengan menekan tombol show and hide. Show and Hide Comments Blogger dengan Onclick Event 1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian cari kode dibawah ini Biasanya terdapat dua kode seperti diatas Ganti (kedua) kode diatas dengan kode dibawah ini HTML <a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a> <div class='clear'/>         <div class='comme
Post a Comment
Read more

Cara Memasang Komentar Facebook Di Blog

Cara Memasang Komentar Facebook Resnponsive di Blogger, nah sebenarnya untuk membuat komentar facebook yang responsive ini sangat mudah tidak ribet hanya perlu menambahkan kode tertentu saja. Apalagi jika menggunakan komentar facebook diblogger ini dapat langsung berkomentar diartikel yang pengunjung baca dengan menggunakan akun facebook. Dengan menggunakan komentar facebook ini juga dapat membuat blog lebih seo karena banyak sekali pengguna facebook apalagi dari segi share dan komen pasti banyak sekali di facebook akan tetapi bila pengunjung sedikit diblog sobat pasti akan lebih berat karena blog akan menjadi berat, tapi tenang saja karena kode diatas sudah saya optimasi agar kecepatan blog tetap stabil. Cara Memasang Komentar Facebook Di Blog 1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian tambahkan meta tag facebook dibawah ini di dalam template tepat dibawah <head> HTML <meta content='Kode ID Facebook admin' property='fb:admins'/>
Post a Comment
Read more

Cara Memasang Lazy Load Di Blogger

Mempercepat Loading Blog dengan Lazy Load memang sudah banyak tersebar caranya diberbagai blog/web tentu saja setiap trik tersebut mempunyai perbedaan pada setiap penggunaan lazy load itu sendiri tapi pada pembahasan kali ini lazy load hanya akan tapi apabila pengunjung melakukan Scroll maka gambar / image tidak akan muncul bisa tidak melakukan Scroll. Trik ini merupakan salah satu dari optimasi blog dengan plug in jQuery Lazy Load untuk meringankan loading saat memuat halaman blog sobat. Cara ini juga sudah diterapkan di alpukoding dan menghasilkan speed yang bagus yaitu 100/100 saat dicek Gtmetrix akan tetapi kalau di Google PageSpeed mungkin akan berbeda tapi untuk hal ini Gtmetrix sangat akurat bila untuk pengecekan Speed blog. Sobat juga bisa menggunakan animasi untuk lebih memperbagus tampilan saat terjadi loading pada tampilan gambar / image mungkin bila melihat bagian Home pada alpukoding akan terlihat animasi yang seperti Facebook. Cara Memasang Lazy Load Di Blogger 1. Buka Bl
Post a Comment
Read more

Cara Memasang Kotak Iklan Atau Partner Di Blog

Cara Memasang Kotak Iklan Atau Partner Di Blog yang berukuran 125x125 pixels. Mungkin sobat sudah pernah liat dibeberapa blog/web yang memakai kotak iklan / partner ini biasanya digunakan untuk menjalin backlink sesama blogger tapi bisa juga untuk menghasilkan uang yang sebagian besar para blogger menjadikannya sebagai salah satu aset keuangan. Kotak iklan ini juga biasanya dipasang diblog yang sudah terkenal untuk mendapatkan omset atau uang yang dijadikan space banner iklan kosong untuk mendapatkan uang dengan menaruh iklan dengan membuat kotak iklan diblog. Agar semakin menarik saat menggunakan kotak iklan diblog ada yang perlu diperhatikan dalam menampilkan space banner iklan adalah letak serta susunannya agar semakin menarik minat orang banyak. Jadi tidak asal pasang iklan / gambar yang akhirnya iklan yang ditampilkan menjadi kurang menarik karena berantakan. Cara Memasang Kotak Iklan Atau Partner Di Blog 1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian tamb
Post a Comment
Read more