HARBLOGNAS

Daftar isi atau biasa disebut sitemap adalah navigasi yang dirancang untuk memudahkan pengunjung mengakses konten atau topik diperlukan oleh mereka. Selain itu daftar isi atau sitemap terdiri dari semua link posting dalam 1 tempat sehingga pengunjung lebih betah dan bounce rate pun akan semakin turun. Daftar isi atau sitemap juga dapat membantu bot search engine untuk memudahkan pengindexan situs anda. Sudah tau apa itu sitemap dan fungsinya. Sayangnya blogger atau blogspot tidak menyediakan semacam widget tetapi kita dapat menambahkannya. Oke, kali ini saya akan coba membahas bagaimana cara menambahkan fitur sitemap atau daftar isi pada blogger atau blogspot anda. Berikut adalah langkah langkah cara membuat daftar isi atau sitemap di blogger atau blogspot: 1. Sebelum lanjut ke edit template, silahkan anda backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger: Cara mudah backup template blogger atau blogspot 2. Selanjut anda edit template bl...

Seperti halnya CMS lain, blogger juga dilengkapi dengan fitur pages atau yang biasa kita sebut halaman atau halaman statis atau static pages. Fitur ini kadang sering kita diabaikan. Halaman atau page dan posting atau post sangat berbeda. Post biasanya kita buat dan kita jadikan konten artikel sedangkan halaman statis biasanya digunakan untuk konten yang tidak berhubungan dengan sebuah artikel. Halaman tidak akan muncul di home atau beranda anda seperti post. Artikel kali ini saya akan menunjukkan kepada anda bagaimana cara untuk membuat atau menambahkan page atau halaman baru pada blogger anda. Langsung saja, berikut adalah langkah langkah yang harus anda tempuh: 1. Silahkan anda masuk ke blogger anda di blogger.com 2. Lalu silahkan anda masuk ke menu laman . Lihat gambar dibawah: 3. Lalu silahkan anda klik menu laman baru di navigasi atas. Silahkan lihat gambar dibawah: 4. Setelah itu anda tinggal isi judul entri dan konten untuk halaman anda. Lihat penampakan setelah anda masuk ke ...

Table sulit untuk dibuat responsive, tetapi bisa diakali dengan memanfaatkan query media dan overflow. Dengan memanfaatkan query media dan overflow saya akan mencoba menerangkan langkah demi langkah bagaimana cara membuat flat table responsive di blogger atau blogspot . Seperti yang sudah kita tahu table bisa sangat luas. Sederet data row bisa bersama sama untuk masuk ke dalam sebuah table. Table dengan width 100%, bisa dikecilkan dan dibesarkan tetapi ketika layar di kecilkan row table akan terlihat sempit dan mungkin teks akan bertumpuk tumpuk. Inilah sebabnya kenapa table sulit dibuat responsive. Desain responsif adalah tentang bagaimana kita menyesuaikan desain dengan layar yang memiliki ukuran berbeda. Jadi disini ketika website dibuka pada layar yang lebih sempit semisal ponsel makan table akan tetap terlihat lebih lebar dan kita bisa menggeser table ke arah samping. Sehingga layout design responsive tidak rusak dan kita bisa membaca table dengan lebih mudah. Lalu apakah ini bisa...

Sebelum melangkah ke topik utama, mari kita bahas terlebih dahulu apa sih HTML5? HTML5 adalah bahasa markup yang digunakan untuk penataan dan konten di World Wide Web(WWW). Bahasa HTML versi ini diselesaikan, dan diterbitkan, pada 28 Oktober 2014 melalui World Wide Web Consortium (W3C). HTML5 adalah revisi kelima dari standar HTML sejak awal World Wide Web(WWW). Versi sebelumnya, HTML4 adalah standar pada tahun 1997. Jadi HTML5 adalah revisi kelima dari sejak dikeluarkannya HTML. Bahasa ini support untuk browser modern seperti IE8+, mozilla, chrome, dll. IE7 kebawah tidak support untuk HTML. Apa sih keuntungan dari valid HTML5, banyak artikel yang saya baca banyak sekali keuntungan dari valid HTML5, saya sendiri tidak terlalu pusing mementingkan keuntungannya, hanya sekedar keren keranan saja. Buktinya website seperti, google, facebook bahkan tempat belajar CSS, HTML(www.w3schools.com) pun tidak valid HTML5. Tidak hanya itu, framework HTML seperti bootstrap, pure css, materializecss pu...

Tutorial kali ini saya akan membahas bagaimana cara membuat flat button 3d cantik di blogger atau blogspot anda, seperti di blog ini. Untuk trik disini kita cukup memanfaatkan efek ketebalan box-shadow ketika button normal, di hover atau ketika button aktif. Logikanya ketika button normal box-shadow akan terlihat tebal, ketika pengunjung menghover button maka box-shadow di button akan terlihat lebih tipis dan ketika button aktif maka box-shadow akan hilang. Dengan memanfaat warna metro dan tampilan yang flat button akan semakin cantik dan membuat blog kita akan terlihat sedikit cantik dan profesional. Langsung berikut adalah langkah langkah nya: 1. Silahkan backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger: Cara mudah backup template blogger atau blogspot 2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger: Cara edit template blogger atau blogspot 3. Setel...

Update terbaru ikon di fontawesome versi 4.5 Berikut adalah daftar 20 Ikon baru di fontawesome 4.5 Icon Fungsi Class fa fa-bluetooth fa fa-bluetooth-b fa fa-codiepie fa fa-credit-card-alt fa fa-edge fa fa-fort-awesome fa fa-hashtag fa fa-mixcloud fa fa-modx fa fa-pause-circle fa fa-pause-circle-o fa fa-percent fa fa-product-hunt fa fa-reddit-alien fa fa-scribd fa fa-shopping-bag fa fa-shopping-basket fa fa-stop-circle fa fa-stop-circle-o fa fa-usb Semoga bermanfaat sob..

Beberapa daftar fontawesome telah saya buatkan di postingan sebelumnya, berikut adalah daftar fontawesome untuk kategori lainnya. Sebelumnya bagi yang belum tahu cara untuk memasukkan fontawesome di blogger anda silahkan lihat tutorial fontawesome untuk blogger atau blogspot . Berikut adalah daftar file type icons fontawesome Icon Fungsi Class fa fa-file fa fa-file-archive-o fa fa-file-audio-o fa fa-file-code-o fa fa-file-excel-o fa fa-file-image-o fa fa-file-movie-o fa fa-file-o fa fa-file-pdf-o fa fa-file-photo-o fa fa-file-picture-o fa fa-file-powerpoint-o fa fa-file-text fa fa-file-text-o fa fa-file-video-o fa fa-file-word-o fa fa-file-zip-o Berikut adalah daftar form icons fontawesome Icon Fungsi Class fa fa-check-square fa fa-check-square-o fa fa-circle fa...