JaeyZONE

Posts

Showing posts with the label Template

Cara Membuat Halaman Error 404 (Page Not Found) di Blogger

Secara default halaman 404 ini sudah tersedia di Blogger namun kodenya tidak terlihat di dalam template sehingga tampilannya tidak bisa diedit atau diubah. Agar tampilannya dapat diubah sesuai hati kita bisa menambahkan sepotong kode berikut ke dalam template. Berikut ini kode untuk mengatur tampilan halaman 404: <b:if cond='data:view.isError'>  </b:if> Silakan simpan kode tersebut kedalam template, boleh diletakkan antara tag <head>..</head> boleh juga diatas atau dibawah tag <body> Cara Tambahkan CSS dan HTML di Template Blogger Kode tersebut dapat dikreasikan sendiri sesuai selera seperti contoh berikut: <b:if cond='data:view.isError'> Misalnya, kita dapat menaruh kode html disini, kode css, kode javascript, menampilkan gambar, pesan kepada pengunjung, menambahkan kode pengalihan halaman ke halaman lain atau apapun. </b:if> Selesai... Sesimpel itu cara mengatur tampilan halaman 404. S

Cara Menyembunyikan Link Aktif di Komentar Blog dengan CSS

Link Aktif yang disematkan pengomentar melalui komentar menurut sebagian besar anak Blogger dapat mempengaruhi performa dan kesehatan blog di Mesin Pencari. Pengaruhnya dapat menurunkan peringkat artikel postingan di SERP (Search Engine Results Page) yang tadinya di posisi bagus jadi menurun kebawah bahkan hilang dari hasil pencarian, mungkin begitu.. Tidak hanya menurut anak Blogger tapi juga menurut SEO (Search Engine Optimization) terutama dan khususnya Link Aktif yang mengarah ke situs yang dengan reputasi buruk seperti mungkin situs terindikasi penipuan, software jahat, pokoknya yang jahat-jahat. Jika Link Aktif situs-situs tersebut tertanam di komentar blog kita maka blog kita akan terkena imbasnya. Tapi kalau sekedar Link Aktif dari teman-teman sesama Blogger dan platform terpercaya lainnya saya rasa tidak masalah. Terkecuali konten blog teman kita juga jahat maka tetap tidak boleh. Apakah ada teman Blogger yang memposting hal jahat? Kebetulan belum lama ini saya mencari sesuatu

Fungsi Lain dari Penggunaan Kode CDATA di Blogger

Bagi pengguna Blogger tentu pernah melihat kode berikut dalam Template yang biasanya dibuka dengan atribut <![CDATA[ dan ditutup dengan ]]> Kalau dalam HTML kemungkinan fungsinya sama dengan atribut ini  Jika sebuah susunan kode maupun teks di letakkan diantara pembuka dan penutup tersebut maka kode/teks tidak akan berfungsi atau tidak kelihatan. Dengan kata lain fungsi dari atribut tersebut untuk menyembunyikan sesuatu agar tidak aktif dan agar tidak kelihatan, saya lupa nama tepatnya apa, fungsingya hampir sama seperti kode comment <comment>Komentar yang ditulis disini tidak akan kelihatan.</comment> Itu fungsi utama/umumnya tapi bukan itu yang akan kita bahas melainkan fungsi lainnya, yaitu: Terkadang ada beberapa kode semisal kode javascript yang tidak bisa berjalan/bekerja jika di tambahkan ke dalam Template padahal tidak ada kesalahan atau kodenya bisa bekerja di tempat lain. Itu terjadi karena Blogger sangat ketat keamananny

Beberapa Hal Yang Mungkin Membingungkan Terkait Blogger?

Mungkin beberapa hal ini terlihat sepele tapi percaya atau tidak saya sempat pusing seperempat keliling, berpeluh mutiara, bermata sayu dan sedikit ngos-ngosan mencari penyebabnya. Apa saja kah itu? 1. Nama profil tidak bisa di klik. Nama profil yang biasanya terletak dibawah judul postingan itu tidak bisa di klik dalam kondisi tertentu. Sudah di cek semuanya, sudah terpasang dengan benar, tapi tetap saja linknya tak bisa di klik alias menjadi link mati. Ternyata penyebabnya adalah karena blog tempat saya mengedit Template tidak ditampilkan di profil, dengan kata lain hanya blog yang ditampilkan di profil saja yang nama profilnya dapat di klik. Sudah menjadi kebiasaan khususnya saya yaitu blog tempat latihan mengutak-atik Template biasanya tidak saya tampilkan di profil, hehe. 2. Lokasi tidak mau muncul. Di widget profil biasanya ada pilihan "tampilkan lokasi", atau di widget blog juga ada itu. Nah saat di conteng tetap tidak mau muncul. Walaupun tidak penting-penting amat m

Cara Cek Error Template Sebelum Diupload

Saat upload Template di Blogger > Tema > Pulihkan > Upload, biasanya akan gagal jika terdapat error pada file.xml yang kita upload tersebut. Dan bila menguploadnya lewat ponsel biasanya kita tidak diberi tahu errornya dibagian mana. Saya biasanya mengedit Template menggunakan aplikasi edit teks pada X-Plore atau semacam Notepad tapi dengan tampilan sangat sederhana hanya terdapat fitur pencarian kata saja di editor teks tersebut. Berbeda dengan aplikasi khusus yang biasa digunakan kebanyakan pengedit dalam mengedit template dengan menggunakan ponsel juga namun dengan fiturnya yang segudang. Sebaliknya saya justru bingung dengan fitur segudang jadi makanya saya lebih memilih menggunakan editor teks pada X-Plore yang sederhana. Selain itu di Blogger sebetulnya bisa mengedit secara langsung melalui ponsel di halaman "edit html" hanya saja terasa rumit karena tidak ada fitur "pencarian kata-nya", dimana fitur ini penting sekali agar cepat meloncat ke hal yang i

Beberapa Fitur Situs Yang Sudah Tersedia Di Browser

Beberapa fitur pada situs seperti misalnya Tombol berbagi, Emoticon pada kolom komentar, Widget Terjemahan, semua itu sudah tersedia di Browser utamanya Chrome. Sementara di Firefox Lite dan UC Browser tersedia juga Mode gelap meskipun tidak berfungsi. Jaman dulu hampir disetiap situs biasanya memasang widget counter dan jam yang pada jaman sekarang nyaris tak saya temukan ada yang memakainya lagi. Apakah kira-kira beberapa fitur yang di sebutkan diparagraf awal diatas bakal hilang juga? #Tombol Berbagi. Di semua browser ponsel umumnya sudah terdapat fitur berbagi hanya saja kekurangannya jika aplikasi terkait tidak ada di ponsel maka tidak bisa berbagi, misalnya tidak ada aplikasi Twitter terinstal di ponsel maka tidak bisa berbagi ke Twitter melalui fitur berbagi di browser. Di situs-situs besar tombol berbagi ini terkadang ada yang melayang mengikuti scroll ketika browsing menggunakan ponsel. Sepertinya ini masih diperlukan terpasang di situs. #Emoticon pada kolom komentar. Sewaktu

Cara Tentukan Sizes Width Height Gambar Yang Sulit Diatur Pada Template Blogger

Salah satu penyebab beratnya loading Blog pada hasil tes di Pagespeed insight adalah karena sizes width heigth gambar yang tidak atau belum ditentukan ukuran pastinya. Khususnya pada halaman Beranda/Arsip/Search/Label, widget PopularPost, widget FeaturedPost. Sementara untuk gambar postingan mungkin dapat dengan mudah diatur karena hanya menggunakan kode html biasa. Berbeda dengan gambar di Beranda misalnya kodenya bukan html biasa melainkan tag khusus jadi rada membingungkan bagi yang belum terbiasa. Saya bukan ahli tapi bisa sedikit wkwk. Berikut contoh tag khusus gambar pada Template Essential/Contempo Blogger. <b:if cond='data:post.featuredImage'> <div class='snippet-thumbnail'> <b:include data='{image: data:post.featuredImage, imageSizes: [100], imageRatio: "1:1", sourceSizes: "100px"}' name='respons

Kumpulan Tag Data Template Blogger

Dalam me-redesain Template diperlukan pengenalan kode khususnya tag data dari Blogger agar tidak terlalu bingung dalam mewujudkan desain keinginan kita. Kode ini tidak sepenuhnya dijelaskan di Bantuan Blogger atau tidak dijelaskan secara rinci jadi di postingan ini saya mencoba memberikan potongan2 kode yang langsung diambil dari dalam Template. Langsung saja berikut ini beberapa tag kode yang biasa digunakan. Merubah ukuran url gambar dengan kode isResizable. Salah satu penyebab beratnya loading blog akibat gambar karena size kb/mb nya terlalu besar. Meskipun width/height kecil tapi kalau kb/mb besar akan tetap terdeteksi sebagai berat. Kode berikut hanya contoh, diperlukan penyesuaian dengan css agar kode bekerja lebih baik. <b:if cond='data:post.featuredImage.isResizable'> <img expr:src='data:post.featuredImage' sizes='256' alt='Gambar'/> </b:if> ATAU <b:if cond='(data:postDisplay.showFeaturedImage ?: true) and data:post.featu

Cara pasang Author image di Template Essential / Contempo

Saya sempat kebingungan bagaimana cara menampilkan gambar Avatar atau Author image di Template Essential maupun Contempo karena kode bawaan dari kedua tema tersebut tampaknya tidak bekerja. Setelah mencoba mengambil kode dari Template Notable dan memasangnya pada kedua template tersebut barulah gambar avatarnya mau muncul. Berikut ini kodenya: <b:include data='{image: data:post.author.authorPhoto.image,imageRatio: "1:1",imageSizes: [50],sourceSizes: "50px",imageClass: "author-image"}' name='responsiveImage'/> Hasilnya akan seperti gambar dibawah ini. Cara pasang Author image di Template Essential / Contempo Kode tersebut dapat dipasang dimana saja apakah diatas postingan disebelah nama dan tanggal ataupun diakhir postingan. Namun lebih afdolnya pasang dalam area <b:includable id='postFooterAuthorProfile' var='post'> yang nantinya akan muncul diakhir postingan. Lihat gambar dibawah ini. Pad

Jual Template Blogger Premium (Promo)

Template Blogger Premium terbagi dua jenis yaitu Berbayar dan Gratis. Gratis maksudnya yang berbayar tapi di gratiskan. Hal ini biasa terjadi ketika seseorang membeli Template lalu kemudian selain dipakai sendiri juga dibagikan secara gratis, hal semacam ini sebetulnya kurang baik karena dapat merugikan si penjual. Tapi kita bukan akan membahas itu, melainkan akan membahas soal membantu mempromosikan Template hasil karya teman2 dipostingan ini. Bagaimana caranya silakan saja baca diakhir postingan ini dan sebelumnya mari lihat dulu berikut ini daftar karya dari teman2 yang dipromosikan di Blog ini. Daftar Template Blogger Premium 1. BabyFace 2. Masih kosong 3. Masih kosong Berikut Tata Cara berpromosi di postingan ini: 1. Gambar Template (Max: 100kb). 2. Url demo/contoh. 3. Nama Template. 4. Kirim ke-3 data tersebut di FP-FB. 5. Selanjutnya akan dipublis dipostingan ini.

Template Blogger BabyFace By JZ-Theme

Dapatkan Template Blogger cepat dan responsif. Dirancang khusus untuk segala jenis niche blog serta sesuai selera gaya umum masa kini. CEPAT Benar-benar cepat, untuk tampilan desktop mencapai kecepatan 99% dan mobile 95%. (Berdasarkan alat Pagespeed Insights). RESPONSIF Tampilan otomatis menyesuaikan untuk semua perangkat di layar desktop, laptop, tablet dan smartphone. (Mobile friendly berdasarkan alat Search Console). TAMPILAN Pada tampilan dengan lebar 1000px keatas menjadi 2 kolom dan 800px kebawah menjadi satu kolom. Lebar dapat juga diatur melalui "Alat Sesuaikan". Kecepatan dan Responsifnya diharapkan dapat menunjang SEO menjadi lebih baik, dimana SEO cukup baik sebagai kebutuhan Bloging. Dan tampilannya yang sederhana diharapkan mempermudah pengunjung menavagisi atau menjelajah atau menikmati membaca konten di blog. Pada intinya ini ramah bagi mesin pencari maupun bagi manusia. Desain Fleksibel alias mudah disesuaikan menjadi bentuk apapun, ini kelebihan dari Template

Cara Tambahkan CSS dan HTML di Template Blogger

Sebagian besar tutorial di Blog ini biasanya selalu menyertakan cara yang berhubungan dengan ini, jadi agar penjelasannya tidak bertumpuk disetiap postingan tersebut maka saya tuliskan secara tersendiri di sini. Cara Tambahkan CSS Setidaknya ada dua cara Tambahkan CSS ke dalam Template Blogger yaitu melalui halaman Costum dan Edit HTML. Melalui Costum: 1. Masuk ke halaman Tema. 2. Klik button orange bertuliskan "SESUAIKAN". 3. Pilih "Lanjutan" dan scroll kebawah. 4. Pilih "Tambahkan CSS", Selanjutnya masukkan css kedalam kotak dan "Simpan". Melalui Edit HTML: 1. Masuk ke halaman Tema. 2. Klik button orange "Panah Kebawah". 3. Pilih "Edit HTML". 4. Halaman Edit HTML akan terbuka dan masukkan css antara <b:skin> dan </b:skin>. Atau lebih gampangnya CARI ]]></b:skin> dan taruh css diatas itu. 5. Setelah selesai klik "Simpan". Cara Tambahkan HTML 1. Masuk ke halaman Tema. 2. Klik button orange "

Tentang Include dan Includable di Template Blogger

Sederhananya Include adalah yang memanggil dan Includable adalah yang dipanggil. Dengan kata lain Include memanggil Includable untuk menampilkan konten yang ada dalam Includable. Tanpa di Include maka Includable tidak akan muncul/tampil. Kapan include digunakan? Include paling berguna jika Anda memiliki bagian dari kode yang ingin digunakan kembali di beberapa tempat yang berbeda, atau hanya disertakan dalam keadaan tertentu. Untuk melakukannya, tulis konten dalam b:includable, lalu gunakan b:include di tempat Anda ingin menampilkannya. Includable atau Dipanggil. Contoh Format: <b:includable id='jaeyzone'> [sisipkan konten yang Anda inginkan di sini] </b:includable> Penjelasan Atribut: id (wajib): Pengenal unik yang terdiri dari huruf dan angka. Setiap widget harus memiliki satu includable dengan id='jaeyzone'. var (opsional): Pengenal yang terdiri dari huruf dan angka, untuk referensi data dalam bagian ini. Include atau Pemanggil. <b:include name='ja

Cara Mengatasi Postingan Dobel Antara Featured Post dan Blog

Postingan dobel sebab dari kesalahan penyusunan layout Template, begini solusi cara mengatasinya. Misalnya postingan dari Featured Post sama dengan postingan Blog. Umumnya ketika menggunakan Template default Blogger dan saat Widget Featured Post diaktifkan semestinya postingannya tidak sama alias tidak dobel dengan daftar dari postingan dari Blog. Terkadang atau barangkali anda pernah melihat ataupun mengalami ketika menggunakan Template kostum alias bukan Template default bawaan, atau setelah melakukan perombakan besar2an pada Template default kemudian postingnya menjadu dobel. Cara mengatasinya adalah: Pertama2 perlu kita ketahui sepertinya pada Selector2 class tertentu pada Template Blogger semacam terkoneksi dengan Javascript alias diatur oleh Javascript. Sebut saja misalnya tag element selector <main class='main'>.. saat merombak Template bisa saja anda merubah class=main menjadi class=mild misalkan. Tanpa kita ketahui class=main ini terkoneksi dengan JS dan saat kit

Cara Aktifkan Buka dan Tutup Komentar Balasan

Cara membuat toggle buka tutup komentar balasan khususnya template Contempo yang memang pada template tersebut fitur ini di sembunyikannya dan akan kita coba aktifkan kembali. Karena lumayan berguna terutama buat blog yang memiliki banyak komentar dari pengunjungnya, misalkan sampai ratusan komentar dan tentu ujung jari bakal panas scroll2 kebawah terutama bila browsing pakai hp. Pada template contempo, source struktur HTML pada fitur tersebut persis seperti dibawah ini dan saya rasa strukturnya sama saja pada template blogger lainnya. <div class="comment-replies"> <div id="otomatis" class="comment-thread inline-thread"> <span class="thread-toggle thread-expanded"> <span class="thread-arrow"></span> <span class="thread-count"><a target="_self">Balasan</a></span> </span> <ol id="otomatis" class="thread-chrome thread-expanded&quo

Template Contempo Aqua Dengan Fitur Related Posts dan Next-Prev

Sebuah Template Contempo asli bernuansa Aqua yang coba saya modifikasi dengan menambahkan beberapa fitur diantaranya Related Posts, Tautan otomatis menuju Posting Selanjutnya dan Sebelumnya, serta beberapa Widget HTML/Javascript dan Tambah Gadget yang berguna mempermudah pemasangan script tertentu yang bisa copot pasang semaunya buat penyuka kesederhanaan seperti saya tanpa harus masuk ke pengeditan Template yang rumit. Tanpa mengurangi fitur bawaan pada versi aslinya dengan versi modifikasi ini kita bisa menambahkan Kode HTML langsung melalui Tata Letak yang masing-masing dapat dipasang di bagian Header (Atau diatas badan halaman), Dibawah Kolom Komentar (Atau diatas Postingan Populer) dan Tambah Gadget Pada Footer yang tampil pada setiap halaman Blog. Keterangan Template 1. Related Posts tampil dengan 3 buah post acak dari label/kategori terkait. Untuk menampilkan lebih dari 3 buah post, jumlah karakter cuplikan, lebar/tinggi thumbnail dan sebagainya silakan edit pada editor template

Template Blogger AMP VioMagz By Sugeng

Template terbaru buatan Mas Sugeng salah satunya bernama VioMagz versi AMP. Google AMP atau Accelerated Mobile Pages merupakan proyek open source dari google untuk membantu publisher/webmaster membuat halaman web versi mobile menjadi super cepat secepat kilat. Baca selengkapnya tentang AMP di https://www.ampproject.org/id/learn/overview/ Dengan kata lain template ini memiliki kecepatan loading tinggi. Bagi anda yang berminat, kata pemilinya template ini gratis dengan catatan beli dulu versi yang sebelumnya yaitu VioMagz tanpa AMP. Baca selengkapnya di https://sugeng.id/tentang-google-amp-template-blogger-viomagz-amp/ Fitur dan kelebihan template VioMagz AMP: *. Halaman Valid AMP di URL versi mobile: https://amp.viomagz.com/?m=1 *. Halaman non-AMP di URL versi desktop: https://amp.viomagz.com/ atau https://amp.viomagz.com/?m=0 *. Loading cepat *. Desain bersih dan rapi *. Dll.

Kode Cara Tambahkan Gadget Pada Tata Letak Di Blogspot

Gadget yang terdapat pada fitur Blogger memiliki banyak fungsi yang berguna buat keperluan Blog kita. Misalnya untuk menambakan iklan pada Blog tanpa harus memasukan kode iklan kedalam Template. Menambahkan formulir kontak, Posting Populer dan masih banyak lagi fungsi lainnya dari Gadget yang telah disiapkan pihak Blogger. Namun sayangnya posisi penempatannya sudah di tetapkan oleh Template yang kita gunakan. Misal posisinya di atas posting maka tidak bisa di ubah lagi kalaupun harus di ubah hanya bisa diubah posisi keatas dan kebawah saja dan bila ingin menempatkan Gadget di tempat yang kita inginkan tiada pilihan lain selain harus mengedit Templatenya atau memasukan kode yang kita inginkan langsung ke Template melalui fitur Edit HTML pada Tema > Edit HTML yang ada dibawah Template yang anda pilih. Sebagai contoh Tema Contempo yang saya pakai di Blog ini, pada bagian footernya tidak ada "Tambahkan Gadgetnya" nah itulah yang akan kita bahas di posting ini bagaimana cara me

Cara Membuat Contact Us, Disclaimer, Privacy Policy, TOS dan Sitemap

Tidak memerlukan waktu lama anda akan berhasil Membuat About me, Contact Us, Disclaimer, Privacy Policy, Terms of Service (TOS) dan Sitemap (Daftar isi Blog), semuanya sekaligus dengan sangat mudah baik untuk Blogger maupun situs lainnya. Beberapa hari lalu saya mencoba membuat semua itu untuk perlengkapan Blog ini, awalnya saya kira mudah dan sebenarnya memang mudah tapi kalau di awal-awal khususnya pemula mungkin akan menjadi sulit karena kita harus cari-cari dulu tutorialnya di pencarian Google dan mencobanya satu persatu, memakan waktu dan belum tentu berhasil terutama pembuatan Sitemap dan Contact Us karena keduanya itu yang paling sulit sebab Layanan Contact Us / Form Send Mail dari pihak ketiga misalnya ada kendala hostingnya tutup dan harus cari yang lain lagi begitu juga Sitemap Host Javascriptnya tutup dan masalah lainnya. Diposting ini saya mencoba membuat semua itu menjadi sederhana, anda tidak perlu lagi mengunjungi situs generator atau maker karena pada dasarnya sama sa

Cara Membuat Daftar Isi Blog Berdasarkan Label

Daftar ISI atau Sitemap berfungsi untuk menampilkan keseluruhan judul posting dalam satu halaman khusus dengan tujuan mempermudah pengunjung memilih artikel yang menarik minatnya di blog kita. Baiklah langsung saja berikut ini cara membuat daftar isi Blog berdasarkan Label selain itu ada juga yang berdasarkan urutan tanggal tapi menurut saya yang label ini lebih bagus tampilannya, tertata rapi dan gak bikin pusing melihatnya, jadi saya share yang model label ini saja kalau sobat mau model lainnya cari di pencarian Google aja ya. Langkah - langkah pemasangan : 1. Download Scriptnya DISINI dan ganti nama domain yang ada dalam script tersebut dengan domain blog anda. 2. Buat 'Halaman Baru'. Caranya masuk ke Blogger > Halaman > Halaman Baru beri judul 'Daftar isi' atau 'Sitemap' atau 'terserah', selanjutnya paste kode scriptnya di halaman tersebut lalu Posting. 3. Selesai. Kunjungi halaman yang anda buat untuk melihat hasilnya. Contohnya bisa sobat l