Preferensi: HTML

Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Cara Mudah Ganti Teks Yang Sama Sekaligus Dengan Cepat Ketika Edit Template

Untuk yang baru mengenal blogger mungkin Edit HTML template merupakan bagian yang sangat merepotkan. Apalagi kalau template yang diedit tidak mendukung "Desainer Template" atau sering disebut Pure Edit HTML. Jadi untuk sekedar mengganti warna atau link harus menggantinya satu-satu. Tapi semua itu bisa dilakukan sekaligus dengan cepat dan mudah, tidak perlu lagi menggantinya satu-satu. Lebih jelasnya langsung saja buka dasbor blogger > pilih Tema > pilih Edit HTML > letakkan kursor pada html editor. Bahasa sederhananya klik bebas di dalam editor html agar memudahkan dalam pencarian teks atau kode tertentu di dalam template menggunakan Ctrl+F.

Setelah meletakkan kursor selanjutnya tekan tombol Shift+Ctrl+F pada keyboard, kemudian paste teks atau kode yang ingin diganti dan tekan Enter. Setelah itu paste teks atau kode yang diinginkan untuk menggantinya dan tekan Enter.

Sebagai contoh bisa memperhatikan gambar di bawah ini yang menampilkan penggantian link preferensi.net menjadi preferensi.info semuanya sekaligus dengan cepat dan mudah, tanpa perlu menggantinya satu-satu.


Demikian tips cara mudah mengganti kode skrip yang sama sekaligus dengan cepat tanpa harus ganti satu-satu pada saat mengedit template blogger.

Cara Munculkan Tombol Menu Sidebar Di Template Kompi Ajaib AMP Premium Jika Diakses Selain Browser Chrome



Template Kompi Ajaib AMP Premium yang dibuat oleh Adhy Suryadi ini sangat menarik untuk blogger yang ingin memiliki tampilan grid versi AMP dengan loading yang baik. Pada kesempatan ini penulis ingin berbagi sedikit pengalaman dari beberapa bulan lalu menggunakan Template Kompi Ajaib AMP Premium. Sedikit cerita ketika sedang menyesuaikan tampilan dengan melakukan akses blog dari aplikasi browser android selain Chrome. Ketika mencoba akses blog dari aplikasi browser Firefox terlihat tombol menu siderbar tidak muncul, padahal jika diakses menggunakan aplikasi browser Chrome tombol tersebut muncul. Selain itu juga mencoba akses tampilan seluler blog pada komputer dengan menambahkan /?m=1 dan ternyata juga tidak muncul.

Setelah beberapa lama mencari, akhirnya menemukan solusi untuk mengatasi tombol yang tidak muncul tersebut. Langkah pertama buka Edit HTML kemudian cari .btn-sidebaramp{display:inline-block;background-image:url ada tiga, selanjutnya pada style='fill:#333' ada dua dan satu lagi style='fill:%23333' ubah kode warna hex-nya menjadi kode warna misalnya black, teal, green, darkblue, dsb. Contoh hasilnya seperti ini style='fill:steelblue'

Cara Mudah Menampilkan Icon/Logo Blogspot Pada Browser Pengunjung


Seperti halnya situs-situs besar, membangun brand atau logo blogspot juga sangat penting agar blog yang dikelola lebih identik diingat oleh pengunjung baik itu dari perangkat desktop. Langsung saja pada langkah pertama yang perlu disiapkan yaitu sebuah file gambar berukuran bebas yang penting persegi empat pixelnya, misal 200x200. Selanjutnya unggah di Halaman mandiri/page About atau bisa juga Asset blog. Jika bingung bisa buat postingan baru dan unggah gambarnya, kemudian salin alamat gambar tersebut (postingan langsung dihapus juga tidak masalah, karena yang dibutuhkan hanya salinan alamat gambar yang sudah di unggah saja).

Selanjutnya buka Dasbor blogger > Tema > Edit HTML, cari kode </head> kemudian salin dan tempelkan kode di bawah ini tepat sebelum/di atas kode penutup </head> ganti # dengan alamat gambar yang sudah di salin tadi, jangan lupa klik "Simpan tema".

<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link href='#' rel='icon' sizes='32x32'/>
<link href='#' rel='icon' sizes='192x192'/>
<link href='#' rel='apple-touch-icon-precomposed'/>
<meta content='#' name='msapplication-TileImage'/>


Untuk melihat hasilnya bisa coba hapus riwayat pada browser yang digunakan, selanjutnya buka blog yang sudah dipasang kode tersebut. Tunggu beberapa saat, biasanya akan langsung muncul.

Cara Mudah Pasang Read More Otomatis di Template Bawaan Dengan Ponsel

Berikut ini adalah cara pemasangan skrip Read more otomatis di template bawaan blog dengan ponsel android, sehingga ketika menulis artikel dengan aplikasi Blogger tidak perlu harus kerja dua kali hanya untuk memasang Read more, atau dalam blog bahasa indonesia sering menjumpai artikel terpotong dan di bawahnya ada link Baca selengkapnya untuk membaca artikel secara keseluruhan.
 








Kelebihan dan kekurangan memasang skrip Read more otomatis

Skrip Terjemahan Blog ke Bahasa Lain

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Skripnya:
<style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style> <div> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_LE-LDGQWv-5dQPbx_tbreh6Weu424EDXsHpYVDl3J4fbFKKSF9fTj6yFi3Al_2SpvYR7Uvkk8x1fxPaxAwrA5Q22e1lXsI4E8FI8dMhSPowegfga4QpOvDUUOM0Obsm03EHTXZ6YkE/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtA3wyNuDS7yR_Y8gWFkVEtnJEZmqDXkiAdmdGm2UIguzk3AyfLGgAzsi_5CCFhzP5qHzwXEfo2j-l3EtbBEHGrCktSQoO-UVdhhdJcYxP4e2n7CLsIAwoFsN5FiiPS1WQpYMlyvwaOX0/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR2JwJLEDdPDZqo9qvFbK6qrohCUDXvfkK2T61cd0UMkvBTwQrxi66cfNlaXOSIrWD4vzn730FbQhTvuJjMygYpamQJapDfL9Oxyy_LH4-X1mjQEc9x2V8pk6jS7pstjk1mLYqp5e2UmUj/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRcJEeeDqGk4_sZMcOmTCPyUbUJgmrXg3joMowC4E2en2xtmN2FrevniXwL2-z5C7cIsiBs-ESmqTIfCHRbKvWQqzBH2DWSRDeC4_XVGCTWj9NFGAmLwiWFbDSIhHeGvDKChxEYU4VNX8B/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg3ISD1QicGExp3jjq1M_HaJfltbCbAkmhH8I48xt192cWReoX2ZZKvSzh6YYpA3yO4QlEG858LSAsoLgStjPSpa1loWU5dMHu35C4yBcmvG6BBc2KTGffLcW6JW8SrDySxj7aicCWjXI/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbK4jlWjyoEUI28fdciPX-QsCZPIc_wYY3H4V-1o3NwhR7JdiGRjEGmF5qSxZ1GZ8s-BILJpXLMCmXEx1VSxTSIcBVmcEhWcLzSL5zJmy7yN1nQfG7TrHnDtbLTnj4aLvO-qOQ-ODcVe0/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimHivdhkjFjhVxZ-OcpE4ON56qbBdpgkAipDD5ucv2_pZWuF5i6S6_1lQQFIkSWWp8AZToRjPAb1exGiHOEO2SMSkpRf3VCxqtKDzArPI7RPPIfj3rtOv072ALkiwLjg-s_5ry4o3SP7s/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZBlg8csMvUXga98TUbzLA22bPBE_VWNcLoWGRhJmMJiOjtqYt9ZBLxpxQfm8ZZL2F24FyVbV3spsHkYljr8tBRI5DI7lWwjH_Iw0D3yjQGb3w0I7sRGX11vzQDbo71YEySBkAApWVDB0/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv4GYCIKzDIGjGPrjmlWS2wOAQK4Y6yKy9pAp_3U9mrctZyD6s9Uz8qPOFRybMzU2QSSUgi8EggtieHptJqTmKa9sAml-v492T3FeTj24ZQ3pzTZdR0R3EbT3Yg6NGwELdgw3uEy0P-fZ2/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixrwbEgphhXCuoo5TiQHKxfMJ-DzIRK7LNbj_dS78wdyjporaEJ-yeZ7GzFsDfbsGJ38amFp4UEoCRjF09DLasVtLX7r9Sm-52u0fL1ql0J1YVLjZATuBftwvC-KluWRdi94z6vzTkijc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZeSdcZf54G6oOKFH7XhTlvSvQXlB7E8bx4gbcxMYtt_hOUJKl3ooRmsmcfD_bA9-KAxwkDnIX_xOqHDHOvdB3FX3sts7rbhyphenhyphenkYUiapDq7QVCqv1O4AmISBePSX8Eiei7GJoISvZmQlsM/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGGO4tAewo69j1iiCkCmZXY15yROBITdtPHSH7zVnRt9vK1PxkBTLNGeQx175LU-FTmtAtfQqZ9HASp2VrAMvHKj-c0XaRUt3KmpTGmXi3dOjzohQR9RsJ2hPr-Ej_Xt1tTk97iDSYsxI/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> </div> <div style=âfont-size:10px;margin:8px 0px 3px 0pxâ></div>

Skrip Manual Pasang Gambar Postingan Blogspot


<img src="Alamat Gambar" alt="Nama Gambar" class="" style=''float: left'' width="320" height="240" />
Catatan: Tulisan warna biru ganti dengan alamat Link/URL gambar yang ingin akan di tampilkan, warna orange ganti/sesuaikan nama gambar, dan warna merah ganti ukuran pixel gambar sesuai keinginan.

Cara Pasang atau Parse HTML Menjadi Java Script Untuk Menampilkan di Postingan

Silahkan klik/kunjungi blog ParseHTML.blogspot.com setelah itu masukan teks/skrip yang di inginkan dengan cara mengetik atau paste dari copy teks/skrip kamu. Kemudian klik/tekan tombol parse, dan hasilnya akan ada langsung otomatis di situs silahkan salin/copy skrip yang ada di dalam kotak dengan fasilitas perangkat kamu.

HTML/Java Script Search Box, Kotak Penelusuran/Pencarian

<form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="auto" type="text"/> <input id="search-btn"value="Telusuri"type="submit"/> </form>
Hasilnya akan terlihat seperti ini:
Catatan: Untuk ukuran saya menggunakan ''auto'' supaya otomatis menyesuaikan sesuai lebar kanan-kiri layar perangkat. Jika ingin mengubah ukuran silahkan diganti, contohnya ''25'' atau berapa sesuai selera.

HTML/Java Script Form Text Area Untuk Memasang Teks Di Dalam Kotak Tersendiri

<div align="left"> <textarea name="code" rows="3" cols=35">Teks Di Sini!</textarea></div>
Hasilnya akan terlihat seperti ini:

HTML/Java Script Button Link Download atau Link Peralihan Halaman Dengan Tombol

<form> <input type=button value="Nama Tombol" onClick="self.location=''Link/URL Tujuan"> </form>
Hasilnya akan terlihat seperti ini:
Biasanya sering digunakan untuk tombol/button
atau
dengan tampilan yang sederhana dan simpel. Atau hanya sekedar tombol
untuk link peralihan halaman dan periklanan.