Postingan

Menampilkan postingan dari Maret, 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 HTML Pilih 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] { wid

CARA MEMBUAT LINK FOOTER PLUS FOLLOWER RINGAN

Gambar
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 blogspot Pilih Tataletak atau

Cara sederhana menjadikan salah satu menu pada navigasi menjadi H1

Gambar
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 blog Heading2 <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. &l

Alternatif font awesome yang ringan untuk mempercantik blog

Gambar
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. Anda perhatikan baik baik, apakah template kita 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 blogspo

CARA MEMBUAT MENU PENCARIAN ALA EDITBLOGTEMA

Gambar
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 blogspot Pilih Tema Pilih 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

SIMBOL KARAKTER DAN EMOTICON RINGAN SEBAGAI PENGGANTI FONT AWSOME?

Gambar
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 bis

CARA MENAMBAHKAN LINK FOOTER UNTUK TEMPLAT BLOGSPOT DENGAN LINK WHATSAPP

Gambar
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

CARA SIMPEL MEMBUAT MENU NAVIGASI BLOGGER FIXED

Gambar
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. Apakah Menu Navigasi Fix memberatkan loading? Navigasi menu fix tidak mungkin memberatkan loading karena itu hanya berupa elemen HTML internal di dalam template blogger. Baca juga  :

CARA MEMBUAT BACK TO TOP DENGAN CSS

Gambar
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

DAPATKAH SCRIPT EXPIRES HEADER DI TERAPKAN KE BLOGSPOT?

Gambar
Setelah membersihkan template dan meyederhanakannya Saya melakukan pengujian ke situs GTMetrix dan sewaktu melakukan pengujian kecepatan loading template blogspot di GMetrix pada bagian YSlow saya temukan satu list dengan sederet items yang di tandai sebagai high priority tidak dapat mencapai 100 karena persoalan 'expires header' saya sama sekali tidak tahu caranya bagaimana menambahkan expires header ke dalam template. Template editblogtema walau dengan beban sedemikian berat masih dapat menyandang kecepatan maksimum dengan nilai skor: 100. Jadi kecepatan template memang berpengaruh terhadap kecepatan halaman loading blog. Namun ganjalan pada bagian YSlow cukup membuat panasaran, bagaimana ya blognya Igniel dapat menerapkan expires header sehingga YSlownya dapat skor 100 juga. Saya sudah baca triknya tapi ternyata tidak dapat diterapkan dengan mudah ke dalam jenis template editblogtema. Sampai saat ini kami memang masih sedang mencoba memperbaikinya sambil mencari cari inf

CONTEMPO HYBRID ULTIMATE VARIAN 3 - UPDATED

Gambar
Updated: Apa yang baru? FITUR FITUR BARU: Template disederhanakan Tentu saja lebih SEO friendly UI dan UX baru: Responsive dan Mobile banget Lebih gesit, bersih dan lebih ringan dan menjadi supercepat Menu Navigasi lebih responsive   dan stylish dengan warna gradasi. Dibuat dan dikembangkan berdasarkan tutorial W3school  Tombol pencarian di perbaharui, lebih responisve, lebih alami dengan "search input" warna biru akan muncul dibawah (sebelumnya diatas, banyak yang komplin) Kecepatan semakin di tingkatkan antara lain dengan membuang link link sampah dari tombol share pihak ketiga, kode kode CSS dan JavaScript bawaan yang tidak terpakai dan menambahkannya dengan tombol berbagi addtoany yang lebih ringan. Silahkan cek di  Gmetrix  atau Silahkan cek halaman demo di tes kecepatan Google PageSpeed Perbaikan pada tampilan Tablet khusus navigasi pada menu dropdown yang terlalu rapat ke kanan sehingga menyulitkan tindakan penampil. Memperbaiki posisi snippet dan thumbn

TRIK CSS UNTUK MEWARNAI FOOTER ATRIBUSI TEMPLATE CONTEMPO DENGAN GRADASI

Gambar
Jika sobat ingin membuat template contempo menjadi beda sobat dapat mengetikan pencarian pada kotak pencarian di dalam blog ini. Kali ini saya akan berbagi trik merekayasa CSS agar footer atribusi blog template contempo jadi berwarna solid atau gradasi Walaupun baru dibuat oleh Google 2 tahun lalu dan masih bersatus sebagai template default blogspot terbaru namun tampilan contempo mulai redup ditengah tengah bermunculannya desain desain "unik" tema buatan pihak ketiga. Sebenarnya beberapa trik sudah cukup untuk menyulap contempo menjadi beda, misalnya menampilkan sidebar, membuat menu navigasi, merobah warna background, merobah tampilan footer, dst. MEMBERI WARNA PADA ATRIBUSI FOOTER Masuk kepengaturan (dasbor) blogger Pilih Theme Pilih edit HTML Pada halaman editor HTML cari kode CSS berikut: .widget.Attribution {   margin-top: 1em;   text-align: center; } Jika sudah ketemu tambahkan dibawahnya kode: height:40px; Background-color: blue; Kode tersebut

AKANKAH JAVASCRIPT TERBUNUH OLEH WEBASSEMBLY?

Gambar
Sebagai seorang penulis dan pengguna kode HTML saya bukanlah orang yang pandai menarasikan kisah perihal bahasa programmer dan koding, aneh memang, saya tergila gila dengan bahasa koding dan tidak pernah berhenti ingin tahu, setiap kali ada perubahan maka bolak-balik saya membacanya dari interet dan forum forum. Sebagai seorang yang tidak memiliki latar pendidikan bahasa program saya memberanikan diri mengemukakan pendapat pribadi saya sendiri. Java script memiliki sejarah yang panjang. Programmer dan bahkan desainer menggunakannya untuk membangun halaman web perhatikan saja fungsi klik pada halaman template web sobat. Walaupun pemakaiannya terbatas tetapi dia juga merupakan elemen penting HTML yang nyaris tidak bisa diabaikan. Yang saya suka adalah mengapa dia diberi nama Java sebagai orang Indonesia begitu menggoda kenangan: Orang orang programmer pada waktu itu yang mengisi hari hari mereka dengan aktifitas sembari menikmati kopi.    Nama ini diambil dari kopi murni yang digi

Labels

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi apple ARM Art Of War artikel sabtu asesories autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa bank btn batam beautiful beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blockquote blog blogcomments blogger bloggerhelp blogging Blogging mobile bloging blogspeed blogspot bluetooth bootstrap border dash breadcrumb browser btn mobile bugs Buku business capital letter cara catatan catatan awal tahun Cek IMEI Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codepen coding compose compose view contact form contempo contempo base contempo blackmagic contempo hibrida contempo hybrid converter coolest copy-paste copyright covid 19 covid_19 cowok CPC credit footer css CTR cuitan curhat cybercrime Dahlan Iskan dark mode dasbor data default Demo desain diblokir dirtylink disway DOM domain domain authority Donald Trump download download template terbaru dropdown earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik Elle Darby embed emoji emporio emporio hybrid english error essential expires header expires headers facebook fakta fanpage fast loading template fastloading template favicon featured posts feed burner firefox fitur fixed fixed sidebar font font awsome footer footer link Footer navigasi forbes Free friendship fuchsia full stacks furure g-suite gadget gagdet galeri gambar gambar bergoncang gambar profile penulis gambar responsive game generasi Alpha Generasi Z geng motor genius gerhana girl gmail Gmetrix gong xi fa cai good news google google chrome Google Domain google drive google font Google honemoon google Plus google search console google webmaster Googlewebmaster gradasi warna grafik gramedia gratis grid style GTmetrix h1 Habibie hack hacker halaman web hamburger menu hanya opini hapus hari bumi harimau heading headings heart secret hewan hoax hobi hotpink HTM5 html HTML view huawei hukum human Idulfitri Iklan ikon Imlek in memories indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram intel inteligensia internal link internasional internet internt interntet interntt intert iOS iPad iPadOS iPhone isu IT italia Jaime Ocabo java JavaScript jimdo jin Ping jingling Jokowi jQuery JSitor kaca pembesar kafe kalimantan kalkulus kamera kanonis kartun keamanan keamanan blogger kebijkan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword khusus kiata G+ klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi kota kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label laptop lay out lay out version 3 theme layarlipat layout lazyload lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation moz myths nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengusaha Penulis perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perubahan pexel phablet PHP plagiat plagiator PlagScan play store polemik politik ponsel popularitas popularposts portable powered by blogger Powerpoint prediksi premium privasi produk profesi profile programmer programming programming. prosesor pseudo-sains psikologi Python rahasia ramalan ranking faktor rawgit re-desain re-desain tema blogger React Reactions read more recentPosts redesain related posts remaja resolusi responsinator responsive review robot robot.txt sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars sticky sidebar sticky widget Strategi SEO Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tabel tablet tabs2 tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan template template premium template premium gratis template SOHO template versi ke-2 terkemuka tes popularitas testimoni testmysite text theme Thucydides tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorialKhusus twitter uang UAS unduh unik update urang utan ustazd Abdul Somad vanilla Script video viomagz viral virus corona vlogging vue w3-css w3school W3Shool wabah warna web web story WebAssembly webdesign WEBP website whatsapp widget wifi ID windows Windows Mobile wisata WIX wordpress X-Frame xiomi xml yandex youtube youtuber z-index
Tampilkan selengkapnya