Bung Benk

Tutorial Blogger

Tech News

Video

24/04/19

Cara Membuat Tampilan Blog Tidak Dapat Diperbesar

Apakah Kamu ingin mengatur tampilan blog Anda agar tidak dapat diperbesar? Jika iya, artikel ini akan memberikan panduan tentang cara melakukan hal tersebut. Dalam artikel ini, kita akan membahas potongan kode yang dapat Kamu tambahkan atau ganti di template blog Kamu untuk bisa menerapkan efek ini.

Pertama-tama, pastikan Kamu membuka editor HTML blog Kamu dan mencadangkan template sebelum melakukan perubahan apa pun. Setelah itu, temukan bagian <head> di kode HTML blog Kamu dan letakkan kode berikut dibawahnya :

<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Setelah Kamu menambahkan atau mengganti potongan kode tersebut, simpan perubahan pada template blog Kamu. Selanjutnya, buka blog Anda dan coba untuk melakukan zoom in atau zoom out pada tampilannya. Kamu akan melihat bahwa tampilan blog Kamu tidak dapat diperbesar.

Pastikan untuk menguji tampilan blog Kamu di berbagai perangkat dan browser untuk memastikan bahwa efek ini berfungsi dengan baik. Jika Anda ingin mengembalikan fungsi zoom pada tampilan blog Anda, cukup hapus atau komentar potongan kode yang telah Anda tambahkan sebelumnya.

Sekarang kamu telah mengetahui cara membuat tampilan blog tidak dapat diperbesar. Kamu dapat mengimplementasikan ini untuk memberikan pengalaman pengguna yang lebih terkontrol dan konsisten pada blog Anda.

Semoga artikel ini bermanfaat buat kamu dalam mengatur tampilan blog Anda! Jika Anda memiliki pertanyaan lain, jangan ragu untuk mengajukan.

Apakah blog kamu masih bisa dizoom?
Sisipkan jawabanmu di bawah ya..

10/04/19

Membuat Halaman Under Maintenance Di Blogspot (CSS)


Terkadang pasti ada saja masalah perbaikan yang serin dialami oleh para blogger, termasuk salah satunya memperbaharui design template pada blog, Dalam masa perbaikan tersebut tentu kita tak ingin agar pengunjung datang dan akhirnya membuat pengunjung pergi karena tampilan blog yang berantakan.

Nah untuk mencegah hal tersebut kita perlu membuat halaman khusus yang nantinya pengunjung akaan di arahkan ke halaman khusus ini, halaman ini berisi keterangan bahwa blog sedang di perbaiki/maintenance. Keterangan tersebut umumnya dibuat menuju link gambar tertentu, contohnya seperti ini.

Membuat Halaman Under Maintenance Khusus Dengan CSS


Jika blog kamu sedang ada perbaikan, entah perbaikan template atau apapun itu, ada baiknya membuat Halaman Under Maintenance ini agar nantinya pengunjung bisa kembali lagi dilain waktu setelah blog kita selesai di perbaiki, untuk membuatnya mudah kok, kamu hanya cukup meletakkan kode dibawah ini di atas syle yang pertama atau di atas </head>
<style type='text/css'>
/*<![CDATA[*/
html:after {
  content: "";
  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXOXT5jq1DnnZvotJ62__NqUNxNYjtyyTSy__d8kYf_1zt1chKRSkiowA5T8paoSpYcuQH2X1i1C4mZSJK5Xt11uju9rGYHxvSeQU0qILSYRDIxJOG_z_pALWGsPbwTEKKEsqvGWc7f2eh/s1600/maintainance.jpg) no-repeat;
  background-size: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background-position: center;
}
body {
  display:none;
}
@media screen and (max-width:800px) {
  html:after {
    background-size: contain;
  }
}
/*]]>*/
</style>

Kamu juga bisa mengganti link gambar sesuai keinginanmu sendiri dengan mengganti kode yang di tandai merah

Nah jika sudah selesai simpan template dan lihat hasilnya dengan mengklik link blog kalian yang sudah terpasang Halaman Under Maintenance tersebut.

Demikian.. Happy Blogging gaaaesss..!!!

24/03/19

Solusi SVG Icon Tidak Tampil Di Browser Chrome Versi Mobile

Browser Chrome Mobile Versi Terbaru

Sejak update aplikasi Browser Chrome di ponsel Xiaomi A1 saya, ternyata saya baru menyadari ternyata SVG icon pada Navigasi menu di blog saya tidak muncul. Anehnya SVG icon ini tidak muncul hanya pada browser chrome versi mobile yang saya update sekitar 1 bulan yang lalu hingga akhirnya saya memposting artikel ini.

Saya sudah coba bermacam-macam aplikasi browser bawaan Hp seperti Samsung, Xiaomi, Iphone, Modzilla Firefox, dll namun hanya pada browser chrome versi terbaru saat ini, SVG icon yang ada pada Slide menu tersebut tidak muncul sama sekali, namun ketika diklik Sidebar menu tetap muncul dan berjalan normal.

Entahlah dimana letak kesalahannya, saya sendiri bingung dan pernah suatu hari menanyakan hal ini kepada mas adhy suryadi (kompi ajaib) yang telah Membuat Slide Menu ala AMP Sidebar Untuk Blog Non AMP seperti yang saya gunakan di Blog saya ini. Saya sempat memohon mas adhy untuk mengupdate script maupun htmlnya namun mas adhy menjawab seperti screenshoot berikut.

SVG Icon Eror Pada Template Saya

Dari jawaban mas Adhy diatas akhirnya saya pun coba mengecek nya demo link Slide menu tersebut di link ini, dan ternyata pada demo tersebut SVG iconnya masih normal dan tampil di browser chrome pada ponsel saya. Hmmm.. dimana ya letak kesalahannya? Padahal udah saya cek dengan teliti isi dari pada template yang saya gunakan saat ini, dan sampai saat ini pun blm ketemu.

Barangkali ada teman-teman yang bisa membantu atau pernah mengalami masalah diatas saat menggunakan Slide Menu Ala Kompi ajaib ini, mungkin bisa share pada kolom komentar di bawah ini untuk bisa sama-sama memecahkan masalah tersebut bersama-sama.

Demikian semoga dengan adanya artikel ini, teman-teman bisa memberikan solusi atas permasalahan yang sedang saya alami diatas yaitu mengenai Masalah SVG Icon pada Slide Menu Ala Kompi Ajaib Tidak Muncul Pada Browser Chrome Versi Mobile.

Update Perbaikan:

SVG icon tidak tampil pada browser Chrome terbaru

Ternyata kesalahan ada pada saat saya mengganti kode warna, hal ini seperti apa yang disampaikan kang Adhy Suryadi mengenai pertanyaan saya kepada beliau minggu lalu.

30/01/19

Tentang Artikel Terkait Tidak Muncul Pada Halaman Mobile

Kode Penyebab artikel terkait tidak muncul

Artikel terkait merupakan sebuah link yang umumnya di sertai gambar yang saling berhubungan dengan artikel yang menjadi topik utama di halaman web atau blog. Artikel terkait ini juga berfungsi untuk mengarahkan pengunjung lebih mudah menjangkau topik terkait lainnya agar traffic blog menjadi meningkat.

Nah buat kamu yang masih pake template gratisan yang sudah banyak di bagikan di google mungkin pernah mengalami masalah pada artiket terkait yang tidak muncul sama sekali saat blog dibuka melalui mobile/gadget. Contohnya saja template Viomagz yang banyak di share di internet.

Mengatasi Artikel Terkait Tidak Muncul


Kenapa harus Viomagz? ini semua karena saya sendiri saat ini menggunakan template tersebut di salah satu blog saya dan masalah artikel terkait yang tidak muncul di halaman mobile tersebut saat ini sudah teratasi. Ternyata masalah tersebut ada pada sebuah script yang memang sengaja dibuat agar artikel terkait tidak muncul di halaman mobile.

Nah buat kamu pengguna template yang saya sebutkan diatas (Viomagz) dan ingin Artikel terkaitnya muncul juga di halaman mobile, silakan cari kode script dibawah ini, kode ini biasanya di letakan di bagian atas </body>

<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:125,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span class="bg_overlay"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:///g , "//").replace(//s[0-9]+(-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><div class="related-post-item-text"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span></div>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title-thumb" href="'+v+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a></div><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a><span>"+u+"</span></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>

Kemudian cari kode dibawah ini didalam kode script tersebut.

j(d.homePage.replace(/\/$/,"")

Selanjutnya ganti kode yang ada didalam tanda kurung dengan kode dibawah ini

(\&|$)|\/+$/, "")

Simpan template dan lihat reviewnya,

Nah cara diatas bisa kamu terapkan pada template Viomagz atau template lain yang memiliki kode yang mirip dengan kode script tersebut. Namun jika kode script diatas tidak ada mungkin Widget tersebut hanya disembunyikan oleh tag kondisional yang biasanya seperti dibawah ini.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><div id='related-wrapper'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;&lt;h4&gt;Artikel Terkait&lt;/h4&gt;&quot;,numPosts:6,summaryLength:0,titleLength:&quot;auto&quot;,thumbnailSize:320,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,widgetStyle:3,callBack:function(){}}
  </script></div>
</b:if>

Hapus kode tag kondisional diatas atau ganti "false" jadi "true"

Demikian semoga Cara Mengatasi Artikel Terkait Tidak Muncul Pada Halaman Mobile Kali ini Bermanfaat, Happy Blogging.

03/01/19

Rekomendasi Tools Screenshoot Halaman Web Full Page


Artikel ini membahas tentang alat yang dapat digunakan untuk mengambil screenshot dari seluruh halaman web. Alat ini sangat berguna bagi mereka yang perlu mengambil screenshot dari halaman web secara lengkap, bukan hanya bagian yang terlihat di layar.

Alat ini bernama "Nimbus Screenshot" dan tersedia sebagai ekstensi untuk browser Google Chrome dan Mozilla Firefox. Setelah menginstal ekstensi ini, kamu dapat dengan mudah mengambil screenshot dari seluruh halaman web hanya dengan satu klik.

Berikut adalah langkah-langkah untuk menggunakan Nimbus Screenshot:

Bagi sebagian orang mungkin screenshoot  ini bukanlah hal penting, namun tidak untuk para design web atau para pembuat website. Mendapatkan screenshot dari website hasil karyanya secara keseluruhan adalah hal yang penting, mengingat sebuah halaman website yang di screenshoot tersebut nantinya akan digunakan sebagai demo atau review ketika hendak di promosikan untuk dijual dalam sebuah artikel.

Untuk kamu yang sedang mencari-cari cara Screenshot Halaman web full page diandroid tentu kamu tidak salah lagi jika masuk ke artikel kali ini, karena disini saya akan membagikan tutorialnya secara cuma-cuma. Nah gimana sih caranya, yuk simak tutorial nya berikut ini.

Cara Screenshoot Halaman Website Full Page


Sebelum saya menjelaskan gimana cara Screenshoot Halaman web full page tanpa terpotong di android, kamu bisa lihat dulu contoh screenshoot yang baru saja saya ambil pada salah satu blog saya yaitu lovelybekasi.web.id di bawah ini.

Ini tampilan Dekstop:


Dan ini tampilan mobile:


Mohon maaf jika gambar agak buram di karenakan gambar saya perkecil ukurannya agar tidak memberatkan loading blog, gambar asli hasil screenshoot diatas lebih jelas dan lebih tinggi resolusinya.

Nah jika kamu sudah melihat hasil yang saya lampirkan diatas sekarang mari kita coba Screenshoot Halaman Web kalian dengan cara sebagai berikut:

  • Buka browser kamu, bebas, boleh Chrome, modzila atau browser bawaan hp kamu.
  • Tap dan copy paste link https://web-capture.net ke kolom pencarian browser.
  • Masukan link website/blog km dikolom yang tersedia.
  • Pilih format gambar yang ingin dihasilkan screenshoot, ada 7 Pilihan format gambar yang tersedia yaitu adalah JPEG, PNG, SVG, File PDF, TIFF, BMP dan File Postscript (PS)
  • Setelah pilih format gambar, tap tombol Tangkap Halaman Web di bagian bawah kolom tempat kamu memasukan link web yang ingin kamu ambil gambarnya.
  • Tunggu hingga proses screenshoot selesai.
  • Unduh file hasil proses screenshoot tadi ke hp/PC kamu.
  • Selesai.


Nah coba lihat hasil download Screenshoot yang dihasilkan tadi. Gimana mudah bukan???

Dengan ini artinya kamu sudah berhasil membuat screenshot halaman website full satu halaman penuh, yuk share artikel ini agar teman-teman kamu tau Cara Paling mudah Screenshoot Web Full Page tanpa aplikasi yang telah saya bagikan kali ini.