Skip to main content

Posts

Showing posts from June, 2019

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 Membuat Scroll Bar Indicator Dengan Javascript

Pada kali ini saya akan membagikan Tutorial Membuat Scroll Bar Indicator yang bisa kalian gunakan untuk mempercantik tampilan situs / web kalian tentunya untuk kode yang saya bagikan cukup mudah untuk dipahami dan ada penejelasan disetiap kodenya. Untuk kalian yang ingin melihat seperti apa Scroll Bar Indicator tersebut, kalian bisa langsung lihat tampilannya dibawah ini atau previewnya. See the Pen Scroll Bar Indicator by Rian_kuno ( @rian_kuno ) on CodePen . Oke langsung saja ke tutorialnya Membuat Scroll Bar Indicator Pertama kalian buat index.html dulu dengan Teks Editor Jika sudah lanjut buat Tag div seperti dibawah ini <div id="progress"></div> Lanjut tambahkan cssnya untuk menampilkan Bar Indicatornya. Kalian copy kode dibawah ini dan paste pada kode #progress{ height: 3px; background:lightblue; position: fixed; top: 0; left: 0; } Sekarang kita tambahkan Ja
Post a Comment
Read more

Cara Membuat Back To Top Simple

Back To Top atau kembali ke atas bila di klik / tekan jika di smartphone pasti merupakan unsur penting untuk situs yang digunakan karena jika tidak ada yang namanya kembali ke atas masa harus scroll lama kan, pasti bikin pengunjung lama kalau ingin baca lagi apalagi jika situs yang baca teksnya seperti LN gitu. Membuatnya kita hanya memainkan unsur css saja agar lebih mudah dan untuk tampilan saya buat sederhana karena ini hanya pembuatan dasar menurut saya tanpa bantuan javascript tapi jika kalian paham dalam kodenya pasti bisa dibuat menjadi lebih menarik lagi. Membuat Back To Top Pertama buat kode seperti berikut <div id="backtop"> <a href="#">Pancing</a> </div> Kedua tambahkan css agar tampilan menjadi keren #backtop{ position: fixed; bottom: 50px; right: 0; transform: rotate(90deg); } #backtop a{ background: lightblue; color: white; padding: 15px; tex
Post a Comment
Read more

Merubah Warna Placeholder di Input

Mungkin pada saat kalian membuat sebuah form input lalu ingin mengubah warna teksnya tapi tidak bisa dirubah sama sekali meskipun sudah ditambahkan css color pada form input tersebut. Sebenarnya untuk merubah placholder ini kita hanya perlu menambahkan kode css khususnya sendiri pada form input. Langsung saja simak karena artikelnya singkat banget Merubah Warna Placeholder di Input Pertama buat sebuah Form Input dulu <div id="middle"> <form action=""> <input type="text" name="" id="" class="nama" placeholder="Masukan nama anda"> </form> </div> Lanjut tambahkan css untuk merubah tampilannya body{padding:0;margin:0;background:lightgreen;} #middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35%;} form input{border:0;border-radius:50px;outline:none;padding:20px;width:100%;text-align:left;overflow:hidden;} Disini kita tambahkan kode khusus untuk inp
Post a Comment
Read more

Gofun - Template Blogger Premium

Kembali lagi share template buatan saya, tapi pada template kali ini saya hanya menyediakan versi premium saja tidak ada versi gratisnya tapi bisa dipakai gratis setelah membeli kok. Berikut keuntungan pakai template ini : Tentang Gofun Gofun template di desain dengan tampilan grid dan clean agar terlihat bersih pada template tentunya dengan desain yang terkesan lagi trend selain itu juga Gofun menambahkan Featured Feedback untuk interaksi pengunjung pada blog dan Feedback ini masuk ke Google Analytics kalian. Berikut screenshot tampilan Gofun: Gofun Desktop Berikut screenshot tampilan Gofun: Gofun Mobile Lihat Demo Fitur/Kelebihan Gofun Responsive 100%  SEO Ready Loading template super ngebut Menggunakan Schema Markup Icon Menggunakan Svg Auto Readmore Sidebar slide Tombol Berbagi Responsive Feedback untuk blogger Tampilan Grid Loading template super ngebut Related post Tiga style Blockquote Syntax Highlighter dengan number Baca juga Tanpa Link Credit Lainn
Post a Comment
Read more