Contoh Blog

Cara Mengatasi Google Chrome Error 'Aw Snap' Tak Bisa Buka Halaman Web

Hari ini browser internet yang bisa digunakan CB, Google Chrome, error.

Pesan Error 'Aw Snap' muncul di semua halaman web. Situs tak bisa dibuka. Bikin panik aja...!

Ok, ada extention yang crash. Namun, buka halaman setting Chrome-nya juga gak bisa. Intinya, sama sekali tidak bisa membuka Gmail, Blogger, Yahoo, Facebook, dan halaman web apa pun.

Bahkan halaman bantuan masalah Chrome pun tak bisa dibuka. Bingung 'kan? Jalankan aplikasi CCleaner untuk menghapus junk files sudah dilakukan juga. Tapi tetep Chrome gak berfungsi.

CB coba buka Mozilla Firefox, lancar jaya. CB coba buka Opera, juga gak ada masalah.

Banyak tips mengatasi error Aw Snap, antara lain:

1. Tutup browser Chrome.
2. Klik 2x pada aplikasi Google Chrome yang berada di Desktop.
3. Klik kanan dan pilih Properties.
4. Pada pilihan Shortcut, terdapat kolom target yang berisikan tulisan alamat browser yaitu: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe".
5. Setelah tulisan chrome.exe, tekan spasi 1x lalu tulis -no-sandbox.

Ah, ribet! Masalahnya, Chrome di komputer CB ini benar-benar tidak bisa membuka halaman apa pun!

Cara lain pun sudah dilakukan: Reload, Close Tab, Restrat, bahkan Clear Browsing data pun sudah dilakukan. Gak ngaruh.

Cara terampuh Mengatasi Google Chrome Error 'Aw Snap' Tak Bisa Buka Halaman Web adalah UNINSTALL Chrome dan install ulang.

CB coba saja buka Opera, lalu Donwload dan Install Chrome, tanpa unistall lebih dulu. Eh... bisa! Usai install ulang, Chrome otomatis terbuka, dan masalah teratasi. Aktivitas browsing, surfing, Googling, dan blogging pun kembali normal. Alhamdulillah.

Itu dia, sekadar berbagi pengalaman Mengatasi Google Chrome Error 'Aw Snap' Tak Bisa Buka Halaman Web, yaitu jalan pintas dan jalur cepat:

Buka bowser lain, misalnya Opera atau IE.
Downlod & insall Chrome (tanpa harus uninstall dulu).

Happy Blogging! (www.contohblog.com).*

Template Blog

Simple Pisan - Template Blog SEO Friendly Terbaru Super Sederhana Tanpa Thumbnail

Simple Pisan - Template Blog SEO Friendly Terbaru Super Sederhana Tanpa Thumbnail Gratis.

Setelah merilis tiga template terbaru --CNN Style, Green Magz, CB Renovate, dan CB Simple Grid (Cek di Galeri Template) -- kini CB berbagi template SEO Friendly GRATIS, free download!

Namanya Simple Pisan. Dinamai Simple Pisan alias Sederhana Sekali, karena memang desainnya sangat minimalis, tanpa gambar thumbnail di halaman depan alias judul doang, sehingga sangat ringan dan mobile-first oriented.

Header & menunya juga sesuai dengan tren desain blog modern atau kekinian. Ini dia data-data dan link demo serta downloadnya.

DEMO | DOWNLOAD

Data-data di atas menunjukkan template gatis rasa premium super minimalis ini sudah memenuhi standar SEO Google dengan kecepatan fantastis 100% di Googe Speed dan 98% di tes GT Metrix.

Itu dia Simple Pisan - Template Blog SEO Friendly Terbaru. Monggo....! Good Luck & Happy Blogging! (www.contohblog.com).*

Website

Tren Desain Blog Kekinian - Header All in One plus Menu & Kotak Pencarian

Tren Desain Website atau Blog Kekinian salah satunya menggunakan Header All in One, yaitu logo header plus navigasi menu dan kotak pencarian (Sticky Headers and Navigation Menus) seperti gambar di bawah ini.

Sumber | Demo

Sekadar contoh, perhatian header website resmi Manchester United, Persib Bandung, atau Website Resmi Liga Indonesia. (Lihat juga: Header Blog Responsive plus Navigasi Menu).

Perhatikan juga ulasan web design trend 99designs dan webflow. Semua contoh website di sana menggunakan sticky header all in one, terdiri dari logo atau nama web, menu, dan kotak pencarian (search box).

CB juga sudah sediakan template blog terbaru dengan header plus menu dan kotak pencarian di Galeri Template.

Mengapa demikian?

Kayaknya itu dampak dari tren pengguna yang mayoritas mengakses internet via handphone (mobile devices) sehingga desain header website/blog pun fokus ke "mobile-first".

Kita bisa menemukan koleksi desain header plus menu navigasi yang menjadi trend web/blog kekinian ini, misalnya di codepen. Anda bisa menerapkannya di blog dengan sedikit pengetahuan dasar CSS, HTML, dan JavaScript dalam menerapkannya.

Meski demikian, masih banyak juga blogger yang lebih suka tampilan konvesional berupa header saja yang terpisah dengan navigasi menu.

See the Pen Sticky Header with Menu by CB Blogger (@cbblogger) on CodePen.

Good Luck & Happy Bloggin! (www.contohblog.com).*

Tips SEO

Tidak Perlu Daftarkan Blog ke Google untuk Diindeks Lebih Cepat (Tips SEO)

Tidak Perlu Daftarkan Blog ke Google untuk Diindeks Lebih Cepat. Banyak tips SEO blog, termasuk tips SEO lama dari CB, yang menyebutkan kita harus Submit Blog ke Google agar bisa diindeks lebih cepat dan tampil di halaman hasil pencarian.

Rupanya, itu cara lama. Seiring perubahan laman Submit Url Google menjadi submit a sitemap dan Fetch as Google tool, tidak lagi diperlukan Submit blog itu.

Lagi pula, kata Sneeit, memang tidak ada bukti bahwa mendaftarkan blog atau situs web ke Google akan membantu diindeks lebih cepat.

Mesin pencari Google tidak akan duduk dan menunggu kiriman Anda untuk mulai mengindeks situs Anda, kemudian muncul di hasil pencarian mereka (SERP). Tidak, tidak pernah.

Laba-laba (Anda dapat memanggil mereka "bot" atau "perayap") dari Google akan mengikuti tautan dari situs web yang ada untuk merayapi semua web dan laman terkait dan membuat basis data yang sangat besar tentang situs di internet secara otomatis dan aktif.

Jika situs atau blog Anda baru dibuat, Anda mungkin mendengar bahwa Anda harus mengirimkannya atau submit ke Google Search Console untuk diindeks lebih cepat, tetapi langkah itu tidak menjamin apa pun.

Laba-laba atau perambah Google akan menemukan situs Anda dan mengindeksnya pada waktunya. Jadi, abaikan tips SEO atau gagasan perlunya "memberi tahu" Google tentang situs Anda.

Hasil pencarian Google sebenarnya di-cache dan itu akan memakan waktu sebelum algoritma Google menyegarkan cache dan memulai indeks baru.

Daripada mencoba memasukkan situs baru Anda ke dalam basis data Google, Anda sebaiknya lebih fokus pada konten awal dan mengirimkannya ke jejaring sosial (share di akun medsos Anda).

Fokus ke konten berkualitas plus share ke media sosial akan menjadi langkah awal yang baik untuk situs web atau blog baru.

Jika Anda masih ragu tentang ulasan di atas, Anda dapat membaca pesan dari Matt Cutts (mantan kepala tim spam web di Google) untuk memahami cara kerja mesin telusur Google:

"Ketika Anda melakukan pencarian Google, Anda sebenarnya tidak mencari web. Anda menelusuri indeks web Google, atau setidaknya seperti yang dapat kami temukan. Kami melakukan ini dengan perangkat lunak yang disebut laba-laba. Laba-laba dimulai dengan mengambil beberapa halaman web, kemudian mereka mengikuti tautan di halaman tersebut dan mengambil halaman yang mereka tunjuk; dan ikuti semua tautan di halaman itu, dan ambil halaman yang mereka tautkan, dan seterusnya, sampai kami mengindeks bagian web yang cukup besar; banyak miliaran halaman yang disimpan di ribuan mesin" (Matt Cutts).

Berikut adalah video yang menjelaskan semuanya secara detail:

Demikian tips SEO blog terbaru agar blog diindeks lebih cepat oleh Google dan mendatangkan jumlah pengunjung yang banyak.

Good Luck & Happy Blogging! (www.contohblog.com).*

Desain Blog

Menu Responsive plus Kotak Pencarian Auto Show-Hide Toggle Terbaik

Menu Responsive plus Kotak Pencarian Auto Show-Hide Toggle Terbaik. Penampakannya seperti gambar di bawah ini. Form search-nya sudah diperbaiki sehingga berfungsi dengan baik menampilkan hasil pencarian.

DEMO

Untuk memasangnya, Anda harus menghapus dulu kode-kode menu yang sudah terpasang di template blog, lalu digantikan dengan kode Menu Responsive plus Kotak Pencarian Auto Show-Hide Toggle Terbaik di bawah ini.

Kode CSS:
Disimpan di atas kode ]]></b:skin>

nav{width:100%}
.nav_wrapper{position:fixed;left:0;top:0;width:100%;transition:top .5s ease-out;background:#2f3b3f}
.scroll{top:-90px}
.no-scroll{top:0;z-index:9999}
.btn{padding:10px 1%;margin:5px;color:#fff;text-decoration:none;font-family:sans-serif;transition:all .1s ease}
.btn:hover{transition:all .1s ease}
#search{float:right;font-size:30px;padding:2px 15px;line-height:40px;color:#fff;margin:0;font-weight:700;-webkit-transform:rotate(181deg);-moz-transform:rotate(181deg);-ms-transform:rotate(181deg);-o-transform:rotate(181deg);transform:rotate(181deg)}
#search:hover{color:#efa666}
.search_box{clear:both;width:100%;background:#e8ebf0;padding:0;margin:0;height:0;overflow:hidden;transition:all .1s ease-in-out}
.search_box.active{height:auto;padding:15px 0}
.search_box input{width:80%;font-size:13px;margin:0 0 0 15px;padding:10px;border:none;background:#fff}
.search_box input:focus{outline:none}
.search_box input.search_icon{clear:both;width:10%;height:auto;padding:10px;margin:0;margin-left:-5px;border:none;color:#fff;cursor:pointer;background:#8c949d;opacity:1;transition:all .1s ease}
.search_box input.search_icon:hover{background:#efa666}
.menu-link{display:none}
.spinner-master input[type=checkbox]{display:none}
.menu{width:100%;height:auto;background:#2f3b3f;transition:all .3s ease}
.menu ul{padding:0;margin:0;list-style:none;position:relative;display:inline-block}
.menu > li > ul.sub_menu{min-width:10em;padding:4px 0;background-color:#f4f4f4;border:1px solid #fff}
.menu ul li{padding:0}
.menu > ul > li{display:inline-block}
.menu ul li a{display:block;text-decoration:none;color:#fff;font-size:14px}
.menu ul li a:hover{background:#efa666;color:#fff}
.menu ul li.hover > a{background:#efa666;color:#fff}
.menu ul li > a{padding:15px}
.menu ul ul{display:none;position:absolute;top:100%;min-width:160px;background:#39484d}
.menu ul li:hover > ul{display:block}
.menu ul ul > li{position:relative}
.menu ul ul > li a{padding:10px 15px;height:auto;background:#39484d}
.menu ul ul > li a:hover{background:#efa666;color:#fff}
.menu ul ul ul{position:absolute;left:100%;top:0}
@media all and (max-width: 768px) {
.example-header .container{width:100%}
#search{padding:10px}
.spinner-master *{transition:all .3s;box-sizing:border-box}
.spinner-master{position:relative;margin:15px;height:30px;width:30px;float:left}
.spinner-master label{cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;top:5px;left:0}
.spinner-master .spinner{position:absolute;height:4px;width:100%;padding:0;background-color:#fff}
.spinner-master .diagonal.part-1{position:relative;float:left}
.spinner-master .horizontal{position:relative;float:left;margin-top:4px}
.spinner-master .diagonal.part-2{position:relative;float:left;margin-top:4px}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal{opacity:0}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1{transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:10px}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:-12px}
a.menu-link{display:block;color:#fff;float:left;text-decoration:none;padding:10px 16px;font-size:1.5em}
a.menu-link:hover{color:#efa666}
a.menu-link:after{content:"\2630";font-weight:400}
a.menu-link.active:after{content:"\2715"}
.menu{clear:both;min-width:inherit;float:none}
.menu,.menu > ul ul{overflow:hidden;max-height:0;background-color:#39484d}
.menu > li > ul.sub-menu{padding:0;border:none}
.menu.active,.menu > ul ul.active{max-height:55em}
.menu ul{display:inline}
.menu li,.menu > ul > li{display:block}
.menu > ul > li:last-of-type a{border:none}
.menu li a{color:#fff;display:block;padding:.8em;position:relative}
.menu li.has-submenu > a:after{content:'+';position:absolute;top:0;right:0;display:block;font-size:1.5em;padding:.55em .5em}
.menu li.has-submenu > a.active:after{content:"-"}
.menu ul ul > li a{background-color:#39484d;padding:10px 18px 10px 30px}
.menu ul li a:hover{background:#4b5f65;color:#fff}
.menu ul li.hover > a{background:#4b5f65;color:#fff}
.menu ul ul,.menu ul ul ul{display:inherit;position:relative;left:auto;top:auto;border:none}
.search_box{position:absolute;top:60px;left:0;z-index:10}
.search_box input{width:70%}
.search_box input.search_icon{width:17%}
}

Kode HTML:
Disimpan di bawah kode penutup header, seperti </header>

<div class="nav_wrapper">


<div class="spinner-master">
<input type="checkbox" id="spinner-form" />
<label for="spinner-form" class="spinner-spin">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
</div>

<a href="#search_box" class="btn" id="search">☌</a>
<nav id="menu" class="menu">
<ul class="dropdown">
<li ><a href="#Link" title="Link">Home</a>
<ul >
<li ><a href="#Link" title="Link">Link Â» </a>
<ul >
<li ><a href="#Link" title="Link">Link</a></li>
<li ><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li ><a href="#Link" title="Link">About</a></li>
<li ><a href="#Link" title="Link">Link Â» </a>
<ul >
<li ><a href="#Link" title="Link">Link</a></li>
<li ><a href="#link" title="Link">Link</a></li>
<li ><a href="#Link" title="Link">Link </a></li>
</ul>
</li>
</ul>
</li>
<li ><a href="#Link" title="Link">Category</a>
<ul >
<li ><a href="#Link" title="Link ">Link</a></li>
<li ><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li ><a href="#Link" title="Link">Portfolio</a>
<ul >
<li ><a href="#Link" title="Link">Link</a></li>
<li ><a href="#Link" title="Link">Link</a></li>
<li ><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li ><a href="#Link" title="Link">Work</a>
<ul >
<li ><a href="#Link" title="Link">Link</a></li>
<li ><a href="#Link" title="Link">Link</a></li>
<li ><a href="#Link" title="Link">Link</a></li>
<li ><a href="#Link" title=" Link"> Link</a></li>
</ul>
</li>
<li ><a href="#Link" title="Link">Playground</a>
<ul >
<li ><a href="#Link" title="Link">Link </a></li>
<li ><a href="#Link" title="Link">Link</a></li>
<li ><a href="#Link" title="Link">Link</a></li>
</ul>
</li>
<li ><a href="#Link" title="Link">Sitemap</a></li>
</ul>
</nav>
<form class="search_box" id="search_box" action="/search" method='get'>
<input name="q" placeholder="Search here" value="" type="text"/>
<input class="search_icon" value="Search" type="submit"/>
</form>
</div>

JavaScript
Disimpan di atas kode </body>

<script type='text/javascript'>
$("ul li:has(ul)").addClass("has-submenu");$("ul li ul").addClass("sub-menu");$("ul.dropdown li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});var $menu=$("#menu"),$menulink=$("#spinner-form"),$search=$("#search"),$search_box=$(".search_box"),$menuTrigger=$(".has-submenu > a");$menulink.click(function(e){$menulink.toggleClass("active");$menu.toggleClass("active");if($search.hasClass("active")){$(".menu.active").css("padding-top","50px")}});$search.click(function(e){e.preventDefault();$search_box.toggleClass("active")});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")});$("ul li:has(ul)");$(function(){var e=$(document).scrollTop();var t=$(".nav_wrapper").outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()>=50){$(".nav_wrapper").css("position","fixed")}else{$(".nav_wrapper").css("position","fixed")}if(n>t){$(".nav_wrapper").addClass("scroll")}else{$(".nav_wrapper").removeClass("scroll")}if(n>e){$(".nav_wrapper").removeClass("no-scroll")}else{$(".nav_wrapper").addClass("no-scroll")}e=$(document).scrollTop()})})
</script>

Sumber

See the Pen Best Responsive Menu with Show-Hide Search Box by CB Blogger (@cbblogger) on CodePen.

Desain Blog

Cara Membuat Sticky (Fixed) Sidebar - Tetap Muncul Saat Scroll ke Bawah

Cara Membuat Sticky (Fixed) Sidebar - Tetap Muncul Saat Scroll ke Bawah.

Cara Membuat Sticky (Fixed) Sidebar yang Tetap Muncul Saat halaman bllog di-Scroll ke Bawah ini CB share setelah update Template DetikStyle. Lihat Demonya, perhatikan sidebar kiri.

Kodenya diambil dari Blogger Origin. Berikut ini cara memasangngya.

Cara Membuat Sticky (Fixed) Sidebar

1. Klik Tema > klik Edit HTML
2. Pastikan di template blog Anda sudah ada link ke kode jQuery seperti ini. Jika belum ada, pasang di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

3. Copas kode sticky widget berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#PopularPosts1').length) {
var el = $('#PopularPosts1');
var stickyTop = $('#PopularPosts1').offset().top;
var stickyHeight = $('#PopularPosts1').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>

Catatan: pada tutorial ini, widget yang kita jadikan sticky adalah Popular Posts. Anda bisa menggantinya dengan widget lain, seperti Latest Posts atau Label Widget. Sesuaikan kodenya yang berwarna.

4. Agar tidak muncul di tampilan mobile (HP), tambahkan kode berikut ini di atas kode ]]></b:skin>

#PopularPosts1{width:100%;max-width:320px} @media only screen and (min-width:260px) and (max-width:989px){ #PopularPosts1{display: none!important;}}

5. Save! Simpan Template.

Demikian Cara Membuat Sticky (Fixed) Sidebar - Tetap Muncul Saat Scroll ke Bawah. Cara lainnya bisa dicek di laman W3Schools.

Good Luck & Happy Blogging! (www.contohblog.com).*