Skip to main content

Posts

Showing posts from March, 2019

CARA MEMBUAT PROFILE BLOGGER KEREN DAN BERBEDA

Ini hanya buat percobaan, namun cara ini terbilang ringan dan ringkas. Hanya menampilkan tombol profile namun jika tombol "PERIHAL SAYA" tersebut di klik akan memunculkan profile pemilik blogger dengan ukuran yang hampir memenuhi ukuran halaman.
Sebenarnya saya ingin melengkapinya dengan link Php, misalnya dibawah profile ada form yang dapat dimanfatkan untuk chatting atau koresponden, akan tetapi saya masih menunggu beberapa masukan dari teman teman.

Kita langsung saja kepada cara pemasangannya:

1. TAMBAHKAN CSS

Langkah pertama masuk ke pengaturan blogspot:

Masuk kepengaturan blogspot Pilih Tema atau "theme"Dibagian bawah Live on blog atau "langsung di blog" ada dua pilihan: Customize atau Sesuaikan dan Edit HTMLPilih Edit HTML Cari kode </head> letakan kode CSS berikut tepat diatasnya:

<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;

CARA MEMBUAT LINK FOOTER PLUS FOLLOWER RINGAN

Saya pernah menulis bahwa gadget FOLLOWER itu sangat memberatkan loading dan menyita kecepatan halaman blog, dan itu benar adanya. Tetapi tanpa gadget follower bagi sementara blogger seperti ada yang kurang jadi saya berusaha mencari cara agar link follower tetap terpasang namun menjadi super ringan! Saya jadi teringat trik yang saya pakai untuk menghubungkan sebuah link langsung ke WA atau SMS melalui link Blogspot menggunakan Php. Dan walaupun caranya tidak sama persis, namun trik ini dapat bekerja dengan baik!

Lihat gambar dan perhatikan bagian footer pada tampilan mobile, perhatikan bagian bawah kanan layar hape telah ada menu footer "đź‘«Follow Us".
Hasilnya? Jauh lebih ringan dan Jauh lebih enteng daripada widget Follower bawaan, hampir tidak terlihat mengurangi loading blog. Begitu sobat klik Follow Us tersebut akan muncul layar notifikasi kecil sbb:
1. LANGKAH PERTAMA GUNAKAN BLANKO WIDGET JAVASCRIPT/HTML
Masuk kepengaturan blogspotPilih Tataletak atau Lay outTambahkan…

Cara sederhana menjadikan salah satu menu pada navigasi menjadi H1

Saya punya alasan: Saya ingin tema yang mudah saya atur dan saya ingat, sederhana dan nanti akan saya modifikasi lagi dan lagi.

Gagdet Header atau h1 pada template bawaan bahkan secara default dapat di bongkar-pasang melalui pengaturan blogger blogspot melalui "tambahkan gadget". Sebaiknya di pasang karena mesin pencari dapat membaca struktur blog sobat dengan baik. Susunan Header yang baik itu tentu saja normalnya dalah:
Heading1 <1>: dimana Judul blog ditempatkan dan terpampang jelas diatas halaman blogHeading2 <h2>: tag ini digunakan pada judul artikel blog (jika berada pada homepage) dan akan berubah menjadi <h1> pada halaman posting.  Heading3 <h3>: tag ini digunakan pada sub-judul atau penjelasan dari judul artikel atau posting, dan bisa juga digunakan pada judul widget misalnya popular post pada sidebar.<h4> : tag ini umumnya  dan bisa digunakan untuk judul artikel terkait, komentar atau bisa juga digunakan pada judul widget.<h5> : …

ALTERNATIVE FONT AWSOME MANA YANG PALING RINGAN UNTUK MEMPERCANTIK DESAIN TEMA BLOG?

1. FONT AWSOME
Font awsome, bayangkan bagaimana cantiknya tampilan halaman blog sobat ketika menerapkannya. Font ini telah diperbaharui menjadi font awsome 5 yang lebih  kompatibel dan tentu saja lebih valid HTML 5. Kalau sudah urusan validitas, para pemilik situs akan berusaha patuh kepada aturan. Walaupun misalnya jenis font awsome yang lebih lama tetap bekerja dengan baik di dalam template halaman sebuah blog.
Sobat perhatikan baik baik, apakah template sobat memiliki font font yang berbentuk rupa sebagai ikon ini, perhatikan menu navigasi, apakah selain tulisan  menu navigasi terdapat juga ikon di belakangnya?
Font awsome juga sering dipakai sebagai ikon tombol share dan follower karena mampu menampilkan gambar kecil yang angat cantik untuk mewakili apa yang sedang kita kemukakan dan memiliki hampir semua ikon berbentuk LOGO media media sosial besar seperti facebook, twitter, Instagram, simbol blogger, wordpress dan berton ton simbol lainnya.

Tentu saja pada tema tema blogspot ter…

CARA MEMBUAT MENU PENCARIAN ALA EDITBLOGTEMA

Disamping tombol menu pencarian bawaan blogspot, banyak terdapat tombol pencarian buatan pihak ketiga edit blogtema juga tidak mau ketinggalan karena terlanjur kadung ingin membuat template dari nol dengan segala komponen dan elemennya hasil buatan sendiri. Baiklah kita langsung saja ke topik.
Tombol pencarian ini saya buat animasi menggunakan kode aba aba CSS, sangat enteng dan berguna untuk meringankan beban loading halaman blogspot. Untuk memasangnya sobat perlu masuk ke pengaturan blogspot:

Langkah pertama: masukan kode CSS
Masuk kepengaturan blogspotPilih TemaPilih Edit HTML Pada halaman editor HTML blogspot cari kode </head> dan setelah ketemu copy kode dibawah ini lalu pastekan tepat diatasnya.
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 3px double transparent;
border-radius: 30px;
font-size: 22px;
background-color: transparent;

background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s …

CARA MENGHILANGKAN SHOWING POSTS WITH LABEL PADA TEMPLATE BLOGSPOT

Pada saat kita melakukan pencarian dengan cara mengetikan kata kunci atau judul sebuah artikel pada kotak pencarian di halaman sebuah blog dan menekan enter, maka yang muncul adalah artikel artikel yang memiliki persamaan, namun diatas judul artikel atau dibawah header akan muncul notifikasi:
"Showing Posts With Label in Blogger"
Atau "Menampilkan semua posting berdasarkan label" Gambar diatas adalah sebelum kode HTML kita modifikasi.

Cara yang saya share ini juga berlaku untuk templat bawaan blogspot yang lebih tua.

Masuk kepengaturan blogspot>>pilih tema>>pilih Edit HTML setelah halaman editor HTML terbuka, cari kode berikut:

<div class='post-filter-message'>
Bersama kode diatas buang semua kode dibawahnya juga:
<div class='post-filter-message'>
<div class='post-filter-description'> <b:if cond='data:view.isArchive'> <data:view.archive.rangeMessage/> <b:elseif cond='data…

SIMBOL KARAKTER DAN EMOTICON RINGAN SEBAGAI PENGGANTI FONT AWSOME?

Font awsome membutuhkan loa
ding karena menggunakan link eksternal untuk mengambil karakter, simbol atau ikon ikon dari ruang simpan library mereka. Sedangkan karakter emoticon yang saya maksud sudah terintegrasi didalam tool dan pengaturan blogspot. Ini dapat kita manfaatkan untuk memangkas beban yang dapat mengurangi kecepatan halaman blog akibat penggunaan font awsome.

Karakter karakter ini dapat di copy paste bahkan ke dalam HTML dan dibaca dengan cara membaca karakter huruf atau font yang biasa kita pergunakan sehari hari.

MANFAATKAN TOOL EMOJI BLOGGER.

Sebaiknya sobat membuka opsi page atau halaman pada pengaturan blogger dan membuat entri baru untuk menyimpan beberapa simbol yang akan sobat pilih nanti.

Tanpa banyak yang menyadari, karakter font huruf yang tersedia di blogspot pada saat penulisan artikel dapat berupa ujud pengganti font awsome. Dan hampir semua browser browser utama dan modern sudah support kepada karakter huruf atau font jenis ini. Karakter font bisa saja berb…

CARA MENAMBAHKAN LINK FOOTER UNTUK TEMPLAT BLOGSPOT DENGAN LINK WHATSAPP

Sebenarnya ini bisa di terapkan ke dalam template blogspot yang lebih lama. Namun karena sebaiknya sobat menggunakan templat terbaru blogspot yang sudah dibuat otomatis responsive dan mobile, maka cara ini sangat baik diterapkan.

1. CSS

Tidak ada JavaScript. Hanya elemen CSS yang kita butuhkan disini dengan syarat hanya 3 link saja yang saya sarankan itupun dengan judul link yang singkat seperti: privasi, perihal, dan kontak atau menurut selera sobat  karena layar hape yang kecil hanya bagus menampung panjang posisi inline sedemikian.

Masuk ke pengaturan blogspot>>Tema>>Masuk ke opsi edit HTML, lalu cari kode: </head> dan letakan kode berikut tepat diatasnya:

<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

CARA SIMPEL MEMBUAT MENU NAVIGASI BLOGGER FIXED

Banyak yang panasaran bertanya melalui inbox saya, gimana caranya dan sulitkah membuat menu navigasi agar tetap berada diatas header halaman blog pada saat di scroll? Dan mengapa editblogtema tidak membuat template blogspot yang dipakainya sendiri seperti demikian?
Apakah itu memberatkan loading blog? Ada lagi yang cuma memberikan komentar lihat tuh kaya viomagz, mantap, kan? . Mulanya saya hanya jawab pakai emot smile, tapi ternyata jumlah request semakin banyak. Saya akhirnya mengalah untuk membuat tutorialnya.

Baiklah saya jawab pertanyaan yang terlintas pada pertanyaan melalui inbox terlebih dahulu:

Membuat menu fix dan header fix itu sangat sederhana, hanya melalui CSS dengan menambahkan perintah position: fixed; dan aba aba z-index. Mengapa harus pakai z-index? nanti saya jelaskan.editblogtema tidak menggunakannya semata semata urusan selera, tentu saja saya punya beberapa templat buatan saya sendiri dengan header dan sidebar fixed tapi masih perlu perbaikan disana dan disini, s…

CARA MEMBUAT BACK TO TOP DENGAN CSS

Back To Top adalah tombol yang dapat di pencet atau di klik untuk mengembalikan halaman sebuah blog kembali ke atas, biasanya akan muncul di bawah sebelah kanan halaman apabila halaman di scroll  ke bawah.
Selama ini saya membuatnya menggunakan elemen HTML+CSS+JavaScript+link eksternal dan memanfaatkan link awsome untuk menampilkan ikon panah menunjuk keatas atau ikon "chevron up". Tetapi bagaimana jika saya tidak ingin lagi menggunakan link gambar atau image, dan membuang link awsome dari template halaman web kita? Pasti tampilan Back To Top yang telah saya buat itu hilang namun masih meninggalkan kode kode yang tidak lagi dapat dibaca oleh template saya.

Tujuan saya membuang link-link Awsome dan menghindari terlalu banyak link eksternal untuk image adalah agar template buatan saya menjadi lebih simple, fast loading dan bersih. Lalu bagaimana saya mengganti tombol back to top?

MENGGUNAKAN ELEMEN HTML CSS

Jangan kuatir, manfaatkan saja elemen dasar HTML terutama CSS, cara me…

DAPATKAH SCRIPT EXPIRES HEADER DI TERAPKAN KE BLOGSPOT?

Sewaktu saya melakukan pengujian kecepatan loading template blogspot di GMetrix pada bagian YSlow saya temukan satu list dengan sederet items yang di tandai sebagai high priority:
YSlow halaman blog masih 85% dan jika saya dapat meningkatkan skor dengan menambahkan expires header rasanya kecepatan loading halaman pasti akan meningkat. Menurut Pingdom Tools:
Halaman web menjadi semakin kompleks akibat semakin banyaknya terdapat scripts, style sheets, gambar, dan flash didalamnya. Misalnya akses pertama kali kesuatu halaman web memerlukan beberapa protokol HTTP, yang pasti sangat membebani loading karena harus memuat semua komponen komponen seperti yang disebutkan tadi. Maka dengan menggunakan Expires Header komponen komponen ini dapat di simpan sebagai cache dengan tujuan menghindari permintaan protokol HTTP pada setiap kali berkunjung ke halaman.

Expires Header lebih sering di asosiasikan dengan gambar, tetapi sebenarnya itu mencakup untuk tujuan penggunaan semua komponen halaman web …
Copyright © editblogtema. All rights reserved.