Tampilkan postingan dengan label Trik. Tampilkan semua postingan
Tampilkan postingan dengan label Trik. Tampilkan semua postingan
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:
  1. Masuk ke pengaturan blogger
  2. Pilih Tema
  3. Pilih Edit HTML
cara membuat balon komentar di blogspot
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'><justify><data:post.author/></justify></span>
</a>
<span class='comment-count cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
<data:post.numComments/>Komentar
</span>
<div class='post-header-container container'/>
Selanjutnya masih di halaman editor HTML cari kode: </head> dan letakan kode CSS style berikut tepat di atasnya:
<style> .avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}</style>
Save template

Keuntungan menggunakan trik ini adalah:
  1. Ringan
  2. Tidak perlu memasang Comment Picker buatan pihak ketiga
  3. Asli dari elemen blogger itu sendiri, saya hanya memodifikasi elemen tersebut untuk menampilkannya
  4. Aman.
Ingat ini dapat di terapkan pada template template blog lama seperti template sederhana, PT. Keren sekali, Jendela, Perjalanan dst. Untuk template terbaru blogger seperti Contempo, Emporio, Soho dan Notable fitur ini telah tampil otomatis dan responsif, tinggal mengatur di pengaturan dasbor blog saja.

Fitur ini juga akan menampilkan gambar profile di atas hitungan komentar tersebut. Semua sumber kodenya sama: Berasal dari template bawaan blogger itu sendiri, saya hanya memodifikasi dan memanipulasinya agar tampil secara otomatis di bawah judul postingan blogger...

Lihat DEMO pada template hasil re-desain saya (Template sederhana atau Simple masih dalam pengerjaan/perapian):


Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!

SHARE YA:

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
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 petunjuk yang cukup lengkap.

MODE PRATINJAU (PREVIEW)

Ketika kita masuk ke pengaturan dasbor blogger dan memilih TEMA, lalu kita akan masuk ke halaman editor HTML, disanalah kita memulai pengeditan dengan menambahkan, atau hanya mengedit HTML, CSS dah Javascript yang telah ada. Pada pengaturan dasbor blogger lama tidak terdapat fitur tambahan pada fitur preview (pratinjau) seperti terlihat pada gambar ilustrasi berikut:
dasbor tampilan preview mode PC deskktop
dasbor preview mode PC deskktop

Mode pratinjau atau preview memang ada pada dasbor lama tapi perhatikan navigasi di bawahnya yang saya lingkari merah, itu baru. Pada gambar di atas saya memilih pratinjau tampilan desktop, maka yang tampil adalah tampilan template hasil editan kita jika di tampilkan melalui PC dekstop. 

Bagi saya ini penting untuk memastikan template yang sedang kita edit telah responsif, dan ketika saya memilih pratinjau dengan mengklik ikon hape/ponsel pada gambar ilustrasi berikut:
dasbor tampilan preview blogger mode ponsel
dasbor preview blogger mode ponsel

Begitu ikon hape saya tekan maka yang tampil adalah tampilan template halaman blogger pada tampilan ponsel. Dengan demikian pada saat saya melakukan perombakan sebuah template melalui tablet saya tidak perlu bolak balik lihat hape dan laptop untuk memastikan hasil template buatan saya seperti apa dan apakah sudah benar benar responsif. Fitur ini benar benar membantu mempercepat pekerjaan. 

Disamping itu kali ini saya hanya butuh satu perangkat untuk menguji tampilan template dari berbagai ukuran:
  1. Tampilan PC dekstop/laptop
  2. Tampilan tablet
  3. Tampilan hape/ponsel porrait
  4. Tampilan hape/ponsel landscape
Jadi untuk membuat dan mendesain template saya hanya butuh satu perangkat tablet atau paling kepepet sebuah ponsel dengan layar 5 inch ke atas. Dan di zaman yang serba mobile ini saya merasa di beri kemudahan pada saat mendesain template blog melalui hape, saya bahkan sekaligus jadi tahu bagaimana kelak tampilannya pada layar deskstop dan laptop.

Untuk memudahkan pemahamannya saya berikan saja contoh gambar berurut (barsambung sekaligus) di bawah berikut. Setelah kalian masuk ke pengaturan awal dasbor blogger:
  1. Klik Tema
  2. Klik tiga titik bersusun
  3. Pada menu dropdown yang muncul pilih Edit HTML
  4. Pada halaman Edit HTML klik 'pratinjau' (ikon mata satu)
petunjuk mengakses edditor HTML blogger
petunjuk mengakses edditor HTML pada dasbor baru Blogger

Gambar diatas adalah petunjuk dasar mengakses halaman editor HTML pada dasbor blogger untuk memudahkan kalian memahami cara menggunakan dasbor baru blogger ini. Semoga bermanfaat. Selamat Hari Raya Idulfitri

SHARE YA:

CARA MEMBUAT NAVIGASI BLOG FULL SCREEN

Tidak ada komentar

Januari 04, 2020

fullscreen blogger navbar
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, pasti wajah yang letaknya di atas kepala manusia, gak mungkinlah jempol kakinya...

Saya berikan contoh melalui editor w3school berikut cobalah tekan 'DEMO' dibawah ini. Cara menggunakan DEMO adalah kalian harus klik 'RUN' tombol warna hijau akan tampil hasil pekerjaan saya seperti pada gambar berikut di bawah, kalian juga pasti akan bisa melakukan hal yang sama.
DEMO
Cara pemasangan:
Login ke Blogger.
  1. Pilih blog untuk diperbarui.
  2. Di menu sebelah kiri, klik Tema.
  3. Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.
  4. Cari kode </head>

1. CSS

Letakan kode CSS berikut tepat di atas kode </head>:
<style>body { font-family: 'Lato', sans-serif;}.overlay { height: 100%; width: 100%; display: none; position: fixed; z-index: 150; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,505, 0.9);}.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px;}

.overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #fff; display: block; transition: 0.3s;}.overlay a:hover, .overlay a:focus { color: #f1f1f1;}.overlay .closebtn { position: absolute; top: -11px; left: -11px; font-size: 60px;}@media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; }}</style>

 2. HTML

Masih pada dalam halaman editor HTML blogger letakan kode HTML berikut tepat di bawah kode </head> atau <body>:
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><svg style="width:38px;height:38px" viewBox="0 0 14 24">
<path fill="#fff" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg></a>
<div class="overlay-content">
<a href="#">Beranda</a>
<a href="#">Perihal</a>
<a href="#">Kontens</a>
<a href="#">Privasi</a>
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()"><svg style="width:28px;height:28px" viewBox="0 0 24 24">
<path fill="#000000" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg></span>

3. Javascript

Masih di halaman editor HTML blogger cari kode </body> lalu letakan kode berikut tepat di atasnya:
<script>function openNav() {document.getElementById("myNav").style.display = "block";}function closeNav() {document.getElementById("myNav").style.display = "none";}</script>
Save template. 

SHARE YA:

sticky sidebar dengan animasi
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 ini kurang bagus pada tampilan mobile (hape) dan layar yang lebih kecil. Lagipula setiap layar memiliki dimensi yang berbeda dalam menampilkan bagian bagian dari image yang telah kita buat. Jika menggunakan kompi lawas susunan widget yang tersusun dari atas kebawah seperti popular posts akan terlihat lebih banyak.

Namun sebaliknya jika menggunakan layar kompi terbaru dengan dimensi ratio 16:9, sebagian widget akan tersembunyi.

2. Jika menggunakan JQuery

Nah karena hal tersebutlah saya akhirnya memilih trik JQuery, yakni memanfaatkan JavaScript untuk pembuatannya, elemen ini dapat diterapkan pada wordpress, untuk blogspot kodenya dapat sobat letakan diatas kode </body> dengan menambahkan tag pembuka <script> dan menutupnya dengan </script>:
<script>$(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 70; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); });</script>
Perhatikan kode yang saya merahkan, kode tersebut dapat sobat ganti dengan #PopularPosts1 atau widget lainnya. Tidak ada perbedaan dengan cara lain yang mungkin pernah sobat cobakan, tetapi cara ini memiliki kelebihan yakni efek animasinya. Sidebarnya seolah lengket dan ada karetnya, he he he...Cobalah!

Tidak mengganggu posisi iklan

Cara kedua diatas (dengan JQuerry) tidak akan mengganggu penempatan iklan. Bahkan menurut saya iklan jadi terlihat "sopan" karna tidak akan kentara. Cara penempatan Iklan Adsennya adalah diatas posisi PopularPosts (Jika sobat mengganti #sidebar dengan #PopularPosts1 

Perhatikan sidebar editblogtema ini: Anggaplah "tentang saya" sebagai widget iklan adsense, saya pasti akan menempatkannya diatas "Popularposts"

Trik ini saya buat setelah beberapa kali melakukan percobaan, beberapa keluhan penggunaan sticky sidebar biasanya adalah penempatan iklan terganggu, bisa tersembunyi sebagian bisa keseluruhan pada ukuran layar tertentu. Tetapi hal ini tidak akan terjadi pada sticky sidebar yang saya pergunakan ini, sifatnya yang "karet' atau pegas itu membuatnya dapat menampilkan sekalipun selusin widget ditempatkan pada sidebar.

Kecuali jika sobat ingin iklannya terus ter"ekspos" di sidebar secara fixed silahkan menggunakan trik penempatan CSS (cara pertama) yakni dengan cara menempatkan kodenya pada bagian tag <head> atau diatas </head>

SHARE YA:

Well, Jika ditambahi dengan asesories...

Tablet dan keyboard bluetooth milik penulis
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 PC, saya membaca banyak keyboard bluetooth dan mouse bluetooth telah di produksi dan saya mencobanya satu demi satu dari toko ke toko. Semua asesories penting ini ternyata bekerja dengan baik. Ada yang harganya murah, ada yang modelnya cantik, ada yang mereknya sangat terkenal. Saya memilih yang branded dan memang terdapat perbedaan pada saat mencobanya.

Saya membeli ini: Keyboard bluetooth yang mungil dapat dilipat dan dimasukan ke dalam saku seharga 30 dollar Singapore dan sebuah mouse dengan merek yang sama namun dengan harga separohnya. Keduanya saya pakai untuk menulis melalui tablet dan hape android hingga empat tahun sampai sekarang, dan telah menghasilkan 800 artikel pada 4 blog saya, termasuk beberapa puluh artikel dalam bahasa lain yang saya kuasai. Namun pada tulisan ini saya tidak menuliskan detail pengalaman saya, tetapi semata mata ingin berbagi bagaimana teknologi mobile yang ditawarkan telah menjadi kenyataan.

1. MENULIS VIA HAPE DENGAN KEYBOARD
Alasan mengapa menulis menggunakan asesories ini adalah:
  1. Keyboard bluetooth mudah dilipat menjadi seukuran saku bukan cuma mudah dimasukan kedalam tas
  2. mouse bluetooth dapat membantu navigasi pada layar dengan lebih nyaman
  3. Kedua asesories pada tahun belakangan telah menggunakan teknologi bluetooth generasi ke empat yang nyaris tidak memiliki masalah dengan konektivitas.
  4. Sangat berguna buat penulisan dan pengeditan HTML didalam template atau editor online blog.
  5. Ketika sobat berada di dalam kafe seorang diri dan menulis kebanyakan teman teman tidak sadar bahwa kita sedang ngeblog.
sangat cocok dipakai buat menulis via hape
Kebanyakan pengguna mengatakan pengalaman yang berbeda saat menulis via keyboard dibanding via layar sentuh saat menulis artikel panjang, dengan keyboard layar akan berubah menjadi penuh karena UI (user interface) sistem android menyesuaikan dirinya pada saat perangkat hape terhubung ke keyboard melalui bluetooth layar menjadi penuh dan layar menjadi lega. Sebaliknya pada saat menulis dan mengetik memanfaatkan papan ketik layar, maka layar akan terpotong atau tersita oleh tampilan papan ketik sentuh bawaan android atau iOS.

Akan tetapi teknologi papan ketik fisik bluetooth juga akan terus berkembang: Semakin tipis, semakin simpel namun lengkap, semakin menakjubkan. Contohnya papan ketik yang bisa dilipat bahkan menajdi sangat kecil seolah itu hanyalah sebuah stik seuukuran panjang ballpoint!
contoh keyboard saku kecil
Contohnya produk TextBlade seperti penampakan gambar diatas seperti terlihat pada saat dilipat ukurannya menjadi sangat simpel dan kecil saja. Saya pribadi punya rencana untuk mencoba produk ini buat menulis. Ukurannya sendiri hanya 1/3 ukuran hape ukuran 5 inch namun ketika direntang memiliki dimensi yang pas ditangan. Proudk ini sangat menarik karena memiliki lampu led pemberitahuan untuk nofikasi penulisan tertentu, dengan hanya sedkit waktu untuk membiasakan diri sobat akan menjadi sangat terbiasa dengan cara pengetikannya dan cara ini di klaim mampu meningkatkan kecepatan pengetikan.
keyboard mungil dipasangkan ke hape
Tidak hanya cocok buat hape produk ini cocok juga buat PC desktop, tablet dan laptop. Konektivitasnya sangat repsonsive dan cepat. Powernya dari mana ya? Oh jangan kuatir! Keyboard ini di charge dan satu kali charge diklaim dapat bertahan hingga berbulan bulan!
cara charge keyboard textblade
Well, itu hanya contoh saja. Yang sangat menarik adalah keyboard ini memang beda dan menawarkan cara mengetik yang telah disesuaikan dengan ergonomic alamiah tangan manusia sehingga di klaim setelah beberapa waktu terbiasa akan membuat kita mengetik lebih cepat dan efesien.

2. MENULIS VIA HAPE DENGAN KEYBOARD DAN MOUSE
Mengapa setelah memiliki keyboard harus memiliki mouse lagi? Ini khusus bagi yang "advance" bro. Karena mouse itu penting untuk menavigasi layar pada saat melakukan pekerjaan membuat konten khusus atau membuat widget/gagdet untuk keperluan desain tema blog misalnya.

Sobat tau, tidak akan mudah memindah mindahkan gagdet pada halaman dasbor blog dengan cara menyentuhnya dengan jari, perhatikan gambar halaman pengaturan blog ini:

tidak dapat di geser melalui sentuhan jari
Dapatkan sobat memindahkan gagdget-misalnya gagdet"arsip blog" keatas badan halaman dengan cara menyentuh dan menekannya? Tidak bisa. Sistem android belum membuatkan user interface untuk itu. Namun sobat bisa meletakan kursor mouse jika sobat menggunakan kursor bluetooth untuk android, mendrag gagdet tersebut kemanapun pada posisi yang tersedia pada tataletak pengaturan di dasbor blogspot . Itu alasan utama saya merekomendasikan mouse buat asesories mobile.

Bukan hanya itu, pada saat menavigasi pengeditan JavaScript/HTML pada halaman deditor online navigasi mouse sangat diperlukan agar penorotan lebih fokus dan terarah.
dengan asesories lengkap: bluetooth keyboard dan bluetooth mouse
3. MUDAH DAN TIDAK LAGI RIBET
Alasan menggunakan ini semata mata karena memang lebih mobile dan praktis. Hape memiliki kelebihan dan potensi yang lebih banyak dibanding sebuah laptop pada zaman sekarang. 
  • Bisa buat nelpon, panggilan darurat
  • Bisa buat chatting, video call
  • Bisa buat nulis artikel panjang dan pendek bahkan telah digunakan buat menulis novel oleh para penulis dunia termasuk JK. Rowling.
  • Bisa buat mengedit dan nulis koding seperti HTML, CSS, Java Script dst.
  • Bisa buat moto dengan kualitas tinggi
  • Bisa buat nulis dan berkirim email, mengedit pekerjaan kantor melalui aplikasi perkantoran seperti excel, ms.word dan presentation.
  • Bisa buat kalkulator
  • Bisa jadi penterjamah/Juru bahasa saat berada diluar negeri
  • Memiliki banyak aplikasi menakjubkan
  • Mengedit Gambar dan video 
  • Mendengarkan musik
  • Konektivitas semakin cepat dan tinggi
  • Sistem operasi mobile sudah nyaris sama kuatnya dengan sistem operasi PC layar besar. Dan tentu saja jauh lebih cepat berkembang
  • Bisa buat jualan online
  • Bisa buat main game online lebih seru
  • Bisa dibuat untuk belajar banyak hal online
  • Bisa buat pembayaran sebagai pengganti kartu kredit, bisa buat bayar tagihan listrik air, bayar pajak dll.

Waktu juga terus berjalan dan terus membawa inovasi baru, saya tidak melihat mengapa orang masih harus bertahan dengan PC dan Laptop jika gagdet didalam genggaman tangan mereka dapat berfungsi dengan baik. Dan mengapa mereka tidak mencoba memanfaatkannya.

Saya juga tidak melihat invosi lain yang secepat dan semassive gagdet genggam seperti ponsel dalam hal kecepatan konektivitas. Lagipula Google sendiri pada akhirnya mengutamakan channel mobile untuk lini bisnis mereka. Ditambah lagi pengguna mobile di dunia ini semakin bertambah berlipat lipat dari segala kalangan: miskin-kaya, terpelajar atau tidak. Sementara pengguna laptop terus menurun tajam dari tahun ketahun. Yang tersisa tentu saja hanya pada lini kegiatan yang khusus menggunakan PC/Laptop.

Bisnis mobile juga masih berkembang pada tingkat menggiurkan.

4. SEKUAT PC/LAPTOP
Bekerja mobile apabila dilakukan dengan bantuan asesories asesories ini sobat tidak akan dapat membedakannya lagi dengan apabila sobat menggunakan PC/Laptop konvensional. Istilah konvensional telah cocok dipergunakan buat pengguna laptop di beberapa negara maju memang terdapat pemakaian istilah ini cara "old time" mulai perlahan lahan melekat pada predikat pengguna PC/laptop.

Sama halnya cara membaca koran melalui koran konvensional, dibanding dengan cara membaca melalui gagdet zaman now. Dibeberapa tempat saya sudah sangat jarang melihat orang menggunakan laptop pada saat meeting dibanding tahun tahun sebelumnya. Saya melihat mereka menggunakan tablet jenis jenis surface, iPad dan tablet high end Android saat melakukan presentasi.

Beruntungnya sekarang terdapat banyak hape hape dan tablet murah seharga satu jutaan dengan speks yang mumpuni. Atau gagdet bekas dengan garansi dengan harga 2-3 lipat dibawah baru.

Saya juga kagum dengan perkembangan bahasa pemrograman. Misalnya meskipun saya menulis kode kode melalui halaman editor online malalui hape dan tablet saya tetap bisa mengatur bagaimana bentuk tampilan yang saya inginkan nanti jika di lihat oleh pengunjung melalui layar lebar desktop dan laptop melalui  @Media Query. Ini sungguh menyenangkan dan kita juga ternyata bisa menjadi desainer secara mobile!
untuk pengaturan tampilan halaman blog pada berbagai ukuran layar
Gambar halaman online editor pada pengaturan atau dasbor blogspot
Hanya dengan menuliskan ukuran dan mengikuti standard yang sudah baku kita dapat menentukan seperti apa normalnya tampilan dan ujud halalaman blog kita pada setiap ukuran layar yang berbeda. Dan itu semua dapat kita lakukan melalui hape dan tablet dan akan menjadi sangat mudah berkat bantuan asesories bluetooth keyboard dan bluetooth mouse untuk android dan iOS seperti yang telah kita bahas diatas.

Apakah menulis koding bisa sepenuhnya melalui gadget gadget genggam ini?

Saya katakan bisa melaui tablet dibantu keyboard bluetooth, dan trackpad atau mouse. 6 buah templat saya buat sepenuhnya melaui tablet dan hape android.

Namun bukan itu alasannya mengapa pada akhirnya saya memprediksi hampir setiap orang bisa melakukannya:
  • Praktis itu jelas karena ukurannya yang mobile, jauh masih lebih nyaman nenteng tablet kemana mana ketimbang laptop.
  • Lengkap, hampir semua kebutuhan komputer masa sekarang disupport oleh tablet dan hape android. Aplikasi perkantoran gratis, file manager yang beragam, dukungan aplikasi web yang lebih kaya.
  • Inovatif. Gadget genggam lebih cepat berkembang dibanding laptop dan PC, tidak ada lagi masalah saat menulis dan mengedit koding atau bahasa pemrograman UI dan UX-nya terus meningkat dan disesuaikan dengan kebutuhan skill manusia, sungguh menakjubkan karena rasanya masih banyak yang belum kita eksplorasi daripada potensi gadget kedepannya dalam hal berproduktivitas (mengambil alih semua pekerjaan PC) asesories dibuat bukan hanya meningkatkan fungsi dariada gadget tapi juga mampu "mengekstanded" tenaga dan daya.
  • Generasi Z. Peralihan dari generasi Y atau generasi millenium yang sekarang sudah pada jadi bapak bapak dan mak mak ke generasi berikutnya juga turut menjadi tanda akan kehadiran life style yang berbeda dalam hal tulis-menulis. Semuanya karena dan berkat teknologi.
  • Yang penting aplikasi menulis koding via mobile telah banyak dikembangkan oleh pengembang, dan rasanya dari waktu kewaktu semakin user friendly saja. Saya masih menggunakan laptop, tapi aplikasinya hanya itu ke itu saja.
Oke sobat, jumpa lagi pada postingan berikutnya.

SHARE YA:

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.

tinggal di copy dan diterapkan kedalam kotak editor online blogspot
letakan diatas tag body
Gambar letak atau posisi kode di dalam template 
Langkah kedua:
Setelah akun dibuat masuk ke dasbor pengaturan AddThis, untuk membuat kustomisasi tombol berbagi sobat, hingga saat ini tampilan tombol berbagi untuk Blogger AMP adalah berjajar atau inline.

Langkah ketiga:
Pilih Tombol tombol medsos yang sobat sukai setelah dirasa cukup, tekan "activate tool" untuk mengaktifkan tool. dari sini akan muncul kotak halaman kodenya.

Langkah ke empat:
Copy kode unik tersebut dengan menekan tombol "snippet code" di bawah halaman kode tersebut. Pastekan kode tersebut tepat diatas </head> kode HTML template AMP sobat. Tampilan kode </head> pada AMP bisa saja normal bisa jadi dibungkus seperti pada kode yang saya sorot warna hijau:
<b:if cond='data:blog.pageType == &quot;item&quot;'><script async='async' custom-element='amp-addthis' src='https://cdn.ampproject.org/v0/amp-addthis-0.1.js'/></b:if><!-- Go to www.addthis.com/dashboard to customize your tools --><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5aac9c0a5226a9c5' type='text/javascript'/><!--letakan kode unik AddThis disini--!>&lt;/head&gt;&lt;!--<head/>--&gt; <body> <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'><amp-sidebar id='sidebar1' layout='nodisplay' side='right'> <div aria-label='close sidebar' class='close-sidebar' on='tap:sidebar1.toggle' role='button' tabindex='0'>&#10005;</div>
Langkah ke 5.
Terakhir tapi penting, Copy-Paste-kan kode inline AddThis pada bagian body (tepatnya diatas </body> templat dimana anda inginkan tombol share itu tampil nantinya. Pada tampilan template AMP bisa saja seperti contoh dibawah ini:
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> &lt;/div&gt; <b:else/> &lt;/div&gt; </b:if> <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;index&quot;}'> &lt;/div&gt; </b:if> <!--letakan kode inline AddThis disini--!>&lt;!--</body>--&gt;&lt;/body&gt;
</HTML>
Mudah mudahan ini bisa membantu karena jika tidak ada perbedaan susunan struktur kode pada template yang berbeda, misalnya sobat memodifikasi tampilan dengan menambahkan kode CSS diatas kode </style> atau kode: ]]></b:skin> maka hapus saja kode CSS tambahan tersebut agar tidak mengganggu tampilan tombol berbagi AddThis ini yang seharusnya dipasang secara default, maka seharusnya AddThis share Button dapat bekerja dengan baik pada template blog AMP sobat.

Baca juga: PANASARAN APA SIH AMP ITU?

SHARE YA:

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:

  1. Masuk kepengaturan blogspot
  2. Pilih Tema atau "theme"
  3. Dibagian bawah Live on blog atau "langsung di blog" ada dua pilihan: Customize atau Sesuaikan dan Edit HTML
  4. 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] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius:50px
z-index=1200;
}

/* Set a style for all buttons */
button {
background-color: #FFB6C1;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius:30px;
}

button:hover {
opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: ;
}

/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
border-radius:50px;
}

img.avatar {
width: 40%;
border-radius: 50%;
}

.container {
padding: 16px;
}

span.psw {
float: right;
padding-top: 16px;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 50px;
border-radius:30px;
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: red;
cursor: pointer;
}

/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
z-index=1200;
}
}
</style>


2. TAMBAHKAN HTML

Langkah kedua
  1. Masuk kepengaturan blogspot
  2. Pilih Tataletak atau Lay out
  3. Tambahkan atau add gadget
  4. Pilih JavaScrit/HTML
Copy seluruh kode dibawah dan pada blanko kosong JavaScript/HTML yang telah terbuka dan lalu pastekan ke dalamnya.

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">PERIHAL SAYA</button>

<div id="id01" class="modal">

<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
<img src="https://1.bp.blogspot.com/--mHPjlgbUmc/XJZYFv6C1pI/AAAAAAAAAA0/AuR33XWQ0ZMuxNxhtGMbqbVrf_DOQI3MwCK4BGAYYCw/s113/images%2B%252816%2529.jpeg" alt="Avatar" class="avatar" />
</div>

<div class="container">
<label for="uname"><b>BVANIE</b></label>
<input type="text" placeholder="mandiri, lembut, sensitif, suka pengatahuan" name="uname" required />

<label for="psw"><b>website</b></label>
<input type="password" placeholder="https://bvanie2.blogspot.com" name="psw" required />

<button type="submit">Login</button>
<label>
<input type="checkbox" checked name="remember" /> Remember me
</label>
</div>

<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="
https://1.bp.blogspot.com/--mHPjlgbUmc/XJZYFv6C1pI/AAAAAAAAAA0/AuR33XWQ0ZMuxNxhtGMbqbVrf_DOQI3MwCK4BGAYYCw/s113/images%2B%252816%2529.jpeg">password?</a></span>
</div>
</form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>


Ganti link Gambar yang saya sorot kuning dengan gambar profile sobat sendiri, cara mengambil gambarnya adalah dengan mengklik profile blogspot kita dan membukanya melalui halaman baru di browser, pada bar alamat web akan terlihat link gambar dengan awalan alamat: https://1.bp.blogspot.com/....DST pastekan sebagai pengganti link Nona BVANE ini.
LIHAT DEMO
www.editblogtema.net

SHARE YA:

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".
dilengkapi dengan tombol link follower cantik
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:
Muncul setelah Follow Us di klik
1. LANGKAH PERTAMA GUNAKAN BLANKO WIDGET JAVASCRIPT/HTML
  1. Masuk kepengaturan blogspot
  2. Pilih Tataletak atau Lay out
  3. Tambahkan atau add gadget
  4. Pilih JavaScrit/HTML
Copy seluruh kode dibawah dan pada blanko kosong JavaScript/HTML yang telah terbuka pastekan.

<div class="navbar">

<a href="https://www.editblogtema.net/p/privacy-policy-for-editblogtema-if-you.html" class="active">👤Privasi</a>

<a href="https://www.editblogtema.net/p/saying-goodbye-to-adsense-for-feeds.html">🌐Tentang</a>

<a href="http://www.blogger.com/follow-blog.g?blogID=3894474860842702694">👫Follow US</a>
</div>

Hapus dan ganti angka yang saya sorot kuning dengan angka atau nomor ID sobat sendiri. Caranya masuk kepengaturan blogspot, lihat pada bar alamat bagian atas komputer atau laptop atau tablet atau ponsel sobat, gambarnya sebagai berikut perhatikan angka yang saya sorot kuning juga ya.
Kemudian SAVE template.

2. LANGKAH KEDUA TAMBAHKAN CSS MELALUI HALAMAN EDITOR HTML

  1. Masuk kepengaturan blogspot 
  2. Pilih Tema atau "theme"
  3. Dibagian bawah Live on blog atau "langsung di blog" ada dua pilihan: Customize atau Sesuaikan dan Edit HTML
  4. Pilih Edit HTML
Cari kode </head> letakan kode CSS 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;
}

.navbar a:hover {
background: grey;
color: black;
}

.navbar a.active {
background-color: transparent;
color: #333;
}

.main {
padding: 16px;
margin-bottom: 30px;
}
</style>

Save Template.

Perhatian!, saya menggunakan dan memanfaatkan simbol emoji yang terdapat pada tool posting blogspot itu sendiri, sobat bisa menggantinya dengan ikon font awsome jika didalam template sobat telah terpasang link Pamanggilnya-di dalam tag <head>.

Simbol ini juga sangat mudah terpengaruh oleh perubahan struktur di dalam HTML terutama jika sobat membuka bagian gagdet JavaScript/HTMLnya.  Simbol akan berubah jadi 2 buah persegi kue lupis berwarna hitam, jika hal tersebut terjadi hapus "2 kue lupis" tersebut dan kopikan kembali simbol baru dan save template.

Namun menggunakan simbol ini sangat ringan dan tidak terasa memberatkan loading.

www.editblogtema.net

SHARE YA:

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:
  1. Heading1 <1>: dimana Judul blog ditempatkan dan terpampang jelas diatas halaman blog
  2. Heading2 <h2>: tag ini digunakan pada judul artikel blog (jika berada pada homepage) dan akan berubah menjadi <h1> pada halaman posting.
  3.  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.
  4. <h4> : tag ini umumnya  dan bisa digunakan untuk judul artikel terkait, komentar atau bisa juga digunakan pada judul widget.
  5. <h5> : tag ini digunakan sebagai nama komentator atau nama pemberi komentar.
  6. <h6> : tag ini digunakan sebagai footer seperti "Hak Cipta" atau "Powered by Blogger" yang letaknya berada paling bawah.
Dan heading heading ini diperlukan untuk teknik optimisasi SEO.  Akan tetapi terkadang pada kasus mendesain ulang tema ada masanya kita tidak menginginkan heading1 bawaan dan menghapusnya melalui pengaturan widget/gagdet pada dasbor blog, maka kita akan kehilangan header tersebut. Namun kita dapat menggantikannya dengan cara sederhana saja.

Misalnya saya memilih salah satu menu (dengan judul 👣EDITBLOGTEMA): untuk menggantikan fungsi "header" bawaan yang telah saya hapus sebagai berikut:

<h1><a class='active' href='#'><b>👣EDITBLOGTEMA</b></a></h1>

<a href='#'>&#9092;Paradox</a>

<a href='#'>🌐English</a>

<div class='dropdown'>
<button class='dropbtn'>Download &#65286; blogging</button>
<div class='dropdown-content'>

<a href='#'>Download contempo Hybrid v3</a>

<a href='#'>Contoh tampilan (3 slide)</a>

<a href='#'>Contempo Hybrid Ultimate V3 updated</a>

<a href='#'>Petunjuk dan Penggunaan template</a>

<a href='#'>Codes with W3School</a>

Yang saya perlukan hanyalah mengurungnya dengan tag :

<h1> lalu menutupnya dengan </h1> 

Hasilnya? Lihat pengujian:
Pada hasil pengujian Menu awal pada navigasi menu dengan judul 👣EDITBLOGTEMA telah sukses menjadi atau menggantikan h1.

Mengapa hal ini penting? karena alasan berikut:
  1. Template harus dibuat aman
  2. Template harus dibuat sesuai prosedur SEO
  3. Template harus dibuat cepat
  4. Template walau dibuat cantik namun sebenarnya harus sederhana.
Semoga bermanfaat.

SHARE YA:

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.
dapat dimanipulasi melalui perintah CSS
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 bergaya infinite yang dominan warna gradasi pada headrnya akan tetapi setiap ikon dapat kita berikan warna gradasi sesuka hati dan menurut selera kita asalkan mengikuti syarat ini: Mengkombinasikan kode css dengan ikon "fa fa awsome" dan atau sejenis dengan itu.
Masuk ke pengaturan blog:
  1. Pilih tema
  2. Pilih edit HTML
  3. Pada halaman editor HTML:
Cari kode </head> lalu kopi kode dibawah ini dan pastekan diatas tag atau kode </head> tadi. (Abaikan saja kalau link "pemanggil" font awsome5 ini telah terpasang di blog sobat)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous"/>
Save terlebih dahulu template. Dan lalu untuk percobaan kembali ke pengaturan blogger - pilih add widget - pilih HTML/java script, lalu pastekan kode ikon fa fa awsome yang telah kami pilih dibawah ini kedalam kotak widget HTML/javascript tadi atau lihat gambar dibawah.

<i class="fab fa-facebook-square"></i>


Save terlebih dahulu template. Jika mau geser saja widgetnya biar berada diatas postingan, maka kode tersebut akan berbentuk ikon facebook seperti dibawah ini, masih dalam ujud ikon yang berwarna hitam putih.

Agar Widget tadi berwarna gradasi (kombinasi dua warna) kita perlu menambahkan kode dibawah ini dan meletakannya diatas kode: ]]></b:skin>, begini trik pembuatan perintah kode CSS-nya:

.gradient-icon {
background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: initial;
}


Dan langkah berikutnya adalah kembali ke kode ikon fa fa awsome yang berada didalam widget HTML/java script yakni:
 <i class="fa fa-facebook-official fa-10x" aria-hidden="true"></i>

Edit dengan menambahkan: "gradient-icon" jadi kode fa fa awsomenya akan menjadi seperti ini:
<i class="fa fa-facebook-official gradient-icon fa-10x" aria-hidden="true"></i>

Perhatikan letak posisi kode perintah pemanggil tambahan yang diberi warna merah. Sedangkan yang warna biru adalah ukuran besar ikon awsome. Maka ikon akan berganti warna dari hitam dan putih menjadi gradasi! Lihat gambar:

Cobakan kepada semua ikon fa fa awsome ada ratusan kode kode ikon sejenis yang gratis dan bebas di pergunakan di Internet.

Jika kita ingin mengganti warna gradasi atau kombinasi warna maka sobat dapat melakukannya dengan merubah kode css yang telah kita letakan di atas kode ]]></b:skin> diatas. Perhatikan kode warna HEX yang saya sorot dengan warna merah muda:

.gradient-icon {
background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: initial;
}


Ganti saja kode warna dengan kode warna css, cari daftar kode warna warni di internet, semuanya gratis.

Trik ini telah diuji dan berlaku terhadap hampir semua browser-browser besar: chrome, edge, firefox, opera mobile, safari Apple dll.

Contoh nyata bisa anda lihat pada menu navigasi blog ini yang ikonnya telah menjadi dua warna dengan gaya kombinasi "gradasi"


editblogtema.net

SHARE YA:

TEMA EMPORIO CUSTOM KEREN

6 komentar

Februari 23, 2019

Template ini adalah emporio dan hanya dirombak beberapa bagian vital agar tampilannya lebih dinamis lebih UX friendly:
Lebih dinamis, UX friendly, UI friendly dan tampil beda
Perubahan yang dibuat:
  1. Memotong background header menjadi flat
  2. Menambahkan snippet terutama untuk tampilan mobile
  3. Menambahkan menu navigasi - hanya berdasarkan laman agar mudah di edit
  4. Merobah bagian footer
  5. Menghilangkan navigasi backArrow 
  6. 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 

Untuk mencobanya silahkan DOWNLOAD

Bagaimana menurut sobat? Sobat ingin tahu rahasia membuatnya?

1. MENGHILANGKAN GAMBAR LATAR HEADER.

Masuk kepengaturan blogger, pilih tema, pilih edit HTML

cari kode dibawah ini:

<b:if cond='data:view.isSingleItem'>

<b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>

<b:include data='{ image: data:widgets.Blog.first.posts.first.featuredImage, selector: &quot;.bg-photo&quot; }' name='responsiveImageStyle'/>

<div class='bg-photo-container'>

<div class='bg-photo'/>

</div>


</b:if>

</b:if>



Pada kasus diatas sobat memiliki tiga opsi:

  1. Menghapus seluruh kode diatas sehingga header terpotong
  2. Hanya menghapus kode yang saya sorot warna kuning header juga terpotong jadi pendek
  3. Akan tetapi jika sobat bermaksud membuat menu navigasi kustom sebaiknya sobat hanya menghapus satu kode, yakni yang saya sorot warna merah: responsiveImageStyle
Tetapi saya menyarankan sobat hanya membuang kode ini: <div class='bg-photo-container'>
 <div class='bg-photo'/>
Lalu hilangkan juga </div> yang berada dibawahnya

2. MENGHILANGKAN TANDA IKON BACKARROW

Sobat Juga harus menghilangkan tanda BackArrow atau bahkan tombol hamburgernya agar tidak tampil "overrade" pada hape dan tablet.
pada halaman konten emporio
Gambar back arrow pada halaman konten sebelah atas template emporio
Membuang semua ciri ciri template default sangat membantu kita untuk membentuk sebuah template yang berpenampilan sama sekali berbeda. Caranya adalah: Masuk kepengaturan blogger, pilih tema, pilih edit HTML

cari kode dibawah ini:

<a class='return_link' expr:href='data:blog.homepageUrl'>
<b:include data='{ iconClass: &quot;touch-icon back-button rtl-reversible-icon&quot; }' name='backArrowIcon'/>
</a>


Hapus seluruh kode tersebut. Save template.


3. MENGHILANGKAN POWERED BY BLOGGER DAN MEMBUAT ATRIBUSI

  • Masuk kepengaturan blogger
  • Pilih Tema
  • Pilih "sesuaikan"
ikuti langkah langkah dengan benar
Selanjutnya kita akan dibawa ke DESAINER TEMA BLOGGER, scroll ke atas pilihan menunya, pilih "lanjutan"
Lalu akan muncul list menu scroll keatas sampai tampil "Tambahkan CSS" dan klik "Tambahkan CSS" tersebut. 
ikuti step by step atau di klik
Setelah "Tambahkan CSS" di klik akan muncul kotak halaman CSS seperti gambar dibawah ini:
isi kotak kosong dengan kode css
Nah pada kota dialog tersebut tuliskan atau kopi kode perintah dibawah ini dan pastekan:

div.blogger {
display: none;
}

Silahkan di copy saja lalu dipastekan ke dalam kotak dialog CSS seperti yang kami tunjukan pada gambar.

4. BORDER RADIUS (MEMBUAT THUMBNAIL HOMEPAGE JADI BULAT)

Sebenarnya emporio telah memberikan batas border pada CSS-nya pada opsi Desainer Tema Blogger perhatikan pada gambar dibawah ini:
hanya sampai sebatas 32 derajat
Jika melihat pada gambar tersebut maka terlihat jelas batas postingan hanya sampai sebatas 32derajat untuk merobahnya kita harus masuk kepengaturan blogger:
  1. Pilih Tema
  2. Pilih edit HTML
  3. Lalu cari kode CSS dibawah melalui ctrl+f pada keyboard laptop sobat:

<Variable name="posts.border.radius" description="Post border radius" type="length" default="0px" min="0px" max="32px"  value="32px"/>

Jadi sudut yang bisa dibulatkan hanya sebaras 32 derajat sedangkan jika sobat ingin membuat thumbnail menjadi bulat hingga 180 derajat sobat harus  merobah kedua variabel angka 32px menjadi 180PX dan Save template.

Setelah itu kembali masuk ke opsi Desainer Tema Blogger geser radius postingan sampai ke baras 180. Save template.

5. MENAMBAHKAN SNIPPET PADA TAMPILAN MOBILE.

Secara default emporio tidak menyertakan snippet pada tampilan hompagenya yang tampil hanya judul doang terasa membosankan, jadi lagi lagi sobat harus merombak sedikit kode HTML-nya, 
  1. Pilih Tema
  2. Pilih edit HTML
  3. Lalu cari kode CSS dibawah melalui ctrl+f pada keyboard laptop sobat:
<div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.title /> 
 </div> 
 <b:if cond='data:post.title != ""'> <div class='snippet-fade r-snippet-fade hidden'></div> </b:if> </div>

Jadi sobat harus menambahkan perintah yang saya merahkan kedalam rangkaian kode diatas menjadi seperti berikut:

<div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.title /> 
  <div class='snippet-body'> <b:eval expr='snippet(data:post.body, { length: 100 })' /> </div> 
 </div> 
<b:if cond='data:post.title != ""'> <div class='snippet-fade r-snippet-fade hidden'></div> </b:if> </div>

Save template.
Sekarang template emporio sobat sudah memiliki snippet pada tampilan hape (mobile)




www.editblogtema.net

SHARE YA: