Postingan

Menampilkan postingan dengan label Trik

CARA MEMBUAT HEADER BLOG BERGELOMBANG DAN BERANIMASI DENGAN CSS

Gambar
Ternyata CSS cukup sakti dan jika Kalian memiliki sedikit kreatifitas ia akan menjadi alat seni yang indah dan menakjubkan. Dalam kesempatan kali ini saya akan berbagi bagaimana caranya menerapkan header bergelombang sederhana dan beranimasi ke halaman template blog terbaru, baiklah kita mulai. Kita akan melakukan percobaan terhadap template essential karena ia adalah varian kelima dan paling mirip dengan contempo. Artinya bisa diterapkan ke essential berarti bisa juga diterapkan ke template contempo bahkan bisa juga ke soho, emporio dan notable.  Ini hanya percobaan dasar yang saya ambil dari beberapa referensi milik Daniel Österman yang saya modifikasi. Mudah dan hanya dibutuhkan pengaturan CSS. 1. LANGKAH PERTAMA Ok, masuk ke pengaturan blogger blogspot Pilih Tema Pilih Edit HTML Di dalam editor HTML blogger blogspot cari kode </head> dan letakan kode CSS berikut di atasnya:    <style>@import url(//fonts.googleapis.com/css?family=Lato:300:400); body {   margin:0; } h1 {

CARA MEMBUAT HITUNGAN KOMENTAR DI BAWAH JUDUL POSTINGAN BLOG - UNTUK TEMPLATE BLOGGER LAMA

Gambar
Trik ini mudah sekali di ikuti yang kalian butuhkan hanyalah mengerti dan terbiasa membuka dasbor dan mengedit halaman HTMLnya tidak perlu jago koding. Jumlah komentar akan terlihat di bawah Judul postingan seperti pada template editblogtema ini. Caranya: Masuk ke pengaturan blogger Pilih Tema Pilih Edit HTML Setelah halaman editor HTML terbuka cari kode <data:post.body/> kode ini akan menjadi banyak jika di dalam template kalian telah menggunakan fitur 'read more' dan 'related posts' pilih kode yang ketiga dan letakan kode berikut tepat di atasnya: <b:if cond='data:post.authorPhoto.url'> <img alt='Avatar' class='avatar' expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>By: </b:if> <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'> <span itemprop='name'><justi

CARA MENGGUNAKAN DASBOR BARU BLOGGER UNTUK MENDESAIN TEMPLATE

Gambar
Masih banyak blogger yang menggunakan pengaturan atau dasbor blogger lama. Wajar setiap kali perubahan datang kita butuh menyesuaikan diri. Akan tetapi perlu di ingat setiap perubahan di tujukan untuk lebih memudahkan pengaksesan, pengeditan, pekerjaan dan lain lainnya. Dan Google tentu saja tidak serta merta menghapus pengaturan dasbor lama. Itu masih disana, masih bisa di pergunakan. Tetapi nanti jika dasbor baru telah sempurna, dasbor lama akan di hapus.  Fitur baru dasbor blogger dengan fitur navigasi preview Jadi sebaiknya membiasakan diri mulai sekarang. Karena menurut saya diantara segudang fitur baru salah satu fitur yang hebat telah datang pada dasbor baru ini yakni kemudahan navigasi atau U.I. (User Interface-nya) dalam mengedit, mengkustomisasi atau bahkan membuat template yang sebelumnya tidak pernah ada. Google memberi kita kesempatan untuk membuat sebuah desain template blogger melalui tool aplikasi mereka. Walaupun hanya sebuah tutorial sederhana, tulisan ini memberikan

CARA MEMBUAT NAVIGASI BLOG FULL SCREEN

Gambar
Contoh fullscreen blogger navbar Selamat malam minggu para jomblo semua, ketimbang bingung mendingan belajar, nah jika sebelumnya saya telah berbagi trik atau tips atau panduan atau apalah namanya perihal cara membuat berbagai menu navigasi yang dapat di terapkan ke halaman blog, kali ini saya mempunyai satu "trik" lagi yang tidak kalah seru dan mampu membuat halaman blog kalian tampak unik, atraktif dan ...pokoknya eye catching-lah! Jangan lupa ya mengikuti semua artikel saya terkait dengan "navbar, menu navigasi dan dan kotak pencarian" yang telah saya tulis di blog ini ya..Saya sendiri sangat percaya navbar adalah elemen penting bagi sebuah halaman web. Apalagi karena letaknya di "kepala" maka ia berperan membuat pengunjung terpesona pada pandangan pertama. Eh? Iya kan masak kalian misalnya jatuh cinta pada saat melihat telinga cowok atau cewek pada pandangan pertama? Pasti wajah dong, pasti tatapan dan senyumannya yang mempesona! Ayo ngaku,

CARA STICKY SIDEBAR BLOG DENGAN ANIMASI KEREN

Gambar
Sticky alias lengket di terapkan untuk widget sidebar Saya sangat tertarik dengan beberapa teknik membuat sidebar pada blog menjadi "sticky" alias nampak lengket kaya sedikit ada karetnya, lihat saja percobaan yang saya terapkan pada template buatan saya ini. Template ini adalah template sederhana yang telah saya modifikasi penuh menjadi lebih responsive dan mobile friendly. 1.Jika menggunakan CSS Sobat bisa menggunakan CSS untuk membuat widget/gadget (misalnya popular posts)  pada sidebar blog menjadi "diam dan tetap berada ditempat" walau konten utama blog sedang discroll naik dan turun, contohnya: <style>#page-wrap { width: 600px; margin: 15px auto; position: relative; } #sidebar { width: 190px; position: fixed; margin-left: 410px; }</style> Letakan kode diatas </head> Kuncinya adalah pada aba aba pengaturan "fixed". Saya menggunakannya karena selama satu hari trik ini ringan alias tidak memberatkan loading tapi sayang fix

Jarang dimanfaatkan, justeru gadget genggam ini berpotensi membunuh laptop

Gambar
Well, Jika ditambahi dengan asesories... Tablet dan keyboard bluetooth milik penulis Ini telah lama saya manfaatkan buat ngeblog: Keyboard dan bluetooth. Dan secara konvensional sangat umum dipakai untuk melengkapi PC Dekstop dan Laptop. Tetapi kemudian zaman berubah, sejak tahun 2014 saya lebih sering duduk di kafe. Membawa laptop itu lumayan mencolok dan berat, setipis apapun sebuah laptop dimensinya tetap saja besar apalagi desktop gak bakalan bisa diajak "jalan-jalan" benar, zaman sudah sedemikian mobilnya dalam hidup saya. Tahun 2015 saya mulai memanfaatkan hape buat menulis dan tahun 2016 awal saya belajar koding dengan sungguh sungguh terutama karena berkaitan dengan desain web. Waktu itu cukup pusing menuliskan struktur HTML dengan memanfaatkan notepad android dan mengkompile-nya ke halaman web. Saya terpaksa menunggu pulang ke rumah dulu. Tetapi saya akhirnya melihat peluang ini: Internet 4G, Platform Android dan iOS yang semakin kuat mendekati

CARA MEMASANG TOMBOL BERBAGI ADDTHIS DI BLOG AMP

Gambar
Originally constributed by: Anissa Auliasari addthis share button atau tombol berbagi AddThis sangat terkenal responsive dan untuk AMP sendiri sampai saat ini AddThis merupakan satu satunya pilihan tombol berbagi dari pihak ketiga yang kompitabel, paling banyak dipergunakan dan pemasangan juga dapat dilakukan dengan cara di kustomisasi menurut selera pemasang agar tampilannya nampak beda. Cara penerapannya juga tidak jauh berbeda dengan cara pemasangan di blog HTML klasik biasa. Disini kita hanya akan membahas bagaimana cara pemasangan tombol berbagi ini secara default ke bloggger AMP. Jika pemasangannya nanti sudah benar maka akan tampil tombol share inline berjajar pada halaman postingan di blog AMP seperti tampak pada gambar di atas. Langkah pertama: Tentu saja buat terlebih dahulu akun AddThis melalui:  AddThis Tentu saja membuat akun adalah gratis. Gambar letak atau posisi kode di dalam template  Langkah kedua: Setelah akun dibuat masuk ke dasbor pengatu

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

CARA MEMBERI WARNA GRADASI PADA IKON AWSOME

Gambar
Jika sebelumnya saya sudah membahas perihal cara penggunaaan font awsome terbaru yakni font awsome5 yakni untuk mempercantik font menu navigasi sebuah blog, sekarang saya akan menjelaskan sebuah trik yang juga sangat bermanfaat untuk lebih mempercantik desain sebuah templat blogger yaitu membuat font awsome tersebut menjadi berwarna warni tanpa harus merugikan loading blog. Semua ikon fa fa awsome bisa di perkaya dengan warna dengan menambahkan sedikit trik pada kodenya dengan kode tambahan: gradient-icon baiklah mari kita mulai penjelasannya: MEMPERCANTIK IKON AWSOME DENGAN STYLE WARNA GRADASI Pernah memperhatikan template template yang didesain untuk wordpress blog? Atau pernah melihat karya karya envanto yang sangat "mobile" namun dengan loading cepat tanpa kehilangan keindahannya?. Disinilah peranan dan sentuhan seorang desainer dan seorang programmer sekaligus diperlukan dalam pembuatan sebuah template yang indah, gegas, dan cepat. Bukan hanya template

TEMA EMPORIO CUSTOM KEREN

Gambar
Template ini adalah emporio dan hanya dirombak beberapa bagian vital agar tampilannya lebih dinamis lebih UX friendly: Perubahan yang dibuat: Memotong background header menjadi flat Menambahkan snippet terutama untuk tampilan mobile Menambahkan menu navigasi - hanya berdasarkan laman agar mudah di edit Merobah bagian footer Menghilangkan navigasi backArrow  Menambahkan related post Sisanya adalah emporio asli dan terjamin standar keamanannya. Ingin tahu cara merombaknya? Jujur disamping Contempo, saya sangat menyukai tempilan emporio. Tetapi ada permintaan teman teman bule di stackflow agar saya merombak emporio seperti saya merombak Contempo, dan tentu saja saya tidak bisa melepaskan diri dari membuat dan mendesain sesuatu menurut selera subjektif saya. Sejauh ini hasil editan saya cukup mendapatkan apriesiasi dari teman teman itu. Untuk lebih jelasnya silahkan lihat  DEMO Untuk mencobanya silahkan DOWNLOAD Bagaimana menurut sobat? Sobat ingin tahu ra

Label

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi antivirus aplikasi apple ARM Art Of War artikel sabtu asesories audio autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa Bandar Lampung bank btn batam beautiful bedak beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blank space 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 cerai Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codeigniter codepen coding compose compose view condenser mic 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 duplikat e-commerce earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik 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 flipaclip font font awsome footer footer link Footer navigasi forbes framework 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 gojek 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 hometown hotpink HTM5 html HTML view huawei hukum human Idulfitri Iklan ikon Imlek in memories index indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram instan article 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 kebun raya kecantikan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword khusus kiata G+ kinemaster klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi korsel korut kota kota kelahiran kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label lapangan kerja laptop lay out lay out version 3 theme layarlipat layout lazyload lelaki liburan life-style lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makeover makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika microfon Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation mouse moz multimedia musik myths narasi nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office olahraga Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pekerjaan pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengornbanan pengusaha Penulis perang perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perkawinan permalink perubahan pexel phablet PHP plagiat plagiator PlagScan play store podcast 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 rekomendasi related posts remaja resolusi responsinator responsive review robot robot.txt s-pen sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO sepatu sepi share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singapore singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars statistik sticky sidebar sticky widget Strategi SEO streaming Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tab s7 tabel tablet tabs2 tabs7plus tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan tempat wisata template template premium template premium gratis template SOHO template versi ke-2 terbang terkemuka tes popularitas testimoni testmysite text theme Thucydides tiktok tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator travelling tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorial css 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 wps X-Frame xiomi xml yandex youtber youtube youtuber z-index
Tampilkan selengkapnya